Vite / esbuild / SWC

Vite 是当前最流行的前端 dev server + 构建工具之一；其速度来自 开发态原生 ESM 与 esbuild 预构建依赖；生产构建则常用 Rollup。esbuild 与 SWC 是用 Rust 写的极速编译器，常被框架当作底层。

学习目标

• 理解 Vite「开发 vs 生产」双引擎策略
• 知道 esbuild、SWC 在链路中的位置
• 能读懂基础 vite.config.ts

Vite 开发模式

浏览器请求 /src/main.tsx
    → Vite 即时编译该模块（esbuild 转 TS/JSX）
    → 依赖 node_modules 预打包成 ESM 缓存
    → HMR 只更新变更模块

对比 Webpack dev：先打整包再启动 → 项目越大越慢；Vite 按需编译 → 冷启动通常秒级。

生产构建

vite build 默认走 Rollup：更好的 tree-shaking 与 chunk 分割。配置示例：

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";

export default defineConfig({
  plugins: [react()],
  build: { sourcemap: true },
});

@vitejs/plugin-react-swc 用 SWC 替代 Babel 转 JSX——与 react-essentials 的 Vite 模板一致。

esbuild vs SWC vs Babel

工具	强项	常见用途
esbuild	极快 bundle/转译	Vite 依赖预构建、部分 minify
SWC	极快 TS/JSX	Next.js、Vite React 插件
Babel	插件生态最全	需特殊语法转换的遗留项目

typescript-essentials 的类型擦除可由 esbuild/SWC/tsc 任一完成；类型检查仍建议单独跑 tsc --noEmit（见 ft-typecheck）。

与 Next.js 的差异

nextjs-essentials 使用 Next 自有构建（Turbopack 开发、Webpack/Rollup 系生产），不是标准 Vite 项目——但 思想相通：快编译、代码分割、Server/Client 边界。

学 Vite 仍值得：组件库 demo、Storybook、纯 SPA 大量采用 Vite。

环境变量

Vite 暴露 import.meta.env.VITE_* 到客户端；勿把密钥前缀 VITE_——会打进 bundle。Next 用 NEXT_PUBLIC_，概念类似。

练习

• npm create vite@latest 选 React + TS，对比 dev 与 build 产物
• 改一个组件保存，观察终端 HMR 日志
• 在 vite.config.ts 加 server.port 自定义端口

小结

Vite 开发靠 ESM + esbuild 快启；生产靠 Rollup 优化体积。 下一课看 Rollup 与 Parcel 在「库打包」与「零配置应用」上的分工。