Vue首頁加載過慢的解決方式
什么導(dǎo)致了首頁初步加載過慢
app.js文件體積過大
解決方法
1、Vue-router懶加載
vue-router懶加載可以解決首次加載資源過多導(dǎo)致的速度緩慢問題：vue-router支持WebPack內(nèi)置的異步模塊加載系統(tǒng)。
所以，那些使用較少的路由組件不必打包進(jìn)bundles里，只需要在路由被訪問時(shí)按需加載。
路由懶加載寫法：
2、在webpack打包的過程中，將多余文件去掉
如map文件，
即在config/index.js中將productionSourceMap的值修改為false，
就可以在編譯時(shí)不生成.map文件了（實(shí)測效果不是特別明顯）
3、第三方庫使用CDN引入
在項(xiàng)目開發(fā)中，我們會用到很多第三方庫，如果可以按需引入，我們可以只引入自己需要的組件，來減少所占空間，但也會有一些不能按需引入，我們可以采用CDN外部加載，在index.html中從CDN引入組件，去掉其他頁面的組件import，修改webpack.base.config.js，在externals中加入該組件，這是為了避免編譯時(shí)找不到組件報(bào)錯。
注意：
- 刪掉項(xiàng)目中import的這幾個相關(guān)的，以及Vue.use()。
- eslint插件報(bào)錯not defined的話，前面加個window，如window.VueRouter。
（用這種方法需要注意，你前端所在的服務(wù)器可以訪問外網(wǎng)）
4、vue-cli開啟打包壓縮和后臺配置gzip訪問
（目前只知道nginx可以開啟gz文件）
5、nginx 做 js css 文件緩存
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js3.2的vnode部分優(yōu)化升級使用示例詳解
這篇文章主要為大家介紹了Vue.js3.2的vnode部分優(yōu)化升級使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了vue引入高德地圖并繪制點(diǎn)線面的實(shí)例代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-03-03
組件是 vue.js最強(qiáng)大的功能之一，而組件實(shí)例的作用域是相互獨(dú)立的，這就意味著不同組件之間的數(shù)據(jù)無法相互引用。這篇文章主要介紹了一文快速詳解前端框架 Vue 最強(qiáng)大的功能,需要的朋友可以參考下2019-05-05
vue2.x中keep-alive源碼解析(實(shí)例代碼)
Keep-Alive模式避免頻繁創(chuàng)建、銷毀鏈接，允許多個請求和響應(yīng)使用同一個HTTP鏈接，這篇文章主要介紹了vue2.x中keep-alive源碼解析,需要的朋友可以參考下2023-02-02
vue-router判斷頁面未登錄自動跳轉(zhuǎn)到登錄頁的方法示例
這篇文章主要介紹了vue-router判斷頁面未登錄自動跳轉(zhuǎn)到登錄頁的方法示例,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
vue+elementUI實(shí)現(xiàn)點(diǎn)擊左右箭頭切換按鈕功能
這篇文章主要介紹了vue+elementUI實(shí)現(xiàn)點(diǎn)擊左右箭頭切換按鈕功能,樣式可以根據(jù)自己需求改動,感興趣的朋友可以參考下實(shí)現(xiàn)代碼2024-05-05
在Vue項(xiàng)目中引入Echarts繪制K線圖的方法技巧
在Vue項(xiàng)目開發(fā)中,數(shù)據(jù)可視化是一項(xiàng)重要的任務(wù),Echarts是一個由百度開源的數(shù)據(jù)可視化庫,提供了豐富的圖表類型和強(qiáng)大的交互功能,其中,K線圖常用于展示金融數(shù)據(jù)的走勢,本文將詳細(xì)介紹如何在Vue項(xiàng)目中引入Echarts并繪制K線圖,需要的朋友可以參考下2025-04-04
vue項(xiàng)目實(shí)現(xiàn)webpack配置代理,解決跨域問題
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)webpack配置代理,解決跨域問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue 對象添加或刪除成員時(shí)無法實(shí)時(shí)更新的解決方法
這篇文章主要介紹了vue 對象添加或刪除成員時(shí)無法實(shí)時(shí)更新的解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
Vue?ElementUI?table實(shí)現(xiàn)雙擊修改編輯某個內(nèi)容的方法
在實(shí)現(xiàn)表格單元格雙擊編輯功能時(shí),需使用@cell-dblclick事件來觸發(fā)雙擊操作,將單元格切換為input輸入框,通過ref引用和綁定失焦及回車事件來確認(rèn)編輯,同時(shí),需要處理編輯數(shù)據(jù)的更新和方法邏輯的完善2024-09-09