itmo_conspects

Лекция 9. Сборщики

Сборщик (или бандлер, bundler) - это инструмент, который берёт множество файлов проекта (JavaScript-модули, CSS, изображения, шрифты) вместе с внешними зависимостями и объединяет их в один или несколько оптимизированных файлов для отправки клиенту в браузер

Сборщик обладает преимуществами перед обычной отправкой файлов:

• Производительность загрузки - современные приложения состоят из сотен и тысяч модулей, поэтому загружать каждый файл отдельным HTTP-запросом крайне неэффективно; бандлер собирает всё в несколько компактных файлов, сокращая число запросов и ускоряя загрузку страницы
• Совместимость с браузерами - сборщики умеют преобразовывать современный синтаксис (ES6+, TypeScript, JSX) в код, понятный старым браузерам, используя транспиляторы
• Оптимизация кода - а именно минификация, удаление неиспользуемого кода (tree-shaking), разделение кода на чанки, загружаемые по требованию (code-splitting)
• Удобство разработки - горячая замена модулей (Hot Module Reload), сервер для разработки с мгновенным обновлением, поддержка CSS-препроцессоров и других преобразований

Сборщик работает примерно так:

1. Разработчик указывает главный файл (например, index.js)
2. Бандлер анализирует все import и строит полное дерево зависимостей модулей
3. К каждому файлу применяются необходимые трансформации (транспиляция из TypeScript в JavaScript, компиляция SCSS в CSS и тому подобное)
4. Все модули объединяются в итоговый бандл (один или несколько файлов)
5. Готовые статические файлы сохраняются на сервере, откуда они готовы к отправке клиенту

Рассмотрим несколько популярных сборщиков

Webpack

Webpack - самый популярный и давно существующий сборщик модулей для JavaScript-приложений. Несмотря на появление более быстрых конкурентов, в 2026 году Webpack остаётся стабильным, хорошо поддерживаемым и широко используемым инструментом, особенно в крупных корпоративных проектах

Ключевые особенности:

• Мощная система плагинов и загрузчиков - Webpack даёт полный контроль над процессом сборки, позволяя настроить практически любую кастомную обработку ассетов
• Экосистема - существуют тысячи плагинов, проверенных годами, для самых разных задач
• Стабильность и нейтральность - поддерживается фондом OpenJS Foundation, что гарантирует независимость от интересов отдельных коммерческих компаний

Webpack опубликовал дорожную карту, сфокусированную на трёх направлениях:

• Нативная поддержка CSS Modules - возможность работать с CSS без плагинов
• Универсальная цель сборки - код будет компилироваться в чистый ESM (ECMAScript Modules), работающий в любых средах (Node.js или браузер) без привязки к конкретной среде испольнения
• Встроенная поддержка TypeScript - транспиляция TS без плагина ts-loader, а также разрешение путей из tsconfig уже без плагина tsconfig-paths-webpack-plugin
• Нативные HTML-входные точки - импорт HTML-файлов как точек входа без плагина html-webpack-plugin
• Улучшения производительности - исследование многопоточного API для задействования многоядерных процессоров

Webpack остаётся выбором для проектов, где требуется максимально тонкая и нестандартная настройка сборки, сложное разделение кода или где уже существует большая кодовая база и экосистема плагинов, которую сложно заменить

Vite

Vite - современный инструмент для фронтенд-разработки, созданный Эваном Ю (автором Vue.js). С момента появления Vite стремительно набрал популярность благодаря молниеносной скорости запуска сервера для разработки и горячей замены модулей

До версии 8 Vite использовал два разных сборщика: esbuild (для быстрой компиляции в режиме разработки) и Rollup (для продакшн-сборки). Такой подход имел минус: два конвейера обработки порождали расхождения и требовали синхронизации

В Vite 8 оба конвейера заменены на единый бандлер Rolldown, созданный командой VoidZero на языке Rust

Ключевые преимущества Vite 8:

• Скорость сборки до 10–30 раз выше по сравнению с Rollup. Реальные проекты показывают сокращение времени сборки с 46 до 6 секунд
• Единая система плагинов - полная совместимость с плагинами Rollup и Vite; большинство существующих плагинов работают без изменений
• Встроенные инструменты разработчика, такие как отладка и профилирование
• Улучшенная поддержка TypeScript
• Улучшенный серверный рендеринг и поддержка Wasm (Web Assembly)

Параллельно с Vite 8 команда VoidZero анонсировала Vite+ - унифицированную платформу, объединяющую сборку, пакетный менеджер и среду разработки в единую экосистему на базе инструментов, написанных на Rust

