【前言】

《聞香識女人》中有句經典臺詞，“有些人一分鐘過盡一生”，多少人在等待中浪費了生命的美好。同樣，如果一個項目構建、熱更新、打包速度過慢，中途需大把時間去等待，那么不免讓人抓狂。

【效果展示】

優化前，構建速度

 整整126秒，兩分多鐘過去后，項目才啟動成功

優化后，構建速度

21秒運行完畢，僅用以前16%的時間，節約80%以上，過程不再枯燥、冗長。

優化前，打包速度

由于過程過久，不得不另外用計時器

優化后，打包速度

20秒打包結束，僅用了15%的時間，速度顯著提升

再看下當前的熱更新速度

0.3秒，修改文件或內容后，可以瞬間同步最新視圖，同樣節約了等待時間

【優化工作】

前面直觀展示了優化前后結果對比圖，現在就該講講優化過程

首先，我想到了壓縮代碼，webpack有提供plugin，先引入

再去vue.config.js里配置

除了壓縮，還不夠，還需要分包 + 緩存

最后，再將全局引入的sass樣式處理一下

需安裝style的loader，將全局性的樣式注入到如css, sass, scss, less, stylus等模塊中；

安裝style-resources-loader、vue-cli-plugin-style-resources-loader后，就可以去webpack里配置了

到這里，優化過程就結束了，以后再也不用盯著進度條祈禱了