VS Code 不编译 HTML5，卡顿源于配套工具链；关闭 Live Server 自动刷新、禁用冗余插件与 sourcemap、排除 node_modules 监听可显著提速。
为什么 VS Code 编译 HTML5 项目会“卡”？
VS Code 本身不编译 HTML5——它没有内置编译器。你感受到的“慢”，实际来自配套工具链：比如 vite build、webpack、esbuild 或某些 Live Server 插件的自动构建/热更新过程。真正拖节奏的是这些工具在监听文件、解析依赖、生成 sourcemap、压缩 JS/CSS 时的开销，尤其当项目含大量第三方库或未配置按需加载时。
关闭不必要的实时预览和自动构建
很多新手误以为“保存即刷新”= 快，实则反向拖慢。Live Server 插件默认启用 enableLiveReload 和 enableCustomBrowser，每次保存都触发完整页面重载；若同时开了 esbuild 的 watch 模式，两个进程争抢文件句柄，CPU 占用飙升。
- 禁用 Live Server 的自动刷新：
"liveServer.settings.donotShowInfoMsg": true+ 手动右键 →Open with Live Server后再按F5刷新 - 检查终端是否残留
vite dev或npm run dev进程，重复启动会导致监听冲突 - 删除
.vscode/settings.json中冗余项，如"emeraldwalk.runonsave"自动执行脚本（除非真需要）
vite / webpack 配置里哪些选项最影响 HTML5 构建速度？
HTML5 项目通常轻量，但若用了 Vue/React 框架或打包了大量静态资源，构建瓶颈立刻暴露。关键不是“怎么快”，而是“别做多余事”：
-
vite.config.ts中关掉非必要插件：vue()插件在纯 HTML+JS 项目里完全不用；legacy()若只支持现代浏览器，直接删 - 禁用 sourcemap：
build.sourcemap = false（开发调试时再开） - 避免
build.rollupOptions.external错误引用 CDN 资源——Vite 会仍尝试解析它们的依赖图 - Webpack 用户注意：
mode: 'development'下别开devtool: 'source-map'，改用'eval-cheap-module-source-map'
VS Code 自身设置能省多少时间？
编辑器本身不编译，但它的文件监听策略会影响底层构建工具响应速度。Windows 上尤其明显——默认监听整个工作区，哪怕你只改了一个 index.html，它也会扫描 node_modules 下百万级文件。
立即学习“前端免费学习笔记（深入）”；
- 在
.vscode/settings.json加入："files.watcherExclude": {"**/node_modules/**": true, "**/dist/**": true} - 禁用 TypeScript 自动类型检查（HTML5 项目通常不需要）：
"typescript.preferences.includePackageJsonAutoImports": "off" - 关闭搜索索引：
"search.followSymlinks": false+"search.useIgnoreFiles": false（仅在明确不需要全局搜索时）
真正卡住的点，往往藏在「你以为没在运行」的后台任务里——比如一个没关掉的 vite preview 服务占着 5173 端口，又或者 eslint-plugin-html 在保存时强行校验所有 .html 文件。先 ps aux | grep -i vite（macOS/Linux）或任务管理器（Windows）扫一眼，比调配置更管用。
