跪拜 Guibai
← All articles
Frontend · Webpack

How I Slashed a Legacy Build from 4.5 Minutes to 8 Seconds — and Got Away with It

By 柯克七七 ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

This story shows that massive build performance gains are often achievable with existing tools and a weekend's work — no formal project approval needed. For Western developers, it's a reminder that the biggest bottlenecks (like transpiling node_modules) are universal, and that tools like Rspack offer a low-risk, high-reward migration path from Webpack. It also highlights the cultural and practical dynamics of "underground refactoring" in a team setting.

Summary

A developer at a Chinese company was fed up with a three-year-old React project that took 4 minutes and 30 seconds to build. Over a single weekend, they profiled the build, discovered babel-loader was transpiling node_modules, and applied a series of optimizations: tightening loader include paths, separating TypeScript type checking into a child process with fork-ts-checker, and enabling Webpack 5's filesystem cache. These changes alone cut the build to 38 seconds.

But the developer didn't stop there. They then migrated the local development config to Rspack, a Rust-based Webpack-compatible bundler from ByteDance, achieving an 8-second cold build. The CI pipeline, however, remained on the optimized Webpack 5 config. The developer committed the change under a vague PR title, and soon other teams noticed the speedup and started asking for the config. This led to an impromptu knowledge-sharing meeting where the full story — including the incomplete CI migration — came out.

The outcome: the developer's own team now builds in 8-15 seconds, three other teams adopted variations of the approach, and the Jira ticket remained at 2 story points. The story is a case study in the power of individual initiative, the risks of undocumented weekend refactors, and the viral effect of visible performance gains.

Takeaways
Profiling with DEBUG=webpack* revealed babel-loader was transpiling all of node_modules, costing 127 seconds.
Tightening babel-loader's include to only src and specific esm packages cut its time from 127s to 34s.
Moving TypeScript type checking to a separate fork-ts-checker process (with transpileOnly: true) reduced ts-loader time from 89s to 21s and unblocked hot reload.
Enabling Webpack 5's filesystem cache turned a 4.5-minute cold build into a 38-second warm build.
Migrating from Webpack to Rspack (a Rust-based, API-compatible bundler) further reduced cold builds to 28 seconds and cached builds to 8 seconds.
The developer kept dual configs: Rspack for local dev, optimized Webpack 5 for CI — a pragmatic but undocumented approach.
Three other teams adopted variations of the config, with one team going straight to Vite instead of Rspack.
The entire effort was logged as a single 2-story-point Jira ticket titled 'Optimize build config.'
Conclusions

The biggest single gain came from fixing a basic misconfiguration (transpiling node_modules) — a reminder that profiling before optimizing is non-negotiable.

The developer's decision to migrate to Rspack without telling anyone is a high-risk, high-reward move that paid off, but it created a documentation and support burden.

The story reveals a cultural pattern: individual engineers often drive significant technical improvements outside formal processes, then retroactively justify them.

The viral spread of the config across teams shows that visible performance wins are the best marketing for internal tooling changes.

The developer's reluctance to fully switch CI to Rspack (due to an untested plugin bug) is a realistic example of the gap between local dev and production readiness.

Concepts & terms
Rspack
A Rust-based bundler that is API-compatible with Webpack, offering 5-10x faster build times by leveraging SWC for transpilation and a Rust core for parallel processing. Developed by ByteDance.
fork-ts-checker-webpack-plugin
A Webpack plugin that runs TypeScript type checking in a separate child process, preventing it from blocking the main build pipeline. Used with ts-loader's transpileOnly: true option.
Webpack 5 persistent cache
A filesystem-based caching mechanism in Webpack 5 that stores compiled modules between builds, dramatically reducing rebuild times for unchanged code. Requires careful configuration of build dependencies to avoid stale cache.
SWC (Speedy Web Compiler)
A Rust-based JavaScript/TypeScript compiler that is significantly faster than Babel. Used by Rspack as its default transpiler via the builtin:swc-loader.
Underground refactoring
A colloquial term for making significant technical changes to a codebase without formal project approval or documentation, often done by an individual developer to solve a personal pain point.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