## Tree Shake
**什么是 Tree Shake**
我们通过 `import` 和 `export` 语法，标识出了那些“未引用代码(dead code)”，但是我们仍然需要从 bundle 中删除它们。要做到这一点，我们将添加一个能够删除未引用代码(dead code)的压缩工具(minifier) -[`UglifyJSPlugin`](https://doc.webpack-china.org/plugins/uglifyjs-webpack-plugin)。
## uglifyjs-webpack-plugin
```
yarn add uglifyjs-webpack-plugin -D
```
在 **conf/webpack.config.js** 中配置
```js
const path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: {
main: './src/main.js'
},
output: {
path: path.resolve(__dirname, '..', 'dist'),
filename: '[name].[chunkhash].js'
},
plugins: [
new UglifyJSPlugin()
]
};
```
**package.json** 中
```json
"scripts": {
"start": "webpack-dev-server --config conf/webpack.base.js",
"watch": "webpack --watch --config conf/webpack.base.js",
"build": "webpack --config conf/webpack.base.js",
"server": "node conf/server.js"
}
```
此时，使用 `npm run build` 即可实现代码压缩打包，并删除未引用代码。
注意， uglifyjs-webpack-plugin 不能适用于 ES5+ 的代码压缩，如果要压缩 ES5+ 的代码压缩，建议使用 babel-minify-webpack-plugin
## babel-minify-webpack-plugin
```
yarn add babel-minify-webpack-plugin -D
```
babel-minify-webpack-plugin 可以帮助我们压缩 ES5+ 的代码，也具备 Tree Shake 的特性。
GitHub: https://github.com/webpack-contrib/babel-minify-webpack-plugin
babel-preset-minify: https://github.com/babel/minify/tree/master/packages/babel-preset-minify
使用:
```js
const MinifyPlugin = require("babel-minify-webpack-plugin");
module.exports = {
entry: //...,
output: //...,
plugins: [
new MinifyPlugin(minifyOpts, pluginOpts)
]
}
```
### minifyOpts
`minifyOpts` 设置选项基于 babel-preset-minify. 可以在以下列表中找到所有支持的选项: [all available options](https://github.com/babel/minify/tree/master/packages/babel-preset-minify#options).
`Default: {}`
### pluginOpts
- `test`: Test to match files against. Default: `/\.js($|\?)/i`
- `include`: Files to `include`. Default: `undefined`
- `exclude`: Files to `exclude`. Default: `undefined`
- `comments`: Preserve Comments. Default: `/^\**!|@preserve|@license|@cc_on/`, falsy value to remove all comments. Accepts function, object with property test (regex), and values.
- `sourceMap`: Default: uses [webpackConfig.devtool](https://webpack.js.org/configuration/devtool/). Set this to override that.
- `parserOpts`: Configure babel with special parser options.
- `babel`: Pass in a custom babel-core instead. `require("babel-core")`
- `minifyPreset`: Pass in a custom minify preset instead - `require("babel-preset-minify")`.
通常在生产环境中引入:
```js
const merge = require('webpack-merge');
const MinifyPlugin = require("babel-minify-webpack-plugin");
const webpackBaseConf = require('./webpack.base.js');
module.exports = merge(webpackBaseConf, {
plugins: [
new MinifyPlugin()
]
});
```
## webpack-closure-compiler
这是另一款代码压缩工具，具有很好的性能。
GitHub: https://github.com/roman01la/webpack-closure-compiler
:-: 
安装
```
yarn add webpack-closure-compiler -D
```
实例
```js
const path = require('path');
const ClosureCompilerPlugin = require('webpack-closure-compiler');
module.exports = {
entry: [
path.join(__dirname, 'app.js')
],
output: {
path: path.join(__dirname, '/'),
filename: 'app.min.js'
},
plugins: [
new ClosureCompilerPlugin({
compiler: {
jar: 'path/to/your/custom/compiler.jar', //optional
language_in: 'ECMASCRIPT6',
language_out: 'ECMASCRIPT5',
compilation_level: 'ADVANCED'
},
concurrency: 3,
})
]
};
```
