讲师中心 微信公众号
AI工具推荐 视频效率加速

VSCode运行Webpack构建:优化内存占用实现超大型项目运行

梦敏酱_2281

梦敏酱_2281

发布时间:2026-06-19 11:41:27

|

649人浏览过

|

来源于php中文网

原创

Webpack构建卡死或OOM的根源是VSCode后台监听和插件预热:需在工作区.vscode/settings.json中配置files.watcherExclude(规则含**/),启用tsconfig.json的incremental、skipLibCheck,启动时加--max-memory=4096并禁用插件。

vscode运行webpack构建:优化内存占用实现超大型项目运行

Webpack 构建卡死或 OOM?先关掉 VSCode 默认监听

VSCode 启动时默认对整个工作区注册 inotify 监听,遇到含 node_modules、dist、build 的 Webpack 项目,会瞬间创建数万个文件句柄——这不是 Webpack 慢,是 VSCode 在后台疯狂扫描你根本不会编辑的文件。现象包括:终端构建卡在 webpack --watch 阶段不动、内存飙升到 4GB+、CPU 持续 100%。

  • 必须在项目根目录的 .vscode/settings.json 中写入 files.watcherExclude,全局设置无效
  • 规则要带尾部 /**,写成 "**/node_modules" 会被忽略
  • 务必加上 "**/.git/objects/**":GitLens 等插件会递归监听松散对象,极易触发内存泄漏
  • search.exclude 只影响 Ctrl+Shift+F,不减轻监听压力,不能替代 files.watcherExclude

tsconfig.json 里这三项不配,TypeScript 语言服务就拖垮 Webpack 构建

Webpack + TypeScript 项目中,TSServer 和 Webpack Dev Server 共享同一套 AST 解析逻辑。若 tsconfig.json 没做裁剪,TSServer 会在每次保存时重分析整个 node_modules 类型定义,直接拖慢 Webpack 的增量编译速度。

typescript-pro
typescript-pro

您是一位专注于高级类型系统、大规模应用架构及类型安全开发实践的 TypeScript 专家。适用于:advan...

下载
  • "incremental": true:启用增量编译缓存,避免全量重分析(需配合 tsbuildinfo 文件)
  • "skipLibCheck": true:跳过 node_modules 下 .d.ts 类型检查,开发阶段完全可接受
  • "composite": true:仅当项目含 references(如 monorepo 子包)时启用,否则反增开销

VSCode 启动参数不加 --max-memory=4096,Webpack 构建中途必崩

Electron 主进程默认不限制 V8 堆内存,而 Webpack 构建过程中大量生成 AST、SourceMap、模块图等对象,主进程堆内存很容易突破 3GB 触发 OOM。这不是配置问题,是 Electron 运行时限制缺失。

  • 永远用命令行启动:code --disable-extensions --disable-gpu --max-memory=4096 .
  • --max-memory=4096 单位是 MB,仅作用于主渲染进程,不影响 Extension Host
  • --disable-extensions 必须加:ESLint、Prettier、TypeScript 插件会在构建前预热语言服务,抢走 Webpack 所需内存
  • 不要依赖 GUI 双击打开——它绕不开默认加载项,OOM 概率翻倍

Extension Host 内存不降?换 local-process 模式隔离 Webpack 相关插件

Webpack 项目常搭配 ESLint、Stylelint、Import Sorter 等 LSP 类插件,它们默认共用一个 Extension Host 进程。一旦某个插件内存泄漏(比如旧版 eslint-plugin-import),整个进程内存只涨不跌,连带 Webpack Dev Server 响应变慢。

  • 在 .vscode/settings.json 中添加:"extensions.experimental.affinity": { "esbenp.prettier-vscode": 2 }
  • 数字 2 表示该扩展运行在独立 Extension Host 进程,与 UI 主进程隔离
  • 优先为 LSP 类插件(ms-vscode.vscode-typescript-next、dbaeumer.vscode-eslint)设置 affinity
  • 避免为所有插件统一设 affinity——进程开销本身也吃内存,挑关键几个即可
Webpack 构建本身不耗 VSCode 内存,真正吃资源的是那些“你以为没在干活”的后台监听、类型检查和插件预热。最容易被忽略的点是:files.watcherExclude 必须写进工作区配置,且规则路径末尾缺 /** 就等于没写。

热门AI工具

更多
WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

相关专题

更多
vscode是什么_vscode怎么安装配置
vscode是什么_vscode怎么安装配置

VS Code(Visual Studio Code)是一款免费、开源的跨平台代码编辑器,由微软开发和维护。它被广泛用于软件开发和编程,支持多种编程语言和框架。VS Code 同时提供了丰富的功能和扩展性,使开发者可以高效地编写、编辑和调试代码。

1355

2023.06.30

vscode怎么运行代码
vscode怎么运行代码

vscode是一个运行于MacOS X、Windows和Linux之上的,针对于编写现代Web和云应用的跨平台源代码编辑器;vscode免费而且功能强大,对JavaScript和NodeJS的支持非常好,自带很多功能,例如代码格式化,代码智能提示补全、Emmet插件等。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

2872

2023.07.21

vscode使用的框架介绍
vscode使用的框架介绍

VSCode是一款跨平台代码编辑器,它基于Electron框架和Monaco Editor构建。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

1969

2024.03.14

vscode一般用来写什么语言
vscode一般用来写什么语言

VSCode是一款功能强大的代码编辑器,支持多种编程语言和文件格式。它内置对 JavaScript、Python、Java、C++、TypeScript、HTML/CSS、Go 等语言的支持。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

1727

2024.03.14

vscode可以写什么语言
vscode可以写什么语言

vscode是一款强大的代码编辑器,支持多种编程语言的开发。通过安装扩展,可以为 JavaScript/TypeScript、Python、Java、C#、PHP、Go、Ruby、Rust、HTML/CSS 等语言提供智能代码补全、调试和格式化等功能。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2607

2024.03.15

vscode中文设置方法
vscode中文设置方法

方法一:在设置页面中,搜索“locale”,并选择“zh-cn”。方法二:按“Ctrl Shift P”快捷键,输入“Configure Display Language”,将语言修改为“zh-cn”。如果上述方法无效,可考虑安装中文插件。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

1838

2024.03.15

vscode用途介绍
vscode用途介绍

Visual Studio Code(VSCode)是一款由 Microsoft 开发的多功能文本编辑器,适用于各种编程语言。作为一款开源软件,VSCode 拥有代码高亮、自动补全、调试、Git 集成等强大功能,成为程序员不可或缺的工具。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

1262

2024.03.15

vscode和visualstudio的区别
vscode和visualstudio的区别

Visual Studio是一款功能强大的集成开发环境(IDE),适用于专业开发人员进行复杂项目的构建。而VSCode则是一款轻量级的代码编辑器,更适合各种规模的项目开发。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

1116

2024.03.15

OpenJDK JVM参数怎么调优
OpenJDK JVM参数怎么调优

Java应用运行缓慢,如何调整JVM参数?本专题介绍OpenJDK JVM性能调优的基本流程,涵盖性能指标确认、运行数据采集、内存配置和垃圾回收分析,帮助你先定位瓶颈,再通过对照测试验证效果,避免直接套用参数而影响应用稳定性。

0

2026.10.16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn