VS Code 通过集成 Chrome DevTools 和 Lighthouse 实现前端性能分析：配置 launch.json 启动 Chrome 调试，利用 Performance 面板录制分析卡顿，结合 Lighthouse 审计核心指标，并借助 Import Cost 等插件优化工作流。
VS Code 本身不直接提供前端性能分析功能，但它能无缝集成 Chrome DevTools 和 Lighthouse 等主流工具，帮你高效完成性能诊断。关键在于用对扩展、配好调试环境、再结合浏览器原生能力。
启用 Chrome 调试支持
这是最常用也最直接的方式：让 VS Code 启动并控制 Chrome 实例，实时调试并分析运行时性能。
- 安装官方扩展 Debugger for Chrome（已归入 Microsoft 官方维护的 JavaScript Debugger，新版 VS Code 默认内置）
- 在项目根目录创建
.vscode/launch.json，添加配置：
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/src/*"
}
}
]
}
启动后，VS Code 会自动打开 Chrome 并附着调试器——此时按 Ctrl+Shift+P（或 Cmd+Shift+P），输入 Developer: Open Webview Developer Tools 或直接切换到 Chrome，按 F12 打开 DevTools。
利用 Performance 面板做运行时分析
在 Chrome DevTools 的 Performance 标签页中录制页面交互（如点击、滚动、加载），可精准定位卡顿、长任务、布局抖动等问题。
立即学习“前端免费学习笔记（深入）”；
NopCommerce (ASP.NET商城)
下载
nopCommerce 是一个由ASP.NET多层模式开发的开源电子商城系统，可以自行设置模板、配置灵活、功能强大，它内含一个目录前端和一个管理工具后端。前端包括用户注册、商品购买(可以进行评论)、投票、Blog等，后端有类别管理、产品管理、客户及角色管理、订单管理、纳税管理、国家（地区管理）、邮件发送、消息模板、新闻发布、blog管理,可以对列表数据进行XML导出。
- 点击录制按钮（●），执行目标操作，再点击停止
- 重点关注 Main 线程火焰图：红色长条代表主线程阻塞，黄色是 JS 执行，紫色是样式计算与布局
- 右键某一段任务 → Flame Chart 查看调用栈，双击函数跳转到 VS Code 对应源码（需 sourcemap 正确）
集成 Lighthouse 进行自动化性能评分
Lighthouse 可生成包含性能、可访问性、SEO 等维度的详细报告，VS Code 可通过扩展或终端快速触发。
- 安装扩展 Lighthouse（by Adam Johnson），启用后右键网页标签即可“Run Lighthouse Audit”
- 或在终端运行：
npx lighthouse http://localhost:3000 --view --chrome-flags="--headless"（需本地装 Chrome） - 重点关注 First Contentful Paint (FCP)、Largest Contentful Paint (LCP)、Cumulative Layout Shift (CLS) 三项核心指标
配合插件提升分析效率
几个轻量但实用的 VS Code 插件能补足前端性能工作流：
- Import Cost：在 import 行末显示包体积，提前预警过大依赖
- ESLint + eslint-plugin-react-perf：检测低效渲染（如未 memo 的组件、重复创建函数）
- Project Statistics：查看项目文件大小分布、依赖数量，辅助做裁剪决策
基本上就这些——不用离开编辑器，就能完成从启动、录制、分析到优化建议的完整闭环。
