## 1. webpack3.x優化打包速度
我們執行一下`npm run build`，結果如下：
整個打包過程花了32s左右，現在我們的項目只是引入了相關的依賴，一些業務邏輯還沒有寫，打包速度就那么慢了，等到我們寫完整個項目，打包速度還會繼續變長，所以我們需要優化一下。
> 優化打包速度，我們修改的主要是`webpack.prod.conf.js`文件
#### 替換代碼壓縮工具
Webpack 默認提供的 UglifyJS 插件，由于采用單線程壓縮，速度慢 ；
[webpack-parallel-uglify-plugin](https://www.npmjs.com/package/webpack-parallel-uglify-plugin) 插件可以并行運行 UglifyJS 插件，更加充分而合理的使用 CPU 資源，這可以大大減少的構建時間；
```js
//安裝
cnpm i webpack-parallel-uglify-plugin -D
```
```js
//配置 webpack.prod.conf.js
//首先刪除項目中的 UglifyJsPlugin插件及配置,第二次打包時提高速度，要把.cache文件加入到gitignore中
// new webpack.optimize.UglifyJsPlugin({
// compress: {
// warnings: false,
// drop_console: true
// },
// sourceMap: true
// }),
//然后引入并使用我們剛才裝的插件
```
==注意：版本控制工具提交時，要忽略.`cache`文件==
配置完后我們執行`npm run build`,發現打包速度降到了23s
再執行一次`npm run build`,發現打包速度降到了12s
時間降低那么多是因為文件沒有改動，直接利用了緩存中的js文件
#### happypack開啟多核構建項目
一般node.js是單線程執行編譯，而happypack則是啟動node的多線程進行構建，大大提高了構建速度。
首先安裝，
修改`webpack.base.conf.js`
```js
const HappyPack = require('happypack');
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
...
...
// 增加plugins
plugins: [
new HappyPack({
id: 'happy-babel-js',
loaders: ['babel-loader?cacheDirectory=true'],
threadPool: happyThreadPool,
})
]
...
...
// 修改對應loader
{
test: /\.js$/,
loader: 'happypack/loader?id=happy-babel-js',
include: [resolve('src'), resolve('test')],
}
```
配置完成，執行`npm run build`
what??并沒有提高速度 不要用這個鬼東西了
#### hardSourceWebpackPlugin節省70%的時間
> https://github.com/mzgoddard/hard-source-webpack-plugin
```shell
#安裝
cnpm install --save-dev hard-source-webpack-plugin
```
使用，在webpack.prod.conf.js中引入并使用
```js
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
module.exports = {
context: // ...
entry: // ...
output: // ...
plugins: [
new HardSourceWebpackPlugin()
]
}
```
結果：
注：要第二次打包才生效
總結下，使用了三個插件，我們的打包速度從30s降低到4s,awesome!
