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í)測(cè)效果不是特別明顯）
3、第三方庫使用CDN引入
在項(xiàng)目開發(fā)中，我們會(huì)用到很多第三方庫，如果可以按需引入，我們可以只引入自己需要的組件，來減少所占空間，但也會(huì)有一些不能按需引入，我們可以采用CDN外部加載，在index.html中從CDN引入組件，去掉其他頁面的組件import，修改webpack.base.config.js，在externals中加入該組件，這是為了避免編譯時(shí)找不到組件報(bào)錯(cuò)。
注意：
- 刪掉項(xiàng)目中import的這幾個(gè)相關(guān)的，以及Vue.use()。
- eslint插件報(bào)錯(cuò)not defined的話，前面加個(gè)window，如window.VueRouter。
（用這種方法需要注意，你前端所在的服務(wù)器可以訪問外網(wǎng)）
4、vue-cli開啟打包壓縮和后臺(tái)配置gzip訪問
（目前只知道nginx可以開啟gz文件）
5、nginx 做 js css 文件緩存
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3 Echarts通用的折線圖帶陰影效果實(shí)現(xiàn)
在環(huán)保倉管項(xiàng)目中,做了一個(gè)每月對(duì)藥品、消耗品、設(shè)備的進(jìn)出,進(jìn)行統(tǒng)計(jì)百分比,效果好看,后面經(jīng)常在用這個(gè)樣式,下面通過示例代碼分享Vue3 Echarts通用的折線圖帶陰影效果實(shí)現(xiàn),感興趣的朋友一起看看吧2024-07-07
Vue+Node.js實(shí)現(xiàn)Token無感刷新的全流程指南
這篇文章主要為大家詳細(xì)介紹了Vue+Node.js結(jié)合Axios實(shí)現(xiàn)Token無感刷新的全流程,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-11-11
vue新建環(huán)境變量以及網(wǎng)絡(luò)請(qǐng)求工具axios的二次封裝詳解
這篇文章主要為大家介紹了vue新建環(huán)境變量以及網(wǎng)絡(luò)請(qǐng)求工具axios的二次封裝詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
淺析Vue中defineProps的解構(gòu)和不解構(gòu)
defineProps?是?Vue?3?Composition?API?中用來聲明組件接收的?props?的方法,本文主要為大家介紹了defineProps的解構(gòu)和不解構(gòu),感興趣的可以了解下2025-02-02
vue DatePicker日期選擇器時(shí)差8小時(shí)問題
這篇文章主要介紹了vue DatePicker日期選擇器時(shí)差8小時(shí)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了Vue3中的h函數(shù)及使用小結(jié),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
vue3.2+ts實(shí)現(xiàn)在方法中可調(diào)用的擬態(tài)框彈窗(類el-MessageBox)
這篇文章主要介紹了vue3.2+ts實(shí)現(xiàn)在方法中可調(diào)用的擬態(tài)框彈窗（類el-MessageBox）,這個(gè)需求最主要的是要通過方法去調(diào)用，為了像el-messagebox使用那樣方便，需要的朋友可以參考下2022-12-12
vue中使用mixins/extends傳入?yún)?shù)的方式
這篇文章主要介紹了vue中使用mixins/extends傳入?yún)?shù)的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue3?錨點(diǎn)定位的多種實(shí)現(xiàn)方式
這篇文章主要介紹了vue3?多種方法的錨點(diǎn)定位，使用?Vue?Router?導(dǎo)航守衛(wèi)可以簡(jiǎn)化導(dǎo)航邏輯、統(tǒng)一管理導(dǎo)航邏輯和進(jìn)行權(quán)限控制，但需要學(xué)習(xí)和理解相關(guān)概念，并且需要手動(dòng)編寫和管理導(dǎo)航守衛(wèi)的邏輯,本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-07-07
在Web開發(fā)中,獲取DOM元素的寬度、高度以及滾動(dòng)位移是常見的需求,這篇文章主要給大家介紹了關(guān)于vue獲取組件中元素寬度常用的方法,需要的朋友可以參考下2024-08-08