Rsbuild

Rsbuild 是一套面向应用项目的现代构建工具，底层基于 Rspack。如果说 Vite 的标签偏“开发体验很快”，Rsbuild 的标签更像“在速度和工程能力之间取一个更稳的平衡”。

Rsbuild 适合什么场景

• 中大型前端应用
• 更看重开箱即用和工程一致性
• 想用 Rust 路线底层能力，但不想从 bundler 细节自己拼起

一个典型的 React 起步方式

pnpm create rsbuild

最常见的项目里，配置文件一般会长这样：

import { defineConfig } from '@rsbuild/core'
import { pluginReact } from '@rsbuild/plugin-react'

export default defineConfig({
  plugins: [pluginReact()],
  source: {
    entry: {
      index: './src/index.tsx',
    },
  },
  resolve: {
    alias: {
      '@': './src',
    },
  },
  server: {
    port: 3000,
    proxy: {
      '/api': 'http://localhost:8080',
    },
  },
  output: {
    assetPrefix: '/',
  },
})

一个更进阶的配置参考

import { defineConfig } from '@rsbuild/core'
import { pluginReact } from '@rsbuild/plugin-react'

export default defineConfig({
  plugins: [pluginReact()],
  source: {
    entry: {
      main: './src/main.tsx',
      admin: './src/admin.tsx',
    },
    define: {
      __APP_VERSION__: JSON.stringify(process.env.npm_package_version),
    },
  },
  resolve: {
    alias: {
      '@': './src',
      '@shared': '../shared/src',
    },
  },
  server: {
    port: 3000,
    proxy: {
      '/api': 'http://localhost:8080',
    },
  },
  html: {
    template: './public/index.html',
  },
  output: {
    distPath: {
      root: 'dist',
      js: 'static/js',
      css: 'static/css',
    },
    sourceMap: {
      js: 'source-map',
    },
  },
  performance: {
    chunkSplit: {
      strategy: 'split-by-experience',
    },
  },
})

这类配置更像真实团队项目：

• 多入口
• monorepo 别名
• 环境常量
• 构建产物目录细分
• 拆包策略

前端项目里最常碰到的几块

React 集成

@rsbuild/plugin-react 基本就是 React 项目的起手配置。它会把 JSX、Fast Refresh 和常见编译能力接上。

别名和入口

和 Vite 类似，别名、入口、多页面结构在这层都能处理。

代理和开发服务器

后台项目、BFF 项目、本地联调项目，通常也会在 server 这一层接代理。

样式和静态资源

CSS Modules、Less、Sass、图片资源这些东西，Rsbuild 默认就能接住大部分常见场景。团队更常见的工作，不是从零补 loader，而是确认项目约定怎么统一。

环境变量

多环境构建、测试环境地址切换，也会落在这里。真正值得提早收住的是变量命名和暴露边界，不要把服务端配置直接带进浏览器。

和 Rspack 的关系

• Rspack：更底层的 bundler
• Rsbuild：更面向项目的构建方案

多数前端团队真正接触的是 Rsbuild，不是直接裸用 Rspack。