注：本文只适用于 vue-cli 初始化的项目或依赖于 webpack 打包的项目 *

首屏加载优化

背景：基于vue-cli3创建的项目编译后发布测试，发现有个文件chunk-vendors文件大小达到846kb，加载耗时达到7.38s左右，首屏白屏时间过长。

1.png

针对这个进行以下优化：

路由懒加载
这个我在项目里已经做到了，但是针对这个汇总再简单总结下

{
      path: '/',
      name: 'home',
      component: () => import(/* webpackChunkName: "home" */ './views/home/index.vue'),
      meta: { isShowHead: true }
}

我这里是结合ES 提出的 import方法和webpack魔法注释 /* webpackChunkName: "group-foo" */轻松实现路由懒加载

开启服务器Gzip
尽管第一步已经做到了，但仍然有846k的大小，所以需要继续优化。开启Gzip就是一种压缩技术，需要前端提供压缩包，然后在服务器开启压缩，文件在服务器压缩后传给浏览器，浏览器解压后进行再进行解析。
首先安装webpack提供的compression-webpack-plugin进行压缩,然后在vue.config.js：

const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
......
plugins: [
      new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      })
]
....

然后在Nginx配置

    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

此时我们再看chunk-vendors文件大小达到227k，耗时1.7s

2.jpg

启动CDN加速
我们继续采用cdn的方式来引入一些第三方资源，就可以缓解我们服务器的压力，原理是将我们的压力分给其他服务器点。
首先在index.html中：

然后在vue.config.js中通过externals外部扩展，可以忽略不需要打包的库：

module.exports = {
 ......
  configureWebpack: (config) => ({
    externals: {
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'axios': 'axios',
      'element-ui': 'ElementUI'
    }
 })
......
}

main.js

import Vue from 'vue'  // 下面有用到所以没注释
// import ElementUI from 'element-ui'  // 注释
// import axios from 'axios'  // 注释

store.js

// import Vue from 'vue'  // 注释
// Vue.use(Vuex)    // 注释
import Vuex from 'vuex'

router.js

// import Vue from 'vue'  // 注释
// Vue.use(Router)  // 注释
import Router from 'vue-router'

这个时候我们再来看下效果：

3.png

可以看到chunk-verdors文件已减小到20.9kb，耗时172ms，基本项目秒开无压力了。

其他优化点
——在vue.config.js中设置productionSourceMap:false这样打包后map文件就没了，map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。如果不需要的话可以这样操作。
——修改uglifyOptions去除console来减少文件大小，如果代码中打了很log，这个优化还是有点效果的。

代码层面优化

针对vue项目代码层面优化就得回归到.vue文件中对HTML、CSS、javascript进行优化，那么主要就是

VUE项目优化汇总

首屏加载优化

代码层面优化