Rollup (module bundler)

Rollup (module bundler)
Name	Rollup
Developer	Rich Harris
Released	15 May 2015
Latest release version	4.24.0
Latest release date	19 November 2024
Programming language	JavaScript
Operating system	Cross-platform
Genre	Module bundler
License	MIT License
Website	https://rollupjs.org/

Rollup (module bundler) is an open-source JavaScript module bundler primarily used for compiling small pieces of code into a larger, more complex library or application. It was created by Rich Harris and first released in 2015, gaining prominence for its efficient handling of the ECMAScript module format. Rollup is distinguished by its use of tree-shaking, a static analysis technique to eliminate dead code, making it particularly effective for library authors. Its design philosophy emphasizes producing optimized bundles for modern web development workflows.

Overview

Rollup was conceived by Rich Harris while he was working at the Guardian newspaper, aiming to improve upon existing tools like Browserify and webpack. The project's initial development was supported by the broader JavaScript community and later saw significant contributions from companies like Figma. Its core innovation was native support for ECMAScript 2015 modules, allowing developers to write future-proof code. The bundler quickly became integral to major projects, including the build process for the Vue.js framework and the Svelte compiler, which was also created by Harris.

Features

A primary feature of Rollup is its advanced **tree-shaking** capability, which performs static analysis of ECMAScript module imports and exports to remove unused code. It supports code-splitting through dynamic `import()` statements, enabling efficient loading for applications like those built with React or Angular (web framework). Rollup can output bundles in multiple formats, including ECMAScript modules, CommonJS, Universal Module Definition (UMD), and Immediately Invoked Function Expression (IIFE). It also offers powerful plugin APIs for transforming code, with official plugins for handling JSON, TypeScript via Babel (transcompiler), and Node.js built-in modules.

Architecture

The architecture of Rollup is built around a **plugin-based system** and a deterministic **module graph**. It begins by creating an abstract syntax tree (AST) of the entry point using a parser like Acorn (parser). The bundler then constructs a graph of all module dependencies, resolving specifiers according to the Node.js algorithm. This graph is analyzed for tree-shaking before the final bundle is generated through a series of **chunking** and **rendering** phases. The internal architecture facilitates integration with other tools in the JavaScript ecosystem, such as Prettier (code formatter) for formatting and Jest (JavaScript framework) for testing bundled outputs.

Comparison with other bundlers

Compared to webpack, which is a more comprehensive application bundler with built-in support for assets like CSS and images, Rollup is often favored for its simplicity and efficiency in bundling libraries. While Parcel (web application bundler) offers zero-configuration builds, Rollup provides finer-grained control through its configuration file and plugin system. For very large applications, tools like Vite (build tool) often use Rollup under the hood for production builds due to its performance. However, for complex single-page applications requiring hot module replacement, developers might still choose webpack or Vite (build tool) directly.

Plugins and ecosystem

The Rollup ecosystem is powered by a wide array of community and official plugins. Key official plugins include `@rollup/plugin-node-resolve` for locating third-party modules in `node_modules`, and `@rollup/plugin-commonjs` to convert CommonJS modules. The `@rollup/plugin-typescript` plugin enables seamless integration with TypeScript projects. For framework-specific needs, plugins exist for Svelte, Vue.js, and React. The ecosystem also includes tools like `rollup-plugin-terser` for minification, inspired by Google Closure Compiler, and `rollup-plugin-visualizer` for bundle analysis, similar to features in webpack-bundle-analyzer.

Adoption and use cases

Rollup is extensively adopted by major open-source JavaScript libraries and frameworks. It is the default bundler for Vue.js 3 and the foundational build tool for Svelte and SvelteKit. Companies like Figma, Discord, and Spotify have utilized Rollup in their front-end build pipelines. Its primary use case remains bundling libraries for distribution on npm, such as D3.js and Three.js, where small bundle size is critical. It is also commonly used within monorepos managed by Lerna (software) or Turborepo to build multiple packages efficiently.

Category:JavaScript programming language family Category:Free software programmed in JavaScript Category:Web development software