Tree-Shaking 作用和实现原理

一、什么是Tree-shaking

Tree-shaking 它的名字来源于通过摇晃（shake）JavaScript代码的抽象语法树（AST），是一种用于优化JavaScript代码的技术，主要用于移除未被使用的代码，使得最终生成的代码包含应用程序中实际使用的部分。这主要用于减小应用程序的体积，提高加载性能。

在前端开发中，特别是在使用模块化工具（如Webpack、Rollup等）构建应用程序时，通常会引入许多库和模块。然而，应用程序可能只使用了这些库的一小部分功能，导致最终生成的代码包含了大量未被使用的代码。Tree-shaking通过静态分析代码来确定哪些代码是可到达的并且被使用的，然后去除那些未被使用的部分。这样一来，可以显著减小最终部署的代码大小，提高应用程序的性能。

Tree Shaking 较早前由 Rich Harris 在 Rollup 中率先实现，Webpack 自 2.0 版本开始接入，已经成为一种应用广泛的性能优化手段。

上图形象的解释了Tree-shaking 的本意，本文所说的前端中的tree-shaking可以理解为通过具"摇"我们的JS文件，实际开发中，虽然依赖了某个模块，但其实只使用其中的某些功能。通过 tree-shaking，将没有使用的模块摇掉，这样来达到删除无用代码的目的。

在 Webpack 中，启动 Tree Shaking 功能必须同时满足三个条件：

  • 使用 ESM 规范编写模块代码
  • 配置 optimization.usedExports 为 true，启动标记功能
  • 启动代码优化功能，可以通过如下方式实现：
    • 配置 mode = production
    • 配置 optimization.minimize = true
    • 提供 optimization.minimizer 数组
// webpack.config.js
module.exports = {
  entry: "./src/index",
  mode: "production",
  devtool: false,
  optimization: {
    usedExports: true // 启用tree-shaking
  }
}

示例代码

// bar.js
const bar = 'bar'
const foo = 'foo'

export {
   bar,
   foo
}

// index.js
import { bar } from './bar'  // 引入bar.js
console.log(bar)

示例中bar.js 模块导出了 bar 、foo 但只有 bar 导出值被其它模块使用，经过 Tree Shaking 处理后，foo 变量会被视作无用代码删除。

Tree Shaking 只支持 ESM (ES6 Module)的引入方式，不支持 Common JS 的引入方式。

  • ESM：export + import
  • Common JS：module.exports + require
// 导入所有内容（不会触发 tree-shaking）
import lodash from 'lodash'
 
// 导入命名导出 (会触发 tree-shaking)
import { debounce } from 'lodash'

注意：如果想要做到 tree shaking，那么在引入模块时就应该避免全部引入。应该采用按需引入，才可以触发 tree shaking 机制。

二、实现原理

Tree Shaking在去除代码冗余的过程中，程序会从入口文件出发扫描所有的模块依赖，以及模块的子依赖，然后将它们链接起来形成一个“抽象语法树”(AST)。随后，运行所有代码，查看哪些代码是用到过的，做好标记。最后，再将“抽象语法树”中没有用到的代码“摇落”。经历这样一个过程后，就去除了没有用到的代码。

Webpack 中，Tree-shaking 的实现一是先「标记」出模块导出值中哪些没有被用过，二是使用 Terser 删掉这些没被用到的导出语句。标记过程大致可划分为三个步骤：

  • Make 阶段，收集模块导出变量并记录到模块依赖关系图 ModuleGraph 变量中
  • Seal 阶段，遍历 ModuleGraph 标记模块导出变量有没有被使用
  • 生成产物时，若变量没有被其它模块使用则删除对应的导出语句

标记功能需要配置 optimization.usedExports = true 开启

在ES Module中，我们可以将模块的加载分为两个阶段：静态分析和编译执行；

所谓静态分析，即在代码执行前就能对整体代码依赖调用关系等进行分析读取；

下面我们看下ES Module的特性：

  1. 只能作为模块顶层的语句出现（而不嵌套在条件语句中）
  2. import 的模块名只能是字符串常量（只对文件进行字符串读取）
  3. 导入和导出语句没有动态部分（不允许使用变量等）

三、sideEffects 副作用

webpack 2 正式版本内置支持 ES2015 模块（也叫做 harmony modules）和未使用模块检测能力。新的 webpack 4 正式版本扩展了此检测能力，通过 package.json 的 "sideEffects" 属性作为标记，向 compiler 提供提示，表明项目中的哪些文件是 "pure(纯正 ES2015 模块)"，由此可以安全地删除文件中未使用的部分。

Webpack 中有一个 sideEffects 配置，用于标识哪些模块是无副作用的，可以被 Tree-shaking 移除。如果你的模块包含副作用，但你明确知道这些副作用是无害的，可以通过配置 sideEffects 来告诉 Webpack 哪些模块可以被 Tree-shaking 移除。

// package.json
{
  "sideEffects": ["*.css", "*.scss"]
}

四、哪些框架可以使用Tree-shaking

  • Webpack

    Webpack 是一个强大的 JavaScript 模块打包工具，支持 Tree-shaking。在 Webpack 2 及以上版本中，配置 mode 为 'production'，Webpack 默认启用 Tree-shaking。同时确保你的项目使用了 ES6 模块系统，以便 Webpack 能够更好地进行静态分析。

  • Rollup

    Rollup 是专注于 ES6 模块的打包工具，天生支持 Tree-shaking。Rollup 的设计目标之一就是生成更小、更高效的代码，因此它是一个非常适合 Tree-shaking 的选择。

  • Parcel

    Parcel 是一个零配置的打包工具，它通过自动检测和处理模块间的依赖关系，实现了快速且有效的 Tree-shaking。Parcel 可以用于快速搭建项目，而无需复杂的配置。

  • Snowpack

    Snowpack 是一个现代的构建工具，专注于提供快速的开发体验。它支持 ES6 模块和 Tree-shaking，并在开发环境中实现了即时开发（Instant Development）的特性。

  • Vite

    Vite 是一个基于 Vue.js 的新型构建工具，它利用原生 ES 模块导入的特性，支持 Tree-shaking，并在开发环境中实现了快速的冷启动。

  • ESBuild

    ESBuild 是一个极快的 JavaScript 构建工具，它具有强大的 Tree-shaking 功能。ESBuild 以速度为特点，能够在短时间内完成快速的构建。