Once upon a time in web development, building web pages required just HTML, CSS, and some JavaScript for interactivity. However, as projects grew in scale and complexity, the need for efficient bundling tools became apparent. The introduction of Node.js showcased that JavaScript was not limited to client-side scripting but could handle a myriad of server-side tasks.
As developers embraced JavaScript for large-scale applications, the use of third-party libraries became common. Yet, managing these dependencies proved challenging, leading to the birth of bundlers. These tools aggregated JavaScript files, ensuring that source code and third-party dependencies were optimized and error-free.
The Rise of Webpack
Webpack, a static module bundler, emerged as a frontrunner in the world of bundlers. It generated a dependency graph from entry points, combining modules into bundles for the browser to process. With approximately 28 million weekly downloads, webpack became the go-to bundler for numerous JavaScript frameworks.
However, webpack had its share of challenges, including a slow development server, complete application rebuilds on file changes, and increased complexity as projects expanded. In response, the JavaScript community sought alternatives, and one notable solution was Vite.
Enter Vite: A Faster Development Experience
Vite, a build tool, offered a faster development experience compared to traditional bundlers. It consisted of Rollup for code bundling and a dev server with features like fast Hot Module Replacement (HMR). While Vite addressed some of Webpack’s issues, it wasn’t a direct replacement. The question remained: What could surpass webpack?
Turbopack: The Rust-Based Game-Changer
Vercel, the creators of Next.js, answered this question with the introduction of Turbopack. Positioned as the official successor to webpack, Turbopack is an incremental bundler optimized for JavaScript and TypeScript, and it’s crafted in Rust.
Turbopack boasts impressive speed claims, stating that it is 700 times faster than webpack and 10 times faster than Vite in large projects. The key to this speed lies in its unique features.
What is Turbopack?
Turbopack is an incremental bundler optimized for your JavaScript and TypeScript projects. Unlike other bundlers written in JS/TS, Turbopack is Rust-based. It’s the official successor to webpack and is being built by the creators of webpack and Next.js.
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.
Using Turbo Engine: The Power Behind Turbopack
Turbo Engine is a powerful Rust library that enables incremental computation. In computer science, incremental computation refers to using the previously computed output when computing a new output when a sequence of inputs is slightly different from each other, rather than computing the new output from scratch. This computation is applied when optimizing compilers. One way to achieve incremental computation is through caching. Turbo Engine implements incremental computation using function-level caching. Let’s explore the features and drawbacks of Turbopack.
How fast is Turbopack?
Turbopack is built on Turbo: an open-source, incremental memoization framework for Rust. Turbo can cache the result of any function in the program. When the program is run again, functions won’t re-run unless their inputs have changed. This granular architecture enables your program to skip large amounts of work, at the level of the function.
Turbopackis built on a new incremental architecture for the fastest possible development experience. On large applications, it shows updates 700x faster than Webpack.
Turbopack only bundles the minimum assets required in development, so startup time is extremely fast. On an application with 5,000 modules, Turbopack takes 4 seconds to boot up, while Vite (with SWC) takes 16.6 seconds.
To learn more, read the docs on how Turbopack bundles and view the benchmarks.
Why is Turbopack so fast?
Turbopack is so fast because it’s built on a reusable library for Rust which enables incremental computation known as the Turbo engine. Here’s how it works:
Function-level caching
In a Turbo engine-powered program, you can mark certain functions as ‘to be remembered’. When these functions are called, the Turbo engine will remember what they were called with, and what they returned. It’ll then save it in an in-memory cache.
Here’s a simplified example of what this might look like in a bundler:
We start with calling readFile on two files, api.ts and sdk.ts. We then bundle those files, concat them together, and end up with the fullBundle at the end. The results of all of those function calls get saved in the cache for later.
Let’s imagine that we’re running on a dev server. You save the sdk.ts file on your machine. Turbopack receives the file system event, and knows it needs to recompute readFile("sdk.ts"):
Since the result sdk.ts has changed, we need to bundle it again, which then needs to be concatenated again.
Crucially, api.ts hasn’t changed. We read its result from the cache and pass that to concat instead. So we save time by not reading it and re-bundling it again.
Now imagine this in a real bundler, with thousands of files to read and transformations to execute. The mental model is the same. You can save enormous amounts of work by remembering the result of function calls and not re-doing work that’s been done before.
The cache
The Turbo engine currently stores its cache in memory. This means the cache will last as long as the process running it — which works well for a dev server. When you run next dev --turbo in Next v13, you’ll start a cache with the Turbo engine. When you cancel your dev server, the cache gets cleared.
In the future, we’re planning to persist this cache — either to the filesystem or to a remote cache like Turborepo’s. This will mean that Turbopack could remember work done across runs and machines.
How does it help?
This approach makes Turbopack extremely fast at computing incremental updates to your apps. This optimizes Turbopack for handling updates in development, meaning your dev server will always respond snappily to changes.
In the future, a persistent cache will open the door to much faster production builds. By remembering work done across runs, new production builds could only rebuild changed files — potentially leading to enormous time savings.
Compiling by Request
The Turbo engine helps provide extremely fast updates on your dev server, but there’s another important metric to consider — startup time. The faster your dev server can start running, the faster you can get to work.
There are two ways to make a process faster — work faster, or do less work. For starting up a dev server, the way to do less work is to compile only the code that’s needed to get started.
Page-level compilation
Versions of Next.js from 2–3 years ago used to compile the entire application before showing your dev server. In Next.js 11(opens in a new tab), we began compiling only the code on the page you requested.
That’s better, but it’s not perfect. When you navigate to /users, we’ll bundle all the client and server modules, dynamic-imported modules, and referenced CSS and images. That means if a large part of your page is hidden from view, or hidden behind tabs, we’ll still compile it anyway.
Request-level compilation
Turbopack is smart enough to compile only the code you request. That means if a browser requests HTML, we compile only the HTML — not anything that is referenced by the HTML.
Turbopack’s architecture takes the lessons learned from tools like Turborepo and Google’s Bazel, both of which focus on using caches to never do the same work twice.
An incremental reactive system with the speed of Rust? Turbopack is unstoppable, want to read more?!
The future of Turbo
To start, Turbopack will be used for the Next.js 13 development server. It will power lightning-fast HMR, and it will support React Server Components natively, as well as TypeScript, JSX, CSS, and more.
Turbopack will eventually also power Next.js production builds, both locally and in the cloud. We’ll be able to share Turbo’s cache across your entire team, using Vercel Remote Caching.
Webpack users can also expect an incremental migration path into the Rust-based future with Turbopack.
We couldn’t be more excited about the future of the Turbo ecosystem, as we push to help you iterate faster and create at the moment of inspiration.
Features and drawbacks of Turbopack
Turbopack introduces several features for developers, such as faster development server times, out-of-the-box support for JavaScript and TypeScript using SWC (Speedy Web Compiler), and live reloading for environmental variables. However, being in its early stages, Turbopack has drawbacks, including limited extensibility and the absence of built-in type checking.
Let’s highlight some of the features of Turbopack:
Faster development server time: Turbopack supports HMR out of the box, and it’s way faster due to incremental computation. HMR ensures your dev server doesn’t fully refresh after every file change
Out-of-the-box support for JS & TS: Turbopack bundles JavaScript and TypeScript, but not with Babel. Instead, Turbopack uses a Rust-based compilation tool, SWC(Speedy Web Compiler). For context, SWC claims to be 17x faster than Babel
Out-of-the-box support for CJS and ESM imports: Whatever method you use to import modules — dynamic imports, ES Modules, or CommonJS — it’s supported by Turbopack
Live reloading for environmental variables: One of the most annoying experiences when developing is having to close and reload your server after changing environmental variables. Turbopack ships with live reloading for environmental variables
Let’s highlight some of Turbopack’s early drawbacks. It’s important to note that Turbopack is still very new and experimental, so these issues might be fixed as it matures.
Lacks god-level extensibility: webpack had what I refer to as god-level extensibility with its plugin API. Turbopack doesn’t support plugins, but they promise that the bundler will be extensible in future versions. However, they won’t be porting the webpack plugin API, meaning most webpack plugins you enjoy today won’t work with Turbopack.
Does not perform type checks: Turbopack uses SWC for compiling TypeScript and doesn’t have out-of-the-box support for type checking. Like Vite and esbuild, with Turbopack, you must run tsc --watch or depend on your code IDE for type checking.
Only supports the Next.js dev server
How to use Turbopack
Turbopack is still in its alpha version and has only been deployed as a Next.js 13 dev server. To run a Next.js 13 project powered by Turbopack, run this command on your terminal:
Try out the alpha of Turbopack in Next.js 13 today with next dev --turbo.
npx create-next-app –example with-turbo pack
This command will bootstrap a Next.js 13 sample with React Server Components. Run yarn install to install dependencies.
A compilation time of 6.264ms with 20+ components!
For context, let’s compare this startup time with a non-Turbopack Next.js 13 project, with fewer components and dependencies.
We compiled the client and server in 11s, almost twice the Turbopack compile time!
The difference is clear. We can only look forward to when Turbopack will be a low-level engine for other frameworks.
The Future of Webpack and Turbopack
For webpack enthusiasts, Turbopack offers a glimpse into the future. With Turbopack being managed by Vercel, a shift from webpack may occur in the coming years. However, the bundler is still in experimental mode, and developers are advised to consider alternatives like Vite until Turbopack is production-ready.
Migrating from webpack
As we’ve discussed, Turbopack is still in experiment mode and is not yet ready for production environments. So at the time of writing this article, you can’t port your project to Turbopack.
Conclusion
Turbopack is a promising project that will certainly redefine bundling tools architecture in an era where build tools such as Vite and esbuild are replacing bundlers. In this article, we learned what bundlers are and how they work. Then we introduced webpack as the bundler par excellence tool; we went on to learn its core concepts and briefly explored Vite as an alternative to webpack.
Ready to give Turbopack a try?
Once upon a time in web development, building web pages required just HTML, CSS, and some JavaScript for interactivity. However, as projects grew in scale and complexity, the need for efficient bundling tools became apparent. The introduction of Node.js showcased that JavaScript was not limited to client-side scripting but could handle a myriad of server-side tasks.
As developers embraced JavaScript for large-scale applications, the use of third-party libraries became common. Yet, managing these dependencies proved challenging, leading to the birth of bundlers. These tools aggregated JavaScript files, ensuring that source code and third-party dependencies were optimized and error-free.
The Rise of Webpack
Webpack, a static module bundler, emerged as a frontrunner in the world of bundlers. It generated a dependency graph from entry points, combining modules into bundles for the browser to process. With approximately 28 million weekly downloads, webpack became the go-to bundler for numerous JavaScript frameworks.
However, webpack had its share of challenges, including a slow development server, complete application rebuilds on file changes, and increased complexity as projects expanded. In response, the JavaScript community sought alternatives, and one notable solution was Vite.
Enter Vite: A Faster Development Experience
Vite, a build tool, offered a faster development experience compared to traditional bundlers. It consisted of Rollup for code bundling and a dev server with features like fast Hot Module Replacement (HMR). While Vite addressed some of Webpack’s issues, it wasn’t a direct replacement. The question remained: What could surpass webpack?
Turbopack: The Rust-Based Game-Changer
Vercel, the creators of Next.js, answered this question with the introduction of Turbopack. Positioned as the official successor to webpack, Turbopack is an incremental bundler optimized for JavaScript and TypeScript, and it’s crafted in Rust.
Turbopack boasts impressive speed claims, stating that it is 700 times faster than webpack and 10 times faster than Vite in large projects. The key to this speed lies in its unique features.
What is Turbopack?
Turbopack is an incremental bundler optimized for your JavaScript and TypeScript projects. Unlike other bundlers written in JS/TS, Turbopack is Rust-based. It’s the official successor to webpack and is being built by the creators of webpack and Next.js.
Turbopack claims to be 700x faster than webpack and 10x faster than Vite in large projects (though Vite’s creator disagrees with this). So what makes Turbopack so fast?
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.
Using Turbo Engine: The Power Behind Turbopack
Turbo Engine is a powerful Rust library that enables incremental computation. In computer science, incremental computation refers to using the previously computed output when computing a new output when a sequence of inputs is slightly different from each other, rather than computing the new output from scratch. This computation is applied when optimizing compilers. One way to achieve incremental computation is through caching. Turbo Engine implements incremental computation using function-level caching. Let’s explore the features and drawbacks of Turbopack.
How fast is Turbopack?
Turbopack is built on Turbo: an open-source, incremental memoization framework for Rust. Turbo can cache the result of any function in the program. When the program is run again, functions won’t re-run unless their inputs have changed. This granular architecture enables your program to skip large amounts of work, at the level of the function.
Turbopack is built on a new incremental architecture for the fastest possible development experience. On large applications, it shows updates 700x faster than Webpack.
Turbopack only bundles the minimum assets required in development, so startup time is extremely fast. On an application with 5,000 modules, Turbopack takes 4 seconds to boot up, while Vite (with SWC) takes 16.6 seconds.
To learn more, read the docs on how Turbopack bundles and view the benchmarks.
Why is Turbopack so fast?
Turbopack is so fast because it’s built on a reusable library for Rust which enables incremental computation known as the Turbo engine. Here’s how it works:
Function-level caching
In a Turbo engine-powered program, you can mark certain functions as ‘to be remembered’. When these functions are called, the Turbo engine will remember what they were called with, and what they returned. It’ll then save it in an in-memory cache.
Here’s a simplified example of what this might look like in a bundler:
We start with calling
readFileon two files,api.tsandsdk.ts. We thenbundlethose files,concatthem together, and end up with thefullBundleat the end. The results of all of those function calls get saved in the cache for later.Let’s imagine that we’re running on a dev server. You save the
sdk.tsfile on your machine. Turbopack receives the file system event, and knows it needs to recomputereadFile("sdk.ts"):Since the result
sdk.tshas changed, we need tobundleit again, which then needs to be concatenated again.Crucially,
api.tshasn’t changed. We read its result from the cache and pass that toconcatinstead. So we save time by not reading it and re-bundling it again.Now imagine this in a real bundler, with thousands of files to read and transformations to execute. The mental model is the same. You can save enormous amounts of work by remembering the result of function calls and not re-doing work that’s been done before.
The cache
The Turbo engine currently stores its cache in memory. This means the cache will last as long as the process running it — which works well for a dev server. When you run
next dev --turboin Next v13, you’ll start a cache with the Turbo engine. When you cancel your dev server, the cache gets cleared.In the future, we’re planning to persist this cache — either to the filesystem or to a remote cache like Turborepo’s. This will mean that Turbopack could remember work done across runs and machines.
How does it help?
This approach makes Turbopack extremely fast at computing incremental updates to your apps. This optimizes Turbopack for handling updates in development, meaning your dev server will always respond snappily to changes.
In the future, a persistent cache will open the door to much faster production builds. By remembering work done across runs, new production builds could only rebuild changed files — potentially leading to enormous time savings.
Compiling by Request
The Turbo engine helps provide extremely fast updates on your dev server, but there’s another important metric to consider — startup time. The faster your dev server can start running, the faster you can get to work.
There are two ways to make a process faster — work faster, or do less work. For starting up a dev server, the way to do less work is to compile only the code that’s needed to get started.
Page-level compilation
Versions of Next.js from 2–3 years ago used to compile the entire application before showing your dev server. In Next.js 11(opens in a new tab), we began compiling only the code on the page you requested.
That’s better, but it’s not perfect. When you navigate to
/users, we’ll bundle all the client and server modules, dynamic-imported modules, and referenced CSS and images. That means if a large part of your page is hidden from view, or hidden behind tabs, we’ll still compile it anyway.Request-level compilation
Turbopack is smart enough to compile only the code you request. That means if a browser requests HTML, we compile only the HTML — not anything that is referenced by the HTML.
Turbopack’s architecture takes the lessons learned from tools like Turborepo and Google’s Bazel, both of which focus on using caches to never do the same work twice.
An incremental reactive system with the speed of Rust? Turbopack is unstoppable, want to read more?!
The future of Turbo
To start, Turbopack will be used for the Next.js 13 development server. It will power lightning-fast HMR, and it will support React Server Components natively, as well as TypeScript, JSX, CSS, and more.
Turbopack will eventually also power Next.js production builds, both locally and in the cloud. We’ll be able to share Turbo’s cache across your entire team, using Vercel Remote Caching.
Webpack users can also expect an incremental migration path into the Rust-based future with Turbopack.
We couldn’t be more excited about the future of the Turbo ecosystem, as we push to help you iterate faster and create at the moment of inspiration.
Features and drawbacks of Turbopack
Turbopack introduces several features for developers, such as faster development server times, out-of-the-box support for JavaScript and TypeScript using SWC (Speedy Web Compiler), and live reloading for environmental variables. However, being in its early stages, Turbopack has drawbacks, including limited extensibility and the absence of built-in type checking.
Let’s highlight some of the features of Turbopack:
Let’s highlight some of Turbopack’s early drawbacks. It’s important to note that Turbopack is still very new and experimental, so these issues might be fixed as it matures.
tsc --watchor depend on your code IDE for type checking.How to use Turbopack
Turbopack is still in its alpha version and has only been deployed as a Next.js 13 dev server. To run a Next.js 13 project powered by Turbopack, run this command on your terminal:
Try out the alpha of Turbopack in Next.js 13 today with
next dev --turbo.This command will bootstrap a Next.js 13 sample with React Server Components. Run
yarn installto install dependencies.A compilation time of 6.264ms with 20+ components!
For context, let’s compare this startup time with a non-Turbopack Next.js 13 project, with fewer components and dependencies.
We compiled the client and server in 11s, almost twice the Turbopack compile time!
The difference is clear. We can only look forward to when Turbopack will be a low-level engine for other frameworks.
The Future of Webpack and Turbopack
For webpack enthusiasts, Turbopack offers a glimpse into the future. With Turbopack being managed by Vercel, a shift from webpack may occur in the coming years. However, the bundler is still in experimental mode, and developers are advised to consider alternatives like Vite until Turbopack is production-ready.
Migrating from webpack
As we’ve discussed, Turbopack is still in experiment mode and is not yet ready for production environments. So at the time of writing this article, you can’t port your project to Turbopack.
Conclusion
Turbopack is a promising project that will certainly redefine bundling tools architecture in an era where build tools such as Vite and esbuild are replacing bundlers. In this article, we learned what bundlers are and how they work. Then we introduced webpack as the bundler par excellence tool; we went on to learn its core concepts and briefly explored Vite as an alternative to webpack.
Author: Muhammad Talha Waseem
Recent Posts
Recent Posts
Exploring the Latest Features of ChatGPT: What’s
Enhancing Security Testing in CI/CD Pipelines: A
The Role of Data Preprocessing in Machine
Archives