QUESTION: Що таке bundler?

Сучасні вебдодатки складаються з сотень, а іноді й тисяч окремих модулів, файлів стилів, зображень та сторонніх бібліотек. Якщо передавати всі ці файли у вихідному вигляді в браузер користувача, це призведе до сотень HTTP-запитів і критичного падіння продуктивності. Для вирішення цієї проблеми використовується спеціальний інструмент — збиральник, або bundler. Його головне завдання полягає в тому, щоб об'єднувати розрізнені модулі в один або кілька оптимізованих файлів, готових до продуктивної роботи в браузері. Популярними прикладами таких інструментів на сьогоднішній день є Webpack, Vite, Rollup та сучасний надшвидкий збиральник esbuild.

Процес роботи збиральника не обмежується простим склеюванням файлів в один великий документ. У сучасних інструментах закладені потужні механізми оптимізації. Один з них — це tree shaking, процес інтелектуального видалення невикористовуваного коду, який дозволяє виключити з фінального збирання ті функції та змінні, які були імпортовані з бібліотек, але фактично не викликаються в проєкті. Іншим важливим інструментом є code splitting, або поділ коду. Збиральник автоматично або за вказівкою розробника розбиває монолітний бандл на кілька чанків, які можуть завантажуватися паралельно або ліниво в міру необхідності.

Крім того, bundler виконує мініфікацію коду. Цей процес включає в себе видалення всіх коментарів, зайвих пробілів, скорочення довгих імен змінних і функцій до однобуквених аналогів без зміни логіки роботи додатка. У результаті розмір підсумкового бандла зменшується в рази, що безпосередньо впливає на швидкість скачування ресурсів браузером і загальну продуктивність вебдодатка. Збиральники також часто інтегруються з транспайлерами на кшталт Babel, перетворюючи сучасний код JavaScript на версії, зрозумілі для старих браузерів, і опрацьовують попередні процесори стилів, такі як Sass або Less.