
Rspack Best Practices
- 466 installs
- 86 repo stars
- Updated August 4, 2026
- rstackjs/agent-skills
rspack-best-practices is an agent skill that enforces Rspack configuration, CLI, CSS, bundle optimization, and profiling patterns for developers writing or troubleshooting Rspack frontend builds.
About
rspack-best-practices in rstackjs/agent-skills codifies rules for writing and reviewing Rspack projects. Configuration guidance recommends rspack.config.ts with defineConfig, explicit entry values for multi-page apps, narrow rule conditions using test, include, exclude, and resourceQuery, and preferring built-in Rspack plugins over community JavaScript alternatives when features are equivalent. The CLI section standardizes on rspack dev for local development, rspack build for production, and rspack preview only for local production previews when @rspack/cli is installed. The skill also covers type checking, CSS pipelines, asset handling, bundle optimization, and profiling during reviews or troubleshooting. Developers reach for rspack-best-practices when migrating Webpack projects, tuning production bundles, or auditing rspack.config.ts for maintainability.
- rspack-best-practices
Rspack Best Practices by the numbers
- 466 all-time installs (skills.sh)
- +22 installs in the week ending Jul 26, 2026 (Skillselion tracking)
- Ranked #887 of 4,347 Backend & APIs skills by installs in the Skillselion catalog
- Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/rstackjs/agent-skills --skill rspack-best-practicesAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 466 |
|---|---|
| repo stars | ★ 86 |
| Last updated | August 4, 2026 |
| Repository | rstackjs/agent-skills ↗ |
How do you configure rspack.config.ts for production bundles?
Use rspack-best-practices for development tasks
Who is it for?
Frontend developers writing or reviewing Rspack projects who need consistent rspack.config.ts patterns and production bundle optimization guidance.
Skip if: Teams standardized on Vite or Webpack without Rspack or projects that only need runtime JavaScript debugging unrelated to bundler config.
When should I use this skill?
User asks to write, review, troubleshoot, or optimize an Rspack config, rspack dev/build workflow, CSS rules, or bundle size.
What you get
Reviewed rspack.config.ts with explicit entries, narrow loader rules, optimized production build settings, and documented CLI workflow.
- Reviewed rspack.config.ts
- Documented dev and build CLI workflow
By the numbers
- Documents 3 primary CLI commands: rspack dev, rspack build, rspack preview
- Listed at 396 installs on skills.sh
Files
Rspack Best Practices
Apply these rules when writing or reviewing Rspack projects.
Configuration
- Use
rspack.config.tsanddefineConfig - Define explicit
entryvalues for multi-page applications - Keep one main config and branch by
process.env.NODE_ENVonly when needed - Keep rule conditions narrow and explicit (
test,include,exclude,resourceQuery) - Prefer built-in Rspack plugins/loaders over community JS alternatives when equivalent features exist
CLI
If @rspack/cli is installed:
- Use
rspack devfor local development - Use
rspack buildfor production build - Use
rspack previewonly for local production preview
Type checking
- Use
ts-checker-rspack-pluginfor integrated dev/build type checks - Or run
tsc --noEmit/vue-tsc --noEmitas an explicit script step
CSS
Choose one strategy:
- Built-in CSS (
type: 'css' | 'css/auto' | 'css/module') for modern setups css-loader+CssExtractRspackPluginfor webpack migration compatibilitystyle-loaderfor pure style-in-JS runtime injection scenarios
Optional:
- Use
builtin:lightningcss-loaderwhen goals are syntax downgrade + vendor prefixing - Use
sass-loader/less-loaderfor preprocessing Sass/Less files - Use
@tailwindcss/webpackfor Tailwind CSS integration
Bundle size optimization
- Prefer dynamic
import()for non-critical code paths - Prefer lightweight libraries where possible
- Keep
targetaligned with real compatibility requirements
Asset management
- Import source-managed assets from project source directories, not from
public - Reference
publicfiles by absolute URL path - Prefer asset modules (
asset,asset/resource,asset/inline,asset/source) over legacyfile-loader/url-loader/raw-loader
Profiling
- Use Node CPU profiling (
--cpu-prof) when JavaScript-side overhead is suspected - Use
RSPACK_PROFILE=OVERVIEWand analyze trace output for compiler-phase bottlenecks - Replace known slow stacks first (
babel-loader, PostCSS, terser) with Rspack built-ins when feasible
Security
- Do not publish
.mapfiles to public servers/CDNs when production source maps are enabled
Documentation
- For the latest (v2) docs, read http://rspack.rs/llms.txt
- For Rspack v1 docs, read http://v1.rspack.rs/llms.txt
Related skills
How it compares
Pick rspack-best-practices for Rspack-specific config and bundle rules; pick Webpack or Vite skills when the project does not use Rspack.
FAQ
What Rspack CLI commands does rspack-best-practices recommend?
rspack-best-practices standardizes on rspack dev for local development, rspack build for production builds, and rspack preview only for local production previews when @rspack/cli is installed.
How should rspack.config.ts be structured?
rspack-best-practices recommends rspack.config.ts with defineConfig, explicit entry values for multi-page apps, narrow test/include/exclude/resourceQuery rule conditions, and built-in Rspack plugins over community alternatives.