首页 > 系统相关 >vue前端node内存溢出问题解决

vue前端node内存溢出问题解决

时间:2023-12-28 15:25:39浏览次数:40  
标签:node vue err fs limit 内存 memory

前端项目运行时,如果经常运行慢,崩溃停止服务,报如下错误:

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory (JavaScript堆内存不足

 

原因:

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

解决方案:

1,安装依赖

 npm install cross-env increase-memory-limit

2,在package.json 里的 script 里进行配置

LIMIT是你想分配的内存大小,这里的8192单位是M也就是8G,大小可根据情况而定。

"scripts": {    

        "limit": "cross-env LIMIT=8192 increase-memory-limit" 

    }

3,执行一次 npm run limit ,然后重新启动项目。

但是这时候,重新启动会报错,如图:

'"node --max-old-space-size=8192"' 不是内部或外部命令,也不是可运行的程序或批处理文件。

 

解决方法:

在项目的 node_modules/.bin 文件下找到所以的 *.cmd 文件,"%_prog%" 去掉 双引号 %_prog%

可在 node_modules 同级下,写一个fix-memory-limit.config.js文件进行批次处理。

// 运行项目前通过node执行此脚本 (此脚本与 node_modules 目录同级)

const fs = require('fs')

const path = require('path')

const wfPath = path.resolve(__dirname, './node_modules/.bin')

fs.readdir(wfPath, (err, files) => {

  if (err) {

    console.log(err)

  } else {

    if (files.length != 0) {

      files.forEach(item => {

        if (item.split('.')[1] === 'cmd') {

          replaceStr(`${wfPath}/${item}`, /"%_prog%"/, '%_prog%')

        }

      })

    }

  }

})

// 参数:[文件路径、 需要修改的字符串、修改后的字符串] (替换对应文件内字符串的公共函数)

function replaceStr(filePath, sourceRegx, targetSrt) {

  fs.readFile(filePath, (err, data) => {

    if (err) {

      console.log(err)

    } else {

      let str = data.toString()

      str = str.replace(sourceRegx, targetSrt)

      fs.writeFile(filePath, str, err => {

        console.log(err)

      })

    }

  })

}

然后修改 package.json里的 script里的语句

先处理内存溢出问题,然后再执行js,进行替换

&& 运算符,(相继执行,只有前一个执行成功才会执行下一个)


"scripts": {

        "limit": "cross-env LIMIT=8192 increase-memory-limit && node fix-memory-limit.config.js"

}

4,如上修改完之后,执行一次 npm run limit ,然后再重新启动项目。

亲测有效,弄了一上午,终于启动成功了。

原文




标签:node,vue,err,fs,limit,内存,memory
From: https://www.cnblogs.com/mmzuo-798/p/17932776.html

相关文章

  • Nacos修改内存大小
    一、存在的问题部署好的nacos老是挂掉,查看内存发现,所剩内存不多,而nacos运行时内存可以达到1G多,怎么能够设置nacos的内存呢。nacos的启动文件,startup.sh中有如下参数配置  standalone:表示单机模式运行,非集群模式-Xms:设定程序启动时占用内存大小-Xmx:设定程序运行期间最大......
  • sse node搭建server
    sse-client.tsexportdefaultclassSSEClient{source:EventSource;element:HTMLElement;constructor(url){this.source=newEventSource(url||'http://127.0.0.1:8844/stream');this.source.onopen=this.onOpen.bin......
  • PHP内存占用优化
    请求次数:1300次执行时间:200*60=12000S//要分批保存数据,可以将`$all_data`数组拆分成多个小数组,并逐一调用`saveAll`方法。以下是一个示例,演示如何将数据分批为每批100条进行保存:$dataModel=newcxVipUserStudyInfo();$batchSize=100;$offset=0;foreach($jsonD......
  • PHP查询内存占用函数
    PHP查询内存占用函数memory_get_usage()在PHP中,包括ThinkPHP框架中,直接查询一个数组占用的内存大小可以使用memory_get_usage()函数。这个函数返回当前PHP脚本消耗的内存总量(以字节为单位)。以下是一个简单的示例,展示如何在ThinkPHP中获取一个数组占用的内存大小://在ThinkPHP......
  • Vue检测密码复杂度方法
    Vue检测密码复杂度方法<!--检测密码复杂度方法--><template><div><inputtype="password"v-model="password"@input="checkPasswordComplexity"><divv-if="complexityMessage">{{complexityMessa......
  • 短小精悍(5) - Rust内存清零库zeroize介绍
    今天带来的是一个“短小精悍”的库:zeroize。zeroize可以在确保不被编译器优化的前提下安全高效地清空一段内存,适合在保密应用内使用。用法zeroize的核心用法很简单:usestd::string::String;usezeroize::Zeroize;fnmain(){letmutuser_password=String::from("qw......
  • VUE
    一、Vue定义及简介 1、Vue定义关于Vue简介,百度百科给出的解释是:Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue完全有能力驱动采......
  • 手把手从安装本地虚拟机,基于docker,部署springboot+vue项目(若依框架前后端分离版本演示
    目录1.安装本地虚拟机centos2.安装docker,拉取镜像,创建容器3.打包部署后端4.配置nginx5.打包部署前端6.常见问题汇总1.安装本地虚拟机centos部署环境提供vm16,和centos7,其中把镜像改成.iso文件就可以了阿里云链接:https://www.alipan.com/s/BTnpjuHWtEp为什么用阿里云,不限速啊,秉......
  • Vue脚手架中加入Vuex全局状态管理中间件
    WebStorm创建Vite(Vue模版)项目后:在main.ts中:import{createApp}from'vue'//@ts-ignoreimport{createStore}from'vuex'import'./style.css'//@ts-ignoreimportAppfrom'./App.vue'//@ts-ignoreconststore=createSt......
  • vue2中 watch和computed的区别
    计算属性(Computed):computed是基于依赖关系进行缓存的。只有当相关的响应式依赖发生改变时,才会重新求值。适合于执行更复杂的数据操作。computed属性是计算出来的,不会对原始数据造成任何副作用。computed属性可以具有setter和getter方法,可以更灵活地控制数据的操作。......