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.ts
export { 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?