webpack中的tree shaking(树摇)-----移除未使用的代码

本篇大致概括一下tree shaking的作用以及与webpack相结合使用

什么是tree shaking

引用webpack官网的原文来说：

tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块语法的静态结构特性，例如 import 和 export。这个术语和概念实际上是由 ES2015 模块打包工具 rollup 普及起来的。

我们经常能看到一个模块会导出很多个不同的东西，但是实际项目可能并不会全部引用，举个例子：

假设我们有一个工具函数文件utils.js，里面有两个方法，一个是两数相加求和的add函数，一个是我们待会儿不会使用的useless函数。
我们在一个index.js中引入add函数：

明显useless是不会被使用的，在打包代码之后，按照我们的意愿，不被使用的代码也就是无用的代码不应当被打包到最终的文件中，因为那样会增加不必要的文件体积，而tree shaking的作用就是将这些无用的代码从“树”上“摇”下去。

webpack怎么配置使用tree shaking

上一章提到，tree shaking依赖于ES模块语法，import以及export
所以开启树摇的前提是该模块需要用ES模块导出并且被ES模块语法引用，像commonJs的导入导出方式是不行的。
在development环境，我们将上一章的文件用webpack打包，结果如下：

不管有没有被使用，useless还是被正常打包导出到文件中了。接下来，我们在配置的优化项中加上：

再进行打包得结果如下：

打包结果只导出了add函数，并且将useless标记为未使用的函数，在production环境中打包时，这个未使用的将会被移除，不会出现在打包结果中。production环境下，usedExports默认是开启的。

sideEffects

有些文件导入的时候并不是导入其中的内容作为变量使用，而是直接导入这个文件，用来执行里面的副作用操作，例如：

这个utils中新增一段修改标题的代码，并不导出为什么，然后在index中直接导入：

打包效果如下：

虽然没有通过导入为变量去使用，但是这些副作用代码默认是会被保留的。假设你有明确不需要理会的副作用，或者明确没有副作用，可以设置sideEffects来使webpack按照正常的方式去tree shaking。

这里有两处地方设置sideEffects，具有不一样的意义：
1.config文件中，optimization配置项里可以配置sideEffects，值是bool，生产环境默认是true，代表开启无副作用树摇的功能。
2.package.json文件中配置sideEffects，值有true，false，数组，生产环境默认为true，表示所有的文件都是有副作用的。

当package.json中设置为false，代表所有的文件都没有副作用，可以放心的按照原来的树摇规则，把那些没用到的副作用代码都去除。但是有些时候，我们引入css样式，也是不会去使用变量的方式，这样设置样式也会被摇下去导致不生效。因此需要设置sideEffects为数组形式，匹配需要保留副作用的文件的后缀名，树摇时就会跳过这些文件。