Webpack Bundle Analyzer

Webpack Bundle Analyzer — это инструмент для визуализации содержимого бандла, созданного сборщиком Webpack. Он позволяет понять, какие модули занимают больше всего места, выявлять дублирующиеся зависимости и оптимизировать размер сборки.

Подключение Webpack Bundle Analyzer

Stencil использует собственный механизм сборки на основе Rollup, но начиная с версии 2.x возможно интегрировать Webpack Bundle Analyzer через кастомизацию конфигурации или через промежуточные шаги при сборке.

  1. Установка пакета:
npm install --save-dev webpack-bundle-analyzer
  1. Создание конфигурации Webpack для анализа:
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static', // создаёт HTML файл с визуализацией
      openAnalyzer: false,    // не открывать браузер автоматически
      reportFilename: 'bundle-report.html'
    })
  ]
};

Интеграция с Stencil

Stencil позволяет использовать хуки сборки для добавления кастомной логики. Для интеграции анализа бандла можно использовать хук stencil.config.ts:

import { Config } from '@stencil/core';
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';

export const config: Config = {
  namespace: 'my-component-library',
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader'
    }
  ],
  rollupPlugins: {
    after: [
      BundleAnalyzerPlugin({
        analyzerMode: 'static',
        openAnalyzer: false,
        reportFilename: 'stencil-bundle-report.html'
      })
    ]
  }
};

Важно: Плагин Webpack можно использовать через Rollup-поддержку, применяя специальные адаптеры, например rollup-plugin-webpack-bundle-analyzer.

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

  • analyzerMode — определяет режим работы: server (запуск сервера с интерактивной визуализацией), static (генерация HTML файла), disabled (отключение анализа).
  • openAnalyzer — автоматическое открытие визуализации в браузере.
  • reportFilename — путь к файлу отчета.
  • generateStatsFile — генерация JSON со статистикой для дальнейшего анализа.

Пример расширенной конфигурации с JSON-отчетом:

new BundleAnalyzerPlugin({
  analyzerMode: 'static',
  reportFilename: 'bundle-report.html',
  generateStatsFile: true,
  statsFilename: 'bundle-stats.json'
});

Анализ результатов

HTML-отчет отображает дерево модулей бандла с визуальным разбиением по размерам. Основные возможности:

  • Сортировка по размеру модулей.
  • Выявление дублирующихся библиотек, например React или Lodash, подключённых в разных версиях.
  • Визуализация вложенности модулей — позволяет определить, какие компоненты или утилиты занимают больше всего места.

JSON-отчет можно использовать для автоматизированного анализа в CI/CD, позволяя фиксировать рост бандла после каждого коммита.

Практические рекомендации

  • Использовать анализ после финальной сборки, чтобы видеть реальный размер бандла.
  • В проектах с динамическими импортами анализировать отдельные чанки, чтобы выявлять тяжёлые модули.
  • Комбинировать с инструментами типа source-map-explorer для детального просмотра исходных файлов.

Оптимизация на основе отчета

После анализа отчета можно:

  • Переписать тяжелые модули с использованием ленивой загрузки (import() динамически).
  • Убрать дублирующиеся зависимости, вынося их в отдельный пакет или версию.
  • Минимизировать CSS и JS с помощью Tree Shaking, который Stencil поддерживает по умолчанию.

Автоматизация анализа

В CI/CD можно настроить скрипт в package.json:

{
  "scripts": {
    "analyze": "stencil build && webpack --config webpack.analyze.js"
  }
}

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

Совместимость с Stencil

  • Stencil поддерживает Tree Shaking и Lazy Loading компонентов, что сокращает общий размер бандла.
  • Webpack Bundle Analyzer в этом контексте помогает визуально подтверждать эффект оптимизаций и корректно оценивать влияние изменений на размер сборки.

Благодаря Webpack Bundle Analyzer, интегрированному в Stencil, возможно контролировать размер бандла, обнаруживать узкие места и принимать обоснованные решения по оптимизации библиотеки компонентов.

Оглавление