共计 766 个字符，预计需要花费 2 分钟才能阅读完成。
我在应用 webpack 过程中，很屡次用到一个性能就是 tree-shaking(树摇)，这是一个非常形象的名字，这个性能实现 webpack 在打包过程中将没有应用的模块或者没有运行的代码干掉。
1、模块引入计划
在开始介绍 tree-shaking 的实现原理之前，咱们先看下几种支流的模块引入计划：
- AMD 计划
- CMD
- commonjs
- es6Module
次要看下前面两个：
- commonjs：
- es6module
对于 es6Module 和 commonjs 次要区别在于
- 1、ES6 Module 输入的是值的援用，而 CommonJS 输入的是值的拷贝
- 2、ES6 Module 是编译时执行，而 CommonJS 模块是在运行时加载
- 3、CommonJs 是单个值导出，ES6 Module 能够导出多个
- 4、CommonJs 是动静语法能够写在判断里，ES6 Module 动态语法只能写在顶层
ES6Module 最大的特点就是动态化，在编译时就能确定模块的依赖关系，以及输出和输入的值，这象征意味着模块的依赖关系是确定的，和运行时的状态无关，能够进行牢靠的动态剖析，正是基于这个根底，才使得 Tree-Shaking 成为可能
即：tree-shaking 依赖 ES6module 的动态剖析
2、tree-shaking 的性能
tree-shaking 的性能次要是有两点：
- 按需加载，即没有被援用的模块不会被打包进来；
- 把加载后未应用的模块干掉
- 把加载结束的模块中的未应用的代码干掉
tree-shaking 实现原理：
- Tree-shaking = ES6odule（非 default）+ UglifyJS
- 其中，es6module 通过对模块进行动态剖析，找到未引入模块和引入但未应用模块；UglifyJS 实现对引入模块中未应用的代码进行干掉
参考：https://www.ruanyifeng.com/bl…
正文完