rspack-best-practices

Name: rspack-best-practices
Author: rstackjs

84stars1forks

How to install rspack-best-practices?

rstackjs/agent-skills/rspack-best-practices

$npx -y skills add rstackjs/agent-skills --skill rspack-best-practices

Installs into the current project.

Summary

Rspack best practices for config, CLI workflow, type checking, CSS, bundle optimization, assets and profiling. Use when writing, reviewing, or troubleshooting Rspack projects.

Files · 1

View on GitHub

SKILL.md

1	# Rspack Best Practices
2
3	Apply these rules when writing or reviewing Rspack projects.
4
5	## Configuration
6
7	- Use `rspack.config.ts` and `defineConfig`
8	- Define explicit `entry` values for multi-page applications
9	- Keep one main config and branch by `process.env.NODE_ENV` only when needed
10	- Keep rule conditions narrow and explicit (`test`, `include`, `exclude`, `resourceQuery`)
11	- Prefer built-in Rspack plugins/loaders over community JS alternatives when equivalent features exist
12
13	## CLI
14
15	If `@rspack/cli` is installed:
16
17	- Use `rspack dev` for local development
18	- Use `rspack build` for production build
19	- Use `rspack preview` only for local production preview
20
21	## Type checking
22
23	- Use `ts-checker-rspack-plugin` for integrated dev/build type checks
24	- Or run `tsc --noEmit`/`vue-tsc --noEmit` as an explicit script step
25
26	## CSS
27
28	Choose one strategy:
29
30	- Built-in CSS (`type: 'css' \| 'css/auto' \| 'css/module'`) for modern setups
31	- `css-loader` + `CssExtractRspackPlugin` for webpack migration compatibility
32	- `style-loader` for pure style-in-JS runtime injection scenarios
33
34	Optional:
35
36	- Use `builtin:lightningcss-loader` when goals are syntax downgrade + vendor prefixing
37	- Use `sass-loader`/`less-loader` for preprocessing Sass/Less files
38	- Use `@tailwindcss/webpack` for Tailwind CSS integration
39
40	## Bundle size optimization
41
42	- Prefer dynamic `import()` for non-critical code paths
43	- Prefer lightweight libraries where possible
44	- Keep `target` aligned with real compatibility requirements
45
46	## Asset management
47
48	- Import source-managed assets from project source directories, not from `public`
49	- Reference `public` files by absolute URL path
50	- Prefer asset modules (`asset`, `asset/resource`, `asset/inline`, `asset/source`) over legacy `file-loader`/`url-loader`/`raw-loader`
51
52	## Profiling
53
54	- Use Node CPU profiling (`--cpu-prof`) when JavaScript-side overhead is suspected
55	- Use `RSPACK_PROFILE=OVERVIEW` and analyze trace output for compiler-phase bottlenecks
56	- Replace known slow stacks first (`babel-loader`, PostCSS, terser) with Rspack built-ins when feasible
57
58	## Security
59
60	- Do not publish `.map` files to public servers/CDNs when production source maps are enabled
61
62	## Documentation
63
64	- For the latest (v2) docs, read http://rspack.rs/llms.txt
65	- For Rspack v1 docs, read http://v1.rspack.rs/llms.txt

People who liked this also viewed

6 picks

Type

rspack-best-practices

84stars1forks

View on GitHub

How to install rspack-best-practices?

rstackjs/agent-skills/rspack-best-practices

$npx -y skills add rstackjs/agent-skills --skill rspack-best-practices

Installs into the current project.

Summary

Rspack best practices for config, CLI workflow, type checking, CSS, bundle optimization, assets and profiling. Use when writing, reviewing, or troubleshooting Rspack projects.

Files · 1

View on GitHub

SKILL.md

1	# Rspack Best Practices
2
3	Apply these rules when writing or reviewing Rspack projects.
4
5	## Configuration
6
7	- Use `rspack.config.ts` and `defineConfig`
8	- Define explicit `entry` values for multi-page applications
9	- Keep one main config and branch by `process.env.NODE_ENV` only when needed
10	- Keep rule conditions narrow and explicit (`test`, `include`, `exclude`, `resourceQuery`)
11	- Prefer built-in Rspack plugins/loaders over community JS alternatives when equivalent features exist
12
13	## CLI
14
15	If `@rspack/cli` is installed:
16
17	- Use `rspack dev` for local development
18	- Use `rspack build` for production build
19	- Use `rspack preview` only for local production preview
20
21	## Type checking
22
23	- Use `ts-checker-rspack-plugin` for integrated dev/build type checks
24	- Or run `tsc --noEmit`/`vue-tsc --noEmit` as an explicit script step
25
26	## CSS
27
28	Choose one strategy:
29
30	- Built-in CSS (`type: 'css' \| 'css/auto' \| 'css/module'`) for modern setups
31	- `css-loader` + `CssExtractRspackPlugin` for webpack migration compatibility
32	- `style-loader` for pure style-in-JS runtime injection scenarios
33
34	Optional:
35
36	- Use `builtin:lightningcss-loader` when goals are syntax downgrade + vendor prefixing
37	- Use `sass-loader`/`less-loader` for preprocessing Sass/Less files
38	- Use `@tailwindcss/webpack` for Tailwind CSS integration
39
40	## Bundle size optimization
41
42	- Prefer dynamic `import()` for non-critical code paths
43	- Prefer lightweight libraries where possible
44	- Keep `target` aligned with real compatibility requirements
45
46	## Asset management
47
48	- Import source-managed assets from project source directories, not from `public`
49	- Reference `public` files by absolute URL path
50	- Prefer asset modules (`asset`, `asset/resource`, `asset/inline`, `asset/source`) over legacy `file-loader`/`url-loader`/`raw-loader`
51
52	## Profiling
53
54	- Use Node CPU profiling (`--cpu-prof`) when JavaScript-side overhead is suspected
55	- Use `RSPACK_PROFILE=OVERVIEW` and analyze trace output for compiler-phase bottlenecks
56	- Replace known slow stacks first (`babel-loader`, PostCSS, terser) with Rspack built-ins when feasible
57
58	## Security
59
60	- Do not publish `.map` files to public servers/CDNs when production source maps are enabled
61
62	## Documentation
63
64	- For the latest (v2) docs, read http://rspack.rs/llms.txt
65	- For Rspack v1 docs, read http://v1.rspack.rs/llms.txt

People who liked this also viewed

6 picks

Type