vue 大型应用内存泄漏改造经验

VUE项目内存泄漏:
场景1:页面结构复杂,内嵌子组件数量较多
场景2:高频使用(切换路由导致页面组件销毁创建过多)
结果:页面卡顿且浏览器窗口占用内存较高

检测:

相信不少前端开发在界面结构复杂的VUE大项目或者高频使用的VUE项目上,也曾遇到页面使用过程中卡顿问题,通常打开浏览器窗口任务管理器,查询当前窗口所占用内存是否很高。

浏览器运行使用的JS内存(仅指JS堆栈内存,见浏览器窗口任务管理器 【JavaScript使用的内存】为2G,当超过2G浏览器就会崩溃,而 【窗口占用内存】 包含了浏览器自身的部分,具体看电脑配置能承受多少,比如Mac笔记本,【窗口占用内存】18G,【JavaScript使用的内存】1.7G浏览器依然能承受,小卡顿,多次测试结果为【JavaScript使用的内存】1.8G的时候崩溃。一般配置的电脑(注意考虑的是用户群体)【窗口占用内存】1G多久会明显卡顿,所以当你项目遇到卡顿问题时候,请查看此项,另外还可以用浏览器打印堆栈内存快照,会发现闭包数量惊人,高达上百万,这说明已经存在较为严重的内存泄漏问题

该问题最终的解释可能如还未发布的VUE 3+ 修复说明,下图:

vue 大型应用内存泄漏改造经验_第1张图片
图片内容来源:https://mp.weixin.qq.com/s/2y...

此前接手一个项目,各种折腾各种尝试,花了一个多月,虽优化了一部分写法,翻遍很多网站,类似问题也很多,但没有一个靠谱的方案,最后解决方案(只花了一个周,也就每个页面拆除一个入口js文件):把路由去掉,把单页面入口打包改成了每个页面(原路由对应页面)一个入口打包(即是每个页面都对应了一个html,和相关的VUE依赖包),每次点击导航菜单是都在界面插入一个iframe,并打开对应界面,这样不仅能避免了页面组件过多的销毁-渲染,模拟成了浏览器多窗口模式,对于很多后台管理系统,也满足了多页面切换不刷新保存条件的需求,也能在改造过程中发现了代码拆分、移植时,哪些写法比较阻碍进度,对优化代码有一定帮助。
针对上述改造方案打包需要注意的就是解决node服务内存问题,默认32位系统0.7G左右,64位系统1.4G左右,多入口打包导致node运行内存需求较大,针对vue-cli 3+的,只需要找到node_modules/@vue/cli-service/bin/vue-cli-service.js   ,顶部有行代码 #!/usr/bin/env node ,在其后面手动添加 --max_old_space_size=4096  , 4096自行修改,即node服务能占用的最大内存,针对vue-cli 3以上,很多网友使用插件什么写入配置的存在问题,--max_old_space_size=4096后面几项是下划线,遇到插件写入中杠的无效,本方法亲测结果。
希望对现有VUE项目遇到内存泄漏问题的朋友提供改造帮助。

你可能感兴趣的:(vue.js)