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. 配置系统的环境变量)

Node.js8.0之前，要限制node.js内存，则需要通过increase-memory-limit插件来完成，安装命令npm install -g increase-memory-limit ;

Nodes.js8.0之后，可以使用NODE_OPTIONS 环境变量全局设置 max_old_space_size值来修改内存大小;

下面主要以在package.json中的script中配置node --max_old_space_size=内存大小来解决Vite与WebPack环境下开发或打包时遇到的内存溢出问题

1. Vite

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

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

使用环境变量

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. 命令行方式解决

Vite打包执行的是node_modules/vite/bin/vite.js,所以在打包时修改package.json中的script脚本即可

关于内存设置的大小，可根据自己电脑内存的实际大小衡量来设定，下面以设置 8G = 8 * 1024 = 8192MB为例

修改前

shell 复制代码

"scripts": {
    "build": "vite build --mode production &&vue-tsc --noEmit",
  }

. 修改后

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来设置

仅当前窗口有效

shell 复制代码

# windows
set NODE_OPTIONS --max-old-space-size=8192

当前用户永久有效

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. 命令行方式解决

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

Webpack包执行的是node_modules/@vue/cli-service/bin/vue-cli-service.js,所以在打包时修改package.json中的script脚本即可；

关于内存设置的大小，可根据自己电脑内存的实际大小衡量来设定，下面以设置 8G = 8 * 1024 = 8192MB为例

修改前

shell 复制代码

 "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build"
  }

. 修改后

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来设置

仅当前窗口有效

shell 复制代码

# windows
set NODE_OPTIONS --max-old-space-size=8192

当前用户永久有效

shell 复制代码

# Windows
setx NODE_OPTIONS --max_old_space_size=8192 # 8GB

2. 配置系统的环境变量

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

shell 复制代码

变量名(N): NODE_OPTIONS
变量值(V): --max-old-space-size=8192