I recently revisited an old personal React project and discovered it was built using Create React App (CRA).
While considering a switch to Vite for its performance benefits, I stumbled upon RSBuild, which, according to its documentation, is even faster: RSBuild Performance.
Why RSBuild ?
Here are my key reasons for choosing RSBuild:
- Performance: It's designed for speed.
- CRA is Outdated: The last CRA release was on April 12, 2022
- Migration Guide: RSBuild provides a detailed guide for seamless migration.
- Batteries included: I donβt need to worry about additional integration, RSBuild covers what I need
Few words about RSBuild
RSBuild is based on RSPack, a Rust-written bundler optimized for web development. It's user-friendly and minimizes configuration needs.
Being framework-agnostic, RSBuild offers a robust plugin system. For React integration, I simply added plugins: [pluginReact()],
in rsbuild.config.ts
.
RSBuild's comprehensive documentation includes examples and detailed guides for migrating from:
- Webpack
- Create React App (CRA)
- Vue CLI
- Modern Builder
CSS
In my CRA project, I utilized css-modules
. Fortunately, RSBuild supports it out of the box, so no extra effort was required on my part.
Environment Variables
My project only had two environments, and I wanted to move away from the REACT_APP
prefix. RSBuild allowed me to easily switch to using PUBLIC
as the prefix, treating all my environment variables as public, which suited my project's needs.
Testing
RSBuild doesn't integrate testing frameworks directly. Thus, there's no straight swap for react-scripts test
. I set up Jest independently. To manage this, I used a separate .env.test
file for test configurations. To avoid additional tooling with ts-node
, I relied on standard CJS files:
I have stick with good old CJS files:
- The first file is for loading environment variables: ```javascript
// src/config/loadEnvs.js
const dotenv = require('dotenv')
const path = require('path')
const loadEnvs = (mode) => {
const testOptions = mode === 'test' && {
path: path.resolve(process.cwd(), '.env.test'),
}
try {
return dotenv.config(testOptions)
} catch (err) {
console.log(err, 'Missing or wrong env files')
}
}
module.exports = { loadEnvs }
- The second file is used to load the appropriate environment variables and run Jest with arguments specified in package.json:
```javascript
const { loadEnvs } = require('./loadEnvs')
loadEnvs('test')
const argv = process.argv.slice(2)
const jest = require('jest')
jest.run(argv)
- Finally, I updated the test commands in package.json to align with these changes.
const { loadEnvs } = require('./loadEnvs')
loadEnvs('test')
const argv = process.argv.slice(2)
const jest = require('jest')
jest.run(argv)
Results
Overall the migration took me around 30 minutes, which is quite fast in my opinion - even fact that my app is rather small one.
The docs are great I have easily found, what I needed, big shoutout to the RSBuild Team β€οΈ
The performance improvements with RSBuild were huge:
- Local build time: Reduced to about 0.3 seconds π₯.
- GitHub CI: Reduced to about 0.8 seconds, which is incredibly fast π₯.
- Local development server readiness: Around 0.25 seconds.
In contrast, with CRA:
- Local build time: Typically 7 to 9 seconds.
- GitHub CI: Around 26 seconds.
- Local development server readiness: Between 3 to 5 seconds.
Other migration cases
I also explored other developers' experiences with migrating to RSBuild, as shared on Twitter:
Top comments (1)
Hello
I need your help on how to use good seo changes in my react site:
upride.in