vue2首页加载慢的问题

本次开发的项目中使用了vue2.5.2和自带的vue-cli生成了前端的基本架构。随后在项目开发当中，添加了自己写的UI组件，和复杂的业务逻辑。整个项目包括10几个模块，算比较大的项目了。开发完了，build并部署到nginx服务器后，就遇到了一个非常明显的问题。那就是首页(登录页面)加载太慢，从开始加载到登录页面最终呈现出来，用了30多秒(其实也有原因是公司的网络不好!)，连项目经理都找来了，说：“为什么那么长的时间页面才出来，我们的项目还要部署到公网上去，让客户如何访问？”。自知理亏，于是赶紧开始研究首页加载满的问题。
通过chrome的timeline查看了一下，主要是vendor.js比较大，有1.8M之多，还有的图片比较大，比如登录的整个背景图片，有800K。按照如下的方法开始和浏览器间的速度之争。因为对nginx比较了解，所以先从nginx入手。

1、使用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秒之内。感觉很有成就感啊。继续开始下面的优化之旅。

2、使用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',
       ...
    }
}

3、使用vue-router的懒加载

我们使用的方法是：

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

4、实现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的地方引入该文件。

5、图片的压缩

美工最初交给前端的图是png格式的，比较大。因此直接联系美工修改为jpg格式，图的大小马上减少很多。另外图片还可以去下面这个网上压缩一下：https://tinypng.com/
经过上述的几步，首页的加载速度已经比较快了，项目经理也比较满意。初步结束了首页加载慢的问题的研究。