Vue项目首页加载慢问题优化

1. vue-router懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

 {
      path: "/index",
      component: resolve => require(["./views/home/Index.vue"], resolve)
    },

2. 去除map文件

npm run build编译之后，我们查看编译生成的文件，发现有很多.map文件，这些文件也占了不小的空间。.map文件的作用是帮助编译后的代码调试，但是我们上线的代码已经调试完成，所以上线时可以不生成.map文件。

在vue.config.js添加配置

//去除打包的map文件
productionSourceMap: false,

3. Gzip压缩

gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。

3.1 前端生成gz文件

webpack在打包时可以借助 compression webpack plugin 实现gzip压缩，首先需要安装该插件：

npm i -D compression-webpack-plugin

在vue.config.js添加配置

// 导入compression-webpack-plugin
const CompressionWebpackPlugin = require("compression-webpack-plugin");
// 定义压缩文件类型
const productionGzipExtensions = ["js", "css"];

configureWebpack: {
    //开启gzip压缩,减少为文件体积，提高加载速度
    plugins: [
      new CompressionWebpackPlugin({
        filename: "[path].gz[query]",
        algorithm: "gzip",
        test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"), //匹配文件名
        threshold: 10240, //对10K以上的数据进行压缩
        minRatio: 0.8,
        deleteOriginalAssets: false //是否删除源文件
      })
    ],
  },

普通js文件与gz文件对比：

3.2 后端开启Gzip

这里后端服务器使用的是Tomcat。修改Tomcat的server.xml文件。在该Connector 上设置compression=”on”开启压缩支持（关闭为off，默认关闭）。

 <Connector port="8080" protocol="HTTP/1.1"
               connectionTimeout="20000"
               redirectPort="8443" 
			   compression="on" />

查看服务器是否开启Gzip压缩，可以直接查看响应文件的文件头Content-Encoding 部分。

使用Tomcat作为服务器的话会发现开启gzip后有些文件响应头Content-Encoding是gzip，有些不是。
这个因为tomcat对于大于48Kb的文件为了节省cpu就不压缩。添加useSendfile="false"后，就可以被正常压缩了。