Vue3 + Rsbuild 完全指南：10倍构建速度的现代前端开发方案

什么是 Rsbuild

Rsbuild 是由字节跳动开源的新一代构建工具，基于 Rust 开发，专为现代前端项目设计。它提供了极快的构建速度、优秀的开发体验和灵活的配置选项。

核心特性

• ⚡ 极速构建: 基于 Rust 实现，构建速度比 Webpack 快 10-100 倍
• 🔧 零配置: 开箱即用，支持 Vue、React、TypeScript 等
• 🎯 生产优化: 自动代码分割、Tree Shaking、压缩优化
• 🔥 热更新: 毫秒级的热模块替换
• 📦 多框架支持: Vue、React、Svelte、Solid 等

快速开始

创建项目

# 使用 create-rsbuild 脚手架
npm create rsbuild@latest my-vue-app

# 或手动安装
npm install @rsbuild/core @rsbuild/plugin-vue

基础配置

// rsbuild.config.js
import { defineConfig } from "@rsbuild/core";
import { pluginVue } from "@rsbuild/plugin-vue";

export default defineConfig({
  plugins: [pluginVue()],
  source: {
    entry: {
      index: "./src/main.js",
    },
  },
  dev: {
    port: 3000,
    open: true,
  },
});

Vue 组件示例

<!-- src/App.vue -->
<template>
  <div class="app">
    <h1>{{ message }}</h1>
    <button @click="count++">点击次数: {{ count }}</button>
  </div>
</template>

<script setup>
import { ref } from "vue";

const message = ref("Hello Rsbuild + Vue3!");
const count = ref(0);
</script>

<style scoped>
.app {
  text-align: center;
  padding: 2rem;
}
</style>

核心配置详解

开发服务器配置

export default defineConfig({
  dev: {
    port: 3000,
    host: "0.0.0.0",
    https: false,
    open: true,
    historyApiFallback: true,
  },
});

构建输出配置

export default defineConfig({
  output: {
    distPath: {
      root: "dist",
      js: "static/js",
      css: "static/css",
      media: "static/media",
    },
    clean: true,
    copy: [{ from: "public", to: "." }],
  },
});

环境变量配置

export default defineConfig({
  source: {
    define: {
      "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
    },
  },
});

插件系统

常用插件

import { defineConfig } from "@rsbuild/core";
import { pluginVue } from "@rsbuild/plugin-vue";
import { pluginReact } from "@rsbuild/plugin-react";

export default defineConfig({
  plugins: [
    pluginVue(),
    // pluginReact(), // React 支持
  ],
});

自定义插件

// 自定义插件示例
const myPlugin = () => ({
  name: "my-plugin",
  setup(api) {
    api.modifyRsbuildConfig((config) => {
      // 修改配置
      return config;
    });
  },
});

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

性能优化

代码分割

export default defineConfig({
  performance: {
    chunkSplit: {
      strategy: "split-by-module",
      splitChunks: {
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: "vendors",
            chunks: "all",
          },
        },
      },
    },
  },
});

压缩优化

export default defineConfig({
  performance: {
    compress: {
      js: true,
      css: true,
      html: true,
    },
  },
});

部署配置

静态资源优化

export default defineConfig({
  output: {
    filename: {
      js: "[name].[contenthash:8].js",
      css: "[name].[contenthash:8].css",
    },
    assetPrefix: "/",
    publicPath: "/",
  },
});

生产环境配置

export default defineConfig({
  mode: "production",
  performance: {
    buildCache: true,
    gzip: true,
  },
});

常见问题

Q: 如何处理 CSS 预处理器？

A: Rsbuild 内置支持 Sass、Less、Stylus，无需额外配置。

Q: 如何配置代理？

A: 在 dev 配置中添加 proxy 选项。

Q: 如何优化构建速度？

A: 启用 buildCache、使用 esbuild 压缩、合理配置 chunkSplit。

总结

Rsbuild 作为新一代构建工具，为 Vue3 项目提供了极致的开发体验和构建性能。通过合理的配置和最佳实践，可以充分发挥其优势，提升开发效率。