vue項目首屏加載優化實戰

時間 2019-11-09

標籤 vue 項目加載優化實戰简体版

原文原文鏈接

問題

單頁面應用的一個問題就是首頁加載東西過多，加載時間過長。特別在移動端，單頁面應用的首屏加載優化更是繞不開的話題。下面我會寫出我在項目中作的一些優化，但願你們可以相互討論，共同進步。css

個人項目vue-cli3構建的，vue+vue-router+vuex，UI框架選用 element-ui，ajax方案選用 axios，服務器使用Nginx。用到的這些技術都是如今用的比較普遍的，看到這篇文章，我估計你和我用的技術應該差很少。html

第一步：webpack-bundle-analyzer 分析

首頁咱們來看看沒有通過任何優化的打包分析，vue-cli3的項目直接vue-cli-service build --report就會生成一個report.html，打開這個html就能看到，不是vue-cli3的項目須要自行安裝這個插件，參考連接，點擊。vue

如上圖所示在vendor比較大的文件有element，moment，echart，還有jquery，而後還有一些沒見過的vue-qriously這些組件，接下來咱們來一步一步讓vendor變小jquery

第二步：初步優化

1. 仔細考慮組件是否須要全局引入webpack

在咱們的main.js，我發現有不少組件被全局引入，其中有些組件只有1，2個頁面用到，這些組件不須要所有引入ios

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是用來處理圖片的，用到的頁面不少，其餘的組件都只要較少的頁面用到，咱們在main.js中刪除，移到具體的頁面中去。git

2. 手動引入 ECharts 各模塊github

默認引入 ECharts 是引入所有的```import * as ECharts from 'echarts' ```咱們只須要部分組件，只需引入本身須要的部分。參考地址，點擊web

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.使用更輕量級的工具庫ajax

moment是處理時間的標杆，可是它過於龐大且默認不支持tree-shaking，並且咱們的項目中只用到了moment(), format(), add(), subtract()等幾個很是簡單的方法，有點大材小用，因此咱們用 date-fns 來替換它，須要什麼方法直接引入就行。

通過上面的三步初步優化，咱們能夠看到vendor.js變小了不少，去除了moment，咱們項目以前echart就是按需加載的。

第三步：CDN優化

進過上面的優化，發現 Vue 全家桶以及 ElementUI 仍然佔了很大一部分 vendors 體積，這部分代碼是不變的，但會隨着每次 vendors 打包改變 hash 從新加載。咱們可使用 CDN 剔除這部分不常常變化的公共庫。咱們將vue，vue-router，vuex，axios，jquery，underscore，使用CDN資源引入。國內的CDN服務推薦使用 BootCDN

1.首先咱們在index.html中，添加CDN代碼

...
<link href="https://cdn.bootcss.com/element-ui/2.7.2/theme-chalk/index.css" 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配置代碼，關於webpack配置中的externals，請參考地址

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相關代碼

須要注意的是，經過 CDN 引入，在使用 VueRouter Vuex ElementUI 的時候要改下寫法。CDN會把它們掛載到window上，所以再也不使用Vue.use(xxx)

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

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

使用 CDN 的好處有如下幾個方面

（1）加快打包速度。分離公共庫之後，每次從新打包就不會再把這些打包進 vendors 文件中。

（2）CDN減輕本身服務器的訪問壓力，而且能實現資源的並行下載。瀏覽器對 src 資源的加載是並行的(執行是按照順序的)。

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

以下圖所示，開啓了gzip後js的大小比未開啓gzip的js小2/3左右，因此若是沒開啓gzip，感受咱們作的再多意義也不大，如何看本身的項目有沒有開啓gzip，以下圖所示，開啓了gzip，在瀏覽器的控制檯Content-Encoding一欄會顯示gzip，不然沒有。Nginx若是開啓gzip，請自行搜索，或者叫服務端來開啓。

第五步：檢查路由懶加載

路由組件若是不按需加載的話，就會把全部的組件一次性打包到app.js中，致使首次加載內容過多，vue官方文檔中也有提到，地址。

{
  name: 'vipBoxActivity',
  path:'vipBoxActivity',
  component(resolve) {
    require(['COMPONENTS/vipBox/vipBoxActivity/main.vue'], resolve)
  }
},

{
  path: 'buyerSummary',
  name: 'buyerSummary',
  component: () => import('VIEWS/buyer/buyerSummary/index'),
},

上面的兩種引入組件的方法都是正確的，都能實現路由的懶加載。

最後

最後咱們能夠發現vendor.js的大小減小了不少。其中第一步到第三步咱們項目中都沒作，第四步和第五步咱們作了。若是讀者你沒作，必定要注意了。最後但願這篇文字可以對你們有一點點幫組

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。