js tree shaking

Question

弱弱问下，我们经常讲的js tree shaking使用terser-webpack-plugin或uglifyjs，其中真正实现这一功能的配置项对应的应该是compress里的'dead_code'和'unused'吧？

Answer 1

也不完全是。

tree shaking 之所以叫这个名字，就是因为和 DCE（dead code elimination）有很大不同。

一些打包工具早就实现了 dead_code 和 unused，这是静态语言常用的一种方式。

tree shaking 这个名字好像是“把树上无用的叶子摇下来”，但是根据 rollup 作者的说法来看，Tree-shaking 并不是把无用的代码消除，他提到一个 Live code inclusion 的概念，是找到需要的代码，灌入最终的结果。

rollup 之所以能做 tree shaking 得益于 esm 的静态依赖。webpack 的最初做法确实依赖于 uglifyjs 的压缩优化功能，首先打包所有的代码，然后交给 uglifyjs 进行优化。

但是在打包时我们会使用各种 loader，比如最常用的 babel-loader，而这些 loader 通常会在最终代码中加入很大原本不存在的代码，使得 DCE 无法进行。

当你问 js tree shaking 时，本站也推荐了相似的问题：

归根结底就是 webpack 2.x 还是不够给力。

而 terser-webpack-plugin 则是先分析模块间的依赖，将模块的关系进行标识或者移除，最终在教给压缩工具处理。