Rollup — Next-Generation ES Module Bundler for Libraries

Introduction

Rollup is an ES module bundler that compiles small pieces of code into larger, more complex bundles. Unlike webpack which was designed for applications, Rollup was built specifically for libraries — producing clean, readable output that uses the ES module format natively.

With 26,000+ GitHub stars, Rollup is the de facto standard for building JavaScript libraries. React, Vue, Svelte, D3, Three.js, and hundreds of other major libraries use Rollup for their builds. It also serves as the production bundler inside Vite, giving it enormous indirect adoption.

What Rollup Does

Rollup takes ES modules as input and bundles them into a single file (or multiple chunks) while performing aggressive tree-shaking. Because it works with ES modules natively, it can statically analyze imports and exports to eliminate dead code more effectively than other bundlers.

Architecture Overview

[ES Module Source Files]
         |
    [Module Resolution]
    Follow import statements
    to build dependency graph
         |
    [Tree Shaking]
    Static analysis of
    imports/exports to
    remove unused code
         |
    [Chunk Generation]
    Code splitting based
    on dynamic imports
         |
    [Output Plugins]
    Format: ESM, CJS, UMD, IIFE
         |
[Optimized Bundle(s)]

Self-Hosting & Configuration

// rollup.config.js — library build config
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import terser from "@rollup/plugin-terser";

export default {
  input: "src/index.ts",
  output: [
    {
      file: "dist/index.esm.js",
      format: "esm",
      sourcemap: true
    },
    {
      file: "dist/index.cjs.js",
      format: "cjs",
      sourcemap: true
    }
  ],
  plugins: [
    resolve(),
    commonjs(),
    typescript(),
    terser()
  ],
  external: ["react", "react-dom"]
};

Key Features

• ES Module Native — designed from the ground up for ES modules
• Superior Tree Shaking — static analysis eliminates more dead code than alternatives
• Multiple Output Formats — ESM, CommonJS, UMD, IIFE, AMD, SystemJS
• Code Splitting — automatic chunking via dynamic imports
• Plugin Ecosystem — rich plugin system that Vite also supports
• Clean Output — produces readable, debuggable bundles
• Scope Hoisting — flattens modules into a single scope for smaller bundles
• Preserves Modules — option to keep file structure for tree-shakeable packages

Comparison with Similar Tools

FAQ

Q: When should I use Rollup vs webpack? A: Use Rollup for libraries and packages — it produces cleaner output with better tree-shaking. Use webpack for applications that need features like HMR, dev server, and Module Federation.

Q: Why does Vite use Rollup for production builds? A: Rollup produces the highest quality bundles with the best tree-shaking. Vite uses esbuild for fast dev transforms but Rollup for production where output quality matters more than build speed.

Q: What is Rolldown? A: Rolldown is a Rust-based reimplementation of Rollup being developed for Vite. It aims to provide Rollup-compatible output at native speed, potentially replacing both esbuild and Rollup in the Vite build pipeline.

Q: How do I publish a library with both ESM and CJS? A: Configure Rollup with multiple outputs (format: "esm" and format: "cjs"), then use the "exports" field in package.json to map import and require to the correct files.

Sources

• GitHub: https://github.com/rollup/rollup
• Documentation: https://rollupjs.org
• Created by Rich Harris (also created Svelte)
• License: MIT