总结 Tree-Shaking

什么是 Tree-Shaking

用来在打包编译成 bundle 时消除 ES6 Module 语法中未使用到的代码和模块。
What is tree shaking?

Tree-Shaking 的作用

用于跨文件代码的 DCE 优化。
依赖 ES6 module 特性。
消除未被 import 的 export 模块。
对 Function 函数模块的处理效果好。
无法直接处理 Class 模块。

什么是 Dead Code Elimination

DCE 用来消除不能执行的代码 Dead Code。
javascript 常用 uglify 来 DCE 。
只能清除单文件里的 Dead Code (只读不写，结果用不到，不被执行)

应该怎么实践 Tree-Shaking

三方库按需加载。

import map from "lodash/map";
import { Input, Button } from "atnd"; // 需要使用 babel 按需加载 plugin

按需加载的实现
不要写奇怪含有副作用的代码。副作用wiki
良好的模块拆分和设计才是关键。

CommonJS 和 ES6 Module

CommonJS require 动态加载，执行后才知道结果。
ES6 Module import 静态分析，不需要执行即可通过字面量对代码分析。

打包工具的 Tree-Shaking

Rollup 只处理函数和顶层 import / export导入的变量
Rollup 结果比 Webpack 更优化点

Dead Code

参考
Dead code problem

• 死区代码，被赋值但在后续执行中未使用的变量(Dead store)

function func(a, b) {
    var x;
    var i = 300;
    while (i--) {
        x = a + b; // Dead store
    }
}

• 曾经使用但现在未使用到的代码(Oxbow code)

function temp() {
    function private_calculation() {
        return 22;
    }
    this.calc = function () {
        // private_calculation()
        return 22;
    }
}

• 无法到达的代码: 执行不了的判断，执行不到的循环，return 后的代码(Unreachable code)

// 执行不了的判断
function temp() {
    var a = 2;
    if (a > 3) {
         return 3; // Dead Code
    }
}
// return 后的代码
function temp() {
    return 1;
    var a = 2; // Dead Code
}
// 执行不到的循环
function temp() {
    var a = 2;
    while (false) {
         return 3; // Dead Code
    }
}

• 无用的