Коли бандл важить 2+ МБ, а LCP — 4 секунди
JavaScript-бандл вагою 2+ МБ прямо б'є по Core Web Vitals: LCP просідає до 4 секунд, INP страждає, конверсія падає на 15–25%. Причина — дублюючі залежності, невикористовувані поліфіли та гігантські бібліотеки на кшталт moment.js (290 КБ) або @mui/icons-material (150 КБ лише за імпорт однієї іконки). Замість того щоб гадати, що роздуває збірку, використовуйте точні інструменти.
Ми налаштовуємо webpack-bundle-analyzer та source-map-explorer під ваш проєкт. Отримуєте інтерактивну карту залежностей і таблицю вихідних файлів. Далі — конкретний план: заміна library, налаштування tree-shaking, динамічні імпорти. За 2–4 години виявляємо 5–10 проблем і скорочуємо бандл на 30–50%.
Порівняння інструментів
| Характеристика | webpack-bundle-analyzer | source-map-explorer |
|---|---|---|
| Підтримка збірників | Webpack, CRA, Next.js | Будь-які (source maps) |
| Візуалізація | Інтерактивна UV-діаграма | Табличне представлення |
| Глибина аналізу | Показує модулі та їх розмір | Показує вихідні файли |
| Інтеграція | Плагін у конфіг | Запуск після збірки |
Приклад звіту source-map-explorer
$ npx source-map-explorer dist/assets/*.js Module Size main.js 1.2 MB vendor.js 900 KB ... Як вибрати інструмент?
Якщо проєкт на Webpack або Next.js — використовуйте webpack-bundle-analyzer для наочної карти. Якщо збірник інший (Vite, Rollup, Parcel) — source-map-explorer універсальний. Часто застосовуємо обидва: спочатку загальний аналіз через source-map-explorer, потім детальний через webpack-bundle-analyzer. У 90% проєктів достатньо одного з них.
Покроковий процес налаштування
Встановлення webpack-bundle-analyzer
npm install --save-dev webpack-bundle-analyzer Для Next.js через @next/bundle-analyzer:
// next.config.js const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true' }) module.exports = withBundleAnalyzer({ /* config */ }) Запуск: ANALYZE=true next build.
Встановлення source-map-explorer
npm install --save-dev source-map-explorer Збірка з source maps та аналіз:
vite build -- --sourcemap npx source-map-explorer dist/assets/*.js Що шукати у звіті
| Тип проблеми | Приклад | Рішення |
|---|---|---|
| Дублюючі залежності | Дві версії React | Налаштувати resolve.alias |
| Невикористовувані поліфіли | core-js цілком | Імпортувати лише потрібні |
| Величезні іконкові сети | @mui/icons-material | Імпортувати конкретні іконки |
| Важкі бібліотеки | moment.js (290 KB) | Замінити на date-fns (13 KB) — різниця в 22 рази |
Чому варто налаштувати bundle analyzer зараз?
Кожен зайвий кілобайт у бандлі погіршує Core Web Vitals. Згідно з HTTP Archive, медіанний розмір JavaScript на десктопі — 500 КБ, на мобільних — 400 КБ. Перевищення порогу веде до втрати конверсії. Ми гарантуємо виявлення основних «жирних» залежностей за 2–4 години. Типові результати: бандл зменшується з 2.5 МБ до 1.5 МБ (на 40%), TTI падає з 5с до 2.5с, LCP — з 3с до 1.8с. Конверсія зростає на 15–25%. Середня економія на трафіку та хостингу становить до 25 000 ₴ на місяць для проєкту з помірною відвідуваністю.
Що входить у роботу
- Встановлення та конфігурація обраних аналізаторів (webpack-bundle-analyzer, source-map-explorer або обидва).
- Генерація інтерактивного звіту з візуалізацією залежностей.
- Детальний письмовий аналіз із зазначенням «жирних» модулів, дублів та невикористовуваного коду.
- Рекомендації щодо оптимізації з оцінкою очікуваного скорочення розміру.
- Впровадження узгоджених змін (tree-shaking, динамічні імпорти, заміна бібліотек).
- Підсумковий замір метрик (LCP, TTI, розмір бандла) та порівняння з вихідними.
- Надання документації та доступу до звіту.
- Навчання команди роботі з аналізаторами для самостійного моніторингу.
Процес роботи
- Первинний аудит — збір метрик та поточного розміру бандла.
- Налаштування аналізаторів — встановлення та конфігурація інструментів.
- Генерація звіту — інтерактивна карта або таблиця.
- Виявлення проблем — пошук дублів, невикористовуваного коду, важких бібліотек.
- Рекомендації — конкретні кроки з оцінкою ефекту.
- Впровадження оптимізацій — tree-shaking, динамічні імпорти, заміна бібліотек.
- Контрольний замір — порівняння метрик до та після.
Терміни: від 2 годин для базового аналізу до 1–2 днів для повного обстеження проєкту. Вартість розраховується індивідуально. Середня економія на трафіку після оптимізації — до 30% (≈ 40 000 ₴ на місяць для проєкту з 10 000 відвідувачів).
Корисні поради
- Використовуйте бібліотеки з ES-модулями (lodash-es, date-fns) для ефективного tree-shaking.
- Додайте автоматичні перевірки в CI — наприклад,
bundlesizeабоwebpack-bundle-analyzerу pipeline. - Регулярно переглядайте залежності — багато проєктів роками зберігають застарілі бібліотеки.
Замовте аналіз бандла зараз — отримайте готовий звіт з планом оптимізації протягом дня. Оцінимо ваш проєкт за 1 день: зв'яжіться для консультації.
Для додаткової інформації: webpack-bundle-analyzer та @next/bundle-analyzer.