Vue热更新出现内存溢出

news2024/11/17 21:25:40

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 内存溢出,解决办法

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

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

相关文章

英语写作AI怎么使用?分享3款AI写作生成器

英语写作AI怎么使用&#xff1f;在日常生活中&#xff0c;英语写作AI工具的使用已经变得日益普遍。它们凭借先进的人工智能技术&#xff0c;不仅快速整理思路、生成文章草案&#xff0c;甚至进行语法检查和拼写修正&#xff0c;大大提高了写作的便捷性和效率。下面&#xff0c;…

旅游推荐管理系统

代码位置:旅游管理系统: 根据若依模版的一个旅游管理系统 - Gitee.com 分支dev 项目介绍 项目目的 随着社会的高速发展&#xff0c;人们生活水平的不断提高&#xff0c;以及工作节奏的加快&#xff0c;旅游逐渐成为一个热门的话题&#xff0c;因为其形式的多样&#xff0c;涉…

【数据结构】二叉搜索树——高阶数据结构的敲门砖

目录 树概述 二叉搜索树概述 概念 特性 元素操作 插入 删除 模拟实现 框架 查找 插入 删除 树概述 树——在计算机中是一种很常见的数据结构。 树是一种很强大的数据结构&#xff0c;数据库&#xff0c;linux操作系统管理和windows操作系统管理所有文件的结构就是…

SQL刷题笔记day4补

1题目 我的正确代码 select e.last_name,e.first_name,d.dept_name from employees e left join (select departments.dept_name,dept_emp.emp_no,dept_emp.dept_no from departments join dept_emp on departments.dept_nodept_emp.dept_no) d on e.emp_nod.emp_no复盘&…

1111 对称日

solution 把日期转换为标准位数&#xff0c;不足则补零&#xff0c;判断是否为对称日期。月日可能会缺一个0&#xff0c;年份可能缺0~3个零。 #include<iostream> #include<string> #include<map> using namespace std; int main(){int n, flag;map<str…

Orange AIpro Color triangle帧率测试

OpenGL概述 OpenGL ES是KHRNOS Group推出的嵌入式加速3D图像标准&#xff0c;它是嵌入式平台上的专业图形程序接口&#xff0c;它是OpenGL的一个子集&#xff0c;旨在提供高效、轻量级的图形渲染功能。现推出的最新版本是OpenGL ES 3.2。OpenGL和OpenCV OpenCL不同&#xff0c;…

HTTP协议的基本了解

一、HTTP-概述 HTTP&#xff1a;Hyper Text Transfer Protocol(超文本传输协议)&#xff0c;规定了浏览器与服务器之间数据传输的规则。 http是互联网上应用最为广泛的一种网络协议 。http协议要求&#xff1a;浏览器在向服务器发送请求数据时&#xff0c;或是服务器在向浏览器…

计算机网络7——网络安全1 概述与加密

文章目录 一、网络安全问题概述1、计算机网络面临的安全性威胁2、安全的计算机网络3、数据加密模型 二、两类密码体制1、对称密钥密码体制2、公钥密码体制 随着计算机网络的发展&#xff0c;网络中的安全问题也日趋严重。当网络的用户来自社会各个阶层与部门时&#xff0c;大量…

区间相交-435. 无重叠区间,56. 合并区间

题目连接及描述 435. 无重叠区间 - 力扣&#xff08;LeetCode&#xff09; 56. 合并区间 - 力扣&#xff08;LeetCode&#xff09; 题目分析 二维数组&#xff0c;数组中每个元素为大小为2的一维数组&#xff0c;求移除区间的最小数量&#xff0c;使剩余区间互不重叠。今天写…

Python-3.12.0文档解读-内置函数pow()详细说明+记忆策略+常用场景+巧妙用法+综合技巧

一个认为一切根源都是“自己不够强”的INTJ 个人主页&#xff1a;用哲学编程-CSDN博客专栏&#xff1a;每日一题——举一反三Python编程学习Python内置函数 Python-3.12.0文档解读 目录 详细说明 功能描述 参数 返回值 使用规则 示例代码 基本使用 模运算 变动记录…

