close
logologo
指南
配置
插件
API
社区
版本
更新日志
Rsbuild 0.x 文档
English
简体中文
指南
配置
插件
API
社区
更新日志
Rsbuild 0.x 文档
English
简体中文
logologo

开始

介绍
快速上手
功能导航
名词解释

框架

React
Vue
Preact
Svelte
Solid

基础

命令行工具
开发服务器
构建产物
静态资源
HTML
JSON
Wasm
TypeScript
Web Workers
部署静态站点
升级 Rsbuild

配置

配置 Rspack
配置 Rsbuild
配置 SWC

样式

CSS
CSS Modules
CSS-in-JS
Tailwind CSS v4
Tailwind CSS v3
UnoCSS

进阶

路径别名
环境变量
模块热更新
浏览器范围
浏览器兼容性
模块联邦
多环境构建
服务端渲染(SSR)
测试

优化

代码拆分
产物体积优化
提升构建性能
静态资源内联

迁移

从 Rsbuild 0.x 迁移
webpack
Create React App
Vue CLI
Vite
Vite 插件
Modern.js Builder

调试

开启调试模式
构建性能分析
使用 Rsdoctor

常见问题

通用类问题
功能类问题
异常类问题
热更新问题
📝 在 GitHub 上编辑此页
上一页构建性能分析
下一页通用类问题

#使用 Rsdoctor

Rsdoctor 是一款为 Rspack 生态量身打造的构建分析工具。

Rsdoctor 致力于成为一站式、智能化的构建分析工具,通过可视化与智能分析,使整个构建流程变得透明、可预测和可优化,从而帮助开发团队精准定位瓶颈、优化性能并提升工程质量。

当你需要调试构建产物或构建过程时,可以借助 Rsdoctor 来提升排查问题的效率。

#快速上手

在基于 Rsbuild 的项目中,你可以通过以下步骤开启 Rsdoctor 分析:

  1. 安装 Rsdoctor 插件:
npm
yarn
pnpm
bun
npm add @rsdoctor/rspack-plugin -D
  1. 在 CLI 命令前添加 RSDOCTOR=true 环境变量:
package.json
{
  "scripts": {
    "dev:rsdoctor": "RSDOCTOR=true rsbuild dev",
    "build:rsdoctor": "RSDOCTOR=true rsbuild build"
  }
}

由于 Windows 不支持上述用法,你也可以使用 cross-env 来设置环境变量,这可以确保在不同的操作系统中都能正常使用:

package.json
{
  "scripts": {
    "dev:rsdoctor": "cross-env RSDOCTOR=true rsbuild dev",
    "build:rsdoctor": "cross-env RSDOCTOR=true rsbuild build"
  },
  "devDependencies": {
    "cross-env": "^7.0.0"
  }
}

在项目内执行上述命令后,Rsbuild 会自动注册 Rsdoctor 的插件,并在构建完成后打开本次构建的分析页面,请参考 Rsdoctor 文档 来了解完整功能。

#配置项

如果你需要配置 Rsdoctor 插件提供的 选项,请手动注册 Rsdoctor 插件:

rsbuild.config.ts
import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';

export default {
  tools: {
    rspack: {
      plugins: [
        process.env.RSDOCTOR === 'true' &&
          new RsdoctorRspackPlugin({
            // 插件选项
          }),
      ],
    },
  },
};