如何减少 webpack 构建 vue 项目的编译时间
背景
我司前端项目框架主要是 vue，多个项目聚集在同一个仓库下，共用公共组件、页面、工具函数等。基于以上前提，我们需要对不同的项目分别进行打包，并解决单页应用强制刷新引起的问题，所以没有使用 vue-cli 来创建，而是使用 webpack 重新编写了一套打包流程。
随着代码量的增长（百万行级），加之电脑硬件性能不高等因素，我感觉项目初次启动时间越来越慢，目前大概在一分半到两分钟之间。某次编译启动时间如下：
泄特！这大大降低了开发体验。
找方案
网络上有很多关于 webpack 构建时间优化的文章，随便一搜就是一堆，这里就不一一列出来了。总结下来，可以由一下几个方面入手：
- vue、vuex等不轻易更改的库，使用外部链接
- 文件缓存
- 多核并发编译
在一切开始之前，我更推荐先阅读以下官方文档：
方案实施
我基本上是按照上面的思路进行的，截取部分代码以作参考：
const config = {
externals: { // 下面这些库使用外部链接，不会被打包
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'buffer': 'undefined', // js-base64 require('buffer')
},
module: {
rules: [
{ // 对 vue 文件，使用 cache-loader 进行缓存
test: /\.vue$/,
loader: 'vue-loader',
options: {
cacheDirectory: path.resolve(__dirname, '../node_modules/.cache/vue-loader'),
cacheIdentifier: 'cache-loader:{version} {process.env.NODE_ENV}'
}
},
{ // 对 .js 文件，开启 babel-loader 自带的缓存
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader?cacheDirectory=true',
},
]
// 其他规则
}
}
经过这两步简单的操作，把原本 100s 左右的构建时间，缩短成 30s 左右。
当然，还可以使用 happyPack 或是 thread-loader 进一步压榨机器性能。然而配置略微复杂，且目前已够用，以后有需要在加吧。
其中不得不提一下 vue 规则中的 cacheDirectory，按照上面编写的路径，打包完成后，我没有在 node_modules/.cache 文件夹下找到 vue-loader 这个缓存文件夹，以及 babel-loader 缓存文件夹。但如果更改 vue 规则中 cacheDirectory 的路径，譬如说项目根目录下，打包完成后，会在跟目录下创建 vue-loader 这个文件夹，同时，在 node_modules/.cache/ 文件夹下也会生成 vue-loader 和 babel-loader 文件夹。存疑
