Webpack的Tree-Shaking

一江东流水
394 阅读7分钟

Tree-Shaking 是一个前端术语，本意为摇树的意思，通常用于描述移除 JS 中没用的代码，这样可以有效地缩减打包体积。关于 Tree-Shaking，Webpack 官方文档有一段很形象的描述：

你可以将应用程序想象成一棵树。绿色表示实际用到的源码，是树上活的树叶。灰色表示无用的代码，是秋天树上枯萎的树叶。为了除去死去的树叶，你必须摇动这棵树，使它们落下。

5d0c3ee100018fa304120232.jpeg

Tree-Shaking 实现原理

Tree-Shaking 的本质是消除无用的 JS 代码。无用代码消除（Dead Code Elimination）广泛存在于传统的编程语言编译器中，编译器可以判断出某些代码根本不影响输出，然后消除这些代码，这个称之为 DCE（Dead Code Elimination）。

Javascript 同传统的编程语言不同的是，JavaScript 绝大多数情况是在浏览器中执行，需要通过网络进行加载，然后解析 JavaScript 文件再执行。2018 年，据 HTTP Archive 统计：移动端 JavaScript 文件的平均传输大小将近 350KB。你要知道，这仅仅是传输的大小。在网络传输的时候，JavaScript 往往是经过压缩的。也就是说，在浏览器解压缩之前，实际的大小会远远大于这个值。而这一点相当重要。一个 300KB 的文件解压缩会达到 900KB，并且在分析和编译的时候，体积依然是 900KB。

image.png

由于网络的带宽限制，加载的 JavaScript 文件体积越小，整体解析执行时间更短，所以去除无用代码以减少文件体积，对 JavaScript 来说更有意义。

我们知道，Webpack 是基于 ES6 Modules 静态语法解析的构建工具，Tree-Shaking 之所以能够在 Webpack 实现，也是得益于 ES6 Modules 静态解析的特性。ES6 的模块声明保证了依赖关系是提前确定的，使得静态分析成为可能，这样在 Webpack 中代码不需要执行就可以知道是否被使用，自然就知道哪些是无用的代码了。

所谓静态分析就是不执行代码，从字面量上对代码进行分析，ES6 之前的模块化，比如我们可以动态 require 一个模块，只有执行后才知道引用的什么模块，这个就不能通过静态分析去做优化。这是 ES6 Modules 在设计时的一个重要考量，也是为什么没有直接采用 CommonJS，正是基于这个基础上，才使得 Tree-Shaking 成为可能，这也是为什么 rollup.js 和 Webpack 都要用 ES6 Module 语法才能实现 Tree-Shaking。

Webpack Tree-Shaking 代码实战

在 Webpack 中，Tree-Shaking 是需要配合mode=production来使用的，这是因为 Webpack 的 Tree-Shaking 实际分了两步来实现：

  1. Webpack 自己来分析 ES6 Modules 的引入和使用情况，去除不使用的import引入；
  2. 借助工具（如 uglifyjs-webpack-plugin和terser-webpack-plugin）进行删除，这些工具只在mode=production中会被使用。

我们通过实例来看下这两个步骤，首先我们准备了两个文件：utils.js和index.js文件，其中utils.js中定义了两个方法isNull和isNumber：

// utils.js
export function isNull(obj) {
    console.log('isNull');
    return null === obj;
}

export function isNumber(obj) {
    console.log('isNumber');
    return typeof obj === 'number';
}

但是在index.js中import了utils的两个函数方法，但是实际却只用了isNull的方法：

// index.js
import {isNull, isNumber} from './utils';
isNull(1);

下面我们使用mode=development打包看下结果：

