## 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,
})
]
};
```
