Bundle analysis

Bundle analysis в Stencil — ключевой инструмент для оптимизации веб-приложений и компонентов. Он позволяет детально оценивать размер сгенерированных бандлов, выявлять «тяжелые» зависимости и контролировать структуру выходного кода.

Настройка анализа бандла

Stencil предоставляет встроенную возможность анализа бандлов через плагин stencil-bundle-analyzer. Для его активации достаточно внести изменения в конфигурационный файл stencil.config.ts:

import { Config } FROM '@stencil/core';
import { bundleAnalyzer } from 'rollup-plugin-bundle-analyzer';

export const config: Config = {
  namespace: 'app',
  outputTargets: [
    {
      type: 'www',
      serviceWorker: null
    }
  ],
  plugins: [
    bundleAnalyzer({
      summaryOnly: true,
      LIMIT: 500 // порог в килобайтах для предупреждения
    })
  ]
};

Ключевые параметры плагина:

  • summaryOnly — выводит только общую информацию о бандле, без детальной разбивки.
  • limit — порог размера для предупреждения о слишком больших файлах.
  • open — автоматическое открытие отчета в браузере после сборки (по умолчанию false).

Виды бандлов в Stencil

Stencil генерирует несколько типов бандлов для каждого компонента:

  • Lazy-loaded modules — асинхронно загружаемые компоненты, оптимальные для уменьшения первоначального размера загрузки.
  • ESM modules — современный формат модулей для современных браузеров, поддерживающий tree-shaking.
  • SystemJS и CJS — для интеграции с устаревшими системами сборки или серверным рендерингом.

Bundle analysis помогает понять, какие модули потребляют наибольший вес, и определить, какие зависимости можно заменить или оптимизировать.

Детализация отчета

После сборки с включенным анализом создается подробный отчет, который включает:

  • Размер бандла по каждому модулю.
  • Список внешних зависимостей (npm-пакетов), влияющих на общий вес.
  • Дерево импортов, позволяющее выявить глубокие, ненужные связи.
  • Статистику загрузки для lazy-модулей, включая динамические импорты.

Пример использования отчета:

Module                  Size (KB)
--------------------------------
lodash                  120
my-component            15
other-component         8
vendor                  200

На основе этих данных можно:

  • Удалять лишние зависимости.
  • Разбивать большие компоненты на более мелкие.
  • Использовать динамический импорт только там, где это критично.

Интеграция с CI/CD

Bundle analysis в Stencil можно интегрировать в процесс CI/CD для автоматического контроля за ростом размера бандлов. Например, в GitHub Actions:

name: Build and Analyze
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '20'
      - run: npm ci
      - run: npm run build
      - run: npm run bundle-analyze

При превышении установленных лимитов сборка может завершаться с ошибкой, предотвращая внедрение «тяжелого» кода в продакшн.

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

После анализа бандлов выявляются следующие возможности оптимизации:

  1. Tree-shaking сторонних библиотек Некоторые пакеты можно импортировать частично, например: import { debounce } from 'lodash-es'; вместо полного импорта.

  2. Разделение компонентов Если один компонент генерирует большой бандл, его можно разделить на несколько lazy-компонентов.

  3. Кеширование и preloading Отчеты показывают, какие модули чаще всего загружаются сразу, и какие можно отложить с помощью <link rel="preload">.

  4. Минификация и сжатие Проверка размера до и после минификации помогает выбрать оптимальный инструмент (terser или встроенный stencil minify).

Визуальные инструменты

Для наглядного анализа можно использовать графические визуализаторы, совместимые с отчетами Stencil, такие как:

  • webpack-bundle-analyzer для визуализации отдельных модулей.
  • rollup-plugin-visualizer для построения интерактивного графа зависимостей.

Такая визуализация помогает быстро обнаруживать «узкие места» и принимать решения по оптимизации.

Практические советы

  • Включать bundle analysis на этапе pre-release, чтобы контролировать рост размера проекта.
  • Сравнивать отчеты между релизами, фиксируя динамику увеличения веса.
  • Особое внимание уделять npm-пакетам, не поддерживающим tree-shaking.
  • Проверять lazy-loaded бандлы отдельно, так как их вес влияет на скорость первой загрузки страницы.
Оглавление