来，教你一个前端代码优化的新方法，好使！

👆点击“博文视点Broadview”，获取更多书讯

摇树优化Tree Shaking是Webpack里非常重要的优化措施，它的优化效果在Webpack 5中又得到了进一步的提升。

Tree Shaking可以帮我们检测模块中没有使用到的代码块，并在Webpack打包时将没有用到的代码块移除掉，减小打包后的资源体积大小。

它的名字也非常形象，通过摇晃树把树上干枯无用的叶子摇掉。

01

使用Tree Shaking的原因

我们来看一个例子。

b.js文件的内容如下：

var name = 'Jack';var year = 2022;export {name, year};

a.js文件的内容如下：

import {name} from './b.js';console.log(name);

webpack.config.js文件的内容如下：

var path = require('path');

module.exports = {  entry: './a.js',   output: {    path: path.resolve(__dirname, ''),    filename: 'bundle.js'  },  mode: 'none'};

执行npx webpack命令进行打包，打包完成后我们观察生成的bundle.js文件，如图1所示。

图1  生成的bundle.js文件

我们发现，变量year的值2022被打包到了最终代码里，但其实我们的代码a.js和b.js里并没有真正使用到该变量。这时就需要使用Tree Shaking，来移除这部分代码。

02

使用Tree Shaking

使用Tree Shaking一共分两个步骤：

我们修改配置文件webpack.config.js。

webpack.config.js文件的内容如下：

var path = require('path');

module.exports = {  entry: './a.js',   output: {    path: path.resolve(__dirname, ''),    filename: 'bundle.js'  },  optimization: {    usedExports: true,  },  mode: 'none'};

重新执行npx webpack命令进行打包并观察打包生成的资源，可以看到对未使用到的变量year进行了标注，即在第11行中有注释“unused harmony export year”，如图2所示。

图2  对未使用到的变量进行标注

进行标注后，若需要对未使用的代码进行删除，使用Webpack 5自带的TerserPlugin即可完成该操作。

接下来，我们使用TerserPlugin。

webpack.config.js文件的内容如下：

var path = require('path');var TerserPlugin = require("terser-Webpack-plugin");

module.exports = {  entry: './a.js',   output: {    path: path.resolve(__dirname, ''),    filename: 'bundle.js'  },  optimization: {    usedExports: true,    minimize: true,    minimizer: [new TerserPlugin()],  },  mode: 'none'};

执行npx webpack命令进行打包并观察打包结果，bundle.js文件里的代码被压缩成一行，我们分别搜索代码里的year和2022，已经无法找到，说明它们在被Tree Shaking标注后被删除了。

03

生产环境的优化配置

通常，我们在本地开发环境中不会使用Tree Shaking，因为它会降低构建速度并且没有太大意义。

我们需要在生产环境打包时开启Tree Shaking，生产环境下我们只需要配置参数项mode为production，即可自动开启Tree Shaking。

开启了Tree Shaking后，Webpack会在打包时删除大部分没有使用到的代码，但有一些代码没有被其他模块导入使用，如polyfill.js，它主要用来扩展全局变量，这类代码是有作用的代码，我们需要告诉Webpack在Tree Shaking时不能删除它们。

要告诉Webpack在Tree Shaking时不能删除某些文件，可以在package.json文件里使用sideEffects配置，示例代码如下：

{    "sideEffects": [        "./polyfill.js"    ]}

04

Webpack 5中对Tree Shaking的改进

在Webpack 4及之前的版本中，Tree Shaking对嵌套的导出模块未使用代码无法很好地进行Tree Shaking，往往需要借助webpack-deep-scope-plugin这一类的插件进行深层次的Tree Shaking。Webpack 5对此做出了改进，能够对嵌套属性进行Tree Shaking。

我们先观察一个使用Webpack 4打包的例子。

a.js文件的内容如下：

import * as person from './b.js';export {person};

b.js文件的内容如下：

var name = 'Jack';var year = 2022;export {name, year};

index.js文件的内容如下：

import * as moduleA from './a.js';console.log(moduleA.person.name);

webpack.config.js文件的内容如下：

var path = require('path');

module.exports = {  entry: './index.js',   output: {    path: path.resolve(__dirname, ''),    filename: 'bundle.js'  },  mode: 'production'};

我们使用Webpack 4进行打包，安装Webpack 4的命令如下：

npm install --save-dev Webpack@4.43.0  Webpack-cli@3.3.12    

现在执行npx webpack命令打包，因为b.js文件里的变量year最终没有使用到，按道理打包后其通过Tree Shaking会被删除，但我们观察打包后的资源文件bundle.js，如图3所示，发现Webpack 4打包后的代码里仍然有year和2022，这就是Webpack 4里Tree Shaking不足的地方。

图3  Webpack 4打包后的文件

现在换成用Webpack 5打包。

打包后生成的bundle.js代码如图4所示，我们发现未使用的year和2022顺利被删除了，另外也可以看到Webpack 5打包后的文件非常简洁。

图4  Webpack 5打包后的文件

综上，就是在代码优化方面Webpack5带来的Tree Shaking使用上的新体验。

▊《Webpack+Babel入门与实例详解》

姜瑞涛 著