tree-shaking总结

1、有副作用的模块不能被tree-shaking
tree-shaking只是建立在某个es module的某一些export有没有被用到的基础上的，但是有一些代码会有副作用，比如在window上挂一个变量、写本地文件等，这种代码虽然没有export一些内容，但也是不能被tree-shaking掉的。对于这些文件需要过滤掉，配置的方式就是在package.json中添加sideEffects字段，因为webpack的模块包括图片、字体文件、css文件等，这些模块都是需要配置的。

2、tree-shaking只能做到export级别
如果一些模块导出了一个对象，用到这个模块的地方只使用了某几个方法，其余的方式是不能被tree-shaking的。原因也是因为编译期间的静态分析只能对es module的相关语法做分析，是不会真正去执行代码的。
所以为了更好的配合tree-shaking，能够写成分散的export的就不要封装成对象，这样能够配置tree-shaking打包成最小的bundle。

3、组件库打包时已经tree-shaking可能会重复打包，最好用rollup打包esm

4、只要你用到的库是 esm 而且 sideEffects: false ，tree shaking 就会正常工作。参考 material-ui ，代码结构就是这个文章所说的那种格式，不需要任何配置就支持 tree shaking 。那种 babel 转换插件是 webpack 支持 tree shaking 之前存在的优化技巧，现在完全不需要这样的东西。只有没有提供 esm 的库不支持 tree shaking ，比如 lodash ，三种处理方案：手动 import 相应函数比如 'lodash/map'，或者使用 babel-plugin-lodash ，更好的方法是使用 webpack alias 替换成 lodash-es 等支持 esm 的库。