Как отслеживаешь Bundle?

Мониторинг Bundle Size: Комплексный подход

Отслеживание размера бандла (bundle) — критическая задача для web-приложений. В 2026 году эффективное управление bundle size напрямую влияет на производительность и UX. С опытом 10+ лет я использую многоуровневый подход.

Инструменты для анализа Bundle Size

1. Webpack Bundle Analyzer (классика)

npm install --save-dev webpack-bundle-analyzer

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      openAnalyzer: true,
      reportFilename: 'bundle-report.html'
    })
  ]
};

Этот инструмент визуализирует все зависимости в виде интерактивной диаграммы.

2. Next.js Bundle Analyzer

Для Next.js есть встроенный механизм:

ANALYZE=true next build

3. bundlesize Tool

npm install -g bundlesize
bundlesize

Отслеживание в CI/CD

GitHub Actions Pipeline

name: Bundle Size Check

on: [pull_request]

jobs:
  bundle-size:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - run: npm ci
      - run: npm run build
      - run: npx bundlesize

Практические метрики для отслеживания

1. Main Bundle Size

const metrics = {
  mainBundleSize: '245 KB',
  chunkCount: 12,
  gzippedSize: '65 KB',
  totalSize: '890 KB',
  thirdParty: '520 KB'
};

2. Пороги оптимизации

if (currentSize > baselineSize * 1.05) {
  console.error('Bundle size increased by more than 5%');
}

Стратегии оптимизации на основе мониторинга

1. Code Splitting

import React, { Suspense, lazy } from 'react';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}

2. Tree Shaking

export function used() { return 'used'; }
export function unused() { return 'unused'; }

import { used } from './utils';

3. Динамический импорт

const HeavyLib = dynamic(() => import('./HeavyLib'), {
  loading: () => <p>Loading...</p>
});

Мониторинг в Production

Performance API

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('Resource:', {
      name: entry.name,
      size: entry.transferSize,
      duration: entry.duration
    });
  }
});

observer.observe({ entryTypes: ['resource'] });

Инструменты для анализа

Lighthouse

npx lighthouse https://example.com --output json

Bundle Stats Service

# Интеграция с CI для отслеживания трендов
npm install bundlesize

Критические пороги

• Main bundle: < 250 KB (gzipped < 70 KB)
• Vendor bundle: < 400 KB
• Total assets: < 1 MB
• First Contentful Paint: < 2 sec
• Lighthouse score: > 90

Best Practices

1. Регулярный анализ

# Еженедельный отчёт
npm run build:analyze

2. Историческое отслеживание

Ведите таблицу метрик по времени для анализа тренда.

3. PR-level checks

Блокируйте merge PR если bundle вырос более чем на 5%.

4. Оптимизация зависимостей

npm audit
npm outdated

Инструменты отслеживания

• webpack-bundle-analyzer — визуализация
• bundlesize — пороги и CI
• build-stats — историческое отслеживание
• Lighthouse — реальные метрики
• Perfkit — детальный анализ

Регулярный мониторинг bundle size — это фундамент для поддерживания производительности и пользовательского опыта приложения на высоком уровне.