nx/docs/blog/2023-03-10-rspack-getting-up-to-speed-with-nx.md

title	slug	authors	cover_image	tags	description
Rspack — Getting up to speed with Nx	rspack-getting-up-to-speed-with-nx	Juri Strumpflohner	/blog/images/2023-03-10/fWQ53mw2itEs3SGAOJVonQ.avif	nx	Explore Nx's integration with Rspack, the Rust-based Webpack alternative that offers 5-10x faster compilation for React apps in your monorepo.

At Nx, we are excited to see the JavaScript tooling ecosystem evolve, particularly when it comes to improving speed! Performance is at the core of Nx. Faster tools with which we can integrate make our lives easier and allow us to provide a better experience for developers.

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!

Faster than Webpack? What is Rspack?

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

Getting up to speed with Rspack & Nx!

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.

{% youtube src="https://youtu.be/jGTE7xAcg24" /%}

React Standalone App with Rspack

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

• affected commands
• computation caching
• remote caching with Nx Cloud

..work out of the box.

But not just the "speed features". All the code generators, automate code migrations, and code editor extensions work too.

Rspack in an Nx Monorepo

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.

Wrapping up

Go and learn more on the

• official Rspack website: https://rspack.dev
• learn about the Nx Rspack plugin: /technologies/build-tools/rspack/introduction

Learn more

• 🦀 Rspack and Nx docs
• 🧠 Nx Docs
• 👩‍💻 Nx GitHub
• 💬 Nx Official Discord Server
• 📹 Nx Youtube Channel
• 🥚 Free Egghead course
• 🚀 Speed up your CI