Skip to content

Feature: RSpack#473

Draft
fabiankaegy wants to merge 16 commits intodevelopfrom
feature/rspack
Draft

Feature: RSpack#473
fabiankaegy wants to merge 16 commits intodevelopfrom
feature/rspack

Conversation

@fabiankaegy
Copy link
Member

This pull request makes RSPack the default bundler for 10up-toolkit, replacing webpack to provide significantly faster builds and improved performance for WordPress projects. It also updates documentation and test snapshots to reflect this change, while maintaining full backwards compatibility and offering webpack as a fallback option.

Closes #451 Alternative to #466

Bundler Upgrade and Performance Improvements:

  • RSPack is now the default bundler in 10up-toolkit, delivering approximately 17–23% faster build times, faster hot module replacement (HMR), and lower memory usage compared to webpack. Webpack remains available as a fallback via environment variable or package.json configuration. [1]], [2]], [3]])

Documentation Updates:

  • Updated README.md to introduce RSPack as the default, document performance benchmarks, and provide instructions for using webpack as a fallback. Added a new section on bundler configuration and a reference to the RSPack migration guide. [1]], [2]])

Test and Snapshot Adjustments:

  • Updated all relevant test snapshots in webpack-basic-config.js.snap to use RSPack-specific loaders and plugins (e.g., @rspack/core/dist/cssExtractLoader.js, CssExtractRspackPlugin, SwcJsMinimizerRspackPlugin, CopyRspackPlugin, and DependencyExtractionPlugin), replacing their webpack equivalents. [1]], [2]], [3]], [4]], [5]], [6]], [7]], [8]], [9]], [10]], [11]], [12]], [13]], [14]], [15]], [16]], [17]], [18]], [19]], [20]], [21]], [22]])

Release Notes:

fabiankaegy and others added 13 commits January 28, 2026 13:55
Add @rspack/core, @rspack/plugin-react-refresh, and eslint-rspack-plugin
as dependencies for the RSPack migration.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Create config/bundler.js to provide a unified API for switching between
RSPack and webpack. This abstraction handles:
- Bundler type detection (env var, package.json config, or default)
- Plugin selection (CSS extract, copy, ESLint, React refresh)
- Dev server instantiation
- Source utilities and JS minimizer selection

RSPack is now the default bundler.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Update scripts/build.js and scripts/start.js to use the new bundler
abstraction layer. This allows seamless switching between RSPack and
webpack based on configuration.

- Import getBundler and getBundlerType from config/bundler
- Use bundler abstraction for compiler instantiation
- Log which bundler is being used for transparency

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Update config/webpack/plugins.js to dynamically select plugins based on
the active bundler:

- Use getCssExtractPlugin() for CSS extraction
- Use getCopyPlugin() for asset copying
- Use getEslintPlugin() for linting
- Use forked DependencyExtractionPlugin for RSPack compatibility
- Fix CSS filename function for RSPack compatibility

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Update config/webpack/modules.js for RSPack compatibility:

- Add hybrid babel/SWC loader approach
- WordPress projects continue using babel-loader for proper dependency extraction
- SWC loader only used for non-WordPress package builds without custom babel config
- Import getCssExtractLoader from bundler abstraction

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Update config/webpack/optimization.js to use getJsMinimizer() from
bundler abstraction. RSPack uses built-in SwcJsMinimizerRspackPlugin
while webpack continues to use TerserPlugin.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Fork @wordpress/dependency-extraction-webpack-plugin for RSPack compatibility.
The original plugin uses webpack internals (ExternalsPlugin) that don't work
fully with RSPack.

Key changes:
- Handle externals via compiler.options.externals array for RSPack
- Maintain full compatibility with webpack via bundler detection
- Generate correct .asset.php files with WordPress dependencies

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Update config/webpack/plugins/clean-extracted-deps.js to use getSources()
from bundler abstraction instead of directly requiring webpack-sources.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Update config/webpack-fast-refresh.config.js to use bundler abstraction
for React refresh plugin selection. RSPack uses @rspack/plugin-react-refresh
while webpack uses @pmmmwh/react-refresh-webpack-plugin.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Update test snapshots to reflect RSPack plugin names and configuration
differences (CssExtractRspackPlugin, CopyRspackPlugin, etc.).

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add comprehensive documentation for the RSPack migration at docs/rspack-migration.md
covering:
- Usage instructions and default behavior
- Webpack fallback options (env var and package.json)
- Performance benchmarks (~17-23% faster builds)
- Technical implementation details
- Plugin replacements and forked dependency extraction
- Compatibility notes
- Troubleshooting guide
- Migration checklist
- API reference

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add major version changeset documenting RSPack as the new default bundler
with performance benefits and webpack fallback instructions.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Update introduction to mention RSPack as default bundler
- Add new "RSPack & Bundler Configuration" section with:
  - Performance benchmark table
  - Webpack fallback instructions
  - Link to full migration guide

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@changeset-bot
Copy link

changeset-bot bot commented Jan 28, 2026

🦋 Changeset detected

Latest commit: d2692da

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
10up-toolkit Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@fabiankaegy
Copy link
Member Author

Project Type: WordPress Block Project (use-block-assets)
webpack: 61ms
RSPack: 46ms
Improvement: 25% faster
────────────────────────────────────────
Project Type: Standard Project
webpack: 57ms
RSPack: 26ms
Improvement: 54% faster
────────────────────────────────────────
Project Type: Vanilla Extract CSS-in-JS
webpack: 71ms
RSPack: 27ms
Improvement: 62% faster
────────────────────────────────────────
Project Type: Linaria CSS-in-JS
webpack: 47ms
RSPack: 25ms
Improvement: 47% faster

Total process time (including Node.js startup):

Project Type webpack RSPack Improvement
WordPress Block Project 905ms 733ms 19% faster
Standard Project 601ms 482ms 20% faster
Vanilla Extract 981ms 477ms 51% faster
Linaria 588ms 484ms 18% faster

The compilation time improvements are significant (25-62%), but the
total wall-clock time shows more modest gains (18-51%) because
Node.js startup and plugin initialization time is included in both.

fabiankaegy and others added 3 commits January 28, 2026 14:50
The image-minimizer-webpack-plugin is not compatible with RSPack's
lite-tapable implementation. It tries to tap into webpack-specific
hooks that don't exist in RSPack, causing builds to fail with:

  TypeError: Cannot read properties of undefined (reading 'tap')

Move ImageMinimizerPlugin configuration into bundler.js as a new
getImageMinimizers() function that conditionally returns:
- RSPack: empty array (images pass through unoptimized)
- webpack: the two ImageMinimizerPlugin instances (images + SVGs)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Remove ImageMinimizerPlugin entries from snapshots since it's now
conditionally excluded when using RSPack (the default bundler).

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Update migration guide to note that image-minimizer-webpack-plugin
is not compatible with RSPack. Images pass through without optimization
when using RSPack. Users can use BUNDLER=webpack for image optimization.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Replace webpack with rspack

1 participant

Comments