Vite 通过原生 ESM 按需编译、预构建依赖和极速 HMR，实现“按需加载”式开发，冷启与热更极快；启动时用 esbuild 预构建 CJS/UMD 依赖为 ESM 并缓存；生产构建基于优化的 Rollup，支持代码分割、Tree-shaking 和环境变量；开箱支持 TS、JSX、CSS 预处理器及主流框架。
Vite 通过原生 ES 模块（ESM）按需编译 + 预构建依赖 + 极速热更新（HMR），让前端构建从“打包先行”变成“按需加载”，大幅缩短冷启动和热更新时间，实现真正意义上的快速构建。
利用浏览器原生 ESM，跳过传统打包流程
开发阶段，Vite 不打包整个应用，而是直接以 ESM 方式 serve 源码：HTML 中的 <script type="module"></script> 请求会由 Vite 开发服务器拦截，对 .ts/.jsx/.vue 等文件进行即时转换（如 TypeScript 编译、JSX 转换），再返回给浏览器。模块只在被 import 时才处理，避免全量解析和打包。
- 无需等待 Webpack 那样的入口分析、依赖图构建、chunk 切分等耗时步骤
- 页面首次加载快（尤其大型项目），改动单个组件仅重编译该模块，HMR 延迟通常在 5–50ms
预构建（Pre-bundling）第三方依赖
Vite 启动时会自动将 node_modules 中的 CommonJS/UMD 模块（如 React、Lodash）用 esbuild 预构建为 ESM 格式，并缓存到 node_modules/.vite。这解决了两个问题：
将一个或多个 UI 原型图、线框图、产品截图或设计稿转换为标准化、可直接交付的 PRD 风格文档，供产品、设计、前端和测试共同使用。适用于 Codex 需要分析 PC 网页、桌面端、移动端、响应式页面、独立弹窗、表单、表格、看板、数据大屏或多页面流程截图，还原页面结构与交互，强制套用固定文档模板，抽取跨页面共享规则，或把一组原型沉淀为单页规范文档加整体业务流程文档的场景。不适用于纯视觉审美点评、代码实现、接口设计、埋点方案、竞品分析或无 UI 输入的业务需求创作。
- 浏览器无法直接运行 CJS 模块，预构建后可被原生 ESM 加载
- 避免成百上千个小型依赖文件被逐个请求和转换，合并为少量预构建产物，提升 HTTP 加载效率
- esbuild 比 Webpack/Rollup 快 10–100 倍，预构建通常 1 秒内完成
生产环境仍用 Rollup 打包，但更轻量高效
执行 vite build 时，Vite 底层调用 Rollup 进行生产构建，但做了针对性优化：
立即学习“Java免费学习笔记（深入）”；
- 默认启用 代码分割（Code Splitting） 和 静态资源哈希，支持按路由/组件动态导入自动切包
- 内置 Tree-shaking（基于 ES 模块语法），自动剔除未使用导出
- 支持
vite build --mode production切换环境变量，配合.env.production注入配置 - 可通过
build.rollupOptions直接透传 Rollup 配置，灵活定制压缩、插件等
零配置起步，开箱即用现代工具链
Vite 默认集成 TypeScript、JSX、CSS 预处理器（Sass/Less）、PostCSS、Vue/React/Svelte 框架支持，无需手动配 loader 或 plugin：
-
vite init可一键创建含 TypeScript + ESLint + Prettier 的模板项目 - 支持
import.meta.env、import.meta.hot、import.meta.glob等专属 API，简化环境管理与模块动态加载 - 插件生态丰富（如
@vitejs/plugin-react、vite-plugin-vue），扩展性强但不强制依赖
