Vite 极速构建：原生 ESM 开发与 Rollup 打包

Vite 极速构建：原生 ESM 开发与 Rollup 打包

Vite 是什么

Vite（法语意为 “快”）是一个现代前端构建工具，由 Vue.js 作者尤雨溪开发。它利用浏览器原生 ES 模块（ESM）能力，实现极速的开发服务器启动和热更新，生产环境则采用 Rollup 进行打包，兼顾开发体验与线上性能。

• 开发时：不打包应用代码，直接以原生 ESM 方式提供文件，由浏览器按需加载。
• 生产时：使用高度优化的 Rollup 打包，输出传统 bundle，兼容各类浏览器。

传统打包工具的瓶颈

传统工具（如 Webpack）在开发时需要从入口文件出发，递归构建整个应用的依赖图，将所有模块打包成一个或多个 bundle，然后才能启动开发服务器。随着项目增大，这个过程会明显变慢。

• 冷启动慢：每次启动都要执行完整的打包流程。
• 热更新慢：模块变动时，需要重新打包相关 bundle，大型项目中更新时间随应用规模线性增长。

Vite 从根本上改变了这一模式。

开发模式：原生 ESM 的威力

浏览器原生 ESM 支持

现代浏览器均已支持 <script type="module"> 和 import / export 语法，可直接请求、执行模块，无需构建工具介入。

<script type="module" src="/src/main.js"></script>

Vite 开发服务器将源码文件作为原生 ES 模块直接提供给浏览器，只在浏览器请求某个模块时才编译该文件。

• 按需编译：只有被访问的模块才会被转换。
• 启动极快：开发服务器启动时间几乎恒定，与应用规模无关（仅需启动一个 HTTP 服务）。

模块预构建

虽然使用原生 ESM，但部分依赖（如 Node.js 的 CommonJS 模块、包含大量内部模块的库）无法直接在浏览器中运行。Vite 使用 esbuild 对这些依赖进行预构建。

• 依赖预构建：将 CommonJS/UMD 转为 ESM，并将有众多内联模块的库（如 lodash）合并为单个模块，减少浏览器请求数。
• 缓存机制：预构建结果缓存于 node_modules/.vite，除非依赖变更，否则一次构建永久复用。

这样既保留了 ESM 开发体验，又解决了兼容性与网络请求过多的问题。

极速热更新（HMR）

Vite 的 HMR 基于原生 ESM，当文件发生变化时，仅需使该模块及其最邻近的 HMR 边界（即接受更新的组件）失效即可。

• 无需重新打包：直接向浏览器推送更新的模块。
• 更新速度与应用大小无关：无论项目多大，HMR 始终快速。

生产构建：Rollup 灵活高效的打包

开发环境追求 “快”，生产环境则必须考虑浏览器兼容性、网络加载性能、代码分割等。Vite 在生产构建时切换为 Rollup 作为打包引擎。

为什么是 Rollup

• 树摇（Tree-shaking）优越：天生支持 ESM 静态分析，可移除未使用代码。
• 代码分割灵活：通过动态导入实现精细的 chunk 拆分。
• 插件生态共享：Vite 插件系统与 Rollup 插件几乎完全兼容，可直接使用大量现有 Rollup 插件。
• 可定制性强：在 vite.config.js 中可直接配置 Rollup 选项。

构建行为

执行 vite build 时，Vite 会：

1. 使用 Rollup 将应用代码、依赖打包为生产 bundle。
2. 应用所有 Vite 配置的优化（如 CSS 代码分割、静态资源处理、多页等）。
3. 默认输出到 dist/ 目录，文件经过压缩、文件名哈希化，适合直接部署。

配置示例

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    rollupOptions: {
      // 自定义 Rollup 输入输出
      input: 'src/main.js',
      output: {
        manualChunks: {
          vendor: ['lodash', 'axios']
        }
      }
    },
    target: 'es2015', // 设置目标浏览器范围
    minify: 'terser'   // 或 'esbuild' 快速并压缩
  }
})

为什么 Vite 能够兼顾速度与生产质量

• esbuild 使用 Go 编写，并行处理，预构建与编译速度快于传统 JavaScript 工具10~100倍。
• Rollup 的生产优化能力久经考验，通过丰富的配置满足复杂项目需求。

从零开始体验

快速创建项目

npm create vite@latest my-vite-app -- --template vanilla
cd my-vite-app
npm install
npm run dev

• dev 命令启动开发服务器，秒开。
• 修改文件，浏览器立即热更新，无需刷新。

目录结构

my-vite-app/
├── index.html        # 入口 HTML，必须放在根目录
├── src/
│   ├── main.js       # 应用入口
│   └── style.css
├── vite.config.js    # 可选的配置文件

编写 ES 模块

// src/math.js
export function add(a, b) {
  return a + b;
}

// src/main.js
import { add } from './math.js';
console.log(add(2, 3));

开发服务器无需任何构建步骤，直接在浏览器中就能运行。

核心概念总结

• 原生 ESM 开发：不打包应用源代码，利用浏览器模块系统实现秒级启动。
• 依赖预构建：将 CJS 和大型库转化为 ESM，减少请求数并保持快速。
• 快速 HMR：精确到模块的替换，性能与项目规模解耦。
• Rollup 生产构建：充分利用静态分析进行深度优化，输出高性能产物。
• 开箱即用：支持 TypeScript、JSX、CSS 预处理器等，无需额外配置。

通过 “开发用 ESM + 生产用 Rollup” 的分层设计，Vite 在开发效率与生产质量之间找到了最佳平衡点，已成为现代前端构建的标杆工具。