Vite 客户端运行时性能：加载策略、缓存与核心 Web 指标
系统覆盖 Vite 构建产物的运行时性能优化：构建期与运行期的分工、代码分割与路由级动态导入的加载策略、预加载（preload/prefetch）与资源优先级、静态资源的缓存策略（hash 文件名/长缓存/协商缓存）、LCP 与 INP 等核心 Web 指标的优化路径、产物体积与压缩（gzip/brotli/去重）、性能预算的建立与 CI 门禁、以及 RUM 测量与监控闭环，帮助开发者把「构建产物快」转化为「用户感知快」。
tag
Vite
共 47 篇文章。
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 框架集成：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 为什么这么快」。
Vite 依赖预构建：optimizeDeps 原理、缓存失效与 Monorepo 实战
深入 Vite 依赖预构建机制：为什么需要预构建（ESM 兼容 + 性能）、esbuild 扫描与打包、optimizeDeps 配置、缓存失效与 .vite 目录、Monorepo 与链接包处理、按需预构建。
Vite 中的 Web Worker 与 WASM：并行计算、模块 Worker 与加载优化
在 Vite 中用好 Worker 与 WASM：Worker 的 Vite 原生加载（?worker/new URL）、模块 Worker 与代码分割、Worker 池与通信设计、WASM 在 Vite 的加载方式（?url/instantiate/async）、WASM 与 Worker 的组合、性能权衡（线程/内存/传输），以及真实场景（图片处理/加密/数据编解码）。
Vite HMR 深入：热更新机制、模块边界与自定义 HMR
深入 Vite 热更新（HMR）原理：HMR 是什么、模块图与依赖链、accept 边界、自定义 HMR API（import.meta.hot）、插件实现 HMR、常见 HMR 失效与性能优化。
Vite CI/CD 构建优化：缓存策略、并行构建、产物交付与自动化部署
Vite 项目的 CI/CD 最佳实践：GitHub Actions 流水线、依赖缓存与 Vite 构建缓存、并行 Job 与分片、构建产物交付（哈希/上传）、Vercel/Netlify/GitHub Pages 自动化部署、构建失败排查。
Vite 项目脚手架与工程化起步：从 create-vite 到可维护的前端工程
以 create-vite 为起点，从零搭建一个工程化完备的 Vite 项目：模板选择与目录结构、依赖管理与脚本设计、ESLint + Prettier + Husky + lint-staged 代码质量工具链、路径别名与基础配置，以及从模板到可维护工程的演进路径。
Vite 配置详解与多环境变量管理：defineConfig 全参数实战
系统拆解 Vite 配置体系：defineConfig 与配置优先级、resolve/server/build 三大核心配置块、import.meta.env 环境变量机制、.env 文件多环境管理（development/production/staging）、以及配置类型推导与常见陷阱。
Vite 构建优化与代码分割：从 chunk 策略到加载性能基线
系统拆解 Vite 生产构建优化：构建流程与 esbuild/Rollup 分工、Tree Shaking 原理与 sideEffects、manualChunks 代码分割策略、资源内联与预加载、gzip/brotli 压缩对比、性能基线指标，以及常见构建问题的排查。
Vite 插件开发实战：钩子体系、transform 与虚拟模块
从零编写 Vite 插件：理解 Vite 插件与 Rollup 插件的钩子体系、开发期专属钩子（configureServer）、transform 与 load 实现源码转换、虚拟模块的实现原理、插件应用顺序，以及三个完整的实战插件示例。