Hey there everyone it's Maaz, in this short article we are going to learn about Turbopack

• Turbopack is an incremental bundler optimized for JavaScript and TypeScript, written in Rust by the creators of webpack and Next.js at Vercel.

• The secret to Turbopack's performance is twofold: highly optimized machine code and a low-level incremental computation engine that enables caching down to the level of individual functions. Once Turbopack performs a task it never does it again.

How to use Turbopack in Next.js 13

• just make these changes in the package.json file

package.json

{
  "scripts": {
     "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

Compared to Vite (Turbopack vs. Vite)

• Turbopack can outperform Vite on several key metrics.

Dev server startup time

Vite is a non-bundler, which means it doesn't bundle your code at all. It sends each module directly to the browser. This means the browser does the hard work of handling dependencies between modules.

On the surface, this seems like an unfair fight. Turbopack bundles your application, meaning that a lot more work needs to be done before sending the code to the browser.

But it turns out that Turbopack can handle this faster than the browser can. By pre-bundling, we can save a lot of time over Vite's Native ESM system.

This means that Turbopack's dev server starts up much faster than Vite's. On a 1,000-module application, Vite takes 1.8s to start up. Turbopack starts up in ** 1.5s - 1.2x ** faster.

In large applications, this differential stays consistent. In a 30,000-module application, Turbopack starts up ** 1.4x ** faster than Vite.

Code updates

Vite is extremely fast in development because of its speedy Fast Refresh capabilities. When you update a file, Vite uses its Native ESM system to to send the updated module to the browser - and performs a little bit of magic to integrate that into the existing module graph.

Turbopack sends changed modules directly through the WebSocket without doing any bundling at all.

In a 1,000-module application, Turbopack can react to file changes 3.8x faster than Vite.

Comparing with Webpack (Turbopack vs. Webpack)

• Turbopack's incremental architecture outstrips Webpack's speed on several key metrics.

Dev server startup time

The main problem we found with webpack was development server startup time. If you end up importing a lot of modules in a certain page and open that page in your browser, the initial compile will take a few seconds. If you change routes in your development environment, you have to wait for a similar compile again for your new page.

Turbopack is designed Turbopack to be as lazy as possible, only doing work when it's requested. In a dev server, this means on incoming requests Turbopack does exactly the work the user asked for. No more unnecessary bundling of on-demand loaded code before the user needs it.

This means that Turbopack's dev server starts up much faster than Webpack. Next.js 12, which uses webpack under the hood, can start up a build server on a 1,000-module application in 3.6s. Turbopack starts up in ** 1.5s - 2.5x ** faster.

Turbopack aims to have a constant time to refresh, no matter your application size. Instead of scaling with your application size, it scales based on the size of the changes made.

In a 1,000-module application, Turbopack can react to file changes 5.6x faster than Webpack. In a 30,000-module application, this is ** 217.3x ** faster.

of course, this is not Complete info, this is just an overview even though I am still learning.

Thanks for reading this Blog, hope you enjoyed it 😊