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

配置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 ？ [Tree shaking](https://en.wikipedia.org/wiki/Tree_shaking)是一种消除无用代码(dead code)的方式。这个词是由最先从[Rollup](https://github.com/rollup/rollup#tree-shaking)社区开始流行的，不过本身的理念很早就有了。在[webpack](https://webpack.js.org/guides/tree-shaking/)中也有相同的理念，在本文我们会用一个例子来描述。 “tree shaking”这个词来自于应用的架构以及本身的依赖关系就像一个树形结构。树的每一个节点表示应用中一个唯一的功能。在现代网页应用中，依赖关系通常使用[**static import statement**](https://develo