vue項(xiàng)目首屏加載過慢的一些解決方案
前言
因?yàn)槲业囊粋€(gè)vue項(xiàng)目首頁打開加載了好久，所以決定優(yōu)化一下。發(fā)現(xiàn)是打包體積太大了，頁面才加載慢主要是第三方庫(kù)。
優(yōu)化著優(yōu)化著就想要更好一點(diǎn)，于是逛博客搜索，參照了幾個(gè)博主的解決方法整理出一下幾點(diǎn)。?
一、防止編譯文件中出現(xiàn)map文件
在 config/index.js 文件中將productionSourceMap的值設(shè)置為false.
二、使用CDN加載第三方庫(kù)
在打包后發(fā)現(xiàn)chunk-vendor.js 文件占用內(nèi)存特別大，這里面主要是使用的一些第三方庫(kù)，例如 vue-router,axios，elementUI ，echarts等文件。
通過在index.html 中直接引入第三方資源來緩解我們服務(wù)器的壓力，其原理是將我們的壓力分給了其他服務(wù)器站點(diǎn)。
推薦外部的庫(kù)文件使用CDN資源：
bootstrap CDN：https://www.bootcdn.cn
Staticfile CDN：https://www.staticfile.org
jsDelivr CDN：https://www.jsdelivr.com
75 CDN：https://cdn.baomitu.com
UNPKG：https://unpkg.com
cdnjs：https://cdnjs.com
使用方法
第一步 在index.html文件中引入第三方庫(kù)
第二步 去vue-config文件中去配置externals,寫上你已經(jīng)在index.html中引用了cdn的庫(kù)。
三、圖片資源壓縮以及使用圖片懶加載
可以用精靈圖等減少http請(qǐng)求
四、vue-router 路由懶加載
懶加載即組件延遲加載，通常vue的頁面在運(yùn)行后進(jìn)入都會(huì)有一個(gè)默認(rèn)的頁面，而其他未顯示的頁面只有在點(diǎn)擊后才需要加載出來，實(shí)現(xiàn)按需請(qǐng)求，從而減少第一次加載的時(shí)候耗時(shí)。
懶加載路由配置：
const xxx= () => import('@/pages/xxx')五、gzip壓縮
前端配置gzip壓縮，并且服務(wù)端使用nginx開啟gzip，用來減小網(wǎng)絡(luò)傳輸?shù)牧髁看笮 ?/p>
第一步
命令行執(zhí)行：npm i compression-webpack-plugin -D
第二步
在webpack的dev開發(fā)配置文件中加入如下代碼:
const CompressionWebpackPlugin = require('compression-webpack-plugin')
plugins: [
new CompressionWebpackPlugin()
]
六、前端代碼優(yōu)化
- 合理使用v-if和v-show
- 使用定時(shí)器和回調(diào)函數(shù)等記得銷毀
- 避免意外的全局變量
- 適當(dāng)使用閉包避免內(nèi)存泄漏
總結(jié)
到此這篇關(guān)于vue項(xiàng)目首屏加載過慢的一些解決方案的文章就介紹到這了,更多相關(guān)vue首屏加載過慢內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在網(wǎng)上找了好久關(guān)于左右過渡動(dòng)畫折疊的組件,沒有合適的代碼,效果類似于element UI中的Drawer抽屜組件,只不過ele中的都是懸浮的組件,工作中遇到的很多都是占用空間的展開折疊,網(wǎng)上很多也是上下展開收起的組件,于是就自己寫了一個(gè),分享給大家,感興趣的朋友參考下吧2023-11-11
Vue中的el-date-picker時(shí)間選擇器的使用實(shí)例詳解
el-date-picker是Element UI框架中提供的日期選擇器組件,它支持單個(gè)日期、日期范圍、時(shí)間、日期時(shí)間等多種選擇方式,本文給大家介紹Vue中的el-date-picker時(shí)間選擇器的使用,感興趣的朋友一起看看吧2023-10-10
這篇文章主要介紹了Vue+Element?switch組件的使用,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
Vue中EpicEditor和vue-quill-editor的使用詳解
EpicEditor和Vue-quill-editor都是基于Quill.js的富文本編輯器,并且都提供了許多強(qiáng)大的功能,下面我們就來介紹一下二者的具體使用,感興趣的小伙伴可以了解一下2023-11-11
詳解vue實(shí)現(xiàn)坐標(biāo)拾取器功能示例
這篇文章主要介紹了詳解vue實(shí)現(xiàn)坐標(biāo)拾取器功能示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要為大家介紹了Vite的createServer啟動(dòng)源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
vue-router跳轉(zhuǎn)時(shí)打開新頁面的兩種方法
這篇文章主要給大家介紹了關(guān)于vue-router跳轉(zhuǎn)時(shí)打開新頁面的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue-router具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
vue中html2canvas給指定區(qū)域添加滿屏水印
本文主要介紹了vue中html2canvas給指定區(qū)域添加滿屏水印,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-11-11
vue2.0項(xiàng)目實(shí)現(xiàn)路由跳轉(zhuǎn)的方法詳解
這篇文章主要介紹了vue2.0項(xiàng)目實(shí)現(xiàn)路由跳轉(zhuǎn)的詳細(xì)方法,非常不錯(cuò)，具有一定的參考借鑒借鑒價(jià)值，需要的朋友可以參考下2018-06-06
vue 實(shí)現(xiàn)在函數(shù)中觸發(fā)路由跳轉(zhuǎn)的示例
今天小編就為大家分享一篇vue 實(shí)現(xiàn)在函數(shù)中觸發(fā)路由跳轉(zhuǎn)的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09