Vite Rolldown 完全指南：基于 Rust 的新一代打包器，性能提升 10 倍！

概述

Vite Rolldown 是 Vite 7.0+ 中引入的新一代打包器，基于 Rust 重写了 Rollup 的核心功能。它旨在提供更快的构建速度和更好的性能，同时保持与现有 Rollup 生态系统的兼容性。

核心特性

性能优势

• Rust 重写：核心逻辑使用 Rust 实现，性能显著提升
• 并行处理：支持多线程并行构建，充分利用现代硬件
• 内存优化：更高效的内存管理，减少内存占用
• 增量构建：智能缓存机制，只重新构建变更的文件

兼容性

• Rollup 兼容：保持与现有 Rollup 插件生态的兼容性
• Vite 集成：无缝集成到 Vite 构建流程中
• 配置迁移：支持从 Rollup 配置平滑迁移

新功能

• 更快的 HMR：热模块替换速度提升
• 更好的 Tree Shaking：更精确的死代码消除
• 优化的代码分割：更智能的代码分割策略

配置

基础配置

// vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
  build: {
    // 启用 Rolldown
    rollupOptions: {
      // Rolldown 特定配置
      output: {
        // 代码分割配置
        manualChunks: {
          vendor: ["vue", "vue-router"],
          utils: ["lodash", "dayjs"],
        },
      },
    },
  },
});

高级配置

// vite.config.js
import { defineConfig } from "vite";

export default defineConfig({
  build: {
    rollupOptions: {
      // 输入配置
      input: {
        main: "src/main.js",
        admin: "src/admin.js",
      },

      // 输出配置
      output: {
        // 文件命名
        entryFileNames: "js/[name]-[hash].js",
        chunkFileNames: "js/[name]-[hash].js",
        assetFileNames: "assets/[name]-[hash].[ext]",

        // 代码分割
        manualChunks: (id) => {
          if (id.includes("node_modules")) {
            return "vendor";
          }
          if (id.includes("utils")) {
            return "utils";
          }
        },
      },

      // 外部依赖
      external: ["jquery"],

      // 插件配置
      plugins: [
        // 自定义插件
      ],
    },
  },
});

使用场景

单页应用 (SPA)

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        // SPA 优化配置
        manualChunks: {
          vendor: ["vue", "vue-router", "pinia"],
          ui: ["element-plus", "ant-design-vue"],
        },
      },
    },
  },
});

多页应用 (MPA)

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        home: "src/pages/home/index.html",
        about: "src/pages/about/index.html",
        contact: "src/pages/contact/index.html",
      },
      output: {
        // 多页面输出配置
        dir: "dist",
        format: "es",
      },
    },
  },
});

库开发

// vite.config.js
export default defineConfig({
  build: {
    lib: {
      entry: "src/index.js",
      name: "MyLibrary",
      formats: ["es", "umd", "cjs"],
    },
    rollupOptions: {
      external: ["vue", "lodash"],
      output: {
        globals: {
          vue: "Vue",
          lodash: "_",
        },
      },
    },
  },
});

性能优化

代码分割策略

// 基于路由的代码分割
manualChunks: (id) => {
  if (id.includes("node_modules")) {
    if (id.includes("vue")) {
      return "vue-vendor";
    }
    if (id.includes("lodash")) {
      return "utils-vendor";
    }
    return "vendor";
  }

  if (id.includes("pages/")) {
    const match = id.match(/pages\/([^/]+)/);
    if (match) {
      return `page-${match[1]}`;
    }
  }
};

缓存优化

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      cache: true, // 启用缓存
      output: {
        // 稳定的文件名
        entryFileNames: "js/[name].js",
        chunkFileNames: "js/[name].js",
        assetFileNames: "assets/[name].[ext]",
      },
    },
  },
});

压缩优化

// vite.config.js
export default defineConfig({
  build: {
    minify: "terser",
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    },
    rollupOptions: {
      output: {
        // 压缩配置
        compact: true,
      },
    },
  },
});

插件集成

常用插件

// vite.config.js
import legacy from "@vitejs/plugin-legacy";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [
    vue(),
    legacy({
      targets: ["defaults", "not IE 11"],
    }),
  ],
  build: {
    rollupOptions: {
      plugins: [
        // Rollup 插件
      ],
    },
  },
});

自定义插件

// 自定义 Rolldown 插件
const myPlugin = () => {
  return {
    name: "my-rolldown-plugin",
    transform(code, id) {
      // 转换逻辑
      return {
        code: transformedCode,
        map: null,
      };
    },
  };
};

export default defineConfig({
  build: {
    rollupOptions: {
      plugins: [myPlugin()],
    },
  },
});

调试与监控

构建分析

# 安装分析工具
npm install rollup-plugin-visualizer

# 配置分析插件
import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  build: {
    rollupOptions: {
      plugins: [
        visualizer({
          filename: 'dist/stats.html',
          open: true
        })
      ]
    }
  }
})

性能监控

// 构建性能监控
export default defineConfig({
  build: {
    rollupOptions: {
      onwarn(warning, warn) {
        // 自定义警告处理
        console.log("Build warning:", warning);
      },
    },
  },
});

最佳实践

配置优化

• 合理使用 manualChunks 进行代码分割
• 避免过度分割导致请求数量增加
• 利用缓存机制提升构建速度
• 根据项目特点选择合适的输出格式

性能调优

• 监控构建时间和包大小
• 定期分析构建产物
• 优化依赖引入方式
• 使用 Tree Shaking 减少包体积

兼容性考虑

• 测试不同浏览器的兼容性
• 合理配置 polyfill
• 注意 ES 模块的兼容性

总结

Vite Rolldown 作为新一代打包器，在保持兼容性的同时提供了显著的性能提升。通过合理配置和优化，可以充分发挥其优势，为项目构建带来更好的体验。

关键要点：

• 性能优先：Rust 实现带来显著性能提升
• 兼容性：保持与 Rollup 生态的兼容
• 易用性：配置简单，迁移成本低
• 可扩展性：支持插件系统，满足各种需求

随着 Vite 生态的不断发展，Rolldown 将成为构建工具的重要选择。