淺析webpack如何優化項目構建速度及在NuxtJS里的應用加快Nuxt項目構建速度

　　在公眾號深圳灣碼農里看的一篇文章：一行可以讓項目啟動快 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來將配置插入到webpack中去。

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,
　　...... }

　　查看構建速度，確實快了很多