关于javascript:webpack中treeshaking原理

我在应用 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…