前言

因為我的一個vue項目首頁打開加載了好久，所以決定優(yōu)化一下。發(fā)現(xiàn)是打包體積太大了，頁面才加載慢主要是第三方庫。
優(yōu)化著優(yōu)化著就想要更好一點，于是逛博客搜索，參照了幾個博主的解決方法整理出一下幾點。?

一、防止編譯文件中出現(xiàn)map文件

在 config/index.js 文件中將productionSourceMap的值設置為false.

二、使用CDN加載第三方庫

在打包后發(fā)現(xiàn)chunk-vendor.js 文件占用內存特別大，這里面主要是使用的一些第三方庫，例如 vue-router,axios，elementUI ，echarts等文件。

通過在index.html 中直接引入第三方資源來緩解我們服務器的壓力，其原理是將我們的壓力分給了其他服務器站點。

推薦外部的庫文件使用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,寫上你已經在index.html中引用了cdn的庫。

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

可以用精靈圖等減少http請求

四、vue-router 路由懶加載

懶加載即組件延遲加載，通常vue的頁面在運行后進入都會有一個默認的頁面，而其他未顯示的頁面只有在點擊后才需要加載出來，實現(xiàn)按需請求，從而減少第一次加載的時候耗時。

懶加載路由配置：

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

五、gzip壓縮

前端配置gzip壓縮，并且服務端使用nginx開啟gzip，用來減小網絡傳輸的流量大小。

第一步

命令行執(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
• 使用定時器和回調函數等記得銷毀
• 避免意外的全局變量
• 適當使用閉包避免內存泄漏

總結

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

最新評論