? ? ?最近使用vue-cli3構建了一個小型的博客系統(tǒng)，完工之后，build打包出來發(fā)現(xiàn)一個chunk-vendors包就有1.1m，部署上去之后，訪問的時候，首屏加載非常慢。居然需要21s，體驗極差。

這是打包的結果截圖

根據(jù)這種情況，進行了一下優(yōu)化：

一、路由懶加載

? ? ? ?結合Vue的異步組件再結合webpack的代碼分割，我們可以輕松的實現(xiàn)路由懶加載。路由懶加載的實現(xiàn)有幾種方法，這里我就使用了 resolve。

? ? ? 這一種方法較常見。它主要是使用了 resolve?的異步機制，用 require?代替了

import,實現(xiàn)按需加載。如下：

修改router./index.js文件之前

?修改之后

進行一次打包 npm run build：

發(fā)現(xiàn)打包的結果有了變化，對比一下開始時候的的chunk-vendors，體積減小了大概700k，但是還是太大了。需要繼續(xù)優(yōu)化。

二、服務器開啟Gzip

? ? ? Gzip是GNU zip的縮寫，是一種壓縮技術。它將瀏覽器請求的文件先在服務器端進行壓縮，然后傳遞給瀏覽器，瀏覽器解壓之后再進行頁面的解析工作。在服務端開啟Gzip支持后，我們前端需要提供資源壓縮包。

? ? ??通過?CompressionWebpackPlugin插件進行打包的時候壓縮

安裝插件?cnpm i --save compression-webpack-plugin

? 修改vue.config.js文件：

打包效果如圖：

看到 Gzipped那一列，發(fā)現(xiàn)Gzip已經(jīng)把文件減少了2/3了。

接下來，就是需要開啟一下服務端的Gzip

修改nginx.conf配置文件：(一般在? /etc/nginx/ngin.conf)

找到該文件，配置如下：

修改之后，別忘了重啟一下nginx， 進入帶nginx的安裝目錄下(一般在：/usr/sbin),執(zhí)行 ./nginx -s reload。

到了這一步，gzip基本已經(jīng)優(yōu)化完成。

讓我們來繼續(xù)優(yōu)化

三 、去除console來減少文件大小

? 安裝?uglifyjs-webpack-plugin

cnpm install uglifyjs-webpack-plugin --save-dev

配置vue.config.js:

如果代碼中有很多l(xiāng)og，優(yōu)化就會很明顯了。

上面三種就是我使用的首屏加載優(yōu)化的方法，讓我們放到服務器上面看下效果

可以發(fā)現(xiàn)，相比之前的首屏加載速度還是提升了不少的。

小結

以上就是我使用的三種首屏優(yōu)化方式，當然，首屏優(yōu)化方式還不止這些，還可以用到的方法有：靜態(tài)資源、不常用改動的js庫可以使用CDN加速；ssr服務端渲染；通過webpack配置避免組件重復打包；從代碼層面去減少代碼量(提高代碼復用率)等等方法，需要以后去鉆研一下。

以上是關于vue首屏優(yōu)化的全部內(nèi)容，希望對大家的學習有所幫助。

總結

以上是生活随笔為你收集整理的vue路由懒加载_优化vue项目的首屏加载速度的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。