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