配置Tree Shaking来减少JavaScript的打包体积

译者按： 用Tree Shaking技术来减少Javascript的Payload大小

• 原文: Reduce Javascript Payloads with Tree Shaking
• 译者: Fundebug

为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。

小编推荐：Fundebug专注于Javascript、微信小程序、微信小游戏，Node.js和Java线上bug实时监控。真的是一个很好用的bug监控服务，众多大佬公司都在使用。

如今一个网页应用可以体积很大，特别是Javascript代码。2018年年中，HTTP Archive统计在移动端Javascript文件的平均传输大小将近350KB。你要知道，这仅仅是传输的大小。在网络传输的时候，Javascript往往是经过压缩的。也就是说，在浏览器解压缩之后，实际的大小会远远大于这个值。而这一点相当重要。如果考虑到浏览器处理数据的资源消耗，其中压缩是不得不考虑的。一个300KB的文件解压缩会达到900KB，并且在分析和编译的时候，体积依然是900KB。

其实，处理Javascript是很耗资源的。不像图片只会在下载的时候有一点简单的解码处理，Javascript需要分析，编译，然后再被执行。一个字节一个字节地处理，所以Javascript的处理很贵。

为了优化Javascript引擎，各种改进方法被提出来。提升Javascript代码的性能，是开发者最擅长的事情。毕竟，有谁比架构师更擅长优化架构的性能呢？

Code splitting是其中一个用来提升性能的方法，通过将Javascript应用拆分成一个个块，然后在需要的时候才下载。这个方法很好，但是有一个很常见的问题没有处理，那就是有很多打包的代码我们压根没有用到。为了解决这个问题，我们用tree shaking。

Tree shaking是一种消除无用代码(dead code)的方式。这个词是由最先从Rollup社区开始流行的，不过本身的理念很早就有了。在webpack中也有相同的理念，在本文我们会用一个例子来描述。

"tree shaking"这个词来自于应用的架构以及本身的依赖关系就像一个树形结构。树的每一个节点表示应用中一个唯一的功能。在现代网页应用中，依赖关系通常使用static import statement，如下所示：

// import all the array utilities!
import arrayUtils from "array-utils";

// import only some of the utilities!
import { unique, implode, explode } from "array-utils";

import * as utils from "../../utils/utils";

if (this.state.sortBy === "model") {
  // Simple sort gets used here...
  json = utils.simpleSort(json, "model", this.state.sortOrder);
} else if (this.state.sortBy === "type") {
  // ..and here...
  json = utils.simpleSort(json, "type", this.state.sortOrder);
} else {
  // ..and here.
  json = utils.simpleSort(json, "manufacturer", this.state.sortOrder);
}

{
  "presets": [
    ["env", {
      "modules": false
    }]
  ]
}

let fruits = ["apple", "orange", "pear"];

console.log(fruits); // (3) ["apple", "orange", "pear"]

const addFruit = function(fruit) {
  fruits.push(fruit);
};

addFruit("kiwi");

console.log(fruits); // (4) ["apple", "orange", "pear", "kiwi"]

{
  "name": "webpack-tree-shaking-example",
  "version": "1.0.0",
  "sideEffects": false
}

{
  "name": "webpack-tree-shaking-example",
  "version": "1.0.0",
  "sideEffects": [
    "./src/utils/utils.js"
  ]
}

import { simpleSort } from "../../utils/utils";

if (this.state.sortBy === "model") {
  json = simpleSort(json, "model", this.state.sortOrder);
} else if (this.state.sortBy === "type") {
  json = simpleSort(json, "type", this.state.sortOrder);
} else {
  json = simpleSort(json, "manufacturer", this.state.sortOrder);
}

// This still pulls in all of lodash even if everything is configured right.
import { sortBy } from "lodash";

// This will only pull in the sortBy routine.
import sortBy from "lodash-es/sortBy";