Rollup

Rollup - это инструмент для сборки JavaScript-проектов, который специализируется на создании библиотек и пакетов, используя подход на основе ES-модулей и обеспечивая эффективное удаление неиспользуемого кода (tree shaking) для минимизации размера финального бандла.

Инструмент используется разработчиками для создания npm-библиотек, UI-компонентов и фреймворков, где критичны минимальный размер и возможность tree shaking для конечных пользователей. Например, разработчик создаёт npm-библиотеку с несколькими компонентами, используя Rollup для сборки; в итоговый файл попадают только те экспорты, которые действительно нужны пользователям библиотеки.

Rollup был создан в 2015 году Ричем Харрисом (создателем Svelte) и к 2026 году стал стандартом для сборки библиотек в экосистеме JavaScript, активно используется внутри Vite для production-сборок.

Кратко

Rollup - это сборщик JavaScript-проектов, специализирующийся на библиотеках и npm-пакетах. Он обеспечивает лучший в индустрии tree shaking, создавая минимальные и чистые бандлы.

Как работает Rollup

Rollup анализирует граф зависимостей, начиная с точки входа (entry point), и собирает все используемые модули в единый бандл. В отличие от Webpack, Rollup изначально проектировался для работы с ES-модулями, что позволяет ему достигать максимальной эффективности tree shaking.

Процесс:

1. Парсит исходный код, строит AST (абстрактное синтаксическое дерево).
2. Анализирует импорты и экспорты, строит граф зависимостей.
3. Отслеживает, какие экспорты реально используются.
4. Удаляет неиспользуемый код (tree shaking).
5. Оптимизирует модули (включая плагины для трансформации кода).
6. Собирает финальный бандл в одном из форматов: ES-модули (.mjs), CommonJS (.cjs), UMD, IIFE.

Rollup особенно популярен для создания библиотек, потому что позволяет сохранять tree shaking для конечных пользователей библиотеки.

Примеры использования

• Создание npm-пакетов (библиотек).
• Сборка UI-библиотек (React, Vue-компоненты).
• Сборка фреймворков (Svelte использует Rollup).
• Проекты, где критичен размер бандла.

Где используется

Сфера	Применение
JavaScript-экосистема	Сборка библиотек и пакетов
Frontend	UI-библиотеки, компоненты
Vite	Использует Rollup для production-сборки
Svelte	Официальный сборщик

Преимущества

• Лучший tree shaking: удаляет неиспользуемый код эффективнее Webpack.
• Чистые выходные файлы: создаёт минимальные, читаемые бандлы.
• Поддержка ES-модулей: нативная работа с import/export.
• Множество выходных форматов: ES, CommonJS, UMD, IIFE - всё в одном конфиге.
• Экосистема плагинов: TypeScript, Babel, PostCSS, JSON и др.
• Быстрая сборка: легковеснее Webpack для библиотек.

Недостатки

• Не подходит для приложений: для больших SPA с динамическими импортами лучше Webpack или Vite.
• Меньше плагинов: экосистема меньше, чем у Webpack.
• Сложность настройки ресурсов: для изображений, шрифтов требуются плагины и дополнительные настройки.

Сравнение с Webpack

Критерий	Rollup	Webpack
Основное назначение	Библиотеки, npm-пакеты	Приложения (SPA, SSR)
Tree shaking	Лучший	Хороший
Размер бандла	Минимальный	Оптимальный
Сложность настройки	Средняя	Высокая
Динамические импорты	Поддерживает	Отлично поддерживает
Горячая перезагрузка (HMR)	Ограниченно	Отлично

Часто задаваемые вопросы

Чем Rollup отличается от Webpack?

Rollup лучше для библиотек: он даёт меньший размер бандла и позволяет конечным пользователям библиотеки применять tree shaking. Webpack лучше для приложений (сайтов, SPA), где важны горячая перезагрузка и работа с динамическими импортами.

Почему Rollup используют в Vite?

Vite в режиме разработки использует свой сервер на основе ES-модулей, а для production-сборки вызывает Rollup, потому что он даёт оптимальные по размеру бандлы и лучший tree shaking.

Как настроить Rollup для библиотеки?

// rollup.config.js
export default {
  input: 'src/index.js',
  output: [
    { file: 'dist/index.cjs.js', format: 'cjs' },
    { file: 'dist/index.esm.js', format: 'es' }
  ],
  plugins: [
    resolve(), // разрешает импорты из node_modules
    commonjs() // преобразует CommonJS в ES-модули
  ]
};

Какие выходные форматы поддерживает Rollup?

Rollup поддерживает ES-модули (.mjs, format: 'es'), CommonJS (.cjs, format: 'cjs'), UMD (format: 'umd') - универсальный формат для браузеров и Node.js, IIFE (format: 'iife') - для выполнения в браузере без сборщиков.

Связанные термины

• JavaScript
• Webpack
• Vite
• ES-модули
• Tree shaking
• npm
• Svelte
• Babel