Almost a year ago ByteDance started developing a new, faster Webpack alternative: Rspack. Valor Software joined the collaboration and reached out to us about developing a dedicated Nx plugin. The goal: give developers an easy onboarding path to Rspack and React!
Rspack is a rewrite of Webpack with the primary goal of improving performance. Rust is the main language, allowing for a highly parallelized architecture that takes full advantage of modern multi-core CPUs. In addition, it also comes with essential bundling features already built-in to avoid further bottlenecks from 3rd-party packages. It also highly optimizes HMR (Hot Module Replacement) using a specialized incremental compilation strategy.
ByteDance developed Rspack to solve performance issues they faced when developing and maintaining their internal monolithic applications, all of which rely heavily on complex Webpack configurations. Rspack being a rewrite allows to rely on Webpack's mature architecture and is, at the same time, an easy drop-in replacement.
ByteDance already applied Rspack on some of their internal business applications and has seen between 5 to 10x improvement in compilation performance.
More on the official Rspack docs: https://rspack.dev
Our goal at Nx is to be the best CLI for your framework of choice. We want to remove friction so developers can easily leverage these new tools and focus on shipping features using a production-ready setup. This is why we developed a dedicated Rspack plugin that lets everyone quickly get up to speed.
Check out the following video for a complete walkthrough of how Nx and Rspack work together to create production-ready React applications.
You can create a new Rspack-based React application using the following command:
npx create-nx-workspace myrspackapp --preset=@nrwl/rspack
This creates a pre-configured setup with React, TypeScript, ESLint, Jest (optionally Vite), Cypress for e2e testing, and obviously Rspack as the bundler.
All the usual Nx features, such as
..work out of the box.
But not just the "speed features". All the code generators, automate code migrations, and code editor extensions work too.
Similarly, you can use Rspack-based applications in existing Nx monorepos. Just install the NPM package:
npm i @nrwl/rspack -D
Then generate a new application:
npx nx g @nrwl/rspack:app myrspackapp
This creates a new application in your Nx monorepo that uses Rspack as the bundler. You can even import existing React libraries, which can also be an excellent way to experiment with Rspack in an existing production setup.
Go and learn more on the
- official Rspack website: https://rspack.dev
- learn about the Nx Rspack plugin: https://nx.dev/packages/rspack
- 🦀 Rspack and Nx docs
- 🧠 Nx Docs
- 👩💻 Nx GitHub
- 💬 Nx Community Slack
- 📹 Nx Youtube Channel
- 🥚 Free Egghead course
- 🚀 Speed up your CI