位置: 编程技术 - 正文

详解基于node的前端项目编译时内存溢出问题(node基础知识)

编辑:rootadmin

推荐整理分享详解基于node的前端项目编译时内存溢出问题(node基础知识),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:基于node的网站有哪些,node基础知识,node基础,node基础知识,node基础知识,node基础知识,基于nodejs的项目,基于node的网站有哪些,内容如对您有帮助,希望把文章链接给更多的朋友!

前段时间公司有个基于vue的项目在运行npm run build的时候会报内存溢出,今天在某个技术流交群也有位小伙伴基于angular的项目也出现了这个问题,所以查了一些相关的资料总结了一下,下面会详细说明前端三大框架编译时遇到这个问题具体怎么解决。首先看我模拟出的报错内容

具体截图如下

里面有句关键的话,CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory JavaScript堆内存不足,这里说的 JavaScript 其实就是 Node,我们都知道 Node 是基于V8引擎,在一般的后端开发语言中,在基本的内存使用上没有什么限制,但是我去查阅了相关的资料才发现,在 Node 中通过 JavaScript 使用内存时只能使用部分内存(位系统下约为1.4 GB,位系统下约为0.7 GB),这就是我们编译项目时为什么会出现内存泄露了,因为前端项目如果非常的庞大,webpack 编译时就会占用很多的系统资源,如果超出了V8对 Node 默认的内存限制大小就会出现刚刚我截图的那个错误了,那怎么解决呢?V8依然提供了选项让我们使用更多的内存。Node 在启动时可以传递 --max-old-space-size 或 --max-new-space-size 来调整内存大小的使用限制,示例如下

上述参数在V8初始化时生效,一旦生效就不能再动态改变。如果遇到 Node 无法分配足够内存给 JavaScript 的情况,可以用这个办法来放宽V8默认的内存限制,避免在执行过程中稍微多用了一些内存就轻易崩溃,既然知道了解决办法那就好办了,下面来分别详细说明三大框架下的具体操作。

Vue

详解基于node的前端项目编译时内存溢出问题(node基础知识)

先说vue,因为vue是最简单的,因为基于 vue-cli 生成的项目,vue没有把 package.json 里面 scripts 字段的脚本命令的node命令隐藏起来,我们直接把上面v8提供的选项参数直接写入scripts 字段的 node 命令后就好了,示例如下

直接在 node 后面写上 --max_old_space_size= 就好了,我这里设置的内存大小是4G,这个具体的大小可以根据自己的项目情况来设置就好了。然后再重新运行 npm run build 就可以正常打包构建了。

React

下面来说说 react ,首先如果自己的 react 项目的开发打包环境是自己搭建的话,那解决方法就和上面的 vue 一样,在 node 命令后面加上 --max_old_space_size= 就好了,如果是基于 react-cli 生成的项目那就接着看吧,基于react-cli 生成的项目我们发现package.json 里面 scripts 字段的内容如下

这个就和 vue-cli 不一样了,运行npm run build的时候跑的实际代码是 react-scripts build, 这个脚本是来源于哪里呢,我们打开项目根目录mode_modeles文件夹,会看到一个.bin的目录,react-scripts脚本就定义在这里,在.bin目录下可以找到一个叫react-scripts的文件,打开这个文件,我们发现里面就是一些javascript代码,这个代码的首行有些特殊,我们可以看到#!/usr/bin/env node一行这样的代码,它的意思就是,用当前电脑/usr/bin/env目录下的node来运行该文件里面的javascript代码,看到这里我们都明白了,回到我们最初要解决的问题,我们可以把--max_old_space_size=这行代码写在#!/usr/bin/env node后面,#!/usr/bin/env node --max_old_space_size=,这样就好了,我们的内存溢出问题也就解决了。

Angular

最后开始说 angular ,当然这里说的 angular 是 angular 的最新版本不是angularjs,写angular应用我们一般也都会用angular-cli来搭建项目,如果是自己搭建的开发编译那解决办法和上面的vue是一样的了。用angular-cli来生成的项目也和react一样,cli把node命令也隐藏起来了,package.json 里面 scripts 字段的内容如下

