## 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!
