Web - Bundler

About

A bundler is a web build tool that

• from a javascript entry file
• get all dependent files
• performs the build operations configured.
• and outputs only one file: the bundle

Example

• A math module

// math.js
export function add(a, b) {
  return a + b;
}

• The app entry point

// app.js
import { add } from './math.js';

console.log(add(2, 2)); // 4

Example of Bundle with the entry point being app.js (without any size reduction)

function add(a, b) {
  return a + b;
}

console.log(add(2, 2)); // 4

Features

They may allow:

• multiple entry points
• an HTML as entry point
• a css file as entry point

but the goal remains the same:

• they takes a lot of file
• and outputs less files (generally one but they may output more than one due to code splitting)

Bundler vs Task Runner

The difference with a task runner is that they work on the file tree (dependency graph) and not on a list of files

task runner can still bundle but only on a collection of file, not based on a dependency tree

List

• Webpack used by React (34000)
• https://esbuild.github.io/ (used by remix built in go)
• parcel (13141)
• Rollup used by Vite