Vite与Webpack打包内存溢出问题优雅处理方式
Vite与Webpack打包内存溢出问题处理
文章目录
- Vite与Webpack打包内存溢出问题处理
- 1. Vite
- 1. 打包错误提示
- 2. 命令行方式解决
- 3. 配置环境变量方式解决
- 1. 设置变量
- 2. 配置系统的环境变量
- 2. Webpack
- 1. 打包错误提示
- 2. 命令行方式解决
- 3. 配置环境变量方式解决
- 1. 设置变量
- 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. 打包错误提示
<--- 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 memory1: 00007FF61BBF436F node::SetCppgcReference+156952: 00007FF61BB6C686 EVP_MD_meth_get_input_blocksize+761023: 00007FF61BB6E471 EVP_MD_meth_get_input_blocksize+837614: 00007FF61C5DB281 v8::Isolate::ReportExternalAllocationLimitReached+655: 00007FF61C5C4A18 v8::Function::Experimental_IsNopFunction+13366: 00007FF61C4260A0 v8::Platform::SystemClockTimeMillis+6596967: 00007FF61C423128 v8::Platform::SystemClockTimeMillis+6475448: 00007FF61C43843A v8::Platform::SystemClockTimeMillis+7343469: 00007FF61C438CB7 v8::Platform::SystemClockTimeMillis+736519
10: 00007FF61C4475DF v8::Platform::SystemClockTimeMillis+796207
11: 00007FF61C1079F5 v8::CodeEvent::GetFunctionName+116773
12: 00007FF5BC65AAFAELIFECYCLE Command failed with exit code 134.
2. 命令行方式解决
- Vite打包执行的是
node_modules/vite/bin/vite.js,所以在打包时修改package.json中的script脚本即可- 关于内存设置的大小,可根据自己电脑内存的实际大小衡量来设定,下面以设置
8G = 8 * 1024 = 8192MB为例
- 修改前
"scripts": {"build": "vite build --mode production &&vue-tsc --noEmit",}
- . 修改后
{"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来设置
- 仅当前窗口有效
# windows
set NODE_OPTIONS --max-old-space-size=8192
- 当前用户永久有效
# Windows
setx NODE_OPTIONS --max_old_space_size=8192 # 8GB
2. 配置系统的环境变量
在系统的环境变量中新增环境变量配置,内容如下:
变量名(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为例
- 修改前
"scripts": {"dev": "vue-cli-service serve","build": "vue-cli-service build"}
- . 修改后
"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来设置
- 仅当前窗口有效
# windows
set NODE_OPTIONS --max-old-space-size=8192
- 当前用户永久有效
# Windows
setx NODE_OPTIONS --max_old_space_size=8192 # 8GB
2. 配置系统的环境变量
在系统的环境变量中新增环境变量配置,内容如下:
变量名(N): NODE_OPTIONS
变量值(V): --max-old-space-size=8192
相关文章:
Vite与Webpack打包内存溢出问题优雅处理方式
Vite与Webpack打包内存溢出问题处理 文章目录 Vite与Webpack打包内存溢出问题处理1. Vite1. 打包错误提示2. 命令行方式解决3. 配置环境变量方式解决1. 设置变量2. 配置系统的环境变量 2. Webpack1. 打包错误提示2. 命令行方式解决3. 配置环境变量方式解决1. 设置变量2. 配置系…...
sqlalchemy——@listens_for
问:sqlalchemy如何实现:表中指定数据更新时,其time字段自动更新?答:使用listens_for 装饰器来注册事件监听器,确保在项目数据更新时触发相应的处理逻辑。 示例代码如下: # coding: utf-8 impo…...
MySQL进阶之锁(全局锁以及备份报错解决)
锁 全局锁 全局锁就是对整个数据库实例加锁,加锁后整个实例就处于只读状态,后续的DML的写语句,DDL语 句,已经更新操作的事务提交语句都将被阻塞。 其典型的使用场景是做全库的逻辑备份,对所有的表进行锁定ÿ…...
C#实现windows系统重启、关机
1、C#实现windows系统重启、关机 实现原理,使用系统shutdown命令执行: 强制关机: shutdown -s -f -t 0 强制重启: shutdown -r -f -t 0 2、关于shutdown命令详解: C#实现控制Windows系统关机、重启和注销的方法&…...
JS中Set和Map用法详解
目录 1、Set 1.基本用法 2.Set 实例的属性和方法 3.遍历操作 2、Map 1、Set 1.基本用法 ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。 Set本身是一个构造函数,用来生成 Set 数据结构。 const s …...
使用nginx对视频、音频、图片等静态资源网址,加token签权
目前很多静态资源,都可以无权限验证,进行访问或转发,对有价值的资源进行签权,限制转发无法在代码中实现拦截,我们可以使用nginx对视频、音频、图片等静态资源网址,加token签权 如: http://192…...
[每周一更]-(第86期):NLP-实战操作-文本分类
NLP文本分类的应用场景 医疗领域 - 病历自动摘要: 应用: 利用NLP技术从医疗文档中自动生成病历摘要,以帮助医生更快速地了解患者的状况。 法律领域 - 法律文件分类: 应用: 使用文本分类技术自动分类法律文件…...
【Springcloud篇】学习笔记五(十章):Gateway网关
第十章_Gateway新一代网关 1.Gateway简介 1.1官网 上一代zuul 1.X:https://github.com/Netflix/zuul/wiki 当前gateway:https://cloud.spring.io/spring-cloud-static/spring-cloud-gateway/2.2.1.RELEASE/reference/html/ 1.2是什么 SpringCloud …...
Linux开发工具
前言:哈喽小伙伴们,经过前边的学习我们已经掌握了Linux的基本指令和权限,相信大家学完这些之后都会对Linux有一个更加深入的认识,但是Linux的学习可以说是从现在才刚刚开始。 这篇文章,我们将讲解若干个Linux的开发工…...
C++ 动态规划 线性DP 最长共同子序列
给定两个长度分别为 N 和 M 的字符串 A 和 B ,求既是 A 的子序列又是 B 的子序列的字符串长度最长是多少。 输入格式 第一行包含两个整数 N 和 M 。 第二行包含一个长度为 N 的字符串,表示字符串 A 。 第三行包含一个长度为 M 的字符串,表…...
【备战蓝桥杯】——循环结构终篇
🌈个人主页: Aileen_0v0 🔥热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 💫个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-yl4Tqejg4LkjZLAM {font-family:"trebuchet ms",verdana,arial,sans-serif;font-siz…...
为什么说Python语法简单?
Python被广泛认为是一种语法简单、易学易用的编程语言,这种观点有几个关键的原因: 1、清晰简洁的语法结构: Python采用了清晰而简洁的语法结构,使得代码易于阅读和理解。Python的语法设计强调代码的可读性,采用了清晰…...
【HarmonyOS应用开发】ArkUI 开发框架-进阶篇-管理组件状态(九)
管理组件状态 一、概述 在应用中,界面通常都是动态的。下图所示,在子目标列表中,当用户点击目标一,目标一会呈现展开状态,再次点击目标一,目标一呈现收起状态。界面会根据不同的状态展示不一样的效果。 Ar…...
EF Core入门例子(以SqLite为数据库)
测试环境: visual studio 2017 .net core 2.1 具体步骤如下: 1 新增名称为EFCoreDemo的.net core控制台程序,版本选择.net core 2.1,项目不能放到带中文的目录下,不然到后面执行Add-Migration命令时会报如下的错误…...
centos7 安装nginx
在 CentOS 7 上安装 Nginx,你可以选择从官方仓库(EPEL)安装,或者手动编译安装。以下是通过 EPEL 安装 Nginx 的步骤: 方法一:通过 EPEL 仓库安装 添加 EPEL 仓库: sudo yum install epel-relea…...
【Linux Day14 UDP网络通讯】
UDP网络通讯 UDP报文结构: 16位源端口:用于记录发送端的端口号(占用两个字节)16位目的端口:用于记录接收端的端口号(占用两个字节)16位UDP长度:确定UDP报文总长度,&…...
指针的深入了解6
1.回调函数 回调函数就是一个通过函数指针调用的函数。 如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数 时,被调用的函数就是回调函数。回调函数不是由该函数的实现方直接调用࿰…...
PHP之PDO_MYSQL扩展安装步骤
1,如果有php源码包可以不用下载,在 源码包下的 ext/ 下面可以找到 cd php-8.1.9/ext/pdo_mysql 2,如果存在,直接安装 /usr/local/php-8.1.9/bin/phpize ./configure --with-php-config/usr/local/php-8.1.9/bin/php-config make &&a…...
【pytorch】nn.linear 中为什么是y=xA^T+b
我记得读教材的时候是yWxb, 左乘矩阵W,这样才能表示线性变化。 但是pytorch中的nn.linear中,计算方式是yxA^Tb,其中A是权重矩阵。 为什么右乘也能表示线性变化操作呢?因为pytorch中,照顾到输入是多个样本一起算的&…...
vite打包原理
vite 工程化开发:打包工具 启动速度很快 核心原理还是webpack 把webpack封装了,把webpack对象封装了 和vue2整体结构几乎一致 webpack两种模式:开发&生产 代码打包编译,本地起一个web服务器实时预览编译后的结果 build 命令模…...
rknn优化教程(二)
文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK,开始写第二篇的内容了。这篇博客主要能写一下: 如何给一些三方库按照xmake方式进行封装,供调用如何按…...
(二)TensorRT-LLM | 模型导出(v0.20.0rc3)
0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述,后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作,其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序
一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...
浅谈不同二分算法的查找情况
二分算法原理比较简单,但是实际的算法模板却有很多,这一切都源于二分查找问题中的复杂情况和二分算法的边界处理,以下是博主对一些二分算法查找的情况分析。 需要说明的是,以下二分算法都是基于有序序列为升序有序的情况…...
CMake控制VS2022项目文件分组
我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...
Git常用命令完全指南:从入门到精通
Git常用命令完全指南:从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...
TSN交换机正在重构工业网络,PROFINET和EtherCAT会被取代吗?
在工业自动化持续演进的今天,通信网络的角色正变得愈发关键。 2025年6月6日,为期三天的华南国际工业博览会在深圳国际会展中心(宝安)圆满落幕。作为国内工业通信领域的技术型企业,光路科技(Fiberroad&…...
【Linux】自动化构建-Make/Makefile
前言 上文我们讲到了Linux中的编译器gcc/g 【Linux】编译器gcc/g及其库的详细介绍-CSDN博客 本来我们将一个对于编译来说很重要的工具:make/makfile 1.背景 在一个工程中源文件不计其数,其按类型、功能、模块分别放在若干个目录中,mak…...
用鸿蒙HarmonyOS5实现中国象棋小游戏的过程
下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...
【UE5 C++】通过文件对话框获取选择文件的路径
目录 效果 步骤 源码 效果 步骤 1. 在“xxx.Build.cs”中添加需要使用的模块 ,这里主要使用“DesktopPlatform”模块 2. 添加后闭UE编辑器,右键点击 .uproject 文件,选择 "Generate Visual Studio project files",重…...
