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添加配置

// 导入co