javascript - Rollup + HoCs treeshaking
Pokušavam stvoriti biblioteku komponenti koristeći typescript i rollup.
Imam komponentu, Canary.
function Canary() {
...
}
export default React.memo(Canary)
Primijetite kako je Canary umotana u HoC (React.memo).
Imam još jednu komponentu, SomeComponent
function SomeComponent() {
...
}
export default SomeComponent
Kad bih gradio svoju biblioteku koristeći samo SomeComponent za izvoz,
src/index.tsexport { default as SomeComponent } from './SomeComponent'
Biblioteka se može treeshakirati. Međutim, ako dodam komponentu koja je omotana u HoC, treeshaking ne uspijeva. Bez obzira kako importiram SomeComponent iz moje biblioteke, Canary se povlači zajedno s njom i završava u bundlu.
Koristim varijantu ovog za otkrivanje je li nešto moguće treeshakeati ili ne, modificiranu za Rollup.
Pronašao sam ovo, što govori o tome kako možete nagovijestiti alatima poput webpacka. Postavio sam testni projekt koristeći NextJS (webpack se koristi interno) i dodao sideEffects: false u package.json svoje biblioteke, ali bez uspjeha - Međutim, ne mislim da je moj kod taj koji prekida tree-shaking, mislim da je to React.memo HoC. Potrebno ga je označiti kao pure u distributivnoj verziji.
tj. ručno uređivanje izlazne linije
var index = React.memo(Canary);
export { index as Canary }
to
var index = /*#__PURE__*/memo(Canary);i ponovno pokretanje testa treeshakinga prolazi.
Pitanje Koji je ispravan način da Rollupu signalizirate da želite označiti nešto kao čisto? Jesu li moj pristup uopće ispravan?