PluginBench
Skill
Pass
Audit score 90

rsbuild-best-practices

rstackjs/agent-skills

Rsbuild configuration, optimization, and debugging best practices for production projects.

What is rsbuild-best-practices?

Guidance on Rsbuild configuration, CLI workflows, type checking, bundle optimization, asset management, and debugging. Use when writing, reviewing, or troubleshooting Rsbuild projects to follow established patterns and avoid common pitfalls.

  • Configure Rsbuild projects using rsbuild.config.ts and defineConfig with explicit entry points
  • Optimize bundle size through dynamic imports, lightweight libraries, and aligned browserslist settings
  • Manage assets by importing source files and referencing public files via absolute URLs
  • Integrate type checking with @rsbuild/plugin-type-check or explicit tsc/vue-tsc scripts
  • Debug configuration and plugin behavior using DEBUG=rsbuild and dist/.rsbuild inspection
  • Profile performance bottlenecks with Node CPU profiling and RSPACK_PROFILE tracing

How to install rsbuild-best-practices

npx skills add https://github.com/rstackjs/agent-skills --skill rsbuild-best-practices
Claude Code
Cursor
Windsurf
Cline

How to use rsbuild-best-practices

  1. 1.Use rsbuild.config.ts with defineConfig for all configuration
  2. 2.Run rsbuild for local development and rsbuild build for production
  3. 3.Integrate type checking via @rsbuild/plugin-type-check or explicit tsc scripts
  4. 4.Apply dynamic import() for non-critical code and use lightweight dependencies
  5. 5.Import source-managed assets from project directories; reference public files by absolute URL
  6. 6.Run DEBUG=rsbuild to diagnose config or plugin issues
  7. 7.Use rsbuild inspect to review final Rsbuild/Rspack configuration
  8. 8.Profile with --cpu-prof for JavaScript overhead or RSPACK_PROFILE=OVERVIEW for compiler phases

Use cases

Good for
  • Setting up a multi-page Rsbuild application with proper entry point configuration
  • Reducing bundle size in a production build by identifying and refactoring non-critical code paths
  • Troubleshooting unexpected Rsbuild or Rspack behavior by inspecting generated configs
  • Integrating type checking into development and build workflows
  • Profiling slow build times to identify compiler or JavaScript-side bottlenecks
Who it's for
  • Frontend developers building with Rsbuild
  • DevOps engineers optimizing build pipelines
  • Code reviewers evaluating Rsbuild project quality
  • Performance engineers profiling and optimizing builds

rsbuild-best-practices FAQ

When should I use tools.rspack or tools.bundlerChain?

Only when no first-class Rsbuild option exists for your use case. Prefer built-in Rsbuild configuration options first.

How do I check for type errors in my Rsbuild project?

Use @rsbuild/plugin-type-check for integrated type checking during dev and build, or run tsc --noEmit / vue-tsc --noEmit as an explicit script step.

What's the difference between rsbuild build and rsbuild preview?

rsbuild build creates a production bundle. rsbuild preview serves the built output locally for testing—use it only for local preview, not for actual deployment.

How do I debug slow builds or unexpected behavior?

Run with DEBUG=rsbuild for config/plugin issues, use rsbuild inspect to review final configs, and profile with --cpu-prof or RSPACK_PROFILE=OVERVIEW for bottlenecks.

Should I commit .map source map files to production?

No. Do not publish .map files to public servers or CDNs when production source maps are enabled, as they expose source code.

Full instructions (SKILL.md)

Source of truth, from rstackjs/agent-skills.


name: rsbuild-best-practices description: Rsbuild best practices for config, CLI workflow, type checking, bundle optimization, assets, and debugging. Use when writing, reviewing, or troubleshooting Rsbuild projects.

Rsbuild Best Practices

Apply these rules when writing or reviewing Rsbuild projects.

Configuration

  • Use rsbuild.config.ts and defineConfig
  • Use tools.rspack or tools.bundlerChain only when no first-class Rsbuild option exists
  • Define explicit source.entry values for multi-page applications
  • In TypeScript projects, prefer tsconfig.json path aliases first

CLI

  • Use rsbuild for local development
  • Use rsbuild build for production build
  • Use rsbuild preview only for local production preview
  • Use rsbuild inspect to inspect final Rsbuild/Rspack configs

Type checking

  • Use @rsbuild/plugin-type-check for integrated dev/build type checks
  • Or run tsc --noEmit/vue-tsc --noEmit as an explicit script step

Bundle size optimization

  • Prefer dynamic import() for non-critical code paths
  • Prefer lightweight libraries where possible
  • Keep browserslist aligned with real compatibility requirements

Asset management

  • Import source-managed assets from project source directories, not from public
  • Reference public files by absolute URL path

Security

  • Do not publish .map files to public servers/CDNs when production source maps are enabled

Debugging

  • Run with DEBUG=rsbuild when diagnosing config resolution or plugin behavior
  • Read generated files in dist/.rsbuild to confirm final config, not assumed config

Profiling

  • Use Node CPU profiling (--cpu-prof) when JavaScript-side overhead is suspected
  • Use RSPACK_PROFILE=OVERVIEW and analyze trace output for compiler-phase bottlenecks

Documentation