This content originally appeared on DEV Community and was authored by Boopathi
As regular readers of my blog may know, our primary technology stack is the MERN stack MongoDB, Express, React, and Node.js. On the frontend, we use React with TypeScript; on the backend, Node.js with TypeScript, and MongoDB serves as our database.
While this stack has served us well, we encountered significant challenges as our application scaled particularly around build times, memory usage, and developer experience. In this post, I will outline two key areas where Rust-based tools helped us resolve these issues and substantially improved our team’s development velocity.
Improving Frontend Performance
The Problem: Slow Builds and Poor Developer Experience
As our frontend codebase grew, we began facing several recurring issues:
- Local development startup times became painfully slow.
- Build processes consumed large amounts of memory.
- On lower-end machines, builds caused systems to hang or crash.
- Developers regularly raised concerns about delays and performance bottlenecks.
These issues were primarily due to our use of Create React App (CRA) with an ejected Webpack configuration. While powerful, this setup became increasingly inefficient for our scale and complexity.
First Attempt: Migrating to Vite
In search of a solution, I explored Vite, a build tool known for its speed and modern architecture.
Benefits:
- Faster initial load times due to native ES module imports.
- Noticeable improvement in development server startup.
Challenges:
- Migrating from an ejected CRA setup was complex due to custom Webpack configurations.
- Issues arose with lazy-loaded routes, SVG assets, and ESLint/type-checking delays.
- Certain runtime errors occurred during navigation, likely due to missing or incorrect Vite configurations.
Ultimately, while Vite offered some performance benefits, it did not fully resolve our problems and introduced new complications.
Final Solution: Adopting Rspack
After further research, we came across Rspack, a high-performance Webpack-compatible bundler written in Rust. What caught my attention was its focus on performance and ease of migration.
Key advantages of Rspack:
- Significantly faster build times up to 70% improvement in our case.
- Reduced memory consumption during both build and development.
- Compatibility with existing Webpack plugins and configurations, which simplified migration.
- Designed as a drop-in replacement for Webpack.
After resolving a few initial issues, we successfully integrated Rspack into our frontend build system. The migration resulted in substantial improvements in build speed and developer satisfaction. The system is now in production with no reported issues, and developers are once again comfortable working on the frontend.
Accelerating Backend Testing
The Problem: Slow Kubernetes-Based Testing Cycle
Our backend uses Kubernetes for deployment and testing. The typical development workflow looked like this:
- A developer makes code changes.
- A Docker image is built and pushed to a registry using github action.
- The updated image is deployed to the Kubernetes cluster.
- Testers verify the changes.
This process, while standard, became inefficient. Even small changes (such as adding a log statement) required a full image build and redeployment, resulting in delays of 15 minutes or more per test cycle.
Optimization: Runtime Code Sync
To address this, we have written the shell script that will first run when the pod starts or restart which will pull the latest changes from github and run the code.
git reset --hard origin/$BRANCH_NAME
git pull origin $BRANCH_NAME
This significantly reduced testing turnaround time for JavaScript-based services.
The TypeScript Bottleneck
However, for services written in TypeScript, the situation was more complex. After pulling the latest code, we needed to transpile TypeScript to JavaScript using tsc or npm run build. Unfortunately, this process:
- Consumed excessive memory.
- Took too long to complete.
- Caused pods to crash, especially in test environments with limited resources.
Solution: Integrating SWC
To solve this, we adopted SWC, a Rust-based TypeScript compiler. Unlike tsc, SWC focuses on speed and performance.
Results after integrating SWC:
- Compilation time reduced to approximately 250 milliseconds.
- Memory usage dropped significantly.
- Allowed us to support live code updates without full builds or redeployments.
Because SWC does not perform type checking, we use it only in test environments. This tradeoff allows testers to verify code changes rapidly, without impacting our production pipeline.
Conclusion: Rust’s Impact on Team Efficiency
In both our frontend and backend workflows, Rust-based tools Rspack and SWCdelivered substantial improvements:
- Frontend build times were reduced by more than 70%, with better memory efficiency.
- Testing cycles became significantly faster, especially for TypeScript services.
- Developer experience improved across the board, reducing frustration and increasing velocity.
Rust’s performance characteristics, coupled with thoughtful tool design, played a critical role in resolving bottlenecks in our JavaScript-based systems. For teams facing similar challenges, especially around build performance and scalability, we strongly recommend exploring Rust-powered tools as a viable solution.
This content originally appeared on DEV Community and was authored by Boopathi