序言
目前公司正在做的东西，还处于堆砌功能的阶段，对于优化几乎没时间、没有安排去做，导致线上的测试服务器开启缓慢，虽然是一个重量级app，但是app.js竟然能达到20mb等级。生产版本的vendors也巨大无比，打开页面需要半分钟，这是不能忍受的。
目前效果
优化前
优化后
在时间紧急，不改动很多代码的情况下，我们能做的事情其实有限，但是只要做了这些，效果还是相当好的，就这个app而言，首次加载节约6倍流量，速度提高3.5倍。
步骤
1. 开启懒加载
我们不需要在一开始就把整个app的所有内容都加载完，用户也不可能每一次都把所有功能都用遍，所以只加载会用到的东西是很有必要的。
做法：
可以很简单的直接改动routers.js即可。
/*一般的写法*/
component: () => import('@/view/.../***.vue')
/*改为*/
component: resolve => require(['@/view/.../***.vue'], resolve)组件也可以这么玩，详情可见
注意，这里有一个坑，在设置懒加载后有时会出现没有效果的情况，第一次还是把所有资源都加载了。这是因为默认prefetch，只需要删除prefetch即可
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
.set('_c', resolve('src/components'))
//关闭prefetch
config.plugins.delete('prefetch')2. 开启gzip压缩
2.1 在Nginx里开启
修改nginx.conf，添加以下内容
gzip on;
gzip_http_version 1.1;
gzip_comp_level 6;
gzip_types application/json application/javascript text/css application/css application/xml image/jpeg image/png image/x-icon;
gzip_comp_level 等级从1~9，但不建议选择过高，反而会因为压缩消耗宝贵的时间和资源。
如果图片事先压缩过，那么在gzip_types 可以选择不压缩image/*，节约资源。
2.2 配置webpack
目前这个工程基于vue-cli 3.x，在vue.config.js，module.exports中添加一条configureWebpack
configureWebpack: config => {
config.plugins = [...config.plugins,
new CompressionPlugin({
test: /\.js$|\.html$|.\css/,
threshold: 10240, // 对超过10k的数据压缩
deleteOriginalAssets: true // 删除源文件
})
]
},这样可以事先打包成gzip,两种方式都可以，我个人用第一种（纯粹是因为第二种方法有个坑，app.js在某种情况下会被识别成html）。
第一种对我来说更灵活，因为服务器我来管，代码上传到gitlab，ci跑完后，我只需要配置nginx反向代理那个端口再开个新端口就很方便可以看到效果。