Vue热更新出现内存溢出

Vue热更新出现内存溢出

  • vue-cli2遇到此问题的解决办法:
  • vue-cli3遇到此问题的解决办法:
    • 方法一(已测试ok)
    • 方法二(未尝试)

开发项目有一段时间了,随着项目越来越大,打包的时间也相应的变长了,打包时的内存也增多了。这时候产生了一个问题,在发布项目的时候,会出现类似如下错误的提示。‘

 
<--- JS stacktrace --->
 
==== JS stack trace =========================================
 
    0: ExitFrame [pc: 3295209E]
    1: StubFrame [pc: 32946989]
Security context: 0x0f312701 <JSObject>
    2: replace [0F30B631](this=0x3ec73a65 <String[263]: D:/PDFUND2/trunk/src/pdfundvue/node_modules/babel-loader/lib/
index.js!D:/PDFUND2/trunk/src/pdfundvue/node_modules/vue-loader/lib/selector.js?type=script&index=0!D:/PDFUND2/trunk/
src/pdfundvue/src/components/page/assetnetshareMSSDQry/assetnetshareMSSDQrySelect.vue>,0x1334c6a5 <JSReg...
 
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 00F4254E node::MakeCallback+3774
 2: 0159C652 v8::internal::Heap::MaxHeapGrowingFactor+9554
 3: 015933F1 v8::internal::ScavengeJob::operator=+16593
 4: 01591F78 v8::internal::ScavengeJob::operator=+11352
 5: 013FC644 v8::internal::StackGuard::HandleInterrupts+100
npm ERR! code ELIFECYCLE
npm ERR! errno 134
npm ERR! pdfundvue@1.0.0 dev: `webpack-dev-server --inline --progress --watch --config build/webpack.dev.conf.js`
npm ERR! Exit status 134
npm ERR!
npm ERR! Failed at the pdfundvue@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
 
npm ERR! A complete log of this run can be found in:
npm ERR!     D:\Users\xxx\xx\xx\npm-cache\_logs\2019-07-03T05_43_41_196Z-debug.log

原因不难知道,是因为在Node中通过JavaScript使用内存时只能使用部分内存(64位系统:1.4 GB,32位系统:0.7 GB),这个时候,如果前端项目非常的庞大,Webpack编译时就会占用很多的系统资源,如果超出了V8引擎对Node默认的内存限制大小时,就会产生内存溢出的错误。

针对于不同的vue-cli 版本有不同的解决方法

vue-cli2遇到此问题的解决办法:

npm run devnpm run build 直接在前面加上--max_old_space_size=4096

在 package.json 中,补充以下参数

  "scripts": {
  	"start": "npm run dev",
    "dev": "node --max_old_space_size=4096 build/dev-server.js",
    "build": "node --max_old_space_size=4096 build/build.js",
    "lint": "eslint --ext .js,.vue src",
    "pre": "node build/pre.js",
    "dll": "rimraf dist && webpack --progress --colors --config build/webpack.dll.conf.js"
  },

vue-cli3遇到此问题的解决办法:

方法一(已测试ok)

在 package.json 中,补充一下参数

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    #加上这段代码
    "fix-memory-limit": "cross-env LIMIT=4096 increase-memory-limit"
  },
  # 同时安装 2 个依赖包
  "devDependencies": {
    "increase-memory-limit": "^1.0.3",
    "cross-env": "^5.0.5",
  }
}

(1) .执行npm install 来安装2 个依赖包
(2).安装完成后,先执行一次 "fix-memory-limit"
          如果安装失败则需要先删除掉项目的node_modules包
          配置并安装成功后执行npm run fix-memory-limit这句
(3).再执行"serve",就会出现报错了不是内部或外部命令,也不是可运行的程序或之类的错误
(4).将下边文件中"%_prog%"去掉双引号为 %_prog%关键点
(5)接口"serve" 启动即可

在这里插入图片描述
问题解决,可以正常运行

方法二(未尝试)

V8引擎对内存的使用的默认大小限制是1.4G,可以通过node.js命令设置限制来解决这个问题。修改package.json文件中内容,具体如下。

{
  "scripts": {
    "serve": "npx --max_old_space_size=6144 vue-cli-service serve",
    "build": "npx --max_old_space_size=6144 vue-cli-service build --modern"
  },
}

修改完成后重启项目

参考文章
【1】vue-cli3内存溢出,JavaScript heap out of memory
【2】node 内存溢出,解决办法

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

《中国科技投资》是什么级别的期刊?是正规期刊吗?能评职称吗?

问题解答&#xff1a; 问&#xff1a;《中国科技投资》期刊什么级别&#xff1f; 答&#xff1a;国家级 问&#xff1a;《中国科技投资》期刊是核心期刊吗? 答&#xff1a;不是&#xff0c;是万方维普收录的正规期刊。 主管单位&#xff1a;中国信息协会 主办单位&#…

SMB工具横向移动

一. SMB工具介绍和使用 1.介绍 2013年的Defcon上&#xff0c;就引入了smbexec&#xff0c;后续 smbexec 被 Impacket 进一步完善了。在Impacket中支持明文认证&#xff0c;NTLM认证&#xff0c;Aeskey认证等方式&#xff01; 2. 使用方法 命令&#xff1a; smbexec.exe 用户…

【热门话题】CentOS 常见命令指南

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 CentOS 常见命令指南一、文件与目录操作1. 切换目录2. 查看当前目录3. 列出目录…

学习javascript的函数

1.什么是函数&#xff1f; 可以重复被使用的代码块 作用&#xff1a;函数可以把具有相同或者相似逻辑的代码“包裹起来”&#xff0c;有利于代码的复用。 2.函数的基本使用 1.定义函数 利用关键字Function 定义函数&#xff08;声明函数&#xff09; function 函数名(){函…

《TCP/IP网络编程》(第十一章)进程间通信

进程间通信意味着两个不同的进程间可以交换数据&#xff0c;它使得不同的进程能够协同工作&#xff0c;实现复杂的系统功能。 1.通过管道实现进程间通信 下图是基于 管道&#xff08;PIPE&#xff09; 的进程间通信结构模型 管道不属于进程的资源&#xff0c;属于操作系统的资…

Python | Leetcode Python题解之第104题二叉树的最大深度

题目&#xff1a; 题解&#xff1a; class Solution:def maxDepth(self, root: TreeNode) -> int:if not root: return 0queue, res [root], 0while queue:tmp []for node in queue:if node.left: tmp.append(node.left)if node.right: tmp.append(node.right)queue tmp…

基于Vue+SpirngBoot的博客管理平台的设计与实现(论文+源码)_kaic

摘 要 随着当下社会的发展&#xff0c;互联网已经成为时代的主流&#xff0c;从此进入了互联网时代&#xff0c;对大部分人来说&#xff0c;互联网在日常生活中的应用是越来越频繁&#xff0c;大家都在互联网当中互相交流、学习、娱乐。博客正是扮演这样一个角色。博客已成为当…

《我的阿勒泰》最经典的6句话

这是首部散文影视化改编的作品&#xff0c;剧集里的每一帧画面&#xff0c;都堪比电影大作。 阿勒泰壮丽广阔的风光&#xff0c;如同一幅幅动人的画卷展现在我们面前&#xff0c;让人沉醉其中。李文秀平淡朴实的生活&#xff0c;却溢出了蓬勃的生命力&#xff0c;直击心灵。只…

git将某次提交合并到另一个分支

一、需求背景 将分支b中的某一次提交单独合并到分支a 二、实现方案 需求&#xff1a;将分支b中的某一次提交单独合并到分支a 1.在git上查看指定某次提交的id&#xff0c;如下图所示&#xff1a; 也可以通过git log命令查看提交的id&#xff0c;如下图&#xff1a; git log…

Java Web集成开发环境Eclipse的安装及web项目创建

第一步&#xff1a;下载安装JDK http://t.csdnimg.cn/RzTBXhttp://t.csdnimg.cn/RzTBX 第二步&#xff1a;下载安装Tomcat Tomcat下载安装以及配置_tomcat下载配置-CSDN博客文章浏览阅读2.5k次&#xff0c;点赞2次&#xff0c;收藏13次。Tomcat下载安装及其配置_tomcat下载配…

范罗士、希喂、安德迈爆款宠物空气净化器哪款好?深度对比测评

作为一名深受养猫过敏困扰的铲屎官&#xff0c;我经常提醒新手铲屎官重视家里的空气环境。宠物的浮毛和皮屑不仅会引发过敏&#xff0c;还可能传播细菌和病毒。很多人以为普通空气净化器能解决问题&#xff0c;但这些产品并未针对宠物家庭的特殊需求。经过多次研究和测试&#…

狂暴少帅短视频:成都科成博通文化传媒公司

狂暴少帅短视频&#xff1a;热血与激情的碰撞 在当下这个信息爆炸的时代&#xff0c;短视频以其独特的魅力迅速占领了人们的视线。而在众多短视频创作者中&#xff0c;一位名为“狂暴少帅”的创作者以其独特的风格和引人入胜的内容&#xff0c;赢得了广大网友的喜爱和追捧。今…

MySQL数据库案例实战教程:数据类型、语法与高级查询详解

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…

P7-P9【分配器】【源文件】【OOPvs.GP】

分配器 如何分配&#xff0c;如何释放 源文件 标准库源代码文件VC布局 标准库源代码文件GCC布局 OOP(面向对象编程) VS GP(泛型编程) 这两种编程的区别&#xff1a; 面向对象编程是将数据和方法联系在一起&#xff0c;更注重对不同的对象做出不同的响应&#xff0c;更适合…

浅谈redis未授权漏洞

redis未授权漏洞 利用条件 版本比较高的redis需要修改redis的配置文件&#xff0c;将bind前面#注释符去掉&#xff0c;将protected-mode 后面改为no 写入webshell 读者福利 | CSDN大礼包&#xff1a;《网络安全入门&进阶学习资源包》免费分享&#xff08;安全链接&#xff…

数字化工厂怎么收集,处理数据?

数字化工厂的数据收集与处理 数字化工厂是现代化工厂&#xff0c;利用数字技术和数据分析提高效率和优化流程。数据分析作为数字化工厂的核心技术&#xff0c;对数据的获取与处理至关重要。在数字化工厂中&#xff0c;数据的来源包括企业内部信息系统、物联网信息以及外部信息&…

【华为OD机试-C卷D卷-200分】反射计数(C++/Java/Python)

【华为OD机试】-(A卷+B卷+C卷+D卷)-2024真题合集目录 【华为OD机试】-(C卷+D卷)-2024最新真题目录 题目描述 给定一个包含 0 和 1 的二维矩阵。 给定一个初始位置和速度,一个物体从给定的初始位置出发,在给定的速度下进行移动,遇到矩阵的边缘则发生镜面发射。 无论物体…

宝塔部署Java+Vue前后端分离项目

1. 服务器 服务器选择Linux的CentOS7的版本 2. 宝塔Linux面板 2.1 百度搜索宝塔 2.2 进去之后点击立即免费安装 2.3 选择Linux在线安装&#xff0c;输入服务器信息进行安装(也可以选择其他方式) 安装完成之后会弹一个宝塔的应用面板&#xff0c;并附带有登录名称和密码&…

韩顺平0基础学Java——第13天

p264-p284 安装IDEA&#xff0c;熟悉一下软件。 尴尬了&#xff0c;难道是这个版本的idea不支持jdk17&#xff0c;难受住了 成功了&#xff0c;顺便跑一下昨天的作业&#xff1a; 这都要跑2秒&#xff1f;是电脑的问题还是谁的问题&#xff1f;控制台里跑的好快的哦 设置id…