Tree-Shaking
webpack 项目中，有一个入口文件，相当于一棵树的主干，入口文件有很多依赖的模块，相当于树枝。实际情况中，虽然依赖了某个模块，但其实只使用其中的某些功能。通过 tree-shaking，将没有使用的模块摇掉，这样来达到删除无用代码的目的
- 打包阶段可使用tree-shaking的打包工具有
- rollup
- webpack webpack4不使用uglifyjs-webpack-plugin来压缩代码，转而使用terser-webpack-plugin
- closure compiler
rollup（会消除无用的代码但不会消除不会执行的代码） webpack都不会
rollup和webpack都需要uglify 来完成javascript的DCE（dead code elimination）
📌 tree-shaking的消除原理是依赖于ES6的模块特性，ES6模块依赖关系是确定的，和运行时的状态无关，可以进行可靠的静态分析，这就是tree-shaking的基础。
📌 Tree Shaking 的过程是这样的，首先分析 import 和 export 的关系，判断哪些代码是无效的代码，在无效代码上做标记，然后删除这些代码，TerserPlugin 就是负责真正去除冗余代码并进行代码压缩的。 （Tree Shaking负责对这些无效代码打上标记，TerserPlugin 压缩工具删除代码）
参考文章
若有收获，就点个赞吧
0 人点赞
