Калькулятор размера бандла
JS/CSS
Что такое размер бандла
Бандл (bundle) — это итоговый файл JavaScript и CSS, который браузер загружает при открытии вашего сайта. Он формируется сборщиком (webpack, Vite, esbuild) из исходного кода и всех npm-зависимостей проекта. Чем больше бандл, тем дольше страница загружается, тем ниже оценки в Lighthouse и тем хуже пользовательский опыт, особенно на мобильных устройствах и медленных сетях.
Raw (несжатый)
Размер файлов до сжатия на сервере. Этот объём JavaScript-движок браузера должен распарсить и выполнить. Большие библиотеки занимают процессорное время даже после быстрой загрузки, блокируя главный поток и увеличивая метрику TBT (Total Blocking Time).
Gzip
Стандартный алгоритм сжатия для веба. Веб-сервер (nginx, Apache) сжимает файлы на лету или заранее, а браузер распаковывает их автоматически. Gzip уменьшает JS-файлы примерно в 3-4 раза. Поддерживается всеми браузерами и серверами без исключений.
Brotli
Современный алгоритм от Google, дающий на 15-20% лучшее сжатие, чем gzip. Поддерживается всеми современными браузерами через HTTPS. Особенно эффективен для текстовых файлов (JS, CSS, HTML). Рекомендуется настроить на сервере как приоритетный алгоритм.
Почему размер бандла критически важен
Размер JavaScript напрямую влияет на Core Web Vitals, позиции в Яндексе и Google, конверсию и удержание пользователей.
LCP (Largest Contentful Paint)
Тяжёлый JS блокирует рендеринг страницы. Google считает хорошим LCP до 2.5 секунд. Каждые 100 KB JavaScript добавляют ~100-300 мс на мобильном устройстве к этой метрике.
Мобильные пользователи
На 3G-сети 1 MB JavaScript загружается 10+ секунд. В России 30% мобильного трафика идёт на скоростях ниже 10 Мбит/с. Экономия каждого килобайта критична для этой аудитории.
SEO и Яндекс
Яндекс и Google учитывают скорость загрузки при ранжировании. Core Web Vitals стали фактором ранжирования с 2021 года. Медленные страницы получают меньше трафика из поиска.
Конверсия и доход
По исследованиям, каждая дополнительная секунда загрузки снижает конверсию на 7%. Для e-commerce это прямые потери в выручке. Amazon подсчитал: +100 мс загрузки = -1% продаж.
Lighthouse Score
Performance Score в Lighthouse зависит от TBT (Total Blocking Time), который напрямую связан с объёмом JS. Сайты с бандлом менее 200 KB gzip стабильно получают 90+ баллов.
Бюджет бандла (Bundle Budget)
Установка лимита на размер бандла — лучшая практика в командах. Webpack и Vite позволяют настроить предупреждения при превышении. Типичный бюджет: 150-250 KB gzip для всего JS.
Как уменьшить размер бандла
Практические техники оптимизации фронтенд-сборки, которые помогут сократить размер бандла в разы и ускорить загрузку сайта.
1. Tree Shaking
Механизм удаления неиспользуемого кода из бандла. Webpack и Vite автоматически убирают функции, которые не были импортированы. Работает только с ES-модулями (import/export). Для максимального эффекта используйте lodash-es вместо lodash, импортируйте конкретные функции вместо целых библиотек.
// Плохо: импорт всей библиотеки (~72 KB gzip)
import _ from 'lodash';
// Хорошо: только нужная функция (~1 KB gzip)
import debounce from 'lodash-es/debounce';2. Code Splitting
Разделение кода на части (chunks), которые загружаются по мере необходимости. Пользователь загружает только JS для текущей страницы. В Next.js и Nuxt code splitting работает автоматически по роутам. Для React используйте React.lazy() и Suspense.
const HeavyChart = React.lazy(
() => import('./HeavyChart')
);3. Dynamic Imports
Загрузка модулей только когда они действительно нужны. Идеально для модальных окон, тяжёлых библиотек визуализации, PDF-генераторов и редко используемых функций. Сборщик автоматически выделяет динамический импорт в отдельный chunk.
// Загружаем Chart.js только при клике
async function showChart() {
const { Chart } = await import('chart.js');
// ... использование Chart
}4. Замена тяжёлых зависимостей
Один из самых эффективных способов. Замена moment.js (67 KB gzip) на dayjs (3 KB) экономит 64 KB. Замена lodash на native JS-методы или lodash-es с tree shaking может убрать до 70 KB. Используйте bundlephobia.com для проверки размера перед установкой.
Анализ: используйте webpack-bundle-analyzer или vite-bundle-visualizer для визуализации содержимого бандла и поиска самых тяжёлых зависимостей.
Совет: настройте CI/CD проверку: если PR увеличивает бандл больше чем на 5 KB — требуется обоснование. Это культура производительности в команде.
Размеры популярных npm-пакетов
Сравнительная таблица самых используемых JavaScript-библиотек по размеру gzip. Данные помогут выбрать лёгкие альтернативы при планировании архитектуры проекта.
| Пакет | Категория | Gzip | Лёгкая альтернатива |
|---|---|---|---|
| moment | Дата/время | 67 KB | dayjs (3 KB) |
| lodash | Утилиты | 72 KB | lodash-es + tree-shaking |
| angular | Фреймворк | 143 KB | react (6 KB) / vue (34 KB) |
| antd | UI-библиотека | 350 KB | shadcn/ui (tree-shakeable) |
| @mui/material | UI-библиотека | 170 KB | headlessui / radix-ui |
| firebase | Backend | 220 KB | modular imports |
| recharts | Графики | 130 KB | chart.js (68 KB) |
| three | 3D графика | 150 KB | Нет (уникален) |
| axios | HTTP | 14 KB | ky (3 KB) / fetch |
| formik | Формы | 13 KB | react-hook-form (9 KB) |
| joi | Валидация | 35 KB | zod (13 KB) / valibot (5 KB) |
| rxjs | Reactive | 45 KB | Модульные импорты |
Советы по оптимизации бандла
Практические рекомендации, которые помогут держать размер фронтенд-сборки под контролем на всех этапах разработки.
1Проверяйте размер перед npm install
Прежде чем добавить новую зависимость, проверьте её размер на bundlephobia.com или через этот калькулятор. Одна «лишняя» библиотека может добавить 50-100 KB к бандлу. Иногда проще написать 20 строк кода, чем тянуть целый пакет.
2Используйте ES-модули библиотек
Многие библиотеки предлагают ESM-версии (lodash-es, date-fns). Они поддерживают tree shaking: сборщик включит в бандл только те функции, которые вы реально импортируете. CommonJS-модули tree shaking не поддерживают.
3Настройте бюджет в CI/CD
Добавьте проверку размера бандла в пайплайн: webpack performance hints, bundlesize, size-limit от Андрея Ситника. Если PR увеличивает бандл — это повод для ревью. Так бандл не будет расти незаметно.
4Предпочитайте native API
Современные браузеры поддерживают fetch(), Intl (форматирование дат и чисел), structuredClone(), Array.prototype.at(), crypto.randomUUID() и многое другое. Каждый год всё меньше поводов тянуть полифиллы и утилитарные библиотеки.
5Анализируйте бандл визуально
Инструменты вроде webpack-bundle-analyzer и vite-bundle-visualizer показывают treemap всех модулей. Вы сразу увидите, какая зависимость занимает больше всего места. Часто обнаруживаются сюрпризы: забытые пакеты, дублирующиеся версии, неожиданно тяжёлые транзитивные зависимости.
6Ленивая загрузка маршрутов
В SPA загружайте код каждого маршрута отдельным chunk-ом. Next.js, Nuxt и Remix делают это автоматически. Для React Router используйте React.lazy(). Пользователь получит только код текущей страницы, а остальное подгрузится по мере навигации.
Как пользоваться калькулятором
Простой пошаговый процесс оценки размера вашего фронтенд-бандла.
Найдите пакеты
Введите название npm-пакета в строку поиска. Встроенная база содержит 60+ популярных библиотек с точными размерами gzip.
Добавьте зависимости
Кликните на пакет в выпадающем списке. Можно добавить свой пакет с произвольным размером через форму ниже.
Настройте бюджет
Установите целевой размер бандла в KB gzip. Прогресс-бар покажет, укладываетесь ли вы в бюджет. Рекомендуемый лимит: 150-250 KB.
Оптимизируйте
Изучите рекомендации по замене тяжёлых зависимостей. Скопируйте отчёт в буфер для обсуждения с командой.
Часто задаваемые вопросы
Был ли этот калькулятор полезен?
Инструмент справочный — не заменяет эксперта
Только для информационных целей. Все расчёты, результаты и данные, предоставляемые инструментом, носят исключительно ознакомительный и справочный характер. Они не являются профессиональной консультацией — медицинской, юридической, финансовой, инженерной или иной.
Точность результатов. Калькулятор основан на общепринятых формулах и методиках, однако фактические результаты могут отличаться в зависимости от индивидуальных условий, исходных данных и применяемых стандартов. Мы не гарантируем полноту, точность или актуальность приведённых расчётов.
Профессиональные решения — медицинские, финансовые, инженерные — должны приниматься только после консультации с квалифицированным специалистом. Не используйте автоматический расчёт как единственное основание для важных решений.
Ограничение ответственности. Авторы и разработчики сервиса не несут ответственности за прямой или косвенный ущерб, возникший из-за использования данных расчётов. Пользователь принимает на себя всю ответственность за интерпретацию результатов.
Похожие калькуляторы
JSON форматтер и валидатор
Онлайн форматирование, валидация и минификация JSON с русским интерфейсом. Подсветка синтаксиса, древовидный просмотр, статистика и проверка ошибок.
/json-formatterRegex-тестер с русской документацией
Онлайн тестирование регулярных выражений с подсветкой совпадений, захватом групп и русскоязычной документацией. Шпаргалка по синтаксису regex.
/regex-tester-ruURL Encode/Decode
Кодирование и декодирование URL-параметров онлайн. Поддержка кириллицы, percent-encoding, разбор URL на компоненты.
/url-encode-decodeHTML Entity кодировщик/декодировщик
Конвертация спецсимволов HTML: именованные, числовые и hex-entities. Кодирование и декодирование & < > и других символов.
/html-entity-encoderГенератор Cubic Bezier (CSS transition)
Интерактивный генератор кривых Безье для CSS анимаций. Визуальная настройка плавности переходов, пресеты (ease, linear) и копирование кода.
/cubic-bezierКалькулятор Responsive Margin/Padding (Clamp generator)
Генератор CSS функции clamp() для адаптивных отступов и шрифтов. Создайте отзывчивый дизайн (fluid spacing) от мобильных до десктопа онлайн.
/responsive-helperПарсер регулярных выражений (Regex Tester)
Онлайн тестер регулярных выражений JS. Проверка Regex паттернов, подсветка синтаксиса, группы захвата и шпаргалка.
/regex-testerКалькулятор веб-производительности: бюджет страницы, изображения, JS-бандл, CWV
Комплексный калькулятор веб-производительности: бюджет веса страницы (3G/4G/Broadband), оптимизация изображений (WebP/AVIF, responsive), анализ JS-бандла (parse/compile, code-splitting, tree-shaking), критический путь рендеринга (TTFB, FCP), стратегия кэширования (CDN, TTL) и трекер Core Web Vitals (LCP, FID, CLS, TTI, TBT, Lighthouse score).
/web-performance-calculatorКалькулятор CSS единиц (PX, REM, EM, %)
Конвертер пикселей в rem/em и генератор calc(). Удобный инструмент для верстки и адаптивного дизайна.
/css-unit-converterКалькулятор размера Docker-образа
Оценка размера Docker-образа по базовому образу и зависимостям. Сравнение base images, советы по оптимизации и multi-stage сборке.
/razmer-docker-obrazaКалькулятор DPI и размера печати
Пересчёт пикселей в размер печати при заданном DPI. Форматы A4-A0, фотопечать, полиграфия.
/kalkulyator-dpi-pechatГенератор цветовых палитр
Подбор гармоничных цветовых сочетаний: комплементарные, аналогичные, триадные. Экспорт в CSS, Tailwind, SCSS.
/generator-cvetovyh-palitrКалькулятор код-ревью: время, размер PR, дефекты, нагрузка
Комплексный калькулятор код-ревью: оценка времени проверки кода, анализ размера PR (XS/S/M/L/XL), покрытие ревью и bus factor, плотность дефектов и escape rate, нагрузка команды ревьюеров, метрики качества (churn, rework, first-pass yield).
/code-review-calculatorКалькулятор теории цвета: гармония, конвертер, палитры, смешивание, дальтонизм
Комплексный инструмент для работы с цветом: цветовые гармонии (комплементарная, аналогичная, триадная, тетрадная), конвертер HEX/RGB/HSL/HSV/CMYK, генератор палитр (монохроматическая, shades, tints, tones), смешивание цветов (аддитивное/субтрактивное), симулятор дальтонизма и анализ цветовой температуры.
/color-theory-calculatorКалькулятор градиентов и интерполяции цветов
Генератор плавных переходов между цветами. Создайте CSS градиент онлайн, получите коды цветов (HEX/RGB) и настройте количество шагов.
/color-gradient