最近新搭建了一個vue-cli3 的后臺管理系統(tǒng)，完成了架構(gòu)的布局和一些基礎的業(yè)務代碼之后決定把代碼發(fā)布到測試環(huán)境，方便測試和產(chǎn)品查看，在將代碼發(fā)布測試了，發(fā)現(xiàn)首頁加載非常的緩慢，通過瀏覽器調(diào)試工具查看，發(fā)現(xiàn)首頁加載的時候發(fā)送了非常多的請求，數(shù)量達到了347個。

1.png

一開始以為是production環(huán)境沒有使用懶加載，但是檢測代碼發(fā)現(xiàn)并沒有問題，然后開始檢查webpack的配置問題，但是vue,config.js都是使用了默認的配置，然后開始百度，最后在一篇博客（https://www.jb51.net/article/160039.htm）里面發(fā)現(xiàn)了一模一樣的問題，原來是vue-cli3 里面的資源加載策略問題，Proload 和Prefetch，然后檢查html結(jié)構(gòu)的header部分，發(fā)現(xiàn)果真如此。

2.png

解決辦法：官方文檔已經(jīng)給出了解決辦法。

優(yōu)化之后，發(fā)現(xiàn)首頁的請求數(shù)量變成了36個，又恢復正常了。

3.png