There's a new bundler in town: Turbopack. Built by Tobias Koppers and Vercel, the creators of Webpack and Next.js, and announced just over a decade after the first release of Webpack, Turbopack is a Rust-based bundler optimized for JavaScript and TypeScript.
Vercel realized that every time they switched to a Rust-based tool, they saw huge performance improvements. Rust is a popular, reliable, and fast programming language, but Vercel couldn't find a Rust-based bundler for JavaScript. After evaluating existing bundlers in the JavaScript ecosystem, they decided to build their own.
What Does Turbopack Promise?
Turbopack is specifically designed for the big, complex applications that many developers are working on today. For app developers, Turbopack wants to reduce the time it takes to run their builds, make error messages less cryptic, and allow them to extend the bundler for a wide variety of use cases.
For framework developers, Turbopack wants to reduce the complexity that can come with bundlers (think of SSR and RSC in Webpack) and let them build with more composability and a less complicated configuration. For users, Turbopack provides a way for developers to create faster apps, plain and simple.
How Does Turbopack Differ?
Turbopack differs from other bundlers in a few ways. For one, it bundles code in development. When you're working on your app, and particularly if it's a large app, cold startup time will be much better with Turbopack than with bundlers who only bundle code in production, because the browser will receive your code in fewer network requests.
It also means that, when Turbopack is ready for production builds (it isn't yet currently), your bundle runtime will be the same for development and production.
Second, Turbopack is a lazy bundler. It only bundles the assets that are absolutely necessary. A tool like esbuild doesn't do this (unless you target specific entry points). At scale, this makes Turbopack faster even when compared with native ESM. It only computes the code required to render the page.
Third, Turbopack relies on a granular build engine called the Turbo Engine, an open-source framework on Rust that can cache the result of any function in your software. Turbopack won't re-run a function if the inputs of that function haven't changed. This means it can skip a large amount of work for every build.
A Few Reservations
As with any new programming tool that's generating hype, you have to be just a little cautious. Turbopack is definitely promising, and Vercel claims that it's ten times faster than Vite and seven hundred times faster than Webpack for large apps.
However, those numbers are either somewhat exaggerated or rely on assumptions that lean in favor of Turbopack. The bundler is still extremely fast, but whether it's always faster than other bundlers is to be debated, as Evan You, the creator of Vite, said in a GitHub post where he compared Vite with Turbopack.
Additionally, Turbopack is still in alpha and not yet ready for production. There's no need to switch from your current bundler just yet. While you can already try out Turbopack in Next.js 13 with next dev --turbo, you may encounter bugs or other difficulties, as explained in the below thread:
The more I test #Nextjs13#appDir and #Turbopack, the more unready it looks… I'm not talking "ready for prod", I'm talking "ready for anyone sane to use it for developing an obscure side project". The number of problems and bugs is insane (thread) #nextconf#nextjsconf#next13
But those reservations are relatively minor. It's always a little hard to determine how fast (and how much faster) one program is when compared to another. And new software that's just been announced and is actively being developed is bound to have some bugs and limitations here and there.
Over time, Turbopack plans to release a standalone CLI, a plugin API, and support for frameworks such as Svelte and Vue. While you may not want to switch over from Webpack right away, Turbopack is an exciting development for the JavaScript ecosystem that's worth keeping an eye on.
