Калькулятор размера бандла
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.
Оптимизируйте
Изучите рекомендации по замене тяжёлых зависимостей. Скопируйте отчёт в буфер для обсуждения с командой.
Часто задаваемые вопросы
Лиана Арифметова
Миссия: Демократизировать сложные расчеты. Превратить страх перед числами в ясность и контроль. Девиз: «Любая повторяющаяся задача заслуживает своего калькулятора».
Был ли этот калькулятор полезен?
Отказ от ответственности
Только для информационных целей. Все расчёты, результаты и данные, предоставляемые данным инструментом, носят исключительно ознакомительный и справочный характер. Они не являются профессиональной консультацией — медицинской, юридической, финансовой, инженерной или иной.
Точность результатов. Калькулятор основан на общепринятых формулах и методиках, однако фактические результаты могут отличаться в зависимости от индивидуальных условий, исходных данных и применяемых стандартов. Мы не гарантируем полноту, точность или актуальность приведённых расчётов.
Медицинские, финансовые и профессиональные решения должны приниматься исключительно на основании консультации с квалифицированными специалистами — врачом, финансовым советником, инженером или другим профессионалом в соответствующей области. Не используйте результаты данного инструмента как единственное основание для принятия важных решений.
Ограничение ответственности. Авторы и разработчики сервиса не несут никакой ответственности за прямой или косвенный ущерб, возникший в результате использования данных расчётов. Пользователь принимает на себя всю ответственность за интерпретацию и применение полученных результатов.
Похожие инструменты
Калькулятор NPS (Net Promoter Score)
Расчёт индекса лояльности NPS по результатам опроса. Визуализация, интерпретация, бенчмарки по отраслям.
Калькулятор M&A (слияния и поглощения)
Enterprise Value, Equity Value, NPV синергий, срок окупаемости. По РСБУ и МСФО.
Калькулятор штрафов ГИБДД 2025: размер, скидка 50%, сроки
Онлайн калькулятор штрафов за нарушения ПДД. Узнайте размер штрафа по КоАП РФ, рассчитайте скидку 50% и крайний срок оплаты. Таблица всех штрафов ГИБДД.
Калькулятор кондитера: пересчет рецептов
Масштабирование рецептов для разных форм, пересчет граммов в стаканы и ложки. Инструмент для кондитеров.
Калькулятор среднего заработка
Расчёт среднего заработка для отпускных, больничных и командировочных. По Постановлению 922.
Калькулятор расхода песка
Расчёт объёма и веса песка для стяжки, подушки, засыпки. Карьерный, речной, кварцевый песок с коэффициентом уплотнения.
Калькулятор теплицы
Расчёт теплицы: размеры, материалы каркаса, покрытие, фундамент. Стоимость поликарбоната, профиля, крепежа.
Калькулятор совместимости лекарств
Проверка взаимодействия лекарственных препаратов. Опасные и нежелательные комбинации.
Калькулятор герметика
Расчёт расхода герметика по длине и ширине шва. Силиконовый, акриловый, полиуретановый. Количество картриджей и стоимость.
Калькулятор оптометрии: рецепт линз, аккомодация, Прентис и ИОЛ
Оптометрические расчёты онлайн: оптическая сила линзы, конвертер рецепта, аккомодация, призматический эффект Прентиса, прогресс миопии, ИОЛ.
Калькулятор заваривания кофе
Пропорции кофе и воды для любого метода. Ratio, помол, температура и время экстракции. Для бариста.
Калькулятор трибологии
Расчёты трибологии: трение, износ, смазка, подшипники, контактное давление, температура
Калькулятор эрготерапии: COPM, IADL, динамометрия и эргономика
Эрготерапевтические расчёты онлайн: COPM, шкала Лоутона (IADL), AMPS, сила хвата (Jamar), эргономика рабочего места, FSS.
Калькулятор органической химии
Степень ненасыщенности (IHD), теоретический выход реакции, молекулярная формула, pKa кислот, Rf для ТСХ, свойства растворителей.
CSV ↔ JSON ↔ XML конвертер
Онлайн конвертация между форматами CSV, JSON и XML. Настройка разделителей, форматирование и автоопределение формата входных данных.