{
'./src/index.js': function(module, __webpack_exports__, __webpack_require__) {
    ....
    Object(_utils__WEBPACK_IMPORTED_MODULE_0__['isNull'])(1);

},
'./src/utils.js': function(module, __webpack_exports__, __webpack_require__) {
    ...
    function isNull(obj) {
        console.log('isNull');
        return null === obj;
    }
    function isNumber(obj) {
        console.log('isNumber');

        return typeof obj === 'number';
    }
}

我们发现index.js的打包结果中，只保留了isNull的使用，而虽然我们同时import了isNumber和isNull，但最终isNumber并没有出现在index.js的打包结果内。

但是utils.js打包后的内容没有变化，保留了isNumber的方法。

这说明，Webpack 的 Tree-Shaking 第一步只不过是去掉了无用的引用，但是并没有删除无用的代码，删除无用的代码是mode=production时候使用压缩工具实现的。

在使用webpack --mode=production打包后，可以看到isNumber部分的关键字没有了，这里就不贴代码了。

Tree-Shaking 并不是万能的

通过上面的实验，可能大家认为 Tree-Shaking 已经很了不起了，可以帮助我们缩减代码，但是很多情况下 Tree-Shaking 并不是万能的！首先基于 Tree-Shaking 的原理，所以我们的代码必须遵循 ES6 的模块规范，即使用 import 和 export语法，如果是 CommonJS 规范（使用require）则无法使用 Tree-Shaking 功能。除了这点之外，在使用 Tree-Shaking 还有什么注意点或者 Tree-Shaking 处理不到的地方呢？

Tree-Shaking 无法处理对象

export default {
    foo() {
        console.log('foo');
    }
    bar() {
        console.log('bar');
    }
}

然后我们在entry.js中引入，并且只使用foo的方法：

mport Utils from './utils';
const u = new Utils();
console.log(u.foo());

我们希望 Tree-Shaking 能够帮我们把不使用的bar方法干掉，但是实际 Tree-Shaking 做不了这样的事情。

这表明 webpack Tree-Shaking 只处理顶层内容，例如类和对象内部都不会再被分别处理，这主要也是由于 JavaScript 的动态语言特性所致，例如下面的代码：

import Utils from './utils';
const u = new Utils();
console.log(u[Math.random() > 0.5 ? 'foo' : 'bar']());

JavaScript 的编译器并不能识别一个方法名字究竟是以直接调用的形式出现（u.foo()）还是以字符串的形式（u['foo']()）或者其他更加离奇的方式。因此误删方法只会导致运行出错，反而得不偿失。

也就是通过 export default {} 导出的对象是无法进行 tree-shaking的。

Tree-Shaking 无法处理副作用（Side Effect）代码

我们称模块（函数）具有副作用，就是说这个模块是不纯的，这里可以引入纯函数的概念：

对于相同的输入就有相同的输出，不依赖外部环境，也不改变外部环境。

符合上面描述的函数就可以称为纯函数，不符合就是不纯的，不纯就具有副作用的，是可能对外界造成影响的。我们通过代码示例来理解下：

// 函数内调用外部方法
import {isNumber} from 'lodash-es';
export function foo(obj) {
    return isNumber(obj);
}
// 直接使用全局对象
function goto(url) {
    location.href = url;
}
// 直接修改原型
Array.prototype.hello = () => 'hello';

副作用（Side Effect）代码:

  • 函数内调用外部方法
  • 直接使用全局对象
  • 直接修改原型

上面几种方式的代码都是有副作用的代码，这样的代码在 Webpack 中因为并不知道代码内部究竟做了什么事情，所以不会被 Tree-Shaking 删除。那么怎么解决副作用呢？有两种方式：

  1. 代码中消除副作用；
  2. 配置sideEffects告诉 webpack 模块是安全的，不会带有副作用，可以放心优化。

代码中消除副作用

例如我们按照纯函数的定义，可以将需要用到的方法通过参数的方式传入：

// 函数内调用外部方法
export function foo(isNumber, obj) {
    return isNumber(obj);
}
// 直接使用全局对象
function goto(location, url) {
    location.href = url;
}

配置sideEffects Webpack 的项目中，可以在package.json中使用sideEffects来告诉 webpack 哪些文件中的代码具有副作用，从而对没有副作用的文件代码可以放心的使用 Tree-Shaking 进行优化。

// package.json
{
    "sideEffects": ["./src/utils.js"]
}

如果自己的项目是个类库或者工具库，需要发布给其他项目使用，并且项目是使用 ES6 Modules 编写的，没有副作用，那么可以在该项目 package.json 设置 sideEffects:false 来告诉使用该项目的 webpack 可以放心的对该项目进行 Tree-Shaking，而不必考虑副作用。具体可以参考这一篇文章Webpack 中的 sideEffects 到底该怎么用

总结

Tree-Shaking 对前端项目来说可谓意义重大，是一个极致优化的理想世界，是前端进化的又一个终极理想。但是理想是美好的，现实是骨感的，真正发挥 Tree-Shaking 的强大作用，还需要我们在日常的代码中保持良好的开发习惯：

  1. 要使用 Tree-Shaking 必然要保证引用的模块都是 ES6 规范的，很多工具库或者类库都提供了 ES6 语法的库，例如 lodash 的 ES6 版本是lodash-es；
  2. 按需引入模块，避免一把梭，例如我们要使用 lodash 的isNumber，可以使用import isNumber from 'lodash-es/isNumber';，而不是import _ from 'lodash-es'；
  3. 减少代码中的副作用代码。
avatar
文章
阅读
粉丝