（1930期）Vite – 极速构建，深度可控

极速构建，深度可控 Vite 现代前端构建工具的配置与优化指南，涵盖开发、生产构建及库打包的 12 类核心模式，适合追求极速 HMR 和精细化控制的开发者。 使用说明 核心用法 Vite Patterns 是一套围绕 Vite 构建工具的配置最佳实践集合，覆盖从开发环境到生产部署的全链路优化。核心用法分为五大维度： 环境变量管理：VITE_ 前缀变量通过 import.meta.env 注入客户端，区别于 Node 的 process.env；.env.local 用于本地敏感配置且默认 gitignore 依赖预打包：首次启动时自动预编译依赖，通过 optimizeDeps.include/exclude 精细控制缓存策略，删除 node_modules/.vite 可强制重建 路径别名配置：需在 vite.config.ts 和 tsconfig.json 双重配置，推荐使用 path.resolve(__dirname, './src') 确保路径稳定性 开发服务器代理：支持 HTTP/WebSocket 代理，配置 changeOrigin: true 解决跨域，ws: true 显式转发 WebSocket 静态资源处理：public/ 目录原样复制，src/assets/ 经过哈希处理，动态路径使用 new URL('./img.png', import.meta.url) 显著优点 极速开发体验：基于原生 ESM 的 HMR 毫秒级更新，预打包机制避免重复编译 开箱即用与深度可控并存：默认配置覆盖 80% 场景，同时提供 rollupOptions、manualChunks 等底层配置入口 双模式支持：应用模式与库模式（build.lib）共用一套配置体系，降低多场景学习成本 SSR 友好：ssr.external/noExternal 精确控制 Node 端依赖打包行为，解决同构渲染常见陷阱 潜在缺点与局限性 CommonJS 兼容包袱：纯 ESM 设计导致部分遗留包需手动配置 optimizeDeps，命名导出解构需采用 import pkg from 'pkg' 迂回写法 代理仅限开发：生产环境必须配置真实 CORS 或反向代理，易与开发环境产生行为差异 HMR 边界复杂：循环依赖、CSS 在 JS 中导入等场景可能触发全量刷新，需理解热更新边界 类型生成缺失：库模式下需单独运行 tsc 生成 .d.ts，Vite 本身不处理类型输出 适合人群 已使用或计划迁移至 Vite 的前端开发团队 需要构建 npm 库（双格式 ESM/CJS）的库作者 对构建产物体积、代码分割策略有精细化要求的工程师 处理 SSR/SSG 场景的同构应用开发者 常规风险 环境变量泄露：误将敏感变量命名为 VITE_ 前缀会导致打包进客户端代码 缓存失效陷阱：修改依赖版本后未清除 node_modules/.vite 可能引入陈旧预打包产物 路径别名不一致：仅配置 Vite 而忽略 TypeScript 配置会导致 IDE 报错与运行时行为分离 生产代理失效：开发期依赖代理绕过 CORS，上线前未配置实际跨域策略导致接口失败 原始说明 Configure and optimize Vite for development, production builds, and library bundling.