Bundling and Building JavaScript Applications: esbuild vs rollup vs tsup vs webpack

Choosing the right build tool affects how fast your code compiles, how easy it is to configure, and how well it scales. webpack, rollup, esbuild, and tsup all solve the problem of packaging code, but they take different approaches. Let's look at how they handle configuration, speed, plugins, and TypeScript.

⚙️ Configuration Style: Files vs Scripts vs Zero Config

webpack relies on a dedicated configuration file.

• You create webpack.config.js to define entry points and output.
• It supports complex logic using JavaScript functions.

// webpack: webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  }
};

rollup also uses a config file but focuses on bundles.

• You create rollup.config.js to define input and output formats.
• It is simpler than webpack but still requires setup.

// rollup: rollup.config.js
export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm'
  }
};

esbuild does not have a built-in config file.

• You write a JavaScript script using its API or use CLI flags.
• This gives full control but requires more manual code.

// esbuild: build.js
const esbuild = require('esbuild');
esbuild.build({
  entryPoints: ['src/index.js'],
  outfile: 'dist/bundle.js',
  bundle: true
});

tsup aims for zero configuration.

• You can run it via CLI without any files.
• If needed, you can add tsup.config.ts for custom settings.

// tsup: tsup.config.ts (optional)
import { defineConfig } from 'tsup';
export default defineConfig({
  entry: ['src/index.ts'],
  format: ['cjs', 'esm']
});

🚀 Build Speed: Native Speed vs JavaScript Engine

webpack runs on Node.js and can be slow on large projects.

• It builds a dependency graph in JavaScript.
• Cold starts often take seconds or minutes for big apps.

// webpack: Typically run via npm script
// "build": "webpack --mode production"
// Speed depends heavily on loader complexity

rollup is faster than webpack for libraries.

• It avoids some of the overhead of webpack's module resolution.
• Still runs on Node.js, so it has limits on huge graphs.

// rollup: Typically run via npm script
// "build": "rollup -c"
// Faster than webpack for ESM output

esbuild is written in Go and compiles to native code.

• It is significantly faster than Node-based tools.
• Builds that take minutes in webpack can take milliseconds here.

// esbuild: Run via API or CLI
// "build": "node build.js"
// Extremely fast due to Go implementation

tsup inherits the speed of esbuild.

• Since it wraps esbuild, it keeps the performance benefits.
• It adds minimal overhead for TypeScript type handling.

// tsup: Run via CLI
// "build": "tsup src/index.ts"
// Near instant builds for TypeScript libraries

🔌 Plugins and Loaders: Ecosystem Depth

webpack has the largest ecosystem of loaders and plugins.

• You can import CSS, images, and legacy code directly.
• Community support means solutions exist for almost any problem.

// webpack: Using loaders for CSS
module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }
    ]
  }
};

rollup uses plugins but is more focused on JS transformations.

• It handles external dependencies and tree-shaking well.
• Less support for non-JS assets without extra configuration.

// rollup: Using plugins
import commonjs from '@rollup/plugin-commonjs';
export default {
  plugins: [commonjs()]
};

esbuild has a smaller plugin ecosystem.

• It focuses on core bundling and transpilation features.
• You may need to write custom plugins for niche requirements.

// esbuild: Custom plugin example
const myPlugin = {
  name: 'my-plugin',
  setup(build) {
    // Plugin logic here
  }
};

tsup relies on esbuild plugins.

• It supports the same plugin system as esbuild.
• Best for standard TypeScript use cases without heavy asset needs.

// tsup: Passing esbuild plugins
export default defineConfig({
  esbuildPlugins: [myPlugin]
});

📘 TypeScript Support: Built-in vs Add-ons

webpack requires loaders to handle TypeScript.

• You must install ts-loader or babel-loader.
• Type checking often requires a separate process like fork-ts-checker.

// webpack: TypeScript configuration
module.exports = {
  module: {
    rules: [
      { test: /\.tsx?$/, use: 'ts-loader' }
    ]
  }
};

rollup needs plugins for TypeScript.

• You typically use @rollup/plugin-typescript.
• Type checking is separate from the bundling step.

// rollup: TypeScript plugin
import typescript from '@rollup/plugin-typescript';
export default {
  plugins: [typescript()]
};

esbuild supports TypeScript syntax out of the box.

• It strips types quickly but does not type-check.
• You need to run tsc separately if you want type safety.

// esbuild: TypeScript support
esbuild.build({
  entryPoints: ['src/index.ts'],
  loader: { '.ts': 'ts' }
});

tsup handles TypeScript and types automatically.

• It bundles code and generates .d.ts files in one step.
• This removes the need for separate type configuration.

// tsup: Automatic d.ts generation
export default defineConfig({
  dts: true // Generates type definitions
});

📊 Summary: Key Differences

💡 The Big Picture

webpack is the heavy-duty option 🏗️. It handles everything from legacy code to complex asset pipelines. Use it when you need maximum control and compatibility for large applications.

rollup is the library specialist 📦. It creates clean, efficient bundles for packages others will install. Use it when publishing code to npm.

esbuild is the speed demon 🏎️. It compiles code faster than almost anything else. Use it when build time is a bottleneck or for simple bundling tasks.

tsup is the TypeScript shortcut ⚡. It combines esbuild speed with automatic type handling. Use it when you want to ship TypeScript libraries without configuring build tools.

Final Thought: All four tools can get the job done, but they excel in different areas. Match the tool to your project type — complex apps need webpack, libraries need rollup or tsup, and speed-critical tasks need esbuild.