vue 之后首页加载过慢，有些页面也是，app.js加载太慢了，该怎么优化？

Question

首页

其他页面

vue.config.js

Answer 1

提供一些思路，主要是app.js如何优化的问题：

1. 清理无用代码，2.5M太大了。比如是否引入了两个及以上的UI框架？是否有不少组件本是可以复用的，却通过复制实现的？UI框架是否可以只引入用到的部分而不是整体引入？更深入的话，就是第三方插件通过源码引入，删除所有不必要的第三方代码。
2. 清理首屏代码。将首屏不需要加载的js/css，全部通过异步加载的方式移出。
3. 确认使用gzip传输。

Answer 2

你这个没有使用路由懒加载吧，所有的业务代码都打包到app.js中了，可以使用webpack-bundle-analyze插件分析打包结果，如果是vue-cli生成的项目可以直接使用npm run build -- --report

Answer 3

最有效的措施：
1.nginx开启gzip传输。基本2M能压缩到500k，就是这么好用。
2.cdn保存静态资源。看你一个2m文件加载5秒 估计就是网速慢或者静态服务器带宽不行，换成cdn
3.分包

- 路由懒加载  
- ui组件按需加载 （利用treeshaking）
- 想vue这种大体积包可以从chunk-vender里面再拆出来
- 基本原则是单个文件最好不要超过500k

4.合理选择打包产物 如果是压缩混淆过的，并且不带sourcemap，肯定体积是最小的
5.代码层面的检查。 代码加载完了，不一定很快渲染出来，需要检查一下是否有阻塞渲染，避免过长白屏时间