位置: 编程技术 - 正文

详解基于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搭建项目)

  • 进口增值税如何入账
  • 吨位是啥意思
  • 税务师考试需要记忆的税率
  • 房地产企业递延所得税资产计算方法
  • 个人勾机给公司开票怎么开
  • 房地产企业的会计核算
  • 个税申报状态失败,如何更正申报
  • 专票要写开户行和账号
  • 变更税务法人需要怎么办
  • 小规模纳税人应交增值税怎么算
  • 财务软件无形资产摊销几年
  • 营利性养老机构需要缴纳哪些税
  • 一般纳税人税率2023
  • 小规模的企业
  • 团体意外伤害险是保的什么
  • 长期包租收入如何进行会计处理
  • 普票没有税号可以开票吗
  • 个体户生产所得税怎么计算
  • 成本票要交税吗
  • u盘中病毒了怎么格式化
  • php 生成验证码
  • macbookpro桌面整理
  • php处理的图片格式是什么
  • windows太阳谷更新
  • php数组函数输出《咏雪》里有多少"片"字
  • 如何进行抵债资金管理
  • 蟹爪兰的养殖方法和浇水
  • php输出姓名
  • 年底所得税账务处理
  • 一只正在树上吃的苹果
  • 收到小微企业贷款减息会计处理办法
  • laravel实战教程
  • 美国大提顿国家公园
  • 外商投资企业 外资企业
  • 商场代收款发票图片
  • 小规模纳税人无票收入怎么申报
  • 违法汽车查询
  • 设备租赁经营部经营范围
  • 个税网上申报流程视频
  • 国家对建筑垃圾处理企业有补助吗
  • 外贸企业出口货物增值税的计算依据
  • 公司员工抽奖活动
  • 卖出回购证券的钱怎么算
  • 企业日常费用支出明细表
  • 一次性开票分期确认收入如何纳税申报
  • sqlserver2005 xml字段的读写操作
  • 同一控制下合并报表恢复留存收益
  • 简易征收的进项税额转出
  • 银行承兑汇票由谁出票
  • 银行结算卡年费多少
  • 固定资产的特点有哪几个
  • 初中学历学会计难不难
  • mysql可以存什么
  • mysql服务1067进程意外终止
  • 如何用U盘安装新系统
  • centos怎么设置密码
  • windows8的word在哪里
  • 微软宣布win10
  • win10声卡驱动正常但没声音怎么解决
  • win8系统怎么设置桌面
  • win10系统安装cad2008的注册机无法打开
  • Android之Android apk动态加载机制的研究(二):资源加载和activity生命周期管理
  • 安卓开发教学视频
  • dos常用命令与批处理文件
  • vtk下载步骤
  • inline-block
  • 用javascript写表单代码
  • jquery的css样式
  • nodejs模块有哪些
  • 一个简单的合并单元
  • angular form表单
  • node.js golang
  • python3 django教程
  • android知识点大全
  • javascript面向对象编程指南
  • WINDOWS中使用磁盘清理的主要作用是为了什么
  • 简述python语言
  • 江苏省国税总局
  • 注销发票怎么处理流程
  • 滨州税务局公务员工资
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设