Vite 静态资源与媒体资产处理：图片、字体、SVG 与 Worker
Vite 项目的静态资源处理全解：assetsInlineLimit 内联策略、图片优化（publicDir 与 import）、字体加载与子集化、SVG 最佳实践（组件化 vs 文件）、import.meta.url 与 Worker 加载、资源哈希与缓存，以及常见资源问题的排查。
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 并行计算、开发调试与故障排查工具链，帮助开发者构建高性能、可维护、可扩展的现代前端工程。
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 依赖预构建：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 实现源码转换、虚拟模块的实现原理、插件应用顺序，以及三个完整的实战插件示例。
Vite 与 Monorepo 多应用架构：pnpm workspace、共享包与构建隔离
系统讲解在 Monorepo 架构中使用 Vite 的最佳实践：pnpm workspace 搭建、共享包（UI 库/工具包）开发与发布、依赖预构建与 resolve.dedupe、多应用构建隔离与缓存、以及典型的 Monorepo Vite 项目结构。
Vite SSR 与服务端渲染实战：从模块图到全栈框架生态
系统讲解 Vite 的 SSR 能力：SSR 与传统 SPA 的差异、Vite SSR 架构与模块图、服务端渲染流程（entry-server/entry-client）、数据预取与流式渲染、开发期 SSR 的 HMR、以及基于 Vite 的全栈框架生态（Nuxt/Astro/SolidStart/SvelteKit）。