Overview

Rollup.js is a module bundler for JavaScript that focuses on compiling small code modules into larger, more complex applications or libraries. It was introduced in 2015 and has since become a tool for developers aiming to produce highly optimized and lean bundles, particularly for JavaScript libraries, frameworks, and web components. Rollup's core strength lies in its approach to tree-shaking, a process that statically analyzes the code to remove any unused exports, thus minimizing the final bundle size Rollup.js Introduction.

The tool excels in scenarios where bundle size and performance are critical. For instance, when developing a reusable JavaScript library, Rollup can ensure that only the necessary code is included, reducing the overhead for consumers of that library. This efficiency is achieved by leveraging the static module structure of ES Modules (ESM), allowing Rollup to perform deep analysis of dependencies and exports MDN Web Docs on JavaScript Modules. Unlike some other bundlers that might include polyfills or helper functions that may not be strictly needed, Rollup aims for a more direct translation of source code into a target format.

Developers choose Rollup for its ability to generate bundles in various formats, including ES Modules, CommonJS, AMD, and IIFE (Immediately Invoked Function Expression), making it versatile for different deployment environments. Its plugin system extends its capabilities, allowing for transformations like transpilation (e.g., Babel integration), minification, and CSS processing. While it can be used for full-scale applications, its design philosophy and optimization strategies often make it a preferred choice for library authors and those focused on delivering minimal JavaScript payloads.

For application development, particularly single-page applications, bundlers like webpack or Vite might offer a more comprehensive feature set out-of-the-box, including hot module replacement and sophisticated code splitting for dynamic imports. However, Rollup's output is often lauded for its readability and efficiency, making it a strong contender for projects where the final JavaScript output needs to be as clean and small as possible. This focus on output quality and tree-shaking makes Rollup a valuable asset in the modern web development ecosystem.

Key features

  • Tree-Shaking ES Modules: Rollup utilizes the static analysis capabilities of ES Modules to eliminate dead code, ensuring that only actively used functions and variables are included in the final bundle, leading to smaller file sizes Rollup.js Tree-Shaking.
  • Multiple Output Formats: It supports bundling code into various formats, including ES Modules (ESM), CommonJS (CJS), Asynchronous Module Definition (AMD), and Immediately Invoked Function Expressions (IIFE), providing flexibility for different environments and consumption methods Rollup.js Output Formats.
  • Plugin System: Rollup offers a robust plugin API that allows developers to extend its functionality. Plugins can handle tasks such as transpiling code with Babel or TypeScript, loading assets, minifying output, and integrating with various development workflows Rollup.js Plugin Development.
  • Code Splitting: For larger applications, Rollup can split code into multiple chunks that can be loaded on demand, improving initial load times and overall application performance Rollup.js Code Splitting.
  • Configurability: Rollup can be configured via a JavaScript configuration file, enabling fine-grained control over bundling options, input/output paths, plugins, and external dependencies.
  • Optimized for Libraries: Its design prioritizes producing highly optimized and efficient bundles, making it suitable for developing JavaScript libraries and reusable components that need to be lightweight.

Pricing

Rollup.js is a free and open-source project.

Feature Cost (as of 2026-05-09)
Core Bundling Functionality Free
Plugin Ecosystem Free
Commercial Use Free

There are no licensing fees or subscription costs associated with using Rollup.js. The project is maintained by a community of contributors Rollup.js Homepage.

Common integrations

  • Babel: The @rollup/plugin-babel plugin allows developers to transpile modern JavaScript features down to older environments, ensuring broader compatibility for bundled code Rollup Babel Plugin Documentation.
  • TypeScript: The @rollup/plugin-typescript plugin enables Rollup to process TypeScript files, compiling them into JavaScript during the bundling process Rollup TypeScript Plugin Documentation.
  • Node.js Modules: The @rollup/plugin-node-resolve plugin helps Rollup locate and bundle third-party modules installed from node_modules, making them available in the final output Rollup Node Resolve Plugin Documentation.
  • CommonJS Modules: The @rollup/plugin-commonjs plugin converts CommonJS modules into ES Modules, allowing them to be included in a Rollup bundle that primarily uses ESM Rollup CommonJS Plugin Documentation.
  • Minification: Plugins like rollup-plugin-terser (for Terser) or @rollup/plugin-uglify integrate minification tools to further reduce the size of the final JavaScript bundle Rollup Plugin Terser.
  • Svelte: Rollup is frequently used as the bundler for Svelte applications, leveraging its efficient output for Svelte's compile-time approach to UI development Svelte Rollup Integration Guide.

Alternatives

  • webpack: A popular module bundler known for its extensive features, including hot module replacement, advanced code splitting, and a rich plugin ecosystem, often used for complex single-page applications webpack Homepage.
  • Vite: A next-generation frontend tool that focuses on speed, offering extremely fast cold start times and instant hot module replacement by leveraging native ES Modules in development Vite Homepage.
  • esbuild: An extremely fast JavaScript bundler and minifier written in Go, prioritizing build speed for development and production, often integrated into other build tools esbuild Homepage.

Getting started

To begin using Rollup.js, you typically install it as a development dependency in your project. The following steps demonstrate a basic setup for bundling a simple JavaScript module.

First, create a new project directory and initialize it:

mkdir my-rollup-project
cd my-rollup-project
npm init -y

Next, install Rollup as a development dependency:

npm install rollup --save-dev

Create an src/main.js file with some code:

// src/main.js
import { greet } from './utils.js';

function runApp() {
  console.log(greet('Rollup'));
}

runApp();

Create an src/utils.js file:

// src/utils.js
export function greet(name) {
  return `Hello, ${name}!`;
}

Create a rollup.config.js file in the root of your project to configure the bundling process:

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

Finally, add a script to your package.json to run Rollup:


{
  "name": "my-rollup-project",
  "version": "1.0.0",
  "description": "",
  "main": "dist/bundle.js",
  "scripts": {
    "build": "rollup -c"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "rollup": "^4.0.0"
  }
}

Now, run the build command:

npm run build

This will create a dist/bundle.js file containing the bundled code:

// dist/bundle.js
function greet(name) {
  return `Hello, ${name}!`;
}

function runApp() {
  console.log(greet('Rollup'));
}

runApp();

You can then execute this bundled file using Node.js:

node dist/bundle.js

This basic example demonstrates Rollup's ability to bundle ES Modules and perform tree-shaking, as the greet function is directly integrated into the output without retaining the original module structure in a way that would add overhead.