Windows 下载安装Apache

一、官网下载 1、打开Apache官网http://httpd.apache.org&#xff0c;点击Download。 2、选择Windows版本&#xff0c;点击链接。 3、选择对应版本选择下载。 二、安装、设置 1、将下载好的解压。 2、依次打开Apache24-conf-httpd.conf,用记事本打开 1)、修改路径 2)、修改…

C# TcpClient

TcpClient 自己封装的话&#xff0c;还是比较麻烦的&#xff0c;可以基于线程&#xff0c;也可以基于异步写&#xff0c;最好的办法是网上找个插件&#xff0c;我发现一个插件还是非常好用的&#xff1a;STTech.BytesIO.Tcp 下面是这个插件作者的帖子&#xff0c;有兴趣的可以…

【深度学习实战—9】:基于MediaPipe的人脸关键点检测

✨博客主页&#xff1a;王乐予&#x1f388; ✨年轻人要&#xff1a;Living for the moment&#xff08;活在当下&#xff09;&#xff01;&#x1f4aa; &#x1f3c6;推荐专栏&#xff1a;【图像处理】【千锤百炼Python】【深度学习】【排序算法】 目录 &#x1f63a;一、Med…

IDEA中各种Maven相关问题(文件飘红、下载依赖和启动报错)

错误情况 包名、类名显示红色、红色波浪线&#xff0c;大量依赖提示不存在&#xff08;程序包xxx不存在&#xff09; 工程无法启动 一、前提条件 1、使用英文原版IDEA 汉化版的可能有各种奇怪的问题。建议用IDEA英文版&#xff0c;卸载重装。 2、下载maven&#xff0c;配置环…

PFC+LLC 概述

总电路图 方案为&#xff1a;PFC&#xff08;NCP1654D&#xff09;LLC&#xff08;NCPB97B&#xff09;同步整流 输入为220V&#xff08;正负20%&#xff09;输出48V&#xff0c;600W电源 组成 1.输入 零线&#xff0c;火线&#xff0c;大地线&#xff0c;有防雷电路&#…

后量子加密算法的数学原理

后量子加密算法是一类专为抵御量子计算机攻击而设计的加密算法。随着量子计算技术的迅速发展&#xff0c;传统的加密算法如RSA和椭圆曲线密码学在量子计算机面前变得脆弱&#xff0c;因此&#xff0c;开发能够在量子计算时代保持安全性的加密算法变得尤为重要。下面将详细介绍后…

使用小猪APP分发打造高效的App封装工具

你是否曾经因为App封装和分发的复杂性而头疼不已&#xff1f;在这个移动应用迅速发展的时代&#xff0c;开发人员不仅需要专注于应用的功能和用户体验&#xff0c;还必须面对繁琐的封装和分发过程。幸运的是&#xff0c;小猪APP分发www.appzhu.cn正好为我们提供了一个简便而高效…

STM32_HAL_使用FPEC实现闪存的读写

STM32的FLASH结构 主存储器&#xff08;Main Memory&#xff09;&#xff1a;这是STM32中最大的存储区域&#xff0c;用于存储用户的程序代码、常量数据以及程序运行时不变的数据。STM32的主存储器通常被组织为多个扇区&#xff08;sector&#xff09;&#xff0c;每个扇区的大…

构建高效稳定的运维服务体系:技术架构解析与最佳实践

在当今数字化时代&#xff0c;运维服务对于企业的稳定运行和业务发展至关重要。本文将深入探讨运维服务的技术架构&#xff0c;介绍如何构建高效稳定的运维服务体系&#xff0c;并分享最佳实践。 ### 1. 概述 运维服务的技术架构是支撑整个运维体系的核心&#xff0c;它涵盖了…

邻接矩阵广度优先遍历

关于图的遍历实际上就两种 广度优先和深度优先&#xff0c;一般关于图的遍历都是基于邻接矩阵的&#xff0c;考试这些&#xff0c;用的也是邻接矩阵。 本篇文章先介绍广度优先遍历的原理&#xff0c;和代码实现 什么是图的广度优先遍历&#xff1f; 这其实和二叉树的层序遍…