問題

成都創(chuàng)新互聯(lián)主營(yíng)黃南州網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,app開發(fā)定制,黃南州h5微信小程序定制開發(fā)搭建,黃南州網(wǎng)站營(yíng)銷推廣歡迎黃南州等地區(qū)企業(yè)咨詢

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

如上圖所示在vendor比較大的文件有element，moment，echart，還有jquery，然后還有一些沒見過的vue-qriously這些組件，接下來我們來一步一步讓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是用來處理圖片的，用到的頁(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)桿，但是它過于龐大且默認(rèn)不支持tree-shaking，而且我們的項(xiàng)目中只用到了moment(), format(), add(), subtract()等幾個(gè)非常簡(jiǎn)單的方法，有點(diǎn)大材小用，所以我們用 date-fns 來替換它，需要什么方法直接引入就行。

經(jīng)過上面的三步初步優(yōu)化，我們可以看到vendor.js變小了很多，去除了moment，我們項(xiàng)目之前echart就是按需加載的。

第三步：cdn優(yōu)化

進(jìn)過上面的優(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代碼

...

 
 
  

  
  
  
  
  
  
  
 

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)代碼

需要注意的是，通過 CDN 引入，在使用 VueRouter Vuex ElementUI 的時(shí)候要改下寫法。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ù)器的訪問壓力，并且能實(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ù)端來開啟。

第五步：檢查路由懶加載

路由組件如果不按需加載的話，就會(huì)把所有的組件一次性打包到app.js中，導(dǎo)致首次加載內(nèi)容過多，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)幫助，也希望大家多多支持創(chuàng)新互聯(lián)。