tl;dr
if you just want to cut to the chase, the final product can be seen, cloned and forked right here on GitHub:
https://github.com/LukasBomb...
For further actions, you may consider blocking this person and/or reporting abuse
Thanks for the post, Lukas.
Wouldn't ESM have the same problem because of dynamic import()?
I am not sure if tree-shaking doesn't work if dynamic import is used.
My original source for this is this
exploringjs.com/es6/ch_modules.htm...
which is linked here
webpack.js.org/guides/tree-shaking/
If I try to understand it, I would guess that there is a difference when you do a static import like this
import x from "y";
and when you do a dynamic import like this
import(something)
This might seem like nothing, but I guess that when you do static code analysis and all you have is a string, you can see 100% by the syntax if it is a static import or a dynamic one. And the static one can be tree-shaken and I guess the dynamic one can't.
That's my guess at least.
You are right.
I dug around a bit, and the Webpack author commented that with dynamic import, tree shaking is now performed.
github.com/webpack/webpack.js.org/...
Hai Lukas,
Thank you for writeup,
i was using cra-bundle-analyser NPM package and trying to analyse build file, look like their is no tree shaking, it is generating one file index.cjs.js and importing it, size of the imported file is same despite of one component import or N, it is importing complete file,
can you please tell me how did you verify tree-shaking
I have been trying to build a react component library that exports ESM. I tried your config and it does work when I run the next app in dev mode
next dev
, but when I try to build it in production modenext build
, it fails. It gives me the Invalid hook call error (even if I don't use hooks in the library).Any idea what's happening?
Question.
Is it important to export each component as default
We use named exports
ie.
export const Address
And globals
export * from './address/address'
Also we use babel directly instead of rollup
"build": "npm run clean && BABEL_ENV=esm babel components --out-dir esm --source-maps false"
However when we consume the library it does not do the tree shaking
Thank you for this post.
I am struggling with the following problem: One of my components (e.g. Link from ui-library) uses moment as external dependency. As a result, my app contains the whole moment.js even if the app does not use the corresponding component at all.
Do you know how I could solve this?
Thanks for your support.
Hey Linus, I think what you need is the
external
setting of Rollup.rollupjs.org/guide/en/#core-functi...
Thanks for the great write up! I've followed your suggestions but i'm seeing my app build size is the same no matter how many components I import from my ui lib.
Any ideas what could be missing?
Thanks
This is not tree shaking, you will need to preserveModules and set output.dir within rollup to achieve true treeshaking
@michaelbayday can you expand on this please? I've followed this guide and indeed my library isn't being tree shaken.. Thanks!
Thanks for the post, Lukas!
Isn't listing 'sideEffects: false' mandatory in package.json of ui-library. I think you are using webpack 4
WTH Lukas, this article was just recommended to me by a colleague, small world haha. Danke schön.
Honestly, this is just my way of reaching out to you! Glad it finally worked!
@lukasbombach
can we bundle pages using rollup?