溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

vue項(xiàng)目首屏加載時(shí)間優(yōu)化實(shí)戰(zhàn)

發(fā)布時(shí)間：2020-09-28 09:34:21 來(lái)源：腳本之家 閱讀：178 作者：面包大蝦 欄目：web開發(fā)

問(wèn)題

單頁(yè)面應(yīng)用的一個(gè)問(wèn)題就是首頁(yè)加載東西過(guò)多，加載時(shí)間過(guò)長(zhǎng)。特別在移動(dòng)端，單頁(yè)面應(yīng)用的首屏加載優(yōu)化更是繞不開的話題。下面我會(huì)寫出我在項(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)看看沒有經(jīng)過(guò)任何優(yōu)化的打包分析，vue-cli3的項(xiàng)目直接 vue-cli-service build --report 就會(huì)生成一個(gè)report.html，打開這個(gè)html就能看到，不是vue-cli3的項(xiàng)目需要自行安裝這個(gè)插件，參考鏈接， 點(diǎn)擊 。

vue項(xiàng)目首屏加載時(shí)間優(yōu)化實(shí)戰(zhàn)

如上圖所示在vendor比較大的文件有element，moment，echart，還有jquery，然后還有一些沒見過(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)替換它，需要什么方法直接引入就行。

vue項(xiàng)目首屏加載時(shí)間優(yōu)化實(shí)戰(zhàn)

經(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í)候要改下寫法。CDN會(huì)把它們掛載到window上，因此不再使用Vue.use(xxx)

也不在需import Vue from 'vue', import VueRouter from 'vue-router' 等。

vue項(xiàng)目首屏加載時(shí)間優(yōu)化實(shí)戰(zhàn)

剔除全家桶和Element-ui等只有，剩下的需要首次加載 vendors 就很小了。

使用 CDN 的好處有以下幾個(gè)方面

（1）加快打包速度。分離公共庫(kù)以后，每次重新打包就不會(huì)再把這些打包進(jìn) vendors 文件中。

（2）CDN減輕自己服務(wù)器的訪問(wèn)壓力，并且能實(shí)現(xiàn)資源的并行下載。瀏覽器對(duì) src 資源的加載是并行的(執(zhí)行是按照順序的)。

第四步：檢查Nginx 是否開啟 gzip

如下圖所示，開啟了gzip后js的大小比未開啟gzip的js小2/3左右，所以如果沒開啟gzip，感覺我們做的再多意義也不大，如何看自己的項(xiàng)目有沒有開啟gzip，如下圖所示，開啟了gzip，在瀏覽器的控制臺(tái)Content-Encoding一欄會(huì)顯示gzip，否則沒有。Nginx如果開啟gzip，請(qǐng)自行搜索，或者叫服務(wù)端來(lái)開啟。

vue項(xiàng)目首屏加載時(shí)間優(yōu)化實(shí)戰(zhàn) 

vue項(xiàng)目首屏加載時(shí)間優(yōu)化實(shí)戰(zhàn)

第五步：檢查路由懶加載

路由組件如果不按需加載的話，就會(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)目中都沒做，第四步和第五步我們做了。如果讀者你沒做，一定要注意了。最后希望這篇文字能夠?qū)Υ蠹矣幸稽c(diǎn)點(diǎn)幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手