Ответ
После сборки приложения (например, через Webpack, Vite или Rollup) происходит следующее:
- Оптимизация кода: минификация, удаление комментариев, tree-shaking (удаление неиспользуемого кода)
- Бандлинг: объединение модулей в один или несколько бандлов (обычно JS, CSS, assets)
- Хеширование имен файлов для кэширования (например,
main.abcd123.js) - Генерация HTML с инжекцией скриптов (если используется плагин типа HtmlWebpackPlugin)
- Разделение кода (code splitting) при необходимости
Пример структуры после сборки:
dist/
├── index.html
├── main.abc123.js
├── vendor.def456.js
└── assets/
├── styles.css
└── logo.svgГотовые файлы можно деплоить на сервер. В production-сборках часто включается source-map для отладки.
Ответ 18+ 🔞
А, ну слушай, вот ты пишешь-пишешь этот код, а потом нажимаешь «собрать» — и начинается магия, блядь! Ну или ад, смотря как собралось.
Короче, твои исходники берут и начинают хуячить со всей дури:
-
Оптимизация кода — это когда из твоего красивого, читаемого кода выжимают все соки. Комментарии? Нахуй! Лишние пробелы? В пизду! Неиспользуемые функции (tree-shaking)? Выкидывают, как старый хлам! Получается такая сжатая, ебучая каша, которую только браузер и сможет проглотить, не поперхнувшись.
-
Бандлинг — это святая святых. Все твои сотни модулей, файликов, библиотек — всё это сгребают в одну-две здоровенные пачки (бандлы). JS — в одну кучу, CSS — в другую, картинки — в третью. Чтобы серверу не пришлось тысячу раз бегать туда-сюда, как охуевшему.
-
Хеширование имён — вот это прикол, ёпта! Чтобы пользователи не кэшировали старое говно, каждому файлу дают новое имя, типа
main.abc123.js. Собрал заново — хеш другой, и браузер качает свежачок. Хитрая жопа, но работает. -
Генерация HTML — а то ты думал, самому вписывать эти скрипты? Не, есть плагины-роботы (типа HtmlWebpackPlugin), которые сами вставят в
index.htmlвсе нужные теги со свежими, похашенными именами файлов. Удобно, блядь. -
Разделение кода (code splitting) — это для больших проектов, чтобы не грузить одним гигантским файлом всё нахуй. Разбивают на куски, которые подгружаются только когда нужны. Ленивая загрузка, ёбана!
И вот, после всей этой движухи, у тебя в папке dist/ высирается примерно такая структура:
dist/
├── index.html
├── main.abc123.js <-- твой основной код, сжатый в лепёшку
├── vendor.def456.js <-- библиотеки всякие, типа React
└── assets/
├── styles.css <-- все стили в одном флаконе
└── logo.svg <-- картинки, которые выжилиЭту папочку dist/ — ты её, блядь, с чувством, с толком, с расстановкой — заливаешь на любой сервер, и приложение работает. В рот меня чих-пых, вот и вся магия!
А, да, чуть не забыл: в продакшене иногда оставляют source-map — это такие тайные карты, чтобы если что-то ебнётся, можно было в отладке увидеть не сжатый ужас, а твой исходный, красивый код. Но их на продакшене обычно прячут, а то мало ли.