Migrate from Webpack to Rspack

[justin808]

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:

• sass-loader - Compatible
• css-loader - Compatible
• postcss-loader - Compatible
• sass-resources-loader - Compatible
• file-loader / asset modules - Compatible
• 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

1. Plugin compatibility: Some webpack plugins may not work with Rspack
2. Custom loaders: May need updates for Rspack compatibility
3. Debugging: Stack traces may be different
4. React Fast Refresh: May require Rspack-specific configuration
5. 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:

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

References

• Rspack Official Documentation
• Shakapacker Rspack Guide
• Rspack Webpack Compatibility
• Rspack Performance Benchmarks

Migration Sequence

This should be done in order:

1. ✅ Update to Shakapacker 9.0.0-beta.8 (current PR)
2. Issue Migrate from Babel to SWC transpiler #666: Migrate to SWC (recommended before Rspack)
3. 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