Newly Stable Next.js Compiler Faster, Supports Larger Builds

At the Next.js Conference in San Francisco on Thursday, the Next.js team released the stable version of Turbopack, a faster, Rust-based compiler for the framework. It’s been a two-year journey for Turbopack, which was first introduced as alpha at the 2022 Next.js Conference. The team also introduced a new approach for partial pre-rendering.

Turbopack replaces Webpack and is designed for incremental builds, both for development and production. The revamped compiler can support larger applications, so that web application teams no longer have to split apps to compile, said Guillermo Rauch, creator of Next.js and founder of the web application platform Vercel.

“You don’t need to arbitrarily split your application just because of the compiler anymore,” he said. “What we’re doing here is almost like what fast refresh did for development, resuming from previous progress to make that development experience completely instantaneous.”

Rauch introduced Turbopack and demoed it live.

“After months and months and months of rigorous work on getting the fundamentals right, I’m pleased to announce that Turbopack for development is now stable and ready for wider use,” he said.

In recent months, he said the team has focused on three things:

1. Parity with the previous compiler. “We’re passing all of the tests of our previous compiler —  6,599. We could have even added one more test to make it round, but we decided not to.”
2. Expanded ecosystem compatibility, with better support for Webpack loaders, React compiler, CSS solutions including Tailwind, style components and SaaS.
3. Optimized cold compilation. “We’ve made a further 30% improvement in average memory utilization, in 40% faster initial compilation for large pages overall compared to our previous compiler, Turbopack is now up to 50% faster for initial compilation and up to 90% faster for code updates with fast refresh,” Rauch said.

“But we can do even better,” he said. “We can go founder mode on this thing. We can push harder. Let’s take a look at what’s coming soon for Turbopack, because we’re not done.”

He then revealed that the team has improved caching so that if the compiler is stopped, it doesn’t have to completely rebuild from scratch. He showed a comparison of the previous compiler against Turbopack’s build time when the server is stopped.

“Let’s take a look at our upcoming experimental caching improvements,” he said. “When we run Turbopack Plus cache against our large code base, it compiled in 900 milliseconds and then 293 milliseconds”

It’s fast because Turbopack resumed from a persistent cache rather than recompiling every module again, he explained.

“We started with a cold previous compiler at 22 seconds, and then throw back and bring us down to 290 milliseconds,” he said. “The difference is pretty dramatic [in] what it can do to dev experience.”

With fast refresh, developers can make small edits to the app and it will be measured in milliseconds.

“For me, iteration velocity is not really just about local development. It’s also about building and sharing with the team, with customers, with the world,” he said.

He also provided an update on builds. TurboPack is passing 96% of the tests from the previous compiler baseline, he said.

“For me, iteration velocity is not really just about local development. It’s also about building and sharing with the team, with customers, with the world.”
– Guillermo Rauch, creator of Next.js and founder of Vercel

“This is 60,822 tests that we’ve accumulated over a very, very long time running this with so many customers around the world and thousands of production applications,” he said. “The reason we’re so excited about this is that — and also the reason that we’re making fast progress — we’re sharing the infrastructure between local development and production builds.”

That allows Turbopack to share optimizations, he continued. For example, when the team turned on incremental caching for production builds, some of its large apps built five times faster.

“Ultimately, for me, this is why we created Turbopack,” he said. “We envisioned a compiler that didn’t just do the same work over and over and over again.”

The time the compiler takes is proportional to the size of the change, rather than to the size of the codebase. Rauch said that means frontend development shops can get “really, really, really ambitious” with how large a single Next.js application can be, as well as how big the development team that can work on that single application can be.

Editor’s Note: Vercel paid travel and accommodations for the author to attend Next.js Conf.

Corrections: Updated 9:23 a.m., Oct. 28 to clarify it was Turbopack that is now up to now up to 50% faster for initial compilation and that there were  6,599 tests passed.