Vite - идеальный выбор для новых проектов, где важна скорость запуска и мгновенная обратная связь при разработке. Особенно хорошо подходит для одностраничных приложений (Single-page application), приложений на Vue/React/Svelte и любых задач, где не требуется глубокая кастомизация сборочного процесса

Rsbuild

Rsbuild - это слой поверх Rspack (Rust-реализации, совместимой с Webpack), созданный командой ByteDance. Его цель - предоставить максимально быструю сборку при сохранении совместимости с экосистемой Webpack

• Rsbuild работает поверх Rspack - Rust-бандлера, который реализует API, совместимый с Webpack, но при этом значительно (в 5–10 раз) быстрее его из-за использования Rust
• Нулевая или минимальная конфигурация - Rsbuild сокращает объём конфигурации примерно на 90% по сравнению с Webpack, автоматически применяя лучшие практики
• Фреймворк-независимость - через плагины поддерживает React, Vue, Svelte, Solid и другие UI-библиотеки

Ключевые нововведения:

• Основной пакет распространяется только как ES-модуль
• Поддержка Node.js 20 и современных браузеров
• Экспериментальная поддержка React Server Components (RSC) через плагин rsbuild-plugin-rsc
• Теперь возможна отправка целевых сообщений из серверного процесса клиенту без полной перезагрузки страницы
• Новая модель разделения кода через гибкие стратегии разделения чанков (включая выделение каждого npm-пакета в отдельный чанк)

Rsbuild особенно привлекателен для команд, которые хотят мигрировать с Webpack и получить прирост скорости на порядок, но при этом сохранить привычную экосистему плагинов и не переписывать конфигурацию с нуля.

Module Federation

Module Federation - это архитектурный паттерн и технология (изначально представленная в Webpack 5), позволяющая одному JavaScript-приложению динамически загружать код из другого приложения прямо во время выполнения. В отличие от обычного импорта пакета, это обмен компонентами, логикой и ресурсами между независимо развёртываемыми проектами

Цели, которые преследовали разработчики:

• Независимое развёртывание - разные команды могут разрабатывать и развертывать свои микрофронтенды автономно
• Разделение ответственности - каждый микрофронтенд соответствует предметной области и обслуживается отдельной командой
• Общие зависимости - Module Federation умеет дедуплицировать общие библиотеки, чтобы они загружались однократно

Версия Module Federation 2.0 стала результатом переработки внутренней архитектуры командой ByteDance в сотрудничестве с Заком Джексоном (автором оригинальной технологии)

Ключевые новшества:

• Отвязка от Webpack - среда исполнения Module Federation теперь полностью независима от инструмента сборки, что позволяет работать с Webpack, Rspack, Rolldown, Vite и так далее
• Динамические подсказки типов - автоматическая генерация и загрузка типов удалённых TypeScript-модулей, что убирает проблему с any и необходимость в отдельных общих пакетах
• Манифест (mf-manifest.json) - структурированное описание экспортов и зависимостей приложения, упрощающее развертывание и управление версиями
• Federation Runtime и система плагинов - возможность программного управления загрузкой модулей и встраивания своей логики
• Side Effect Scanner - инструмент, который анализирует сборку и выявляет потенциальные побочные эффекты (глобальные переменные, подписки на события) перед интеграцией модуля
• Chrome DevExtension - визуализация графа зависимостей и загруженных версий библиотек прямо в браузере

На 2026 год Module Federation 2.0 активно используется в экосистеме ByteDance и за её пределами. Для Next.js официальной поддержки пока нет (рекомендуемый фреймворк - Modern.js от той же команды). В планах у разработчиков создание Module Federation 3.0 и Native ESM Federation

---

Подытожим:

Инструмент	Сильные стороны	Лучше всего подходит для
Webpack	Максимальная гибкость, зрелая экосистема, нейтральное управление	Крупные сложные проекты с нестандартными требованиями
Vite 8	Мгновенный старт сервера для разработки, высочайшая скорость сборки	Новые одностраничные приложения, быстрая разработка, Vue/React/Svelte-проекты
Rsbuild 2.0	Совместимость с Webpack, но со скоростью языка Rust🦀, минимум конфигурации	Миграция с Webpack, когда нужна скорость и привычный API
Module Federation 2.0	Динамическая загрузка кода между приложениями во времени исполнения	Микрофронтенд-архитектуры, независимо развёртываемые команды

This site is open source. Improve this page.