包体分析与性能监控：Bundle Analyzer、性能预算与门禁
系统讲解 Vite 项目的包体分析与性能监控体系：包体分析的价值（知道包为什么大）、Bundle Analyzer 可视化产物、构建报告与产物统计、性能预算与 CI 门禁（设阈值防回退）、运行时性能监控（Web Vitals/错误/性能数据）、加载性能优化闭环（分析→优化→验证）、长尾模块与按需加载、慢构建的定位、以及性能治理流程（从临时优化到制度化），帮助建立可持续的性能管理体系。
posts
Vite 专题：从脚手架到生产优化的现代前端构建工程化
Vite 是当下最流行的前端构建工具，基于原生 ESM 与 esbuild/Rollup 双引擎，重新定义了开发体验与生产构建性能。本专题从工程化视角系统覆盖 Vite 全链路：项目脚手架与工程化起步（create-vite 模板、目录结构与工程规范）、配置文件与多环境变量管理（defineConfig 深度解析、resolve/server/build 配置、import.meta.env）、插件开发实战（插件钩子、transform、虚拟模块与 Rollup 生态联动）、构建优化与代码分割（chunk 拆分策略、Tree Shaking、gzip/brotli 压缩、预构建优化）、Monorepo 多应用架构（pnpm workspace、共享包、依赖预构建、构建隔离）、Vite SSR 与服务端渲染（SSR 架构、模块图与 HMR、全栈框架生态），并扩展测试实战（Vitest 单元/组件/E2E）、HMR 深入、依赖预构建（optimizeDeps 与缓存失效）、环境变量与生产构建最佳实践、框架集成（React/Vue/Svelte/Solid）以及 CI/CD 构建优化，进一步覆盖静态资源与媒体资产处理、微前端集成、构建缓存与持久化缓存策略、浏览器兼容与 Legacy 构建、Web Worker 与 WASM 并行计算、开发调试与故障排查工具链，并深入开发服务器内部架构（Connect 中间件、模块图与按需编译）、Source Map 生成原理（VLQ/mappings、inline/external/hidden）、CSP 与前端安全加固（内容安全策略、依赖供应链、构建产物安全）、容器化与 Docker 构建（多阶段构建、层缓存、nginx 部署）、客户端运行时性能优化（代码分割、preload、核心 Web 指标）以及开发代理与后端集成（server.proxy、路径重写、Mock 与联调工作流），再扩展导入图与模块图内部（依赖追踪/解析/模块节点/HMR 边界）、Tree-shaking 深入（摇树原理/副作用标记/exports 入口）、Rollup 构建管线（插件钩子/产物结构/manifest）、React 应用架构模式（三层架构/状态管理/路由分割/SSR）、组件库开发指南（lib 模式/dts 生成/npm 发布/按需加载）、包体分析与性能监控（Bundle Analyzer/性能预算/CI 门禁/Web Vitals），帮助开发者构建高性能、可维护、可扩展的现代前端工程。
组件库开发指南：Vite 库模式、发布 npm 与按需加载
系统讲解用 Vite 开发组件库的完整流程：为什么独立构建组件库、库模式构建配置（lib 模式/formats/external）、组件与样式方案（CSS 方案/主题/样式隔离）、类型声明与 dts、按需加载与 sideEffects（子路径导出）、发布 npm 流程（打包/版本/发布）、版本管理与变更日志、与 Monorepo 的整合、以及组件库的调试与文档，帮助从零搭建一套可发布、可按需、可维护的组件库。
React 应用架构模式：目录结构、状态管理与性能优化
系统讲解用 Vite 构建的 React 应用的架构模式：React 应用的三层架构（UI/状态/数据）、目录结构与模块边界（Feature-based 组织）、状态管理选型（本地/全局/服务端状态）、路由与代码分割（懒加载与性能）、数据获取与缓存（请求/缓存/竞态）、SSR/CSR 与混合渲染、组件设计模式（组合/受控/Hook 抽取）、性能优化清单（渲染/包体/加载）、以及与 Vite 工程化的结合（环境/构建/部署），帮助搭建可扩展、可维护、高性能的 React 应用。
Rollup 构建管线深入：插件钩子、产物结构与 manifest
深入 Vite 生产构建背后的 Rollup 管线：从入口到产物的完整链路、Rollup 插件钩子体系（resolveId/load/transform/模块图钩子/输出钩子）、解析与加载阶段、转换阶段、打包与代码生成阶段、产物结构（chunk/asset/entry 的关系）、manifest 与运行时注入、浏览器目标与降级策略、以及构建诊断（debug 与日志）的实践，帮助你理解构建产物如何产生并排查构建问题。
Tree-shaking 深入：摇树原理、副作用边界与产物瘦身
深入 Vite/Rollup 的 Tree-shaking 机制：摇树的原理（按使用标记 + 删除未用导出）、为什么必须 ESM（静态可分析）、副作用标记 sideEffects 的作用与配置、package.json 的 exports/module 字段、摇树的边界（动态导入/运行时/条件导入）、常见摇树失败与排查、库作者的摇树优化、与代码分割的配合、以及验证摇树效果的产物分析方法，帮助你写出「能摇动」的代码并诊断摇不掉的包体。
Vite 导入图与模块图内部：依赖追踪、解析与图结构
深入 Vite 的导入图（Import Graph）与模块图内部：导入图是什么（从入口到所有依赖的映射）、模块节点的结构与 id、解析流程（从裸导入到文件路径）、依赖追踪（静态分析 import 语句）、模块图与转换流水线的协作、动态导入与图的惰性扩展、模块图与 HMR 边界的关系、图的内存与性能优化、以及调试模块图的工具与实践，帮助你理解 Vite 为什么「按需加载、秒级启动」，并诊断依赖相关的问题。
Vite 开发代理与后端集成：server.proxy、路径重写与 Mock
系统覆盖 Vite Dev Server 与后端的协作工程：为什么前端开发需要代理、server.proxy 的完整配置（target/changeOrigin/rewrite）、API 路径重写与转发规则、HTTPS 与 WebSocket（wss）代理、本地 Mock 方案（中间件/vite-plugin-mock）与真实后端切换、多环境配置（dev/staging/prod 的 proxy 差异）、前后端分离联调工作流（契约先行/环境矩阵），以及代理故障排查，帮助团队把「前后端联调」从手工拼接口地址变成标准化的开发基建。
Vite 客户端运行时性能：加载策略、缓存与核心 Web 指标
系统覆盖 Vite 构建产物的运行时性能优化：构建期与运行期的分工、代码分割与路由级动态导入的加载策略、预加载（preload/prefetch）与资源优先级、静态资源的缓存策略（hash 文件名/长缓存/协商缓存）、LCP 与 INP 等核心 Web 指标的优化路径、产物体积与压缩（gzip/brotli/去重）、性能预算的建立与 CI 门禁、以及 RUM 测量与监控闭环，帮助开发者把「构建产物快」转化为「用户感知快」。
Vite 容器化与 Docker 构建：多阶段构建、层缓存与镜像优化
系统覆盖 Vite 前端项目的容器化工程实践：Docker 多阶段构建的架构（构建阶段 + 运行阶段）、依赖层缓存策略（pnpm-lock 优先/缓存挂载/分层技巧）、前端产物的静态服务镜像（nginx/静态服务器）、SPA 路由与 nginx 配置、CI 中的 Docker 构建缓存复用（BuildKit/远程缓存）、镜像体积优化与安全加固、以及多环境镜像矩阵，帮助前端团队把「npm run build + 服务器」升级为「可复用、可缓存、可审计」的容器化交付。
Vite 前端安全加固：CSP、依赖供应链与构建产物安全
系统覆盖基于 Vite 的前端应用安全加固实践：CSP（内容安全策略）的指令体系与 nonce/hash 机制、Vite 项目如何正确配置 CSP（script-src/style-src 与开发/生产差异）、依赖供应链安全（锁定版本/lockfile/漏洞扫描/审计）、构建产物的安全风险（source map 泄漏/API key 泄漏/注入）、XSS 与注入面在构建层的缓解，以及合规与安全基线的建立，帮助前端团队把安全从「上线后修补」前置到「构建与依赖层」。
Source Map 深入：生成原理、调试体验与错误监控
系统覆盖 Source Map 的底层原理与工程实践：source map 的作用与结构（sources/mappings/names）、VLQ 编码与 mappings 的生成机制、Vite 中 sourcemap 的配置与类型（inline/external/hidden）、浏览器 DevTools 的源码映射与调试体验、sourcemap 上传到错误监控平台（Sentry 等）的实践、生产环境的 sourcemap 安全与策略、以及还原映射与加载性能的权衡，帮助开发者把「调试体验」与「线上可观测性」都做好。
Vite 静态资源与媒体资产处理：图片、字体、SVG 与 Worker
Vite 项目的静态资源处理全解：assetsInlineLimit 内联策略、图片优化（publicDir 与 import）、字体加载与子集化、SVG 最佳实践（组件化 vs 文件）、import.meta.url 与 Worker 加载、资源哈希与缓存，以及常见资源问题的排查。
Vite 环境变量与生产构建最佳实践：import.meta.env、构建模式与产物优化
Vite 生产构建最佳实践：import.meta.env 环境变量体系（.env 文件/模式/替换）、构建模式与 base 路径、Sourcemap 策略、产物优化（压缩/代码分割/动态导入）、CDN 与 gzip、部署配置。
Vite 浏览器兼容与 Legacy 构建：build.target、Polyfill 与兼容插件
Vite 的浏览器兼容策略全解：build.target 与 esbuild 转译目标、现代 vs 遗留浏览器双构建（@vitejs/plugin-legacy）、polyfill 的按需加载（Polyfill.io/core-js）、browserslist 配置、动态 import 与语法降级、以及兼容性测试与决策。
Vite 测试实战：Vitest 单元测试、组件测试与 E2E 测试
系统覆盖 Vite 生态的测试方案：Vitest 单元测试（断言/参数化/快照）、组件测试（Vue/React Testing Library）、E2E 测试（Playwright）、Mock 与覆盖率、CI 集成，以及 Vite 插件兼容性。
Vite 框架集成：React、Vue、Svelte、Solid 与官方插件生态
系统覆盖 Vite 与主流前端框架的集成：@vitejs/plugin-vue、plugin-react、Svelte/Solid 插件、框架预设（create-vite 模板）、JSX 转换、框架 HMR、选择框架插件的要点。
Vite 构建缓存与持久化缓存策略：依赖预构建、Rollup 缓存与 CI 加速
Vite 构建缓存全解：缓存的三层结构（依赖预构建/.vite、esbuild、Rollup）、本地开发缓存 vs 生产构建缓存的差异、缓存失效与命中判定（package.json、lockfile、配置）、CI 里的持久化缓存配置、增量构建与 Turbopack 对比，以及缓存安全与坑。
Vite 微前端集成：Module Federation、qiankun 与 import maps
基于 Vite 的微前端落地全解：微前端的核心诉求（独立交付/技术异构/自治）、三种方案对比（Module Federation、qiankun、import maps + 原生 ESM）、Vite + Module Federation 配置实战、qiankun 与 Vite 的兼容处理、样式与路由隔离、共享依赖与版本冲突、以及微前端的构建与部署策略。
Vite 开发调试与故障排查：devtools、调试工具链与常见问题定位
Vite 项目的调试工具箱：dev server 调试（vite --debug/--host/端口）、构建调试（--debug/-d、产物分析）、浏览器 devtools 与 sourcemap、依赖问题排查（预构建/hmr/路径）、性能定位（慢模块/启动耗时）、日志与可视化分析、以及常见报错（404/别名/依赖解析/内存）的系统排查法。
Vite 开发服务器内部架构：中间件管线、模块图与按需编译
系统覆盖 Vite Dev Server 的内部工作原理：开发服务器的整体架构与双引擎分工、Connect 中间件管线（静态服务/转换/代理）、模块图与依赖解析（import 扫描/改写 ESM）、源码转换管道（esbuild 转译/插件 transform）、浏览器原生 ESM 的按需编译模型、WebSocket 与 HMR 消息机制、依赖预构建的整合方式，以及启动优化与常见问题排查，帮助开发者从「用 Vite」进阶到「理解 Vite 的 Dev Server 为什么这么快」。