主要原因:是頁面在打包後如果不進行相關配置會導致資源文件特別的大,一次想要全部加載完成會特別的耗時。可以通過安裝webpack-bundle-analyzer 插件來查看打包文件的大小,可以明顯的看出哪些文件比較大。解決方法如下:
1. 去掉編譯文件中map文件。在編譯好後,我們會看到文件夾下有特別多的.map文件,這些文件主要是幫助我們線上調試代碼,查看樣式。所以爲了避免部署包過大,通常都不生成這些文件。
在 config/index.js 文件中將productionSourceMap 的值設置爲false. 再次打包就可以看到項目文件中已經沒有map文件 。
2. vue-router 路由懶加載(又名路由按需加載):即組件的延遲加載,通常vue的頁面在運行後進入都會有一個默認的頁面,而其他頁面只有在點擊後才需要加載出來。
3. 靜態資源的處理:如圖片、css、js等資源進行壓縮,vue-lazyload插件,圖片懶加載。
4. 組件異步加載:
加載首頁的時候,可以先給首頁的子組件設置v-if = “false”,在頁面初始化的時候再給子組件設置爲true,此方法利用了v-if的惰性,setTimeout會使子組件在所有的組件初始化完成並顯示後再對其子組件進行初始化。
5. 避免重複請求。
轉載:https://www.jianshu.com/p/6262772bdc9c。
轉載:https://www.jb51.net/article/173628.htm。