ES6摇树

什么是ES6摇树

ES6摇树是一种通过删除保证不会在应用程序中使用过的所有内容来优化包的包大小的方法。让我们举个例子。
假设你有这个util档案：

function adder(a, b) {
    return a + b;
}
function subber(a, b) {
    return a - b;
}
export { adder, subber };

但是，你只导入了adder：

import { adder } from "./utils";
adder(1, 2);

然后，将其包含subber在捆绑包中也没有任何意义。因此，通过静态分析，它将杀死subber，因为它从未使用过。最终捆绑包：

function adder(a, b) {
    return a + b;
}
adder(1, 2);

但是有一些问题。假设你有这个：

function adder(a, b) {
    return a + b;
}
function subber(a, b) {
    return a - b;
}
window.subadd = (a, b) => (b, c) => adder(a, b) + subber(b, c);
export { adder, subber };

这将是最终的捆绑包：

function adder(a, b) {
    return a + b;
}
function subber(a, b) {
    return a - b;
}
window.subadd = (a, b) => (b, c) => adder(a, b) + subber(b, c);
adder(1, 2);

哇，其中包括许多不必要的代码！问题是，由于Javascript的工作方式，你可以将副作用转储到全局名称空间中，并且它也将与它的依赖项一起被包含进来，因为不能保证它永远不会被使用。

支持全树摇动

当然，有一种方法可以支持全树摇动，而没有任何副作用的风险。首先，你需要杀死包装中的所有副作用。然后，在中package.json，你设置了sideEffects: false。这将向捆包机表明没有副作用，这意味着你可以将其完全摇晃。