揭开Vite的双引擎奥秘：ESBuild与Rollup的珠联璧合

2023-03-27 01:55:16

Vite：ESBuild 和 Rollup 的强大结合，打造卓越构建体验

前端构建工具领域风云变幻，Vite 凭借其闪电般的速度和卓越的性能表现，成为当之无愧的新星。其创新性的架构设计，将 ESBuild 和 Rollup 巧妙融合，在开发和构建的不同阶段发挥各自优势，带来高效且稳定的构建流程。

ESBuild：闪电般的开发利器

ESBuild 是一款以极速见长的 JavaScript 构建工具，在 Vite 的开发阶段（vite dev），它肩负着两项重任：预编译第三方依赖和编译业务代码中的 TypeScript 代码。

预编译第三方依赖： ESBuild 以其卓越的性能，能够快速将第三方依赖预编译为 ES 模块。此举消除了第三方依赖之间的语法差异（并非所有依赖都采用 ESM 语法），让 Vite 能够无缝处理来自不同来源的代码。

编译 TypeScript 代码： ESBuild 还负责将业务代码中的 TypeScript 代码编译为 JavaScript。TypeScript 是一种强大的超集语言，在 JavaScript 的基础上增加了类型系统，增强了代码的可读性、可维护性和可重用性。ESBuild 的高效编译能力确保了 Vite 在开发阶段也能保持流畅的体验。

Rollup：稳定可靠的生产构建器

Rollup 是一款成熟稳定的 JavaScript 构建工具，以其强大的功能性和丰富的插件生态而闻名。在 Vite 的构建阶段（vite build），Rollup 被赋予了构建稳定可用的生产环境包的重任。

构建生产环境包： Rollup 在 Vite 的构建阶段发挥着关键作用，负责将应用程序的代码、样式和依赖项打包成一个或多个可部署的包。通过 Rollup 的精心构建，生产环境包能够满足稳定性和性能的要求。

插件生态： Rollup 拥有丰富的插件生态，让其能够轻松扩展功能，满足各种项目的需求。例如，Rollup 可以与压缩器、代码分割工具和代码分析工具集成，进一步优化构建输出。

强强联手，打造卓越体验

ESBuild 和 Rollup 在 Vite 中的协同工作完美诠释了优势互补的原则。ESBuild 以其闪电般的速度，为 Vite 的开发阶段带来了无与伦比的体验，而 Rollup 则以其稳定性和强大功能性，为 Vite 的构建阶段保驾护航。这种强强联手，让 Vite 成为一款功能全面、性能卓越的前端构建工具。

代码示例：一个 Vite 项目的 vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// Vite 配置
export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      // Rollup 配置
      output: {
        format: 'es', // 输出格式
        chunkFileNames: '[name].js', // 代码分割文件命名
      },
    },
  },
});