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/通过上述的几步，首页的加载速度已经比较快了，项目经理也比较满意。初步结束了首页加载慢的问题的研究。