What is TurboPack?

Vercel just introduced Turbopack, an incremental bundler optimized for JavaScript and TypeScript, written in Rust. That Turbopack claimed to be the Successor of Webpack

Developed by NextJS and Webpack creators, Vercel claimed that on large-scale applications, Turbopack updates 10x faster than Vite and 700x faster than Webpack. For the biggest applications the difference grows even more stark with updates up to 20x faster than Vite.

Getting started

Turbopack is currently in alpha. It is not yet ready for production use. But NextJS still allows us to use Turbopack with next dev --turbo then the NextJS v13 development server is now powered by Turbopack

Comparison

Vercel’s marketing campaign has proved its effectiveness with thousands of tweets about Turbopack on Twitter. Although the numbers that Vercel pulled out are very promising, but it is said on “Large Applications”, so how about small to medium applications ? Well let’s find out

I have 2 projects that are exactly same application with same 3rd-party libraries and utilities. One using React with Vite as its bundler, the other one is NextJS with Turbopack.

Let’s start with the bundle size

Turbopack:

Vite:

Without 404 route, only main route, we have 66kb to 86kb. So Turbopack’s bundle size is quite smaller.

Going to the build time

Turbopack:

Vite:

We have 3.52s and 1.61s. Turbopack is twice slower, but we can assume this is because of the auto-generated 404 page, otherwise it’s pretty much the same ?

Startup time

The thing that Turbopack proud the most, that it is built on a new incremental architecture for the fastest possible development experience.

Turbopack:

Vite:

Well maybe that’s almost a fact, Turbopack is indeed over 9x faster boot up time than Vite.

Conclusion

It’s very hard to decide which one is better. We already know Vite with ESBuild is fast enough for 99% of project and got excellent Developer Experience with a lot of plugins. The better bundler is the more suitable bundle with your project in my opinion

Build apps with reusable components like Lego

Bit’s open-source tool help 250,000+ devs to build apps with components.

Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.

→ Learn more

Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:

→ Micro-Frontends

→ Design System

→ Code-Sharing and reuse

→ Monorepo