IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> React前端项目build时出现内存溢出问题 -> 正文阅读

[JavaScript知识库]React前端项目build时出现内存溢出问题

1、安装依赖: npm install ,会自动生成 node_modules 文件夹,里面是所有的依赖

2、启动服务:npm start

3、构建:npm run build (发布到私服才需要构建,如果只是本地测试不需要构建)

如果出现下面的错误:

<--- Last few GCs --->

[9840:000002815F439EE0]    21326 ms: Scavenge 1384.5 (1422.0) -> 1383.9 (1423.0) MB, 3.3 / 0.0 ms  (average mu = 0.147, current mu = 0.043) allocation failure
[9840:000002815F439EE0]    22546 ms: Mark-sweep 1384.7 (1423.0) -> 1383.7 (1422.0) MB, 1215.1 / 0.0 ms  (average mu = 0.074, current mu = 0.022) allocation failure scavenge m
ight not succeed
[9840:000002815F439EE0]    22553 ms: Scavenge 1384.6 (1422.0) -> 1384.0 (1422.5) MB, 3.6 / 0.0 ms  (average mu = 0.074, current mu = 0.022) allocation failure


<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 00000118DDC50481]
Security context: 0x03de2c49d9d1 <JSObject>
    1: _walk [0000024C77FD8BD9] [0x016cb72025b1 <undefined>:~500] [pc=00000118DE084AA9](this=0x0113722ea981 <AST_SimpleStatement map = 000003F777C33DA1>,0x0322964bcc49 <TreeW
alker map = 000003B87C926741>)
    2: /* anonymous */ [0000025B728BBD39] [0x016cb72025b1 <undefined>:~733] [pc=00000118DE08755F](this=0x0113722ea429 <AST_Function map = 000003B87C926D3...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

Writing Node.js report to file: report.20220510.150551.9840.0.001.json
Node.js report completed
 1: 00007FF79892D7AA public: __cdecl v8::internal::GCIdleTimeHandler::GCIdleTimeHandler(void) __ptr64+4618
 2: 00007FF7988DB736 uv_loop_fork+86646
 3: 00007FF7988DC1FD uv_loop_fork+89405
 4: 00007FF798D0454E void __cdecl v8::internal::FatalProcessOutOfMemory(class v8::internal::Isolate * __ptr64,char const * __ptr64)+798
 5: 00007FF798D04487 void __cdecl v8::internal::FatalProcessOutOfMemory(class v8::internal::Isolate * __ptr64,char const * __ptr64)+599
 6: 00007FF798DB7F64 public: static bool __cdecl v8::internal::Heap::RootIsImmortalImmovable(int)+14068
 7: 00007FF798DADD72 public: bool __cdecl v8::internal::Heap::CollectGarbage(enum v8::internal::AllocationSpace,enum v8::internal::GarbageCollectionReason,enum v8::GCCallback
Flags) __ptr64+7234
 8: 00007FF798DAC588 public: bool __cdecl v8::internal::Heap::CollectGarbage(enum v8::internal::AllocationSpace,enum v8::internal::GarbageCollectionReason,enum v8::GCCallback
Flags) __ptr64+1112
 9: 00007FF798DB5EB7 public: static bool __cdecl v8::internal::Heap::RootIsImmortalImmovable(int)+5703
10: 00007FF798DB5F36 public: static bool __cdecl v8::internal::Heap::RootIsImmortalImmovable(int)+5830
11: 00007FF798EEDE01 public: class v8::internal::Handle<class v812: 00007FF798FA7CD6 public: static int __cdecl v8::internal::StoreBuffer::StoreBufferOverflow(class v8::inter
nal::Isolate * __ptr64)+27190
13: 00000118DDC50481

并且自动生成下面的文件:

说明是内存溢出了,此时执行?npm run fix-memory-limit ,但是可能还会报相同的错误,可能是因为项目太大,build时占用的内存已经超过build默认的内存大小。

执行:set NODE_OPTIONS=--max_old_space_size=8096 ,设置 build 的打包内存大小,然后再 npm run build,就能构建成功了。

?构建成功之后会生成一个 build 文件夹,里面是构建之后的文件

此时说明构建成功。

虽然构建成功,但是在构建过程中可能会出现下面的错误日志:

[ExtractCssAssetsWebpackPlugin] Warning: Asset download failed http://at.alicdn.com/t/font_455447_4gwixc8l0tb21emi.woff2
    <?xml version="1.0" encoding="UTF-8"?>
<Error>
  <Code>NoSuchKey</Code>
  <Message>The specified key does not exist.</Message>
  <RequestId>627A10439DDDB031364FE84F</RequestId>
  <HostId>at.alicdn.com</HostId>
  <Key>t/font_455447_4gwixc8l0tb21emi.woff2</Key>
</Error>

如果构建成功并且生成了 build 文件夹,并且 build 文件夹里有文件,那么就可以忽略这个错误,它表示有一个图标字符没有下载成功,但是不影响项目的启动。

4、发布到私服:双击 deploy

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-05-11 16:21:48  更:2022-05-11 16:22:00 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 20:45:01-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码