这里的ng命令也和react一样,定义在项目根目录mode_modeles文件夹下的.bin目录里面,.bin目录下我们能找到一个叫ng的文件,在该文件的首行写上#!/usr/bin/env node --max_old_space_size=,这样也就可以解除v8对node的内存使用限制了。

参考

深入浅出Node.js

标签: node基础知识

本文链接地址:https://www.jiuchutong.com/biancheng/380912.html 转载请保留说明!

上一篇:浅谈node中的exports与module.exports的关系(node exit)

下一篇:使用Node.js搭建静态资源服务详细教程(node搭建项目)

  • 发票税率开错了怎么办
  • 个税退税需要交税吗
  • 股权转让开票怎么做账
  • 弥补以前年度亏损后怎么交所得税
  • 公司电视机 摊销多少年
  • 企业支付的
  • 如何进行银行存款的实质性程序
  • 个体工商户核定应税所得率
  • 哪些合同不需要缴纳印花税的通知
  • 购进原材料发生非正常损失,账面成本10万元 该原材料
  • 接受长期股权投资的条件
  • 个体户要交国税和地税吗
  • 股票收入要交所得税吗
  • 投资收益在什么科目
  • 用友t3财务报表模块打不开
  • 未办理外经证如何处罚
  • 工程劳务公司的生产销售情况分析
  • 跨月预缴如何做账
  • 代扣代征税款有哪些
  • 增值税发票已认证抵扣还可以进项税额转出吗
  • 厂家质量问题商家有责任吗
  • 鸿蒙系统怎么开启开发者权限
  • 如何卸载某些系统软件
  • QuickBooks - QuickBooks是什么进程 有什么用
  • 多结转成本会导致什么
  • 如何调整往来账款
  • linux format命令
  • uniapp 嵌套webview
  • 退休人员被返聘还能领养老金吗?
  • Python之ImportError: DLL load failed: 找不到指定的模块解决方案
  • 转让股权怎么做分录
  • 先申报工资还是先发工资
  • 银行结算方式有哪几种方式?其具体内容是什么?
  • anaconda3.5.2安装教程
  • 原生php和框架php的区别
  • 托收的收款人是谁
  • 开票和不开票的销项税额怎么算
  • 进项发票是专票吗
  • 合伙企业分红怎么做账
  • 融资租赁利息一般多少
  • java一天速成
  • 桥接模式例题
  • php变量名称中可以包含哪些元素
  • 清税证明怎么在网上申请
  • 普通发票被作废了还能报销吗
  • 招待费专票不可以抵扣
  • mysql 增加用户
  • 教育培训行业税目分类
  • mysql delete limit 使用方法详解
  • 建筑企业的安全生产许可证由谁颁发
  • 工程预付税金如何计算
  • 以货换货什么意思
  • 差旅费会计科目怎么做
  • 预付工程款会计分录
  • 分期收款提供劳务 是什么
  • 结转未交增值税为什么是零
  • 出售设备账务处理
  • 折旧和摊销的概念
  • 如何在电子税务局变更办税人员
  • 备用金的支取流程图
  • 初次建账应准备哪几种会计本
  • win8.1 0x80072efe
  • xp系统电脑设置在哪
  • FreeBSD中使用QUOTA(磁盘配额)来限制用户空间
  • win8 start menu
  • ubuntu 20.04 服务器
  • 电脑图片密码是什么意思
  • 苹果mac系统休眠怎么解除
  • CentOS 6.x 到 CentOS 7 的升级过程
  • Windows RT 8.1 Update 3九月发布 届时将加入改进版锁屏
  • ghost备份1678
  • 语音聊天能不能调出来
  • javascript中函数
  • android开发mvc mvp mvvm
  • html复选框和单选框区别在哪
  • python多线程怎么用
  • 卷烟批发环节的税率
  • 丰台和朝阳中间是哪里
  • 12月份买的车10月打电话让我去保养
  • 迈凯伦gt1
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设