解决前端打包出现内存溢出问题

问题描述

背景 : 项目本地开发运行一切正常 , 打包上线后白屏无法正常打开页面,控制台无报错.

---

原因分析：

排查 :

1. 排查此次上线代码 有哪些新增代码;
2. 本地预构建(vite build) 查看打包产物是否正常;
3. 最后排查得出原因 由于新增了一个流程图的组件导致内存爆增,而默认分配的内存比较小
   在打包的是时候超出了默认分配的大小就导致了内存堆栈溢出,进而出现项目上线白屏的问题

---

总结 : 报错信息大致为内存堆栈溢出

主要的原因是因为使用 Node 进行打包时，采用的 V8 引擎，在 Node 中通过 JavaScript 使用内存只能使用部分内存（64位系统下约为 1.4GB，32位系统下约为 0.7GB），这就是为什么我们在打包时会出现内存溢出 的问题，主要还是因为默认分配的内存比较小，而我们的项目通常很大！并且 Webpack 在打包的时候也会
十分的消耗资源，当超出了默认分配的大小就会出现上述的报错问题

---

解决方案：

打包的时候分配一下 Node 可使用的内存大小即可, 更改 package.json 下的 scripts 字段的打包命令。
其实这里更改的就是 --max_old_space_size=4096 通过这个来分配打包时的内存使用大小。