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 memory1: 00F4254E node::MakeCallback+37742: 0159C652 v8::internal::Heap::MaxHeapGrowingFactor+95543: 015933F1 v8::internal::ScavengeJob::operator=+165934: 01591F78 v8::internal::ScavengeJob::operator=+113525: 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 内存溢出,解决办法

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

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

相关文章

若依微服务实现分布式事务

一、基本介绍 1、什么是分布式事务 指一次大的操作由不同的小操作组成的&#xff0c;这些小的操作分布在不同的服务器上&#xff0c;分布式事务需要保证这些小操作要么全部成功&#xff0c;要么全部失败。从本质上来说&#xff0c;分布式事务就是为了保证不同数据库的数据一致…

ssm137基于SSM框架的微博系统+vue

微博系统网站的设计与实现 摘 要 网络技术和计算机技术发展至今&#xff0c;已经拥有了深厚的理论基础&#xff0c;并在现实中进行了充分运用&#xff0c;尤其是基于计算机运行的软件更是受到各界的关注。加上现在人们已经步入信息时代&#xff0c;所以对于信息的宣传和管理就…

家用洗地机哪个品牌好?家用洗地机排行榜前十名

随着洗地机逐渐进入大众视野&#xff0c;这种集吸、拖、洗功能于一体的清洁工具&#xff0c;凭借其高效便捷的特点&#xff0c;成为家庭清洁的新宠。洗地机不仅能够减少地面清洁时间&#xff0c;节省体力&#xff0c;还能提高清洁效果。然而&#xff0c;面对琳琅满目的洗地机品…

[学习笔记](Python3)防止SQL注入、XSS攻击和文件上传漏洞

学习笔记&#xff1a;防止SQL注入、XSS攻击和文件上传漏洞&#xff08;Python3&#xff09; 本笔记由生成式大模型GPT-4o自动整理。注意AI可能犯错。代码和理论由GPT-4o(2024-5-21)自行撰写未经人工复核。 参数化查询防SQL注入 参数化查询通过将SQL语句和数据分离来防止SQL注…

Web会话管理

一、会话管理的概念&#xff1a; 在人机交互时&#xff0c;会话管理是保持用户的整个会话活动的互动与计算机系统跟踪过程会话管理分类: 桌面会话管理、浏览器会话管理、Web服务器的会话管理。 二、为什么需要会话管理&#xff1f; HTTP是一种无状态协议&#xff0c;一次请…

Vue.js 混入(Mixins)高级用法:提升代码复用与灵活性

Vue.js 中的混入&#xff08;Mixins&#xff09;是一种强大而灵活的设计模式&#xff0c;它允许你将可复用的组件功能抽离为独立的模块&#xff0c;并在多个组件间共享。本文将深入探讨混入的高级用法&#xff0c;包括如何传递参数给混入、解决命名冲突、以及如何利用高阶组件思…

【Python-OS】os.path.isfile()

作用&#xff1a; 检查指定路径是否指向一个文件 即检查指定路径下是否存在该文件 os.path.isfile(path)注&#xff1a; path&#xff1a; 可以自行指定路径&#xff0c;需要具体到文件名(需要加上扩展名) 返回值&#xff1a; True or False

java项目之智能家居系统源码(springboot+vue+mysql)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的智能家居系统。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 基于Springboot的智能家居系…

【高校科研前沿】湖北工业大学为第一署名单位在《Science》发表Letters文章:应对青藏高原河流泥沙激增

文章简介 论文名称&#xff1a;Combating sediment surge in Tibetan rivers&#xff08;应对青藏高原河流泥沙激增&#xff09; 相关作者及单位&#xff1a;杨洪教授&#xff08;英国雷丁大学&#xff09;&刘德富教授&#xff08;湖北工业大学&#xff09;&Julian R…

huggingface 笔记:聊天模型

1 构建聊天 聊天模型继续聊天。传递一个对话历史给它们&#xff0c;可以简短到一个用户消息&#xff0c;然后模型会通过添加其响应来继续对话一般来说&#xff0c;更大的聊天模型除了需要更多内存外&#xff0c;运行速度也会更慢首先&#xff0c;构建一个聊天&#xff1a; ch…

灵动微单片机洗衣机方案——【软硬件开发支持】

RAMSUN英尚以洗衣机洗涤主驱电机为例&#xff0c;主驱电机和多电机控制首选MM32SPIN0280.灵动微电子能够提供完整的软硬件开发支持&#xff0c;目前方案已经在主流家电厂出货。 洗衣机方案 皮带洗衣机 DD直驱洗衣机 波轮洗衣机 Mini壁挂和桌面洗衣机 洗涤烘干双变频方案 热泵烘…

python前端通过API接口调用与后端进行数据交互前端如何调用api接口通过关键词获取电商平台热销商品数据

要在Python前端通过API接口调用与后端进行数据交互并通过关键词获取电商平台热销商品数据&#xff0c;可以通过封装好的api接口通过链接直接请求获取数据&#xff0c;以下是接入api的请求示例&#xff1a; # coding:utf-8 """ Compatible for python2.x and py…

uniapp - 文章模块页面

在上一篇文章中&#xff0c;创建了一个空白的文章模块页面。在这一篇文章&#xff0c;让我们来向页面中填充内容。 目录 页面效果涉及uniapp组件1.view2.swiper3.scroll-view4.属性解读1) class"style1 style2 .."2) circular单属性无赋值3) :autoplay"autoplay…

信息标记形式 (XML, JSON, YAML)

文章目录 &#x1f5a5;️介绍&#x1f5a5;️三种形式&#x1f3f7;️XML (Extensible Markup Language)&#x1f516;规范&#x1f516;注释&#x1f516;举例&#x1f516;其他 &#x1f3f7;️JSON (JavaScript Object Notation)&#x1f516;规范&#x1f516;注释&#x…

游戏行业如何利用隐私计算技术增强玩家体验

PrimiHub一款由密码学专家团队打造的开源隐私计算平台&#xff0c;专注于分享数据安全、密码学、联邦学习、同态加密等隐私计算领域的技术和内容。 在游戏行业&#xff0c;玩家体验的个性化是提升用户粘性和满意度的关键。随着技术的发展&#xff0c;游戏公司现在可以利用大量的…

存内计算从浮点运算优化对数据经济的提升

本篇文章将介绍存内计算技术对于数据经济的提升&#xff0c;我们将从提出问题、解答问题与阐述应用三个方面进行展开介绍&#xff0c;并引入浮点存算、等新兴存算技术进行简要介绍。 一.数据经济&存内计算&#xff0c;结合是否可行&#xff1f; 数据经济与存内计算&#…

浅说线性DP(上)

前言 在说线性dp之前&#xff0c;我们先来聊一聊动态规划是啥&#xff1f; 动态规划到底是啥&#xff1f; 动态规划是普及组内容中最难的一个部分&#xff0c;也是每年几乎必考的内容。它对思维的要求极高&#xff0c;它和图论、数据结构不同的地方在于它没有一个标准的数学…

mysql 01 linux 上安装mysql服务端

01.linux安装 MySQL的大部分安装包都包含了服务器程序和客户端程序&#xff0c;不过在Linux下使用RPM包时会有单独的服 务器RPM包和客户端RPM包&#xff0c;需要分别安装。 1.查看是否已经安装了MySQL rpm -qa | grep mysql如果什么都没有&#xff0c;就是还没有装过MySQL …

Vue3记录校验工具类:validata.ts

在vue文件使用&#xff1a; import { validateNull } from //utils/validata; validateNull(需要校验的数据)validata.ts文件&#xff1a; /*** 判断是否为空* param val 数据*/ export const validateNull (val: any) > {if (typeof val boolean) {return false;}if (t…

C++核心编程——4.7 多态

4.7.1 多态的基本概念 多态是C面向对象三大特性之一 多态表示提供一个公共的函数接口&#xff0c;当传入不同参数对象时&#xff0c;执行不同的函数实现。 语法 virtual 返回值类型 函数名() {} 分类 静态多态 动态多态&#xff08;加“virtual“&#xff09; 函数重载 和 …