前端工程化-tree-shaking

Posted 2021-06-29 natsu-cc

前言：

---

Tree shaking 是一个通常用于描述移除 javascript 上下文中的未引用代码(dead-code) 行为的术语。

它依赖于ES2015中的 import 和 export 语句，用来检测代码模块是否被导出、导入，且被 JavaScript 文件使用。

具体来说，在 webpack 项目中，有一个入口文件，相当于一棵树的主干，入口文件有很多依赖的模块，相当于树枝。实际情况中，虽然依赖了某个模块，但其实只使用其中的某些功能。通过 tree-shaking，将没有使用的模块摇掉，这样来达到删除无用代码的目的。

Tree-shaking 较早由 Rich_Harris 的 rollup 实现，后来，webpack2 也增加了tree-shaking 的功能。其实在更早，google closure compiler 也做过类似的事情。

tree-shaking的原理：

---

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

Tree-shaking 是 DCE 的一种新的实现，Javascript 同传统的编程语言不同的是，javascript 绝大多数情况需要通过网络进行加载，然后执行，加载的文件大小越小，整体执行时间更短，所以去除无用代码以减少文件体积，对 javascript 来说更有意义。Tree-shaking 和传统的 DCE的方法又不太一样，传统的DCE 消灭不可能执行的代码，而Tree-shaking 更关注于消除没有用到的代码。

DCE（Dead Code Elimination）：

Dead Code 一般具有以下几个特征：

• 代码不会被执行，不可到达；
• 代码执行的结果不会被用到；
• 代码只会影响死变量（只写不读）；

上面提到的javascript 模块打包工具rollup，webpack，closure compiler ，不是它们进行Dead Code的消除，而是代码压缩优化工具uglify完成的。

Tree-shaking主要依赖于ES6的模块化import和export，我们都知道ES6的module只能是顶层出现，和运行时无关，不能运行时加载，Tree-shaking主要就是依靠这个基础进行静态分析，不执行代码就从字面量对代码进行分析。如果是require，需要执行后才知道有没有引用，就无法进行Tree-shaking。

Tree-shaking消除大法：

Tree-shaking关注于无用模块的消除，消除那些引用了但没有被使用的模块。那么为啥这么强大的工具为啥最近几年才开始流行，进入人们的眼球。这根本原因是Tree-shaking的消除原理是依赖于ES6的模块特性。

ES6 module 特点：

• 只能作为模块顶层的语句出现；
• import 的模块名只能是字符串常量；
• import binding 是 immutable的；

虽然前端模块化这个概念已经流行了很久，但是无论是之前的CommonJs，AMD，CMD都好，它们都是执行阶段才能确保模块之间的依赖关系，这样就导致模块编译打包时无法进行代码的消除，这样对于浏览器来说失去减少打包代码体积的意义。

而ES6模块依赖关系是确定的，和运行时的状态无关，可以进行可靠的静态分析，这就是tree-shaking的基础。这是 ES6 modules 在设计时的一个重要考量，也是为什么没有直接采用 CommonJS，正是基于这个基础上，才使得 tree-shaking 成为可能。

tree-shaking的局限性：

• rollup只处理函数和顶层的import/export变量，无法把没用到的类的方法消除掉；
• javascript动态语言的特性使得静态分析比较困难；
• Side Effect（副作用）广泛存在；
• closure compiler的tree-shaking效果最佳，需要cc的侵入式约束规范；
  
  

主流模块打包工具的tree-shaking配置：

---

Rollup 配置：

import babel from 'rollup-plugin-babel'
import uglify from 'rollup-plugin-uglify'

export default {
  entry: 'src/main.js',
  dest: 'rollup.bundle.js',
  format: 'cjs',
  treeshake: true,
  plugins: [
    babel(),
    uglify()
  ]
}

Webpack 配置：

const webpack = require('webpack')
const path = require('path')

module.exports = {
  entry: path.join(__dirname, 'src/main.js'),
  output: {filename: 'webpack.bundle.js'},
  module: {
    rules: [
      {
        test: /\\.js$/,
        loaders: 'babel-loader'
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: 'production'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      beautify: false,
      comments: false,
      compress: {
        warnings: false,
        collapse_vars: true,
        reduce_vars: true
      }
    }),
    new webpack.optimize.ModuleConcatenationPlugin()
  ]
}

总结：

---

• Tree-Shaking 是用来在打包编译前消除 es6 module 中未使用的代码模块的功能。
• 相比 DCE， Tree-Shaking 属于广义的 DCE，传统 DEC 只能清除单文件中不可执行不可到达的代码，Tree-Shaking 是跨文件依赖于 es6 module 导入静态分析的。
• 三大工具的tree-shaking对于无用代码，无用模块的消除，都是有限的，有条件的。