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

来源：博文视点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一共分两个步骤：

1）标注未使用的代码。

2）对未使用的代码进行删除。

我们修改配置文件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入门与实例详解》一书，欢迎阅读此书了解更多相关内容！

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

姜瑞涛 著

• 适用于Webpackv5.0.0和Babelv7.0.0之后的版本
• 是针对零基础前端开发者的Webpack与Babel图书
• 
  

这是一本针对零基础前端开发者讲解Webpack与Babel使用方法的图书。随着前端工程的不断发展，Webpack与Babel已成为前端开发的两大核心工具。目前，Webpack是前端开发的主流构建工具，Babel是转译ES6代码的通用解决方案。

本书由两大部分构成，第一部分介绍Webpack，第二部分介绍Babel。Webpack部分讲解了Webpack的安装、资源入口与出口、预处理器与插件的配置、开发环境与生产环境的配置、性能优化及构建原理等。Babel部分讲解了Babel入门知识、Babel的配置文件、预设与插件的选择、babel-polyfill的使用方法，以及@babel/preset-env和@babel/plugin-transform-runtime这两个核心配置项的使用方法，这一部分还会讲解Babel的原理及Babel插件的开发。最后，在附录中介绍了Module Federation与微前端，以及Babel 8前瞻等内容。

发布人：邱烨

审核人：袁玺