Webpack知识点一（Tree Shaking）

Tree Shaking

Tree Shaking 可以用来剔除 JavaScript 中用不上的死代码。它依赖静态的 ES6 模块化语法，例如通过 import 和 export导入导出。 Tree Shaking 最先在 Rollup 中出现，Webpack 在 2.0 版本中将其引入。

为了更直观的理解它，来看一个具体的例子。假如有一个文件 util.js` 里存放了很多工具函数和常量，在 main.js 中会导入和使用 util.js，代码如下：

util.js源码：

export function funcA() {
}

export function funB() {
}

export const a = 'a';

main.js 源码：

import {funcA} from './util.js';
funcA();

Tree Shaking 后的 util.js：

export function funcA() {
}

由于只用到了 util.js 中的 funcA，所以剩下的都被 Tree Shaking 当作死代码给剔除了。

需要注意的是要让 Tree Shaking 正常工作的前提是交给 Webpack 的 JavaScript 代码必须是采用 ES6 模块化语法的， 因为 ES6 模块化语法是静态的（导入导出语句中的路径必须是静态的字符串，而且不能放入其它代码块中），这让 Webpack 可以简单的分析出哪些 export 的被 import 过了。 如果你采用 ES5 中的模块化，例如 module.export={…}、require(x+y)、if(x){require(’./util’)}，Webpack 无法分析出哪些代码可以剔除。

目前的 Tree Shaking 还有些的局限性，经实验发现：

1. 不会对entry入口文件做 Tree Shaking。
2. 不会对异步分割出去的代码做 Tree Shaking。