Анализ размера бандла: rollup-plugin-visualizer

rollup-plugin-visualizer подключается к пайплайну Rollup на этапе пост-обработки бандла и формирует интерактивную визуализацию структуры итогового сборочного файла. Основная задача инструмента — предоставить детальную картину распределения модулей по размеру, включая вклад отдельных зависимостей, динамически импортируемых чанков и сторонних библиотек.

Rollup формирует итоговый JavaScript-бандл на основе графа зависимостей. При росте проекта структура этого графа усложняется, а итоговый размер начинает зависеть от множества факторов: дублирования зависимостей, неэффективного tree-shaking, избыточных импортов, неоптимального code splitting.

Анализ размера бандла позволяет выявлять:

  • крупные модули, доминирующие в итоговом размере;
  • повторяющиеся зависимости между чанками;
  • неиспользуемый или частично используемый код;
  • влияние сторонних библиотек на общий вес;
  • неэффективное разделение кода на чанки.

rollup-plugin-visualizer интегрируется после генерации бандла и использует метаданные Rollup для построения визуальной модели.

Установка и подключение

Плагин подключается как обычный Rollup plugin:

npm install rollup-plugin-visualizer --save-dev

Конфигурация Rollup:

import { visualizer } from 'rollup-plugin-visualizer';

export default {
  input: 'src/index.js',
  output: {
    dir: 'dist',
    format: 'esm'
  },
  plugins: [
    visualizer({
      filename: 'stats.html',
      open: true,
      gzipSize: true,
      brotliSize: true
    })
  ]
};

На этапе generateBundle плагин агрегирует информацию о модулях и формирует отчёт.

Основные режимы визуализации

Плагин поддерживает несколько типов представления данных:

Treemap

Иерархическая карта модулей, где размер блока соответствует весу кода. Основная форма анализа.

Структура отображения:

  • корневой узел — весь бандл;
  • промежуточные узлы — чанки и директории;
  • листья — конкретные модули.

Ключевая особенность — визуальная идентификация «тяжёлых» зависимостей.

Sunburst

Круговая диаграмма с радиальным распределением модулей. Используется для анализа глубины вложенности и структуры импортов.

Network

Графовая модель зависимостей между модулями. Применяется для анализа циклических или избыточных связей.

Метрики размера: raw, gzip, brotli

Анализ бандла включает несколько типов размера:

  • stat size — исходный размер после Rollup;
  • parsed size — размер после обработки AST;
  • gzip size — размер после gzip-сжатия;
  • brotli size — размер после brotli-сжатия.

Особое значение имеют сжатые метрики, поскольку именно они ближе к реальной нагрузке при доставке через сеть.

Включение соответствующих опций:

visualizer({
  gzipSize: true,
  brotliSize: true
});

Интерпретация распределения модулей

Типичная структура визуализации содержит несколько характерных паттернов:

Доминирование сторонних библиотек

Большие блоки, соответствующие зависимостям из node_modules, часто занимают значительную долю бандла. Особенно это характерно для UI-фреймворков, утилитарных библиотек и date-парсеров.

Дублирование кода

Повторяющиеся блоки в разных чанках указывают на:

  • отсутствие корректного shared chunk extraction;
  • несовпадение версий зависимостей;
  • неправильную конфигурацию dedupe.

Неэффективный tree-shaking

Наличие большого количества неиспользуемых экспортов внутри модулей проявляется в увеличении доли библиотек без реальной необходимости.

Анализ code splitting

Rollup поддерживает разделение кода через динамические импорты:

import('./module.js').then(m => {
  m.run();
});

rollup-plugin-visualizer позволяет оценить:

  • корректность выделения чанков;
  • баланс размеров между чанками;
  • наличие чрезмерно крупных lazy-loaded модулей;
  • влияние vendor-chunks на производительность загрузки.

Работа с chunk-группами

В сложных сборках формируются группы:

  • entry chunks;
  • dynamic chunks;
  • shared chunks;
  • vendor chunks.

Визуализация позволяет определить:

  • перегруженные entry points;
  • неразделённые vendor-зависимости;
  • слабую изоляцию shared логики.

Опции конфигурации

Основные параметры:

visualizer({
  filename: 'bundle-stats.html',
  open: false,
  template: 'treemap',
  sourcemap: false,
  gzipSize: true,
  brotliSize: true,
  projectRoot: process.cwd()
});

template

Поддерживаемые значения:

  • treemap — стандартная карта модулей;
  • sunburst — радиальная диаграмма;
  • network — граф зависимостей;
  • raw-data — JSON представление.

sourcemap

При включении sourcemap-режима возможно отображение исходных файлов вместо сгенерированных модулей, что важно при использовании TypeScript или Babel.

Использование в CI/CD

В автоматизированных пайплайнах отчёт формируется как статический HTML-файл. Далее он может:

  • сохраняться как артефакт сборки;
  • публиковаться на статическом сервере;
  • использоваться для регрессионного контроля размера бандла.

Сравнение отчётов между сборками позволяет фиксировать рост или деградацию размера.

Регрессионный контроль размера

При интеграции в CI формируется базовая метрика:

  • общий размер бандла;
  • размер ключевых чанков;
  • размер vendor-зависимостей.

Отклонения сигнализируют о:

  • добавлении новых зависимостей;
  • нарушении tree-shaking;
  • изменении стратегии code splitting.

Типовые причины роста бандла

Анализ визуализации часто выявляет следующие источники увеличения размера:

  • импорт целых библиотек вместо отдельных функций;
  • использование CommonJS зависимостей без оптимизации;
  • дублирование полифиллов;
  • отсутствие lazy-loading для тяжёлых модулей;
  • включение debug-кода в production-сборку.

Практическая интерпретация treemap

Treemap-структура требует понимания иерархии:

  • верхний уровень отражает чанки;
  • второй уровень — директории или пакеты;
  • нижний уровень — конкретные файлы.

Размер прямоугольника пропорционален весу модуля в итоговом бандле, что позволяет мгновенно выявлять «узкие места».

Анализ сторонних зависимостей

Особое внимание уделяется node_modules:

  • крупные UI-библиотеки;
  • утилиты работы с датами;
  • charting-библиотеки;
  • polyfill-пакеты.

rollup-plugin-visualizer помогает оценить целесообразность их использования в контексте итогового размера и альтернативных реализаций.

Влияние архитектуры проекта

Структура кода напрямую влияет на результат визуализации:

  • монолитная архитектура приводит к крупным блокам;
  • модульная архитектура распределяет нагрузку между чанками;
  • чрезмерная фрагментация увеличивает overhead загрузки.

Ограничения анализа

Инструмент работает с итоговым бандлом, поэтому:

  • не отражает runtime-использование кода;
  • не учитывает пользовательские сценарии загрузки;
  • не показывает фактическую частоту выполнения модулей.

Анализ остаётся статическим, ориентированным на структуру сборки.

Оглавление