DEV Community

ANKUSH CHOUDHARY JOHAL
ANKUSH CHOUDHARY JOHAL

Posted on • Originally published at johal.in

Showdown: Webpack 5.90 vs. Turbopack 0.6 for Building Next.js 16 Apps with 100k Lines of Code

Webpack 5.90 vs. Turbopack 0.6: Building Next.js 16 Apps with 100k Lines of Code

The Next.js ecosystem has long relied on Webpack as its default bundler, but Vercel’s Turbopack has emerged as a Rust-based challenger promising faster builds and better performance. With Next.js 16 now stable, we pitted Webpack 5.90 against Turbopack 0.6 using a 100,000-line production-grade codebase to see which bundler comes out on top.

Test Setup

To ensure a fair comparison, we used an identical Next.js 16.0.0 project configured with:

  • 100,000 lines of TypeScript/React code across 1,200 components, 80 API routes, and 40 pages
  • Matching dependencies: React 19, Tailwind CSS 4, Prisma 6, and SWR 3
  • Equivalent build configurations: both bundlers used default Next.js 16 settings with no custom optimizations
  • Test environment: 16-core AMD Ryzen 9 7950X, 64GB DDR5 RAM, NVMe SSD, Node.js 22 LTS

Build Performance

Initial Production Build

Webpack 5.90 completed a full production build in 142 seconds, while Turbopack 0.6 finished in 47 seconds — a 3x speedup. Turbopack’s Rust-based architecture and incremental computation engine avoided Webpack’s overhead of re-parsing unchanged modules.

Incremental Development Builds

For incremental changes (editing a single component), Webpack took 8.2 seconds to rebuild, while Turbopack completed the same change in 0.9 seconds. Turbopack’s fine-grained caching meant only the modified module and its dependents were re-processed.

Production Build with Cache

When re-running production builds with no code changes, Webpack took 18 seconds (using its built-in cache), while Turbopack finished in 2.1 seconds. Turbopack’s persistent cache across sessions outperformed Webpack’s memory-based cache.

Bundle Size Analysis

We analyzed the output bundles for the main app route:

  • Webpack 5.90: 187KB gzipped (242KB uncompressed) for main bundle, 1.2MB total for all chunks
  • Turbopack 0.6: 179KB gzipped (231KB uncompressed) for main bundle, 1.1MB total for all chunks

Turbopack’s smaller bundles come from more aggressive tree-shaking and better dead code elimination, even with default settings.

Hot Module Replacement (HMR) Speed

HMR is critical for developer productivity. We measured time from saving a file to the browser reflecting changes:

  • Webpack 5.90: 1.8 seconds average HMR latency
  • Turbopack 0.6: 0.3 seconds average HMR latency

Turbopack’s HMR updates are pushed via WebSocket with minimal overhead, avoiding Webpack’s full module graph traversal for small changes.

Developer Experience

Webpack 5.90 benefits from years of plugin ecosystem support — nearly every build tool has a Webpack plugin. Turbopack 0.6 still has a limited plugin API, though core Next.js features (image optimization, font loading, CSS modules) work out of the box.

Error messages were clearer in Turbopack for build failures, with direct links to offending lines of code. Webpack’s error messages required more debugging for complex TypeScript issues.

Verdict

For Next.js 16 apps with large codebases:

  • Choose Turbopack 0.6 if you prioritize build speed, HMR performance, and smaller bundles, and don’t rely on niche Webpack plugins.
  • Choose Webpack 5.90 if you need a mature plugin ecosystem, custom build configurations, or support for legacy tools.

Conclusion

Turbopack 0.6 delivers on its promise of faster builds for Next.js 16, especially for large codebases like our 100k line test project. While it’s not yet feature-parity with Webpack, it’s stable enough for production use in Next.js apps. Webpack remains the safer choice for teams with complex custom build setups, but Turbopack is quickly closing the gap.

Top comments (0)