linux vue node占用内存过大,vue 大型应用内存泄漏改造经验

VUE项目内存泄漏：

场景1：页面结构复杂，内嵌子组件数量较多

场景2：高频使用(切换路由导致页面组件销毁创建过多)

结果：页面卡顿且浏览器窗口占用内存较高

检测：

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

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

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

此前接手一个项目，各种折腾各种尝试，花了一个多月，虽优化了一部分写法，翻遍很多网站，类似问题也很多，但没有一个靠谱的方案，最后解决方案(只花了一个周，也就每个页面拆除一个入口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项目遇到内存泄漏问题的朋友提供改造帮助。