DEV Community

How to write a tree-shakable component library

Lukas Bombach on February 06, 2020

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...

Read full post

Sung M. Kim • Feb 6 '20

Thanks for the post, Lukas.

If I am not mistaken, this is because the ESM syntax allows bundlers to statically check which parts of your code are used and which are not, which is harder with require because it can be used in more dynamic ways,...

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.

Lukas Bombach • Feb 6 '20

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.

Sung M. Kim • Feb 7 '20

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/...

masood hussain • Jun 1 '20

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

Ian Warner • Mar 24 '21

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"

esm: {
  presets: [
    [
      '@babel/preset-env',
      {
        modules: false
      }
    ]
  ],
  plugins: [
    [
      '@babel/plugin-transform-runtime',
      {
        useESModules: true
      }
    ]
  ],
  ignore: ['**/__tests__', '**/__mocks__', '**/Storyshots.test.js']
}

However when we consume the library it does not do the tree shaking

Shreya Dahal • Jul 16 '21

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 mode next 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?

Uri Klar • Feb 4 '22

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

Linus Hüsler • Feb 25 '20

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.

Lukas Bombach • Feb 28 '20 • Edited

Hey Linus, I think what you need is the external setting of Rollup.

rollupjs.org/guide/en/#core-functi...

// rollup.config.js
export default {
  entry: 'src/index.js',
  dest: 'bundle.js',
  format: 'cjs',
  external: [ 'moment' ] // <-- add moment to your "external" modules
};