Webpack 中的 Tree Shaking
Tree Shaking
Tree shaking 用于描述移除JavaScript上下文中的未引用代码(dead-code)。
为了更方便地理解tree shaking，我们可以将应用程序想象成一棵树。
绿色表示实际用到的 source code(源码) 和 library(库)，是树上活的树叶。
灰色表示未引用代码，是秋天树上枯萎的树叶。
为了除去死去的树叶，你必须摇动这棵树（shake this tree），使它们落下。
如何使用
- 使用
ES2015模块语法(即import和export) - 确保没有compiler将ES2015模块语法转换为CommonJS模块(即
require) - 在
package.json文件中，添加sideEffects属性，表示有副作用的模块文件，使用false表示所有模块文件均无副作用 - 通过将
mode选项设置为production，启用minification(代码压缩) 和tree shaking
副作用
在导入时会执行特殊行为的代码，而不是仅仅暴露一个 export 或多个 export。
举例说明，例如 polyfill，它影响全局作用域（在各类的 prototype 中加入方法），并且通常不提供 export。
或者使用 css-loader 然后 import css文件，虽然引入后并没有进行使用，但是这些css文件是有副作用的(修改样式)。
因此对于这种有副作用的模块，即使未被使用，也不能将其删除。
sideEffects
// 所有模块均无副作用
{
"name": "your-project",
"sideEffects": false
}
// 声明有副作用的模块
{
"name": "your-project",
"sideEffects": [
"./src/some-side-effectful-file.js",
"*.css"
]
}
参考链接：
