Vite 核心架构技能用于在创建新 Vite 项目、理解 Vite 内部机制，或需要推理开发与生产环境行为差异时提供指导，避免混淆 Vite 的原生 ESM 开发模式与打包后的生产构建。
双模式架构 Vite 根据运行环境表现为两套完全不同的系统。开发服务器（vite）采用原生 ESM、不做打包，模块以单个文件通过 HTTP 交付，优先保证即时启动与 HMR；生产构建（vite build）通过 Rolldown（v8）或 Rollup（v5-7）进行完整打包并输出优化后的 chunk，优先保证输出体积。转换工具在 v8 使用 Oxc，v5-7 使用 esbuild；开发阶段预打包工具在 v8 使用 Rolldown，v5-7 使用 esbuild；CSS 压缩在 v8 使用 Lightning CSS，v5-7 使用 esbuild 或 lightningcss；JS 压缩在 v8 使用 Oxc（比 Terser 快 30-90 倍），v5-7 使用 esbuild。
运行环境与目标 Node.js 要求：v5、v6 需要 18+；v7+ 需要 20.19+ 或 22.12+。浏览器支持目标：开发服务器使用 esnext，即最新 JavaScript/CSS 特性、不转译；生产环境 v8 默认 baseline-widely-available，对应 Chrome 111、Edge 111、Firefox 114、Safari 16.4；v7 默认对应 Chrome 107、Edge 107、Firefox 104、Safari 16.0；旧版浏览器可通过 @vitejs/plugin-legacy 生成带 polyfill 的回退包。
关键警告 不要将 envPrefix 设为空字符串，否则会把所有环境变量（包括数据库密码等机密）暴露到客户端代码；不要通过 optimizeDeps.exclude 排除 CommonJS 依赖，它们必须被预打包以转换为 ESM 供开发服务器使用；不要编辑 node_modules/.vite/ 中的文件，这是预打包缓存目录，应使用 optimizeDeps.force: true 或 --force CLI 标志重建；不要把 JavaScript 文件作为应用入口，Vite 使用 index.html 作为入口，由 HTML 通过 <script type="module" src="..."> 引用脚本；始终为 vite.config.ts 使用 defineConfig() 包装，以获得 TypeScript 智能提示和类型检查；始终单独运行 tsc --noEmit 做类型检查，因为 Vite 只做转译、不做类型检查，不应依赖 Vite 保证 TypeScript 类型安全。
工作原理 开发服务器以原生 ES 模块形式通过 HTTP 提供源文件：浏览器请求 index.html，HTML 包含模块脚本标签，浏览器请求源文件时 Vite 实时转换 TypeScript、JSX 等，浏览器解析 import 语句并请求每个依赖，Vite 拦截 node_modules 导入并提供预打包版本。整个过程不做打包，每个源文件都是独立 HTTP 请求，HMR 更新通过模块图传播，只替换变更模块。依赖预打包在首次启动时自动运行，原因有二：将 CommonJS/UMD 转换为 ESM（开发服务器只提供原生 ESM），以及提升性能（如 lodash-es 的 600+ 模块会合并为单个请求）。预打包结果缓存于 node_modules/.vite，当 lockfile 变化、vite.config 变化、NODE_ENV 变化或 patches 文件夹变化时缓存失效。生产构建会从 index.html 入口点开始解析模块图，应用所有插件转换，通过 Rolldown 或 Rollup 打包并做代码分割，再压缩 JS 与 CSS，最后将优化后的静态资源输出到 dist/。
index.html 作为入口点 与 Webpack 等不同，Vite 将 index.html 作为入口点：根目录下的 index.html、about.html、nested/page.html 分别映射到对应开发 URL。Vite 会解析 <script type="module" src="..."> 标签以及内联模块脚本块，处理所有引用的模块和 CSS。
决策树 创建新项目时选择框架模板：React 项目若需要 Babel 插件用 react-ts，若追求最快转换用 react-swc-ts；Vue 用 vue-ts；Svelte 用 svelte-ts；Solid 用 solid-ts；Preact 用 preact-ts；Lit Web Components 用 lit-ts；Qwik 用 qwik-ts；无框架用 vanilla-ts。始终使用 -ts 变体，因为 TypeScript 变体包含正确的类型定义和 vite-env.d.ts。选择构建目标：仅现代浏览器默认即可；稍旧环境可设 build.target: 'es2020'；IE11 或极旧浏览器添加 @vitejs/plugin-legacy；服务端或 Node.js 设 build.target: 'node20'。
官方插件 @vitejs/plugin-react 用于 React 配合 Babel，React 项目默认使用；@vitejs/plugin-react-swc 用于更快的构建；@vitejs/plugin-vue 用于 Vue 3 单文件组件，Vue 项目始终使用；@vitejs/plugin-vue-jsx 用于 Vue 中的 JSX/TSX；@vitejs/plugin-rsc 用于 React Server Components；@vitejs/plugin-legacy 用于旧版浏览器支持。
CLI 命令与项目结构 常用命令：vite 启动带 HMR 的开发服务器，默认端口 5173；vite build 打包生产版本；vite preview 本地预览生产构建，默认端口 4173。关键标志包括 --port、--open、--mode、--force（重新打包依赖）、--host（暴露到局域网）。标准 package.json 脚本为 dev、build、preview 分别对应上述命令。项目结构中 index.html 位于项目根目录而非 src/ 内，public/ 存放原样复制的静态资源，src/ 包含模块入口、根组件、vite-env.d.ts 和经处理的资源，node_modules/.vite/ 为自动生成的预打包缓存。
参考资料与官方来源 references/internals.md 包含版本演进、模块图内部机制与构建管线细节；references/examples.md 包含最小项目搭建、CLI 命令与 package.json 脚本；references/anti-patterns.md 包含常见架构错误及解释。官方来源包括 https://vite.dev/guide/、https://vite.dev/config/、https://vite.dev/guide/dep-pre-bundling、https://vite.dev/guide/cli、https://vite.dev/plugins/。