vscode 不直接运行 webpack 或性能分析，而是整合 chrome devtools、lighthouse 和 webpack-bundle-analyzer：通过 launch.json 启用 trace 实现首屏性能追踪，tasks.json 配置 --analyze 生成包体积报告，lighthouse 扩展做轻量审计，并需规避 tsserver 与 webpack 的内存争抢。
VSCode 本身不运行 Webpack 构建，也不直接提供代码运行时的性能分析能力；真正起作用的是 Chrome DevTools、Lighthouse 和 Webpack 自身的分析插件，VSCode 只负责把它们串起来并降低使用门槛。
用 launch.json 启动带 performance trace 的 Chrome 调试
这是最贴近真实用户场景的运行时性能分析入口。VSCode 不自带性能采样器，但能通过调试协议让 Chrome 在启动时自动记录 Performance Timeline。
-
launch.json中必须启用"trace": true，否则 Performance 面板不会自动捕获首屏加载轨迹 - Chrome 必须以
--remote-debugging-port=9222启动，且不能已有其他实例占用该端口 - 配置
"url": "http://localhost:3000"时，确保本地服务已启动（比如npx serve -s dist或webpack serve） - 不要依赖 Live Server 扩展的自动打开——它绕过调试协议，
trace会失效
在 tasks.json 里加 --analyze 生成 bundle 分析报告
Webpack 的 webpack-bundle-analyzer 是唯一能告诉你“哪段代码拖慢了首屏”的静态分析工具，但它必须由构建过程触发，不能靠 VSCode 插件自动调用。
- 确保
tasks.json的command是npx webpack --mode production --analyze，不是npm run build -
--analyze会启动一个本地服务（默认http://127.0.0.1:8888），这个页面必须手动打开才能看到模块体积热力图 - 如果报告空白，检查
webpack.config.js是否导出module.exports = {...}，export default不被识别 - 大型项目建议加
--config webpack.prod.js显式指定配置，避免开发配置干扰分析结果
用 Lighthouse for VS Code 做轻量级审计
它不替代 Chrome DevTools，但能快速暴露渲染阻塞、图片未压缩、JS 执行时间过长等典型问题，适合日常提交前快速扫一遍。
- 右键 HTML 文件 → “Open with Lighthouse”，不是右键文件夹或 JS 文件
- 首次运行需在设置中勾选
lighthouse.enableLocalhost，否则会因跨域拒绝本地file://协议 - 报告里的 “Eliminate render-blocking resources” 建议，要结合
webpack.config.js中的optimization.splitChunks配置来改，不是简单删 script 标签 - 分数低于 80 时，优先看 “Reduce JavaScript execution time” 下列出的具体函数名，再回代码里定位
useEffect或初始化逻辑
别忽略 TSServer 和 Webpack 的内存争抢
当你在 VSCode 里一边写 TypeScript、一边跑 webpack serve，两个进程都在解析同一套类型定义，TSServer 抢走内存会导致 Webpack 构建卡在 compiling... 状态不动，这不是代码问题，是资源分配冲突。
-
tsconfig.json必须含"skipLibCheck": true和"incremental": true，否则每次保存都重扫node_modules -
.vscode/settings.json里"files.watcherExclude"要精确到"**/node_modules/**"，少一个/**就无效 - 构建卡住时，先关掉所有非必要插件，特别是 ESLint 和 Stylelint —— 它们会在 Webpack 编译前预热语言服务
- VSCode 启动命令加
--max-memory=4096，否则 Electron 主进程默认不限堆内存，OOM 后整个构建流程就静默失败
真正卡住的从来不是 Webpack 配置本身，而是 VSCode 默认行为和你没意识到的资源竞争点。这些地方不手动干预，性能分析工具再好也跑不出有效数据。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
