最终方案直接跳到最后即可
1、寻找问题思路
1.1 思路一：页面内容多
页面内容多，引入了很多组件打包体积大所以加载时缓慢；
尝试解决方案：对所有项目进行了压缩
- 压缩可以减少50%-70%的打包体积
- 减少网络传输时间
结果：
整体加载速度上略有提升，但是切换页面还是存在卡顿问题
1.2 思路二：内存泄漏导致
发现了内存问题，此时猜测可能是内存泄漏导致页面卡顿，因为内存一直在堆积；
排查内存方案：1、memory； 2、Performance；
memory
可以分析内存快照找到内存泄漏的地方，但是经过大约2d的摸索始终未找到原因。。。。。。
Performance
Performance可以录制用户操作，从而分析每一帧存在的问题
经录制分析只能找到在点击事件上耗费了大量的时间，但是不能精准定位到问题
其实能够具体分析到是children上占用了大量时间，刚开始并未注意到
尝试解决方案：
- 使用Object.freeer方法对大数据进行冻结，防止对不必要的数据进行proxy
并未解决切换页面卡顿问题，不适用此时情况，但是可以解决其他情况时的切换页面卡顿问题：样件管理目前数据4000+，切换BOM页面会卡顿，将数据冻结后可以明显解决这一问题，因为在切换页面时需要进行数据销毁，即浏览器的GC垃圾回收机制，数据越大回收越慢。
1.3 思路三：某个代码片段是长任务，堵塞了主页面的渲染
js是单线程的，所以一旦某个某个任务过长就会堵塞。开始对测试用例页面的代码进行删减
经过九九八十一次尝试，最终定位到高级筛选组件上，开始分析此组件，得到以下验证
-
用户列表未采用虚拟下拉列表
- 此组件是子组件，vue声明周期会先加载子组件
尝试解决方案：
- 将用户下拉列表改为虚拟。
比之前略微提升
此时还是存在卡顿问题，直接将此组件删除，此时发现基本上秒切换，继续排查。。。。，开始对此组件的代码开始逐步删除，最终发现遍历formItem也会影响加载速度，而且里边有大量的判断。
尝试解决方案：
-
改为异步组件
- 异步组件会被单独打包成一个文件，然后异步引入，不会影响主页面渲染
此时发现切换很流畅，纵享丝滑
2、最终解决方案
- 大数据采用虚拟下拉框
- 第一时间不会呈现给用户的页面进行异步加载，vue的defineAsyncComponent，防止堵塞主页的渲染
- 大数据采用Object.freere进行数据冻结，防止垃圾回收占用大量时间
- 采用静态资源压缩，减少网络传输时间
