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