Next.js 13 is the first release to include support for React Server Components, enabling developers to choose whether code runs in the browser or on the server.
“Now we’re doing that again, but for the entirety of the compiler and bundler, replacing Webpack with Turbopack.” Like Webpack, Turbopack is open source, he said.
Vercel claims that Turbopack “shows updates 10x faster than Vite and 700x faster than Webpack. For large applications, the difference is even greater – 20x faster updates than Vite (Turbopack starts up in 1.8 seconds for an application with 3,000 modules while Vite takes 11.4 seconds)”.
The performance improvement is not just that Rust is native code, but also “the architecture, based on the idea of incremental computation,” said Rauch. The team borrowed some of the ideas in Google’s Bazel build system, which works well with large projects. “The only way to scale is by not doing the same work twice. You create an incremental graph where is a developer makes a change, only the pieces of the graph which were impacted get recomputed.”
Turbopack – currently in alpha preview – is “a better architecture, and I think the combination of Rust and native with the correct architecture for scalability will mean that we don’t need to change for at least 10 years,” Rauch told us.
Another factor behind Turbopack was the orientation of Webpack towards single-page applications (SPAs). “[In 2016] everyone was building single page applications,” Rauch told us. “We came to the market saying no, we’re going to do server rendering and orchestrate complex applications made up of multiple entry points, so that’s when we started bending the defaults of Webpack. Webpack was very much monolithic and SPA-oriented.”
When Koppers joined Vercel, “he brought 10 years of expertise in seeing this thing grow so much,” said Rauch. “But he realised all the pitfalls in both architecture and runtime. So Tobias has become a Rust expert.”
An intriguing feature of Turbopack is that, thanks to Rust, it can be compiled to WebAssembly and run in the browser. Is that to enable cloud development environments?
“We’ve seen that when folks are learning technologies, they don’t want to spin up heavyweight developer tools,” Rauch told us.
“So the ability for everything to run in the browser can create very interactive and rich learning experiences … there’s also interest in doing re-optimization of your bundles at runtime, based on what your system is seeing that different cohorts of users need. So that’s another opportunity for us to run Turbopack in the cloud. These are more futuristic use cases, but because we’re betting on the right ecosystem, all of this becomes easy to accomplish,” Rauch said.
“Turbopack is designed to be a drop-in replacement for Webpack, and Next.js is its first customer,” said Malte Ubl, Chief Technology Officer at Vercel.
“We plan to continue to iterate on and improve Turbopack for all developer use cases over time. It is open-source and we look forward to seeing how the community engages with the early phases of the tool.”
How does Koppers see the future of Webpack and does he expect a lot of Webpack usage to migrate to Turbopack in the wider web community?
“It’s time for a new beginning in compiler infrastructure for the entire web ecosystem,” he said.
“Webpack has been downloaded over 3 billion times. It’s become an integral part of building for the web. But just like Babel and Terser, it’s time to go all-in on native. I joined Vercel and assembled a team to build the web’s next generation bundler.”
Koppers added that, “we do not expect Webpack to vanish from Next.js—or in general—anytime soon. Backward-compatibility is an integral part of Next.js and we will care about all the Next.js users that use custom plugins. Webpack will stay an active part of Next.js for long enough for us to be sure all of our beloved users are covered. At the same time, we will work on improving Turbopack to eventually completely replace Webpack, in Next.js, but also in general.”
Documentation on migrating from Webpack and other features can be found at turbo.build/pack/docs/