Объяснение JavaScript Bundling

Вы пишете приложения на React или Angular, используя множество файлов. У вас есть компоненты, сервисы и библиотеки. Такая организация упрощает работу.

Браузеру нет дела до ваших папок. Если вы загружаете 200 файлов, браузер делает 200 сетевых запросов. Это замедляет ваше приложение.

Бандлеры решают эту проблему. Бандлер берет ваш код, импорты и модули и объединяет их в один или несколько небольших файлов. Это делает загрузку эффективной.

Современные бандлеры делают больше, чем просто объединяют файлы:

• Минификация (Minification): она удаляет лишние пробелы и комментарии. Она сокращает имена переменных, чтобы уменьшить размер файлов. • Tree shaking: он удаляет код, который вы никогда не используете. Он вычищает неиспользуемые функции из библиотек. • Разделение кода (Code splitting): оно разбивает код на небольшие части. Браузер загружает только то, что нужно пользователю в данный момент.

Меньшие файлы обеспечивают более быструю работу приложений.

Существует два основных инструмента: Webpack и Vite.

Webpack собирает все ваше приложение перед его отдачей. Это хорошо подходит для крупных legacy-проектов. Он гибкий, но в больших проектах может работать медленно.

Vite — это современный выбор. Во время разработки он отдает файлы напрямую. Он обновляет только тот файл, который вы изменили. Это делает обновления мгновенными. Для продакшена Vite использует Rollup для создания быстрых бандлов.

Сравнение:

Webpack:

  • Скорость разработки: Медленнее
  • Конфигурация: Сложная
  • Лучше всего подходит для: Крупных legacy-проектов

Vite:

  • Скорость разработки: Быстрая
  • Конфигурация: Простая
  • Лучше всего подходит для: Новых современных проектов

Используйте Vite для новых проектов.

Каждый бандлер выполняет три шага:

  1. Построение графа зависимостей: он определяет, как каждый файл связан с другими.
  2. Трансформация кода: он преобразует TypeScript или JSX в обычный JavaScript.
  3. Создание бандла: он объединяет и минифицирует всё содержимое в папку для развертывания.

Сделайте ваш бандл компактным с помощью этих шагов:

• Ленивая загрузка (Lazy loading): загружайте компоненты только тогда, когда пользователи переходят к ним. • Частичные импорты (Partial imports): не импортируйте всю библиотеку целиком. Импортируйте только ту конкретную функцию, которая вам нужна. • Анализ: используйте инструменты, чтобы увидеть, что занимает место в вашем бандле. • Production-сборки: всегда развертывайте production-сборки. Development-сборки слишком тяжелые.

Бандлинг улучшает производительность вашего приложения, предоставляя браузеру меньше файлов меньшего размера.

Источник: https://dev.to/kavya1205/javascript-bundling-explained-from-zero-to-optimised-f7p