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项目遇到内存泄漏问题的朋友提供改造帮助。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/411397.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【python+selenium自动化】使用pytest+allure2完成自动化测试报告的输出

pytest的pytest-html插件是一个很方便的测试报告,运行自动化测试用例时,pytest后加上参数即可 allure是一个测试报告的框架,相比pytest-html的优势就是“逼格” 他的优点除了好看,还有几点: 1、可以把测试的步骤都加到…

windows2008配置来

windows2008配置来 <启用主题> 进入服务面板启用therms服务 <取消必须输入密码登录系统的方法>“运行”中输入&#xff1a;“gpedit.msc“&#xff0c;“计算机配置”→“WINDOWS设置”→“安全设置”→“帐户策略”→“密码策略”。在这个路径下找到“密码必须符合…

[html] 使用svg画出一个矩形

[html] 使用svg画出一个矩形 <svg width"400" height"200" viewbox"0 0 2000 1000"><rect x"200" y"100" width"400" height"200" style"fill: blue"></rect> </svg&g…

linux内核启动失败,裁剪后montavistalinux内核 nfs启动失败

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼DaVinci I2C WARNING: i2c: NACK detectedDaVinci I2C WARNING: i2c: RAR detectedDaVinci I2C WARNING: i2c: NACK detectedDaVinci I2C WARNING: i2c: RAR detectedDaVinci I2C WARNING: i2c: NACK detectedDaVinci I2C WARNING:…

使用XSLT制作HTML邮件模板并发送

之前有写过能发送邮件的小工具&#xff0c;基本做法就是先在代码中写死一封HTML邮件的格式&#xff0c;然后用适当的方法取得外部的几个值填到预设的参数里&#xff0c;最后把合体后的string类型邮件发出去。简单的邮件还好&#xff0c;当内容稍微多一点&#xff0c;比如输出数…

pycharm常用快捷键详解,让你编程 事半功倍。

pycharm常用快捷键1、编辑&#xff08;Editing&#xff09;Ctrl Space &#xff1a; 基本的代码完成&#xff08;类、方法、属性&#xff09; Ctrl Alt Space 快速导入任意类 Ctrl Shift Enter&#xff1a; 语句完成 Ctrl P 参数信息&#xff08;在方法中调用参…

[html] 对于写一个页面布局,html/css/js这三者你是先写哪个后写哪个?

[html] 对于写一个页面布局&#xff0c;html/css/js这三者你是先写哪个后写哪个&#xff1f; 快捷键创建模板htmlcss写出结构写js做交互个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣…

linux ftp配置chroot,vsftp chroot 设置

在vsftpd服务器的默认设置中&#xff0c;本地用户可以切换到主目录以外的目录进行浏览访问&#xff0c;这样对于服务器来说是不太安全的&#xff0c;因为任何用户可以随时浏览到别的用户的私有信息&#xff0c;下面介绍如何使用chroot选项来防止这种情况的发生。与该功能相关的…

nginx原配置

#原配置server {listen 80;server_name localhost;#charset koi8-r;#access_log logs/host.access.log main;location / {root html;index index.html index.htm;}#error_page 404 /404.html;# redirect server error pages to the static page /50x…

[html] 你觉得写Html难吗?难在哪?为什么?

[html] 你觉得写Html难吗&#xff1f;难在哪&#xff1f;为什么&#xff1f; 合理应用h5新标签和新特性 而不只是divdiv个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面…

优麒麟在linux下安装教程,在优麒麟Ubuntu Kylin系统中安装百度网盘Linux版.deb的方法...

本文介绍在优麒麟Ubuntu Kylin操作系统中安装百度网盘Linux版.deb的方法&#xff0c;可用在优麒麟及 Ubuntu 19.04/18.04上&#xff0c;当前百度网盘Linux版的版本号是Linux V2.0.1&#xff0c;目前下载只提供rpm格式&#xff0c;可看百度网盘Linux版发布&#xff0c;支持中标麒…

js使用正则实现表单验证

## 定义javascript代码 定义方法 定义正则表达式 布局 转载于:https://www.cnblogs.com/wjy0928/p/10885992.html

WCF議程

WCF是下一代開發平台WinFX中三大利劍之一(WPF﹐WWF﹐WCF﹐簡要介紹之) WinFx現改名為.NET Framework 3.0,它包括.NET Frameword2.0, WPF,WWF,WCF等 WPF(Windows Presentation Foundation)是微软下一代的图形表现系统&#xff0c; 能够充分发挥个人电脑强大的图形运算能力&…

[html] HTML5的Server-Sent和WebSocket如何选择哪一个?

[html] HTML5的Server-Sent和WebSocket如何选择哪一个&#xff1f; 看具体的业务场景个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题

自觉培养“舆商” 争做成功网商

近日&#xff0c;看到一位自称是网商故事讲述者的“上海伟雅”不久前在电脑报新创作时代主题研讨会上的精彩演讲。他讲述了自己写网商故事所经历的三个阶段&#xff0c;以及每个阶段的不同价值&#xff0c;并提出了“互联网不允许等待”等观点。笔者从中很受启迪&#xff0c;由…

吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版:设定文本对齐,段落中超出屏幕部分文字自动换行...

<!DOCTYPE html> <html><head><title>菜鸟教程(runoob.com)</title> <meta name"viewport" content"widthdevice-width, initial-scale1" charset"utf-8"><link rel"stylesheet" href"ht…

linux 一行代码,一行代码终结你的Linux~

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼分类&#xff1a;代码::() { :|:& }; :为什么这个东西会让你的系统死掉&#xff1f;&#xff1f;&#xff1f;有人执行了然后问我让我们来分析一下这段代码&#xff0c;我改一下格式&#xff0c;但内容是一样的 代码::() # 定义…

[html] HTML5的Server-Sent和WebSocket有什么区别?

[html] HTML5的Server-Sent和WebSocket有什么区别&#xff1f; websocket是双向通信&#xff0c;server-sent只能服务端发送消息个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通…

socket c/s分佈式編程

SOCKET&#xff1a; Socket接口介于应用程序与硬件之间。对Socket的理解可以简化为&#xff1a;它是封装了数据流&#xff08;Stream&#xff09;的从机器到机器的一条软接线&#xff0c;通过这条软接线&#xff0c;并借助于线两端的收发程序&#xff0c;网络上的机器间实现了信…

linux获取笔记本摄像头视频,如何在windows下用ffmpeg抓取笔记本电脑摄像头视频

我有一个很小的python程序&#xff0c;它可以很好地使用ffmpeg的子进程从linux中的网络摄像头(至少对于有内置网络摄像头的笔记本电脑)捕获短视频。在现在我正试图编写同样的程序来捕捉windows中的网络摄像头&#xff0c;我知道我不能使用通用的“/dev/video0”&#xff0c;它在…