Friday, 25 October 2019

Rollup + HoCs treeshaking

I'm trying to create a component library using typeescript and rollup.

I have a component, Canary.

function Canary() {
    ...
}

export default React.memo(Canary)

I have another component, SomeComponent

function SomeComponent() {
    ...
}

export default SomeComponent

If I were to build my library with just SomeComponent exported,

src/index.ts

export { default as SomeComponent } from './SomeComponent'

The library is tree-shakeable. However, if I add component which is wrapped in an HoC, treeshaking fails. Regardless of how I import SomeComponent from my library, Canary gets pulled along with it and ends up in the bundle.

I'm using a variant of this to detect if something it treeshakeable or not, modified for rollup.

I've found this, which talks about how you can hint tools like webpack. I've setup a test project using NextJS (webpack used internally), and added sideEffects: false to my library's package.json to no avail - However, I don't think that it's my code that's breaking tree-shaking, I think it's the React.memo HoC. It needs to be marked pure in the distributable.

i.e. manually editing the output line

var index = React.memo(Canary);

export { index as Canary }

to

var index = /*#__PURE__*/memo(Canary);

and re-running the treeshaking test passes.

Question What's the proper way to signal to Rollup that you'd like to mark something pure? Am I even going at this in the right way?



from Rollup + HoCs treeshaking

No comments:

Post a Comment