Comparing Turbopack And Webpack
Tags: webdev, javascript, programming, tutorial
Published: 2023-11-10 06:28:10

# Comparison between Turbopack and Webpack
[Turbopack](https://turbo.build/pack/docs) and [Webpack](https://webpack.js.org/) are both [JavaScript](https://developer.mozilla.org/en-US/docs/Web/javascript) module bundlers used to build and package applications for the web. They both take in a set of input files and transform them into a single output bundle optimized for the web.

Throughout this article, we’ll cover the differences between `Webpack` and `Turbopack`; we will configure a sample Next application and bundle with both tools and compare their performance.

## What is Webpack?
Webpack is a free and open-source `JavaScript` module bundler. It’s designed mainly for `JavaScript` but can also modify front-end components like `HTML`, `CSS`, and pictures, provided the appropriate loaders are present. Webpack extracts dependencies from modules and creates static assets to represent those dependencies.

## Features
The following are some of the characteristics of the webpack:

- Code splitting: Webpack can automatically split your code into smaller units, which can be loaded on demand, improving the initial load time of your application.
- Browser caching: Webpack can automatically generate unique names for your bundles, which allows the browser to cache them for faster subsequent load times.
- Source Map: Webpack can generate source maps allowing you to debug your application as if running the un-bundled code.
- Plugins: Webpack has a rich ecosystem of plugins that can perform various tasks, such as optimization, compression, and code generation.

## How to install and configure Webpack for an application
To install Webpack, you must first have [Node.js](https://nodejs.org/en/docs) and `npm` (the package manager for `Node.js`) installed on your PC.

Open a terminal and navigate to your project’s root directory. Then run the following command to initialize a `package.json` file for your project:

```jsx
npm init -y
```
Next, run the following command to install webpack as a development dependency:

```jsx
npm install --save-dev webpack
```
Create a file in the root directory of your project called `webpack.config.js`. This file will contain the configuration for your `webpack` build.

In the `webpack.config.js` file, you will need to specify the following:

The entry point — this is the `JavaScript` file that contains the code that will be bundled by webpack.
The output file is where you want your bundled files to be generated.

For example:

```jsx
// webpack.config.js
    
    module.exports = {
      entry: './src/index.js',
      output: {
        filename: 'bundle.js',
        path: __dirname + '/dist'
      }
    };
```
To run `webpack`, you can create a script in your `package.json` file like this:

```jsx
"scripts": {
      "build": "webpack"
    }
```
Then, you can run the build script by running `npm` run build in the terminal.

That’s the basic setup for Webpack. Of course, many more configuration options are available, such as loaders for handling different types of files (e.g., CSS, images), plugins for additional functionality, and so on. You can learn more about the available options in the `Webpack` documentation.

## What is Turbopack?
`Turbopack` is designed on a revolutionary incremental architecture to provide the quickest development experience possible. It updates huge apps 700x quicker than Webpack. Turbopack packs the bare minimum of assets necessary for development; therefore, starting time is exceptionally quick. Turbopack boots up in 1.8 seconds on an application with 3,000 modules, `Webpack` takes 16.5 seconds, and Vite takes 11.4 seconds.

### Features
Let’s talk about some of the features of `Turbopack`:

- Swift development server time: Because of incremental computation, Turbopack supports HMR out of the box. HMR guarantees that your development server does not entirely reload after each file modification.
- Out-of-the-box support for JS & TS: Turbopack includes JavaScript and TypeScript, but not Babel. Instead, Turbopack uses SWC, a Rust-based compilation tool (Speedy Web Compiler). SWC promises to be 17 times quicker than Babel.
- Out-of-the-box support for CJS and ESM imports: Turbopack supports all methods of module importation, including dynamic imports, ES Modules, and CommonJS.
- Live reloading for environmental variables: One of the most problematic aspects of development is needing to shut down and reload your server after modifying environmental variables. Turbopack includes live reloading to account for environmental variations.

### How to install and configure Turbopack
It’s worth mentioning that Turbopack has not been publicly released; it’s currently in the alpha testing phase, and the only way to try it out right now is via the Next.js example bundled with it:

```jsx
npx create-next-app —example with-turbopack
```

## Comparing Turbopack and Webpack
To understand the performance differences between Turbopack and Webpack, I created two separate [Next.js](https://nextjs.org/docs) applications. The first application was bundled using Webpack, and the second was bundled using Turbopack. Both applications had identical content.

I used the Windows Measure command to compare the build times of each application — `**Measure-Command { start-process npm 'run build' -wait}**`.

After running the command, the build time for the `Turbopack` application was:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/licwvuomghh3cj0l6r6b.png)
And the build time for the `Webpack` application was:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ds1t9fb99m87j3d0dkws.png)

As can be seen from the build output, `Turbopack` builds applications faster than `Webpack`. The Webpack build took **24 seconds**, **756 milliseconds**, while the Turbopack build took **20 seconds**, **455 milliseconds**. This results in a difference of **4 seconds**, **301 milliseconds** in favor of `Turbopack`. This is a significant improvement in build time, and it could potentially make a big difference in the development workflow, especially for large-scale projects. This suggests that Turbopack may be a more efficient and faster option for building and bundling applications when compared to Webpack.

The repository links for the two applications are:

- [next-webpack](https://github.com/Saintdavidking/Next-webpack)
- [next-turbopack](https://github.com/Saintdavidking/Next-Turbopack)

While performance is an important component when selecting a tool, it should not be the only determining factor; other qualities should also be evaluated. 
Here’s how `Turbopack` compares to `Webpack` in other areas.

- Configuration and setup: Turbopack aims to simplify the process of configuring webpack by providing a simpler and more opinionated API. With Turbopack, you only need to specify a few options to generate a Webpack configuration optimized for your code. In contrast, Webpack requires more manual configuration, and many more options are available to customize the behavior of the build process.
- Supported features and plugins: Turbopack is built on top of webpack, so it supports all of the same features and plugins as webpack. However, Turbopack only includes a limited set of plugins by default and does not allow you to specify custom plugins. If you need to use a plugin not included with Turbopack, you must fall back to using webpack directly.
- Community support and documentation: Webpack is a more established and widely used tool than Turbopack, so it has a larger community and more comprehensive documentation. However, Turbopack is actively maintained and has a growing user base, so it also has good support and documentation.

## Conclusion
In summary, `Turbopack` is designed to optimize the configuration of Webpack to improve build times and runtime performance. It provides a simpler and more opinionated [API](https://www.postman.com/api-platform/api-documentation/), automatically selecting the best options for your code based on machine learning.

If you are working on a larger or more complex project that requires more flexibility and customization, or if you need to use plugins that Turbopack does not support, Webpack may be a better choice. It is a more feature-rich and widely used tool with a larger community and more comprehensive documentation.

Ultimately, the best choice will depend on your project’s specific needs and requirements, as well as your preferences and experience.