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-practicesHow to use rsbuild-best-practices
- 1.Use rsbuild.config.ts with defineConfig for all configuration
- 2.Run rsbuild for local development and rsbuild build for production
- 3.Integrate type checking via @rsbuild/plugin-type-check or explicit tsc scripts
- 4.Apply dynamic import() for non-critical code and use lightweight dependencies
- 5.Import source-managed assets from project directories; reference public files by absolute URL
- 6.Run DEBUG=rsbuild to diagnose config or plugin issues
- 7.Use rsbuild inspect to review final Rsbuild/Rspack configuration
- 8.Profile with --cpu-prof for JavaScript overhead or RSPACK_PROFILE=OVERVIEW for compiler phases
Use cases
- 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
- 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
Only when no first-class Rsbuild option exists for your use case. Prefer built-in Rsbuild configuration options first.
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.
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.
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.
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.tsanddefineConfig - Use
tools.rspackortools.bundlerChainonly when no first-class Rsbuild option exists - Define explicit
source.entryvalues for multi-page applications - In TypeScript projects, prefer
tsconfig.jsonpath aliases first
CLI
- Use
rsbuildfor local development - Use
rsbuild buildfor production build - Use
rsbuild previewonly for local production preview - Use
rsbuild inspectto inspect final Rsbuild/Rspack configs
Type checking
- Use
@rsbuild/plugin-type-checkfor integrated dev/build type checks - Or run
tsc --noEmit/vue-tsc --noEmitas 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
publicfiles by absolute URL path
Security
- Do not publish
.mapfiles to public servers/CDNs when production source maps are enabled
Debugging
- Run with
DEBUG=rsbuildwhen diagnosing config resolution or plugin behavior - Read generated files in
dist/.rsbuildto confirm final config, not assumed config
Profiling
- Use Node CPU profiling (
--cpu-prof) when JavaScript-side overhead is suspected - Use
RSPACK_PROFILE=OVERVIEWand analyze trace output for compiler-phase bottlenecks
Documentation
- For the latest (v2) docs, read http://rsbuild.rs/llms.txt
- For Rsbuild v1 docs, read http://v1.rsbuild.rs/llms.txt
Related skills
More from rstackjs/agent-skills and the wider catalog.

rslib-best-practices
Rslib best practices for config, CLI workflow, output, declaration files, dependency handling, build optimization and toolchain integration. Use when writing, reviewing, or troubleshooting Rslib projects.

file-manager
Agent skill from rtgs2017/nagaagent.
code-simplifier
Review RTK Rust code for idiomatic simplification. Detects over-engineering, unnecessary allocations, verbose patterns. Applies Rust idioms without changing behavior.
design-patterns
Rust design patterns for RTK. Newtype, Builder, RAII, Trait Objects, State Machine. Applied to CLI filter modules. Use when designing new modules or refactoring existing ones.
rtk-tdd
>

create-branch
Create and checkout a new git branch with smart validation and GitHub issue integration