深圳 网站设计公司价格,常见的域名有哪些,网站建设重要新,平面设计培训素材VUE项目内存泄漏#xff1a;场景1#xff1a;页面结构复杂#xff0c;内嵌子组件数量较多场景2#xff1a;高频使用(切换路由导致页面组件销毁创建过多)结果#xff1a;页面卡顿且浏览器窗口占用内存较高检测#xff1a;相信不少前端开发在界面结构复杂的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_size4096 4096自行修改即node服务能占用的最大内存针对vue-cli 3以上很多网友使用插件什么写入配置的存在问题--max_old_space_size4096后面几项是下划线遇到插件写入中杠的无效本方法亲测结果。希望对现有VUE项目遇到内存泄漏问题的朋友提供改造帮助。
