(Large bundle size) Tree shaking is currently not possible on @tonic-ui/react

[ZachLegros]

The current esm build cannot be tree shaken by bundlers such as webpack and rollup. Here is why:

Side effect optimization not enabled with sideEffects flag in package.json

sideEffects: skip over modules that do not have any used exports and that are side effects free

The library marks code as having side effects by default.

The sideEffects flag is especially important for libraries that export their API through an index file that itself exports functions or variables from internal files. Without the side effects optimization, our bundlers would have to parse all the files where our exported variables are defined.

We would need to mark this library as "side effect free" in order to enable side effect optimization by bundlers.

Bundle in a single file

The esm library is bundled in a single file. From a tree shaking perspective, this creates one problem: The side effects optimization is non existent as no modules can be skipped. We can preserve the library's module tree and split the code in small modules to fully benefit from the sideEffects optimization. For example, with Rollup, we can use preserveModules: true in the output config to achieve this.

Here is a good article showing how to build tree shakeable libraries: https://blog.theodo.com/2021/04/library-tree-shaking/

[cheton]

Further reading: https://mui.com/material-ui/guides/minimizing-bundle-size

[ZachLegros]

Further reading: https://mui.com/material-ui/guides/minimizing-bundle-size

Interesting. I will look into how MUI achieved this and perhaps they have a better solution.

[ZachLegros]

It looks like MUI is also using side effects optimization: https://github.com/mui/material-ui/blob/master/packages/mui-material/package.json#L106

[ZachLegros]

I also noticed that MUI is using UMD modules instead of splitting the build for cjs and esm. There are many other interesting build settings in the rollup config that I want to investigate. See: https://github.com/mui/material-ui/blob/master/packages/mui-material/scripts/rollup.config.mjs