在公眾號深圳灣碼農裡看的一篇文章：一行可以讓專案啟動快 70% 以上的程式碼 - https://mp.weixin.qq.com/s/x8eFAFdTbzlCR1InxZSO2w

一、利用 cache 及 hard-source-webpack-plugin 優化構建速度

1、結果：將專案啟動時間從48秒優化到14秒，大約70左右，效果還是有的，而且僅僅用了一行程式碼。

2、解決方案：快取。

　　問題點就在於：如何更好的進行快取。

3、hard-source-webpack-plugin，這外掛為模組提供中間快取步驟，但專案得跑兩次，第一次構建時間正常，第二次大概能省去90%左右的時間

// 引入hard-source-webpack-plugin：
 

npm install --save-dev hard-source-webpack-plugin

// 使用配置
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
module.exports = {
  // ......  
  plugins: [
    new HardSourceWebpackPlugin()  
  ]
}

4、cache

chainWebpack: (config) => {
  config.cache(true)
}

　　用chainWebpack的原因是專案中其實沒有獨立的webpack.config.js檔案，所以只能放在vue.config.js檔案中，使用chainWebpack

5、HardSourceWebpackPlugin

chainWebpack: (config) => {
  config.plugin('cache').use(HardSourceWebpackPlugin)
}

　　所以說hard-source-webpack-plugin失敗的原因可能就是那兩個統計外掛的原因了，得虧再試了一次，要不然就不明不白的GG了。

6、結論：

（1）如果專案能使用hard-source-webpack-plugin就很方便了，直接使用config.plugin('cache').use(HardSourceWebpackPlugin)；

（2）如果用不了hard-source-webpack-plugin那就嘗試webpack自帶的cache功能也是不錯的，雖然比不上hard-source-webpack-plugin，但多少也能提升70%左右的啟動時間：config.cache(true)

　　這兩種方法其實都是可行了，論穩定和效果的話hard-source-webpack-plugin還是更勝一籌，但cache勝在不用裝額外的webpack外掛，具體用什麼就自己決定吧。

二、專案實戰

　　我們專案採用 nuxtjs 服務端渲染，那麼既然知道了解決方案，也可以在專案上應用起來。其實nuxt是有配置的。

1、cache

• 型別: Boolean
• 預設: false
• ⚠️ 實驗性的

啟用快取 terser-webpack-plugin 和 cache-loader

2、hardSource

• 型別: Boolean
• 預設: false
• ⚠️ 實驗性的

　　開啟 HardSourceWebpackPlugin

　　然後我們加上這2個配置之後

build: {
　　......
   cache: true,
   hardSource: true,
　　......
}

　　檢視構建速度，確實快了很多