[toc]
# Tree Shaking
树摇：把项目中引入了但是没有使用的代码删除掉【把树上枯萎的叶子摇掉】。
## 启用
使用 Tree Shaking 的方法：
1. 使用 ES6 的模块机制（import 和 export）
2. 在 package.json 文件中添加 `sideEffects` 属性
3. 设置 mode 为 `production`
## 副作用
sideEffects ：会影响全局其他地方的代码。
比如，在一个函数中有修改函数之外内容的代码就是有副作用的：
~~~
// 这个函数中的代码修改了函数外的东西，这个函数是有副作用的
function hello() {
// 清空本地存储（操作了函数之外的内容）
localStorage.clear()
}
~~~
## sideEffects 属性
webpack 在打包时会将没有使用到的代码删除掉，但有一些代码 webpack 无法判断它是否被使用了，比如，引入一个样式文件：
~~~
import './style.css'
~~~
这个代表从表面上看引入了并没有被使用，但实际上这个文件引入之后就会生效，但因为不是 JS 代码，所以 webpack 无法判断它是否被使用到了。
这时我们就需要在 `package.json` 文件中配置 `sideEffects` 属性来指定哪些文件是有 “副作用” 的，然后这些文件在打包时不会因为树摇而被识删除。
~~~json
"sideEffects": [
"**/*.css",
"**/*.scss",
"./esnext/index.js",
"./esnext/configure.js"
]
~~~
