vue項(xiàng)目首屏加載時(shí)間優(yōu)化實(shí)戰(zhàn)
問(wèn)題
單頁(yè)面應(yīng)用的一個(gè)問(wèn)題就是首頁(yè)加載東西過(guò)多，加載時(shí)間過(guò)長(zhǎng)。特別在移動(dòng)端，單頁(yè)面應(yīng)用的首屏加載優(yōu)化更是繞不開(kāi)的話題。下面我會(huì)寫(xiě)出我在項(xiàng)目中做的一些優(yōu)化，希望大家能夠相互討論，共同進(jìn)步。
我的項(xiàng)目 vue-cli3構(gòu)建的，vue+vue-router+vuex，UI框架選用 element-ui，ajax方案選用 axios，服務(wù)器使用Nginx 。用到的這些技術(shù)都是現(xiàn)在用的比較廣泛的，看到這篇文章，我估計(jì)你和我用的技術(shù)應(yīng)該差不多。
第一步：webpack-bundle-analyzer 分析
首頁(yè)我們來(lái)看看沒(méi)有經(jīng)過(guò)任何優(yōu)化的打包分析，vue-cli3的項(xiàng)目直接 vue-cli-service build --report 就會(huì)生成一個(gè)report.html，打開(kāi)這個(gè)html就能看到，不是vue-cli3的項(xiàng)目需要自行安裝這個(gè)插件，參考鏈接， 點(diǎn)擊 。
如上圖所示在vendor比較大的文件有element，moment，echart，還有jquery，然后還有一些沒(méi)見(jiàn)過(guò)的vue-qriously這些組件，接下來(lái)我們來(lái)一步一步讓vendor變小
第二步：初步優(yōu)化
1. 仔細(xì)考慮組件是否需要全局引入
在我們的main.js，我發(fā)現(xiàn)有很多組件被全局引入，其中有些組件只有1，2個(gè)頁(yè)面用到，這些組件不需要全部引入
import ImageComponent from 'COMMON/imageComponent' import InfiniteLoading from 'COMMON/infiniteLoading' import SearchDialog from 'COMMON/SearchDialog' import BasicTable from 'COMMON/BasicTable' import VueQriously from 'vue-qriously' Vue.use(ImageComponent) Vue.use(InfiniteLoading) // 可以去除 Vue.use(SearchDialog) // 可以去除 Vue.use(BasicTable) // 可以去除 Vue.use(VueQriously) // 可以去除
上面一段代碼是我們main.js中的代碼，其中ImageComponent是用來(lái)處理圖片的，用到的頁(yè)面很多，其他的組件都只要較少的頁(yè)面用到，我們?cè)趍ain.js中刪除，移到具體的頁(yè)面中去。
2. 手動(dòng)引入 ECharts 各模塊
默認(rèn)引入 ECharts 是引入全部的```import * as ECharts from 'echarts' ```我們只需要部分組件，只需引入自己需要的部分。參考地址， 點(diǎn)擊
import VueECharts from 'vue-echarts/components/ECharts.vue' import 'echarts/lib/chart/line' import 'echarts/lib/chart/bar' import 'echarts/lib/chart/pie' import 'echarts/lib/component/title' import 'echarts/lib/component/tooltip' import 'echarts/lib/component/legend' import 'echarts/lib/component/markPoint'
3.使用更輕量級(jí)的工具庫(kù)
moment是處理時(shí)間的標(biāo)桿，但是它過(guò)于龐大且默認(rèn)不支持tree-shaking，而且我們的項(xiàng)目中只用到了moment(), format(), add(), subtract()等幾個(gè)非常簡(jiǎn)單的方法，有點(diǎn)大材小用，所以我們用 date-fns 來(lái)替換它，需要什么方法直接引入就行。
經(jīng)過(guò)上面的三步初步優(yōu)化，我們可以看到vendor.js變小了很多，去除了moment，我們項(xiàng)目之前echart就是按需加載的。
第三步：CDN優(yōu)化
進(jìn)過(guò)上面的優(yōu)化，發(fā)現(xiàn) Vue 全家桶以及 ElementUI 仍然占了很大一部分 vendors 體積，這部分代碼是不變的，但會(huì)隨著每次 vendors 打包改變 hash 重新加載。我們可以使用 CDN 剔除這部分不經(jīng)常變化的公共庫(kù)。我們將 vue，vue-router，vuex，axios，jquery，underscore ，使用CDN資源引入。國(guó)內(nèi)的CDN服務(wù)推薦使用 BootCDN
1.首先我們?cè)趇ndex.html中，添加CDN代碼
... <link rel="stylesheet"> </head> <body> <div id="app"></div> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> <script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.4/vue-router.min.js"></script> <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script> <script src="https://cdn.bootcss.com/element-ui/2.7.2/index.js"></script> <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script> <script src="https://cdn.bootcss.com/underscore.js/1.9.1/underscore-min.js"></script> </body> </html>
2.在vue.config.js中加入webpack配置代碼，關(guān)于webpack配置中的externals，請(qǐng) 參考地址
configureWebpack: {
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'element-ui': 'ELEMENT',
'axios': 'axios',
'underscore' : {
commonjs: 'underscore',
amd: 'underscore',
root: '_'
},
'jquery': {
commonjs: 'jQuery',
amd: 'jQuery',
root: '$'
}
},
}
3. 去除vue.use相關(guān)代碼
需要注意的是，通過(guò) CDN 引入，在使用 VueRouter Vuex ElementUI 的時(shí)候要改下寫(xiě)法。CDN會(huì)把它們掛載到window上，因此不再使用Vue.use(xxx)
也不在需import Vue from 'vue', import VueRouter from 'vue-router' 等。
剔除全家桶和Element-ui等只有，剩下的需要首次加載 vendors 就很小了。
使用 CDN 的好處有以下幾個(gè)方面
（1）加快打包速度。分離公共庫(kù)以后，每次重新打包就不會(huì)再把這些打包進(jìn) vendors 文件中。
（2）CDN減輕自己服務(wù)器的訪問(wèn)壓力，并且能實(shí)現(xiàn)資源的并行下載。瀏覽器對(duì) src 資源的加載是并行的(執(zhí)行是按照順序的)。
第四步：檢查Nginx 是否開(kāi)啟 gzip
如下圖所示，開(kāi)啟了gzip后js的大小比未開(kāi)啟gzip的js小2/3左右，所以如果沒(méi)開(kāi)啟gzip，感覺(jué)我們做的再多意義也不大，如何看自己的項(xiàng)目有沒(méi)有開(kāi)啟gzip，如下圖所示，開(kāi)啟了gzip，在瀏覽器的控制臺(tái)Content-Encoding一欄會(huì)顯示gzip，否則沒(méi)有。Nginx如果開(kāi)啟gzip，請(qǐng)自行搜索，或者叫服務(wù)端來(lái)開(kāi)啟。
第五步：檢查路由懶加載
路由組件如果不按需加載的話，就會(huì)把所有的組件一次性打包到app.js中，導(dǎo)致首次加載內(nèi)容過(guò)多，vue官方文檔中也有提到， 地址 。
{
name: 'vipBoxActivity',
path:'vipBoxActivity',
component(resolve) {
require(['COMPONENTS/vipBox/vipBoxActivity/main.vue'], resolve)
}
},
{
path: 'buyerSummary',
name: 'buyerSummary',
component: () => import('VIEWS/buyer/buyerSummary/index'),
},
上面的兩種引入組件的方法都是正確的，都能實(shí)現(xiàn)路由的懶加載。
最后
最后我們可以發(fā)現(xiàn)vendor.js的大小減少了很多。其中第一步到第三步我們項(xiàng)目中都沒(méi)做，第四步和第五步我們做了。如果讀者你沒(méi)做，一定要注意了。最后希望這篇文字能夠?qū)Υ蠹矣幸稽c(diǎn)點(diǎn)幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue?中如何使用?el-date-picker?限制只能選擇當(dāng)天、當(dāng)天之前或當(dāng)天之后日期的方法詳解
在Vue前端開(kāi)發(fā)中，使用 el-date-picker 組件進(jìn)行日期選擇是常見(jiàn)的需求，有時(shí)候我們需要限制用戶(hù)只能選擇當(dāng)天、當(dāng)天之前或當(dāng)天之后的日期，本文將詳細(xì)介紹如何使用 el-date-picker 組件實(shí)現(xiàn)這些限制，讓你能夠輕松應(yīng)對(duì)各種日期選擇場(chǎng)景,需要的朋友可以參考下2023-09-09
Vue列表循環(huán)從指定下標(biāo)開(kāi)始的多種解決方案
這篇文章主要介紹了Vue列表循環(huán)從指定下標(biāo)開(kāi)始的多種方案,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-04-04
vue使用tracking實(shí)現(xiàn)人臉識(shí)別/人臉偵測(cè)完整代碼
作為一個(gè)AI模型,人臉識(shí)別涉及到多個(gè)技術(shù)領(lǐng)域,下面這篇文章主要給大家介紹了關(guān)于vue使用tracking實(shí)現(xiàn)人臉識(shí)別/人臉偵測(cè)的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
這篇文章主要為大家介紹了vue實(shí)現(xiàn)列表展示的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
在vue項(xiàng)目中設(shè)置一些全局的公共樣式
這篇文章主要介紹了在vue項(xiàng)目中設(shè)置一些全局的公共樣式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
使用vue3搭建后臺(tái)系統(tǒng)的詳細(xì)步驟
這篇文章主要介紹了使用vue3搭建后臺(tái)系統(tǒng)的過(guò)程記錄,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
這15個(gè)Vue指令,讓你的項(xiàng)目開(kāi)發(fā)爽到爆
這篇文章主要介紹了這15個(gè)Vue指令,讓你的項(xiàng)目開(kāi)發(fā)爽到爆，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
Vue3初探之ref、reactive以及改變數(shù)組的值
在setup函數(shù)中,可以使用ref函數(shù)和reactive函數(shù)來(lái)創(chuàng)建響應(yīng)式數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于Vue3初探之ref、reactive以及改變數(shù)組值的相關(guān)資料,需要的朋友可以參考下2022-09-09
Vue Element前端應(yīng)用開(kāi)發(fā)之圖標(biāo)的維護(hù)和使用
在Vue Element前端應(yīng)用中，圖標(biāo)是必不可少點(diǎn)綴界面的元素，Element界面組件里面提供了很多常見(jiàn)的圖標(biāo)，因此考慮擴(kuò)展更多圖標(biāo)，引入了vue-awesome組件，它利用了Font Awesome的內(nèi)置圖標(biāo)，實(shí)現(xiàn)了更多圖標(biāo)的整合，可以在項(xiàng)目中使用更多的圖標(biāo)元素了2021-05-05
本文主要介紹了vue拖拽改變寬度的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07