背景
我司前端項目框架主要是 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 文件夾。存疑