Калькулятор размера бандла
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.
Оптимизируйте
Изучите рекомендации по замене тяжёлых зависимостей. Скопируйте отчёт в буфер для обсуждения с командой.
Часто задаваемые вопросы
Лиана Арифметова
Миссия: Демократизировать сложные расчеты. Превратить страх перед числами в ясность и контроль. Девиз: «Любая повторяющаяся задача заслуживает своего калькулятора».
Отказ от ответственности
Только для информационных целей. Все расчёты, результаты и данные, предоставляемые данным инструментом, носят исключительно ознакомительный и справочный характер. Они не являются профессиональной консультацией — медицинской, юридической, финансовой, инженерной или иной.
Точность результатов. Калькулятор основан на общепринятых формулах и методиках, однако фактические результаты могут отличаться в зависимости от индивидуальных условий, исходных данных и применяемых стандартов. Мы не гарантируем полноту, точность или актуальность приведённых расчётов.
Медицинские, финансовые и профессиональные решения должны приниматься исключительно на основании консультации с квалифицированными специалистами — врачом, финансовым советником, инженером или другим профессионалом в соответствующей области. Не используйте результаты данного инструмента как единственное основание для принятия важных решений.
Ограничение ответственности. Авторы и разработчики сервиса не несут никакой ответственности за прямой или косвенный ущерб, возникший в результате использования данных расчётов. Пользователь принимает на себя всю ответственность за интерпретацию и применение полученных результатов.
Похожие инструменты
Калькулятор стоимости сотрудника
Зарплата, НДФЛ, страховые взносы ПФР/ФСС/ФОМС, отпускные, больничные. Для работодателей России.
Калькулятор размера бюстгальтера
Определите размер бюстгальтера по обхвату груди и обхвату под грудью. Таблица размеров RU, EU, UK, US. Подбор чашки и пояса.
Калькулятор BI Dashboard: производительность, лицензии, KPI, adoption
Комплексный калькулятор BI-дашбордов. Производительность (виджеты, время загрузки, concurrent users), расписание обновления данных, сравнение стоимости Power BI/Tableau/DataLens/Metabase/Superset, подбор виджетов, KPI framework, метрики внедрения DAU/MAU.
Калькулятор скорости химической реакции
Уравнение Аррениуса k=A·e^(-Ea/RT), закон действия масс, период полупревращения и энергия активации.
Калькулятор облигаций (YTM, дюрация, НКД)
Рассчитайте доходность к погашению (YTM), дюрацию, НКД и цену облигации. Для ОФЗ, корпоративных и муниципальных бондов.
Число прописью (русский)
Число → слова с правильным склонением: рубли, штуки, тонны. Для документов, счетов и актов.
Универсальный конвертер единиц: длина, вес, объем
Мгновенный перевод физических величин: длина, масса, площадь, объем, температура, давление, скорость, энергия и мощность. Точный онлайн калькулятор.
Калькулятор вышивки крестиком
Расчёт размера вышивки, расхода ниток мулине и канвы. Аида 14-25, время работы.
Калькулятор DIY мебели
Расчёт материалов для мебели своими руками: ЛДСП, кромка, фурнитура, конфирматы. Шкаф, стеллаж, тумба, комод.
Калькулятор центростремительной силы
Расчёт центростремительной силы и ускорения. Движение по окружности, угловая скорость, перегрузка (G-force).
Калькулятор тротуарной плитки
Расчёт тротуарной плитки, бордюров, песка и щебня. Площадь, количество плитки, подушка и укладка.
Калькулятор скидок и выгоды (2+1, цена за кг)
Посчитать цену со скидкой, найти самый выгодный товар (цена за кг/литр) и проверить акции "Купи 2 получи 1".
Калькулятор размера базы данных
Расчёты БД: размер таблиц, IOPS, память, индексы, репликация, шардирование
Калькулятор объёма бассейна
Объём воды в бассейне любой формы, расход химии и время подогрева. Для частных бассейнов.
Калькулятор объёма гравия для дорожки
Расчёт объёма щебня и гравия для садовой дорожки, площадки, отмостки. Вес, количество самосвалов, многослойный расчёт.