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
相关推荐
lijun_xiao20096 小时前
前端最新Vue2+Vue3基础入门到实战项目全套教程
前端
90后的晨仔6 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js
代码搬运媛6 小时前
【架构相关】tsconfig.json 与 tsconfig.node.json、tsconfig.app.json 的关系和作用
node.js·json
杰克尼6 小时前
JavaWeb_p165部门管理
java·开发语言·前端
EndingCoder6 小时前
WebSocket实时通信:Socket.io
服务器·javascript·网络·websocket·网络协议·node.js
90后的晨仔6 小时前
Vue3 状态管理完全指南:从响应式 API 到 Pinia
前端·vue.js
90后的晨仔6 小时前
Vue 内置组件全解析:提升开发效率的五大神器
前端·vue.js
我胡为喜呀7 小时前
Vue3 中的 watch 和 watchEffect:如何优雅地监听数据变化
前端·javascript·vue.js
我登哥MVP7 小时前
Ajax 详解
java·前端·ajax·javaweb
非凡ghost7 小时前
Typora(跨平台MarkDown编辑器) v1.12.2 中文绿色版
前端·windows·智能手机·编辑器·软件需求