Q9 · 构建工具

Vite 的原理是什么？

ViteESMesbuild

⚡ 速记答案（30 秒）

  • 开发时基于原生 ES Modules：按需加载文件，不再进行整包打包
  • 使用 esbuild/swc 做依赖预构建，解决第三方包的兼容和性能
  • 通过中间层开发服务器拦截请求，对 .vue、.tsx 等进行即时编译
  • 生产环境仍使用 Rollup 打包，享受成熟的优化能力
  • 优点：冷启动快、HMR 快、配置简单

📖 详细讲解

Vite 架构


开发模式

浏览器请求 → Vite Dev Server → 即时编译 → 返回 ESM

生产模式

源码 → Rollup 打包 → 优化后的 bundle

核心技术


技术作用
原生 ESM按需加载，无需打包
esbuild依赖预构建
Rollup生产构建

依赖预构建


将 CommonJS/UMD 依赖转为 ESM：


node_modules/.vite/deps/
├── react.js
├── lodash-es.js
└── ...

vs Webpack


对比WebpackVite
冷启动慢（需打包）快（按需）
HMR秒级毫秒级
配置复杂简单
生态最丰富快速成长
💡
面试技巧：回答工程化问题时，结合你实际项目中的配置和优化经验，更有说服力。