Vite与Webpack打包内存溢出问题优雅处理方式

Vite与Webpack打包内存溢出问题处理

文章目录

  • Vite与Webpack打包内存溢出问题处理
  • [1. Vite](#1. Vite)
    • [1. 打包错误提示](#1. 打包错误提示)
    • [2. 命令行方式解决](#2. 命令行方式解决)
    • [3. 配置环境变量方式解决](#3. 配置环境变量方式解决)
      • [1. 设置变量](#1. 设置变量)
      • [2. 配置系统的环境变量](#2. 配置系统的环境变量)
  • [2. Webpack](#2. Webpack)
    • [1. 打包错误提示](#1. 打包错误提示)
    • [2. 命令行方式解决](#2. 命令行方式解决)
    • [3. 配置环境变量方式解决](#3. 配置环境变量方式解决)
      • [1. 设置变量](#1. 设置变量)
      • [2. 配置系统的环境变量](#2. 配置系统的环境变量)
  1. Node.js8.0之前,要限制node.js内存,则需要通过increase-memory-limit插件来完成,安装命令npm install -g increase-memory-limit ;
  2. Nodes.js8.0之后,可以使用NODE_OPTIONS 环境变量全局设置 max_old_space_size值来修改内存大小;
  3. 下面主要以在package.json中的script中配置node --max_old_space_size=内存大小来解决Vite与WebPack环境下开发或打包时遇到的内存溢出问题

1. Vite

Vite下可以使用两种方式来解决此问题:

  1. 使用设置命令行参数来解决

  2. 使用环境变量

1. 打包错误提示

shell 复制代码
<--- Last few GCs --->

[31456:00000245F8E00080]    78693 ms: Mark-Compact 4047.1 (4135.9) -> 4035.6 (4140.4) MB, 1905.55 / 0.00 ms  (average mu = 0.475, current mu = 0.329) allocation failure; scavenge might not succeed
[31456:00000245F8E00080]    83823 ms: Mark-Compact 4051.8 (4140.4) -> 4040.3 (4144.9) MB, 5028.55 / 0.00 ms  (average mu = 0.219, current mu = 0.020) allocation failure; scavenge might not succeed


<--- JS stacktrace --->

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
 1: 00007FF61BBF436F node::SetCppgcReference+15695
 2: 00007FF61BB6C686 EVP_MD_meth_get_input_blocksize+76102
 3: 00007FF61BB6E471 EVP_MD_meth_get_input_blocksize+83761
 4: 00007FF61C5DB281 v8::Isolate::ReportExternalAllocationLimitReached+65
 5: 00007FF61C5C4A18 v8::Function::Experimental_IsNopFunction+1336
 6: 00007FF61C4260A0 v8::Platform::SystemClockTimeMillis+659696
 7: 00007FF61C423128 v8::Platform::SystemClockTimeMillis+647544
 8: 00007FF61C43843A v8::Platform::SystemClockTimeMillis+734346
 9: 00007FF61C438CB7 v8::Platform::SystemClockTimeMillis+736519
10: 00007FF61C4475DF v8::Platform::SystemClockTimeMillis+796207
11: 00007FF61C1079F5 v8::CodeEvent::GetFunctionName+116773
12: 00007FF5BC65AAFA
 ELIFECYCLE  Command failed with exit code 134.

2. 命令行方式解决

  1. Vite打包执行的是node_modules/vite/bin/vite.js,所以在打包时修改package.json中的script脚本即可
  2. 关于内存设置的大小,可根据自己电脑内存的实际大小衡量来设定,下面以设置 8G = 8 * 1024 = 8192MB为例
  1. 修改前
shell 复制代码
"scripts": {
    "build": "vite build --mode production &&vue-tsc --noEmit",
  }
  1. . 修改后
json 复制代码
{
  "scripts": {
    "build": "node --max_old_space_size=8192 node_modules/vite/bin/vite.js build --mode production &&vue-tsc --noEmit"
  }
}

3. 配置环境变量方式解决

1. 设置变量

在执行打包命令前,设置变量方式更改node.js内存限制,下面以Windows为例,Linux中使用export NODE_OPTIONS=--max-old-space-size=8192来设置

  1. 仅当前窗口有效
shell 复制代码
# windows
set NODE_OPTIONS --max-old-space-size=8192
  1. 当前用户永久有效
shell 复制代码
# Windows
setx NODE_OPTIONS --max_old_space_size=8192 # 8GB

2. 配置系统的环境变量

在系统的环境变量中新增环境变量配置,内容如下:

shell 复制代码
变量名(N): NODE_OPTIONS
变量值(V): --max-old-space-size=8192

2. Webpack

Webpack下打包时解决内存溢出的方式与Vite类似,也使用两种方式来解决此问题:

  1. 使用设置命令行参数来解决

  2. 使用环境变量

1. 打包错误提示

如下图:

2. 命令行方式解决

以Webpack + Vue-cli脚手架为例,如果非Vue-cli脚手架,根据实际情况自行修改即可。

  1. Webpack包执行的是node_modules/@vue/cli-service/bin/vue-cli-service.js,所以在打包时修改package.json中的script脚本即可;
  2. 关于内存设置的大小,可根据自己电脑内存的实际大小衡量来设定,下面以设置 8G = 8 * 1024 = 8192MB为例
  1. 修改前
shell 复制代码
 "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build"
  }
  1. . 修改后
json 复制代码
"scripts": {
    "dev": "node --max_old_space_size=8192 node_modules/@vue/cli-service/bin/vue-cli-service.js serve",
    "build": "node --max_old_space_size=8192 node_modules/@vue/cli-service/bin/vue-cli-service.js build",
  }

3. 配置环境变量方式解决

1. 设置变量

在执行打包命令前,设置变量方式更改node.js内存限制,下面以Windows为例,Linux中使用export NODE_OPTIONS=--max-old-space-size=8192来设置

  1. 仅当前窗口有效
shell 复制代码
# windows
set NODE_OPTIONS --max-old-space-size=8192
  1. 当前用户永久有效
shell 复制代码
# Windows
setx NODE_OPTIONS --max_old_space_size=8192 # 8GB

2. 配置系统的环境变量

在系统的环境变量中新增环境变量配置,内容如下:

shell 复制代码
变量名(N): NODE_OPTIONS
变量值(V): --max-old-space-size=8192
相关推荐
brzhang4 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止4 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms5 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登5 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in5 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4167 小时前
HTML面试题
前端·html
张可7 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课7 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
蓝婷儿8 小时前
每天一个前端小知识 Day 27 - WebGL / WebGPU 数据可视化引擎设计与实践
前端·信息可视化·webgl
然我8 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法