vue2首頁加載慢的問題

本次開發的項目中使用了vue2.5.2和自帶的vue-cli生成了前端的基本架構。隨後在項目開發當中，添加了本身寫的UI組件，和複雜的業務邏輯。整個項目包括10幾個模塊，算比較大的項目了。開發完了，build並部署到nginx服務器後，就遇到了一個很是明顯的問題。那就是首頁(登陸頁面)加載太慢，從開始加載到登陸頁面最終呈現出來，用了30多秒(其實也有緣由是公司的網絡很差!)，連項目經理都找來了，說：「爲何那麼長的時間頁面纔出來，咱們的項目還要部署到公網上去，讓客戶如何訪問？」。自知理虧，因而趕忙開始研究首頁加載滿的問題。
經過chrome的timeline查看了一下，主要是vendor.js比較大，有1.8M之多，還有的圖片比較大，好比登陸的整個背景圖片，有800K。按照以下的方法開始和瀏覽器間的速度之爭。由於對nginx比較瞭解，因此先從nginx入手。

一、使用nginx的gzip壓縮

使用nginx的gzip壓縮，須要使用gzip_static模塊。在sbin下運行nginx -V查看是否開啓了這個模塊。開啓gzip_static模塊後，nginx會自動查找文件中有沒有.gz的文件。
在nginx的conf文件中增長以下的代碼：

gzip on;
    gzip_static on;
    gzip_disable "msie6";
    gzip_min_length 100k;
    gzip_buffers 4 16k;
    gzip_comp_level 3;
    gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary off;

在vue的webpack config/index.js中修改

productionGzip: true

vue默認沒有安裝相應的插件，運行以下的安裝命令：

npm install --save-dev compression-webpack-plugin

再次從新build後，就會發現不少.gz的文件。而vendor.js從1.8M直接壓縮到800多K。加載速度也縮短到10秒以內。感受頗有成就感啊。繼續開始下面的優化之旅。

二、使用CDN來加載

將比較大的文件，如vue、vue-router、vuex、axio用cdn中的文件代替，而不是直接打包到vendor中。
（1）在index.html中引入js文件

<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>

（2）去掉這些第三方js的import
（3）把第三方的js文件從打包文件中去掉
寫在webpack的externals裏面

module.exports = {
    ...
    externals:{
       'vue': 'Vue',
       ...
    }
}

三、使用vue-router的懶加載

咱們使用的方法是：

const User = r => require.ensure([], () => r(require('@/pages/user/user.vue')), 'chunkname4')

四、實現elment-ui和echarts的按需加載

本項目雖然有不少的組件是本身寫的。但仍是用了少數的幾個element-ui組件。而echarts只用到了折線圖和環形圖。因此能夠利用按需加載來進一步縮小文件的體積。
（1）element ui 的按需加載：
安裝babel-plugin-component

npm install babel-plugin-component - D

修改.babelrc

{
  "presets": [
    ["env", {
      "modules": false
    }],
    "es2015","stage-2"
  ],
  "plugins": ["transform-runtime",
  [
        "component",
        {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-chalk"
        }
      ]],

在main.js中按需引入

import { Menu, MenuItem,InputNumber,DatePicker,Popover,Badge,Select,Option } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'

（2）echarts的按需引入
安裝 babel-plugin-equire

npm i babel-plugin-equire -D

在.babelrc中添加該插件

"plugins": [
   ....
 "equire"],

建立了一個公用的文件initEcharts.js

const echarts = equire([
  'line',
  'lines',
  'pie',
  'bar',
  'tooltip',
  'title'
])

export default echarts

在須要使用echarts的地方引入該文件。

五、圖片的壓縮

美工最初交給前端的圖是png格式的，比較大。所以直接聯繫美工修改成jpg格式，圖的大小立刻減小不少。另外圖片還能夠去下面這個網上壓縮一下：https://tinypng.com/通過上述的幾步，首頁的加載速度已經比較快了，項目經理也比較滿意。初步結束了首頁加載慢的問題的研究。