4.9.1 接入 Tree Shaking

4.9.1 接入 Tree Shaking
问题一：接入 Tree Shaking？

首先，为了把采用 ES6 模块化的代码交给 Webpack，需要配置 Babel 让其保留 ES6 模块化语句，修改.babelrc文件为如下：

{
"presets": [
[
"env",
{
"modules": false
}
]
]
}

其中"modules": false的含义是关闭 Babel 的模块转换功能，保留原本的 ES6 模块化语法。

配置好 Babel 后，重新运行 Webpack，在启动 Webpack 时带上--display-used-exports参数，以方便追踪 Tree Shaking 的工作， 这时你会发现在控制台中输出了如下的日志：

webpack --display-used-exports
bundle.js 3.5 kB 0 [emitted] main
[0] ./main.js 41 bytes {0} [built]
[1] ./util.js 511 bytes {0} [built]
[only some exports used: funcA]

其中[only some exports used: funcA]提示了util.js只导出了用到的funcA，说明 Webpack 确实正确的分析出了如何剔除死代码。

但当你打开 Webpack 输出的bundle.js文件看下时，你会发现用不上的代码还在里面，如下：

/* harmony export (immutable) */
webpack_exports["a"] = funcA;

/* unused harmony export funB */

function funcA() {
console.log('funcA');
}

function funB() {
console.log('funcB');
}

Webpack 只是指出了哪些函数用上了哪些没用上，要剔除用不上的代码还得经过 UglifyJS 去处理一遍。 要接入 UglifyJS 也很简单，不仅可以通过 UglifyJSPlugin 去实现， 也可以简单的通过在启动 Webpack 时带上--optimize-minimize参数，为了快速验证 Tree Shaking 我们采用较简单的后者来实验下。

通过webpack --display-used-exports --optimize-minimize重启 Webpack 后，打开新输出的bundle.js，内容如下：

function r() {
console.log("funcA")
}

t.a = r

可以看出 Tree Shaking 确实做到了，用不上的代码都被剔除了。