#Vite vs Webpack

#1. 面试题

Q: 如果让你做项目选型，Vite 和 Webpack 有什么核心区别？

#2. 核心解答

两者都是前端构建工具，但设计理念截然不同。

#(1) Webpack

定位：大一统的 Bundler (Modular Bundler)。

• 核心：一切皆模块 (Import Everything)。
• 优势：
  • 生态级：插件极其丰富 (Loader/Plugin)，几乎能处理所有非标文件。
  • 产物优化：Code Splitting, Tree Shaking 极其成熟，适合大型复杂项目。
  • 兼容性：支持 ie9+。
• 劣势：慢 (Bundled)。全量打包导致冷启动慢，热更新随着项目变大越来越慢。配置极其繁琐。

#(2) Vite

定位：下一代前端开发与构建工具 (Build Tooling)。

• 核心：开发环境 Bundleless (ESM)，生产环境 Rollup (Bundle)。
• 优势：
  • 快 (Unbundled Dev Server, Esbuild)。秒级冷启动。
  • 如丝般顺滑的 HMR：与项目大小解耦。
  • 开箱即用：支持 TS, JSX, CSS Preprocessor, PostCSS，无需配置。
• 劣势：
  • 生态：插件虽然兼容 Rollup，但针对特定 Loader 的场景不如 Webpack 丰富。
  • SSR：虽然原生支持 SSR，但依然比较复杂。
  • Browser Support：必须支持 Native ESM (Modern Browser)。需 Polyfill 才能兼容旧浏览器 (@vitejs/plugin-legacy)。

#3. 选型建议

• 新项目 (React/Vue): Vite。开发体验无敌。
• 大型存量项目 (Monorepo): Webpack (基于 pnpm workspace)。迁移成本太高。
• 需兼容 IE11: Webpack。
• SSR 复杂应用: Vite SSR 正在崛起 (Nuxt 3, Astro)。

#4. 总结

• Webpack: Mature, Ecosystem, Configurable, Slow Dev.
• Vite: Modern, ESM, Fast Dev, Simple.