本文介绍了webpack中的Tree Shaking相关内容。

什么是Tree Shaking

1 个模块可能有多个方法，只要其中的某个方法使用到了，则整个文件都会被打到 bundle 里面去，tree shaking 就是只把用到的方法打入 bundle ，没用到的方法会在 uglify 阶段被擦除掉。

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

原理

利用ES6模块的特点：

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

在分析的时候，Tree Shaking 会知道哪些代码没用到，会给这些没用到的代码加一个注释，并在 uglify 的时候进行删除。

注意：由于使用到了ES6模块的特点，所以在使用babel的时候，需要将默认的es6 模块转为es5 commonjs禁止掉，即在.babelrc中，添加配置modules: false：

// .babelrc
{
    "presets": [
        [
            "@babel/preset-env",
            {
                "modules": false
            }
        ],
        "@babel/preset-react"
    ]
}

怎么用

webpack 默认支持，production模式下默认开启。

新建一个模块 treeshaking.js:

// treeshaking.js
export function a () {
  return 'func a'
}

export function b () {
  return 'func b'
}

然后在另一模块中导入：

// index.js
import { a } from '/path/to/treeshaking.js'
// ... 余下代码中并不使用函数a

开启 Tree Shaking 前：

开启 Tree Shaking 后：

在 index.js 中使用函数 a，并开启 Tree Shaking 后：

参考

Tree Shaking - WebPack中文文档