What is Rspack? And how does it compare to Webpack in under 5 minutes?

Introduction

There are many web bundlers available like Webpack, esbuild, rollup, vite, snowpack, turbopack and parcel. You get the idea, there are a lot of bundlers out there. But if you've been working in the web space for a while you'd know by now there are only two big players: Webpack and Rollup.

The current number of downloads for Webpack as of this moment is nearly 28 Million in the past year, while Rollup is a little over 12 million similar to Esbuild. While snowpack and vite have very low usage.

‍

The performance challenge

If you've been living under a rock or you are new to the web space you might be wondering why there are a lot of bundlers to begin with, why is every company creating its own bundler? That comes down to performance. Big applications can take a lot of time to build and develop, this can have a negative effect either on the performance of the engineers themselves, or the CI/CD process where deployments can take hours.

In the front-end world, HMR (hot-module-reload) is a crucial feature when developing the application. HMR allows developers to make changes to their code in-real time without having to refresh the entire page or restart the application. HMR is particularly useful in large and complex applications where recompiling the entire codebase can take a lot of time, slowing down the development process. With HMR, developers can see the changes they make to the code instantly, which can significantly speed up the development cycle. Rspack will allow you to have blazing fast HMR even on large projects.

‍

Rspack vs Webpack?

Unlike every other module bundler that's trying to take the throne from Webpack, Rspack embraces Webpack in a way where it aims to have full interoperability with the Webpack ecosysytem. That means the configuration file is nearly identical to what you get with Webpack, plus you can use all the familiar loaders such as `babel-loader`, `less-loader`, `sass-loader`, etc. Currently not all popular loaders are supported, but the community and the team at Bytedance are both doing their best to add more loaders, you can check the loader compatibility here.

Blow is a list of currently supported loaders:

‍

Rspack configuration file vs Webpack's?

Rspack's default configuration closely resembles Webpack's, as shown in the following examples

‍

‍

Rspack Framework support

Rspack offers out-of-the-box support for React, Vue, and SolidJS with minimal configuration. JSX support is built-in, eliminating the need for extra loaders required by Webpack. Additionally, Rspack's compatibility with babel-loader makes it easy to use Vue and SolidJS.

‍

Using Rspack in Conjunction with Webpack

The short answer is Yes. As Zackary Jackson explained in his LinkedIn post:

With Rspack, you can enjoy a fast and modern build tool that enables runtime interoperability between webpack host or remote. Plus, the cost of switching between them is relatively inexpensive compared to other build tools that require a completely different toolchain and config.The best part is, if you don't need the full power of the webpack API and ecosystem, you can still use Rspack with a good portion of that ecosystem. It’s near as simple as changing one word in your command line, or a few in a config file.

The versatility of Rspack allows developers to use it for specific parts of their stack, while retaining Webpack for other sections, especially for more exotic system builds.

‍

Conclusion

In conclusion, Rspack offers a compelling alternative to Webpack, boasting full interoperability with the Webpack ecosystem and improved performance due to its Rust-based architecture. Its flexibility enables developers to use both Rspack and Webpack within their projects, providing an efficient and versatile solution for modern web development.

‍