可摇树优化

什么叫可摇树优化

摇树

摇树是一种消除死代码的方法。这个词最初是由 Rollup 发起的，并逐渐流行开来，但消除死代码的概念却早已存在。webpack 中也涉及了这个概念。

应用程序的依赖项是树状结构。树中的每个节点都代表了一个依赖项，这些依赖项为应用程序提供了不同的功能。我们通过消除不需要的依赖项来减少树的节点。这个过程叫摇树。

早期我们开发的应用程序依赖项比较少(树苗)，随着后续的开发树节点越来越多且有很多的节点我们可能已经不需要了(树老化了)。

实施方案

我们先看两个示例 :

不可摇树。下属示例中即使我们不需要 c 和 d。但是他任然会被输出到 JavaScript 客户端。

export default {

  a: xxx,

  b: xxx,

  c: xxx,

  d: xxx

}

import test from 'xxx'

test.a()

test.b()

可摇树

export const a: xxx

export const b: xxx

export const c: xxx

export const d: xxx

import { a, b } from 'xxx'

a()

b()

总结

我们的应用程序采用按需加载的方式导出

一个模块只导出一个程序的时候，使用 export default。导出多个模块的时候使用 export

或者干脆所有的模块导出的时候都使用 export

配置 webpack 让它摇掉未明确指定的 ES6 模块，从而减小最终的构建体积。(貌似只要启动了代码压缩就会完成摇树的工作)。webpack 不会自行执行树状结构。它依赖于像 UglifyJS 这样的第三方工具来执行实际的死代码消除。有些情况下，摇树可能无效。例如，请考虑以下模块：

import * as mylib from 'mylib';

export const someVar = mylib.a;

export const someOtherVar = mylib.b

import { someVar } from 'xxx'