Migrate from Webpack to Rspack

Open justin808 opened this issue 3 months ago • 0 comments

Background

Shakapacker 9.0 adds support for Rspack as an alternative to Webpack. Rspack is a high-performance JavaScript bundler written in Rust that is compatible with the Webpack ecosystem but significantly faster.

Benefits of Rspack

Blazing fast: 5-10x faster build times compared to Webpack
Written in Rust: Better performance and lower memory usage
Webpack compatible: Uses the same configuration API as Webpack
Drop-in replacement: Minimal configuration changes needed
HMR performance: Much faster hot module replacement
Production builds: Significantly faster production optimizations

Migration Plan

1. Prerequisites

Note: This migration should be done AFTER migrating to SWC (issue #666), as Rspack works best with SWC.

2. Configuration Changes

[ ] Update shakapacker.yml to set assets_bundler: rspack
[ ] Review webpack config files for Rspack compatibility
[ ] Update any webpack-specific plugins to Rspack equivalents
[ ] Test all webpack loaders for Rspack compatibility

3. Configuration Updates

Update config/shakapacker.yml:

default: &default
  assets_bundler: rspack
  javascript_transpiler: swc
  # ... rest of config

4. Plugin Compatibility Check

Review and update plugins in webpack config files:

[ ] MiniCssExtractPlugin - Compatible
[ ] CompressionWebpackPlugin - Compatible
[ ] HtmlWebpackPlugin - Compatible
[ ] React Fast Refresh - May need Rspack-specific plugin
[ ] Custom plugins - Check compatibility

5. Loader Compatibility

Most loaders should work without changes:

[x] sass-loader - Compatible
[x] css-loader - Compatible
[x] postcss-loader - Compatible
[x] sass-resources-loader - Compatible
[x] file-loader / asset modules - Compatible
[x] SWC loader - Compatible (required for best performance)

6. Testing

[ ] Run development server and verify HMR works
[ ] Run full test build: yarn build:test
[ ] Run production build and verify output
[ ] Measure and compare build times (document improvements)
[ ] Test all entry points load correctly
[ ] Verify source maps work in development
[ ] Test CSS extraction and minification
[ ] Verify code splitting still works

7. Performance Benchmarking

Document build time improvements:

[ ] Cold build time (development)
[ ] Rebuild time with HMR (development)
[ ] Production build time
[ ] Memory usage during builds

8. Documentation

[ ] Update README with Rspack information
[ ] Document any configuration differences
[ ] Add performance comparison metrics
[ ] Update troubleshooting guide

Expected Performance Improvements

Based on Rspack benchmarks:

Development cold start: 5-10x faster
HMR: 3-5x faster
Production builds: 3-7x faster
Memory usage: 30-50% reduction

Potential Issues

Plugin compatibility: Some webpack plugins may not work with Rspack
Custom loaders: May need updates for Rspack compatibility
Debugging: Stack traces may be different
React Fast Refresh: May require Rspack-specific configuration
Bundle analysis: May need Rspack-compatible analyzer

Compatibility Notes

Rspack implements most of Webpack 5 APIs
Some experimental Webpack features may not be supported
Performance improvements are most noticeable in larger projects

Rollback Plan

If issues arise:

Change assets_bundler: webpack in shakapacker.yml
Restart dev server
No code changes needed - configuration is the only change

References

Migration Sequence

This should be done in order:

✅ Update to Shakapacker 9.0.0-beta.8 (current PR)
Issue #666: Migrate to SWC (recommended before Rspack)
This issue: Migrate to Rspack

Acceptance Criteria

Development and production builds work with Rspack
Build times are significantly faster (document metrics)
All existing functionality works identically
HMR and React Fast Refresh work properly
CI builds pass
Documentation updated with performance comparison

cc: @justin808

Oct 03 '25 04:10 justin808