前言

因?yàn)槲业囊粋€(gè)vue項(xiàng)目首頁(yè)打開(kāi)加載了好久，所以決定優(yōu)化一下。發(fā)現(xiàn)是打包體積太大了，頁(yè)面才加載慢主要是第三方庫(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等文件。

通過(guò)在index.html 中直接引入第三方資源來(lái)緩解我們服務(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,寫(xiě)上你已經(jīng)在index.html中引用了cdn的庫(kù)。

三、圖片資源壓縮以及使用圖片懶加載

可以用精靈圖等減少http請(qǐng)求

四、vue-router 路由懶加載

懶加載即組件延遲加載，通常vue的頁(yè)面在運(yùn)行后進(jìn)入都會(huì)有一個(gè)默認(rèn)的頁(yè)面，而其他未顯示的頁(yè)面只有在點(diǎn)擊后才需要加載出來(lái)，實(shí)現(xiàn)按需請(qǐng)求，從而減少第一次加載的時(shí)候耗時(shí)。

懶加載路由配置：

const xxx= () => import('@/pages/xxx')

五、gzip壓縮

前端配置gzip壓縮，并且服務(wù)端使用nginx開(kāi)啟gzip，用來(lái)減小網(wǎng)絡(luò)傳輸?shù)牧髁看笮　?/p>

第一步

命令行執(zhí)行：npm i compression-webpack-plugin -D

第二步

在webpack的dev開(kāi)發(fā)配置文件中加入如下代碼:

const CompressionWebpackPlugin = require('compression-webpack-plugin')
plugins: [
   new CompressionWebpackPlugin()
]

六、前端代碼優(yōu)化

• 合理使用v-if和v-show
• 使用定時(shí)器和回調(diào)函數(shù)等記得銷(xiāo)毀
• 避免意外的全局變量
• 適當(dāng)使用閉包避免內(nèi)存泄漏

總結(jié)

到此這篇關(guān)于vue項(xiàng)目首屏加載過(guò)慢的一些解決方案的文章就介紹到這了,更多相關(guān)vue首屏加載過(guò)慢內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論