在Vue項目中,引入到工程中的所有js、css檔案,編譯時都會被打包進vendor.js,浏覽器在加載該檔案之後才能開始顯示首屏。若是引入的庫衆多,那麼vendor.js檔案體積将會相當的大,影響首屏的體驗。可以看個例子:
這是優化前的頁面加載狀态:執行
npm run build
打包項目,出來的vendeor.js檔案,基本都是1M以上的的巨大檔案,沒有使用者能忍受5s以上的loading而不關閉頁面的,如圖所示:
當項目在挂載到伺服器上,平均都是10S以上加載出來,好家夥這加載時間,仿佛過了半個世紀,很煩人,心态boom, 開發者甚至都有種想砸電腦的沖動(·#*@#¥……&*)!
我們先來分析下前端加載速度慢原因
1. 首先安裝webpack的可視化資源分析工具,指令行執行:
複制代碼
2. 然後在webpack的dev開發模式配置中,引入插件,代碼如下:
'webpack-bundle-plugin').BundleAnalyzerPlugin
3. 最後指令行執行
npm run build --report
, 浏覽器會自動打開分析結果,如下所示:
可以看到vue全家桶相關依賴占用了很大的空間,對webpack的建構速度和網站加載速度都會有比較大的影響。單頁應用會随着項目越大,導緻首屏加載速度很慢,針對目前所暴露出來的問題,有以下幾種優化方案可以參考:
有針對性的優化方案
一、對于第三方js庫的優化,分離打包
生産環境是内網的話,就把資源放内網,通過靜态檔案引入,會比node_modules和外網CDN的打包加載快很多。如果有外網的話,可以通過CDN方式引入,因為不用占用通路外網的帶寬,不僅可以為您節省流量,還能通過CDN加速,獲得更快的通路速度。但是要注意下,如果你引用的CDN 資源存在于第三方伺服器,在安全性上并不完全可控。
目前采用引入依賴包生産環境的js檔案方式加載,直接通過window可以通路暴露出的全局變量,不必通過import引入,Vue.use去注冊
在webpack的dev開發配置檔案中, 加入如下參數,可以分離打包第三方資源包,key為依賴包名稱,value是源碼抛出來的全局變量。如下圖所示,可以看到打包後vue相關資源包已經排除在外了。對于一些其他的工具庫,盡量采用按需引入的方式。
externals: {
vue: 'Vue',
vuex: 'Vuex',
'vue-router': 'VueRouter',
axios: 'axios',
'element-ui': 'ELEMENT'
}複制代碼
二、vue-router使用懶加載
在通路到目前頁面才會加載相關的資源,異步方式分子產品加載檔案,預設的檔案名是随機的id。如果在output中配置了chunkFilename,可以在component中添加WebpackChunkName,是為了友善調試,在頁面加載時候,會顯示加載的對應檔案名+hash值,如下圖:
{
path: '/Login',
name: 'Login',
component: () = >import( /* webpackChunkName: "Login" */ '@/view/Login')
}複制代碼
三、圖檔資源的壓縮,icon資源使用雪碧圖
嚴格說來這一步不算在編碼技術範圍内,但是卻對頁面的加載速度影響很大。對于所有的圖檔檔案,都可以在一個叫tinypng的網站上去壓縮一下。網址:tinypng.com/,對頁面上使用到的icon,可以使用線上字型圖示,或者雪碧圖,将衆多小圖示合并到同一張圖上,用以減輕http請求壓力。然後通過操作CSS的background屬性,控制背景的位置以及大小,來展示需要的部分。
四、開啟gizp壓縮
gizp壓縮是一種http請求優化方式,通過減少檔案體積來提高加載速度。html、js、css檔案甚至json資料都可以用它壓縮,可以減小60%以上的體積。前端配置gzip壓縮,并且服務端使用nginx開啟gzip,用來減小網絡傳輸的流量大小。
指令行執行:
npm i compression-webpack-plugin -D
在webpack的dev開發配置檔案中加入如下代碼:
'compression-webpack-plugin')
啟用gzip壓縮打包之後,會變成下面這樣,自動生成gz包。目前大部分主流浏覽器用戶端都是支援gzip的,就算小部分非主流浏覽器不支援也不用擔心,不支援gzip格式檔案的會預設通路源檔案的,是以不要配置清除源檔案。
配置好之後,打開浏覽器通路線上,F12檢視控制台,如果該檔案資源的響應頭裡顯示有Content-Encoding: gzip,表示浏覽器支援并且啟用了Gzip壓縮的資源
五、webpack相關配置優化
(1)使用uglifyjs-webpack-plugin插件代替webpack自帶UglifyJsPlugin插件來壓縮JS檔案;生産環境關閉源碼映射,一方面能減少代碼包的大小,另一方面也有利于系統代碼安全;清除列印日志和debugger資訊;配置SplitChunks 抽取公有代碼,提升你的應用的性能
(2)使用mini-xss-extract-plugin提取CSS 到單獨的檔案, 并使用optimize-css-assets-webpack-plugin來壓縮CSS檔案 。
注:具體相關webpack配置請點選juejin.im/post/5d2070…檢視第一篇webpack文章,注釋很詳細喲。
六、前端頁面代碼層面的優化
(1)合理使用v-if和v-show
(2)合理使用watch和computed
(3)使用v-for必須添加key, 最好為唯一id, 避免使用index, 且在同一個标簽上,v-for不要和v-if同時使用
(4)定時器的銷毀。可以在beforeDestroy()生命周期内執行銷毀事件;也可以使用$once這個事件偵聽器,在定義定時器事件的位置來清除定時器。詳細見vue官網
最終優化後的效果如下圖:vendor.js檔案從1M以上優化到256K左右,體積減少接近80%,排除伺服器影響的因素,界面渲染速度基本都在1s左右,達到秒開效果,比之前快
了太多,體驗一下就上來了嘻嘻。
結語:前端性能優化至關重要,以後有遇到更好的其他方案會繼續補充進來。你也可以在評論區留言探讨,有錯誤不足的地方歡迎大佬指出。