vue大型项目后台管理系统单页应用性能如何优化？

Question

背景

有一个迭代了快2年多的vue单页管理系统，基于vue-cli2创建，采用vue2+vue-router+vuex+element-ui1。
因为一些历史以及迭代多次的原因，现在项目内有接近200的页面以及200+的组件，打包后的js因为未做懒加载的缘故，整个app.js 2.7mb, vendor.js 2.1mb

遇到的问题

因为管理系统是企业内部使用，用户量不是很大，对首屏加载需求不高，估加载速度不是很介意。
现在问题是因为企业一些电脑性能不高，导致使用系统时候会感觉浏览器变慢（甲方是这么表达的）

猜想的原因以及设想的解决方案

我理解是不是因为js巨大导致浏览器性能问题（因为我开发机是mac，直接运行的时候加载的开发版本是为压缩版本，未压缩的app.js有40多mb，不过我电脑开发倒是没啥卡顿之类的感觉，因为这个有40多mb，特别大，所以我很怀疑是不是js过大，造成浏览器解析渲染变慢），现打算由单页应用改造为多入口应用，因为系统可以大致上划分为四五个的大模块

不清楚的点

1. 首先我想知道js巨大会不会导致性能不高的电脑的浏览器运行变慢，还是说卡顿变慢是代码优化的问题，例如内存泄露之类的（是不是需要直接使用客户的浏览器进行性能分析找原因）
2. 如果改造成多页面应用之后会不会减轻浏览器负担（懒加载，或者路由异步加载我知道，不过1是因为甲方暂时没有首屏加载的需求，2是我觉得异步加载应该不会减轻浏览器负担吧，因为用户如果进入的页面多了，还是会加载很多js文件，最终跟单页应该区别不大吧，还是说我理解有误）

希望有相关经验的大佬指点一下

Answer 1

组件有没有开启路由懒加载功能呢 类似下面这样

component: () => import('@/views/dictManagement/basicProperty'),

可以降低js主文件的大小

Answer 2

路由懒加载啥的，只能说让你首屏时间变快，题主已经说了不在乎首屏了，我觉得问题跟单页面也无关，我们的项目最近也在优化性能，推荐你用浏览器带个性能检测工具试一下，逐个看看哪个操作会导致页面变卡，然后有针对的去优化

最后补充一句，js文件的大小，我觉得跟性能无关，只要你加载出来了，就没问题

Answer 3

你的用户反馈是说"使用系统感觉浏览器变慢",而不是"白屏很久",说明是性能问题而不是代码拆分的问题.

性能问题与代码大小无关,一行死循环代码就能把浏览器搞崩.

所以你应该检查是否有内存泄漏的地方.

webApp由于不会跳页,要特别注意这点,传统多页即便加了监听不释放,设置定时器不关等等不规范的操作,只要一跳页就全部被掩盖了,但如果放到webApp里就会暴露出来.

另一个用了vue-router,多半会使用keep-alive,这个也是吃内存大户,只是官方还没有提供手动释放被缓存页面组件的API,有能力的话建议修改源码或者通过其他hack方式解决.简单粗暴的办法就是去掉keep-alive.

对于一些可预料的耗性能操作,可以使用webworker解决.

Answer 4

适用谷歌浏览器的工具，可以找到具体有问题的操作，看下耗时的是什么，应该是可以定位到问题的。

Answer 5

可以参考个人博客 优化 web 应用程序性能方案总结

补充一下

代码多会不会影响性能，当然会啊。下载不要时间？解析不要时间？你说这些都ok了？

虚拟内存了解下。你的代码和依赖库是占有内存的。依赖库是不是被挂载到 vue 上了，内存怎么办？出现内存不够用，就需要把数据一直进行 内存和硬盘的交换。同时，频繁的垃圾回收会把低性能的pc搞炸的。

记得早年 ie 还有个骚操作是如果占有内存超过多少M,就强制 gc。结果人家代码平常就是持有那么多的内存，就一直GC。搞得人家网站完全不能用。

后端代码多不会出现问题，因为他们有高性能服务器支持。而且人家编译都把基本优化做了。更何况现在也是微服务横行。那里不行改哪里。

前端抛出一个 gzip 压缩后 2m 的js真的不是闹着玩的。除非你真的能完全控制客户的电脑和浏览器。

你js没做，css估计也不太可能做，css 关乎渲染，也要内存的。

代码量减少可以解决很多问题的。并不是仅仅只是首屏优化。为什么很多新的前端库在提及自己的优势 一定会聊一句，对比同类，仅仅只有 x k。意味着更少的 加载 解析 以及 内存(不一定，但是很大可能)。

对了，看评论，曾聊到 echarts 的体量。echart 压缩 + gzip 之后最大 240k，更不用说 simple 版本仅仅 150k 了。同时 echarts 目前也是支持了定制化下载。也是做了拆分。