Сборщики и сборка
Транспиляция, граф модулей, tree shaking, code splitting, хеши; Turbopack и Vite.
Обновлено
Что такое сборщик
Код, который вы пишете, — не тот код, что попадает в браузер. Вы пишете сотни файлов TypeScript и JSX, импортирующих друг друга и node_modules. Браузеру пришлось бы делать сотни запросов, а TypeScript и JSX он не понимает.
Сборщик (bundler) берёт весь этот код и превращает в несколько оптимизированных файлов:
исходный кодTS, JSX, CSS, импортытранспиляция→обычный JavaScriptбандлинг→объединённые файлыоптимизация→сборкаминифицирована, разделена, с хешемЧто он делает по шагам
| Шаг | Что это значит |
|---|---|
| транспиляция | TS → JS (типы удаляются), JSX → вызовы функций, новый синтаксис → совместимый |
| разрешение импортов | стартует с входного файла и идёт по всем import — это граф модулей |
| tree shaking | удаляет экспорты, которые никто не импортирует |
| code splitting | делит код на чанки: каждая страница грузит только нужное; динамический import() = отдельный чанк |
| минификация | короткие имена, без пробелов и комментариев |
| хеш в именах файлов | app.3f2a9c.js — новое содержимое = новое имя → браузер может кэшировать файлы навсегда |
Сборщики сегодня
| Инструмент | Где встречается | Особенность |
|---|---|---|
| Turbopack | Next.js (по умолчанию с Next 16) | написан на Rust, инкрементальный, очень быстрый в dev |
| Vite | React SPA, Vue, Svelte, Vitest | мгновенный dev-сервер на нативных ES-модулях, сборка через Rollup / Rolldown |
| webpack | старые проекты, Next до 16 | самый настраиваемый, самый медленный |
| esbuild, SWC | внутри остальных | сверхбыстрая транспиляция |
На практике сборщик не настраивают вручную — это делает фреймворк (Next, Vite). Но нужно понимать, что он делает, чтобы знать, почему важен каждый импорт.
Dev и build
npm run dev |
npm run build |
|
|---|---|---|
| Цель | скорость работы | скорость для пользователей |
| Оптимизации | минимальные | все (минификация, tree shaking, splitting) |
| Перезагрузка | HMR — изменённый модуль подменяется без перезагрузки, состояние сохраняется | — |
| Ошибки | подробные, с оверлеем | сборка падает |
Что вы можете сделать для маленького бандла
- Named-импорты из библиотек с поддержкой tree shaking (
import { debounce } from 'lodash-es'). next/dynamic/import()для тяжёлых редко используемых компонентов (редактор, графики, карты) — именно так загружается редактор в этом приложении.- Server Components для всего неинтерактивного — их код вообще не попадает в бандл.
- Проверяйте, что занимает место:
next buildпоказывает размеры, а анализатор бандла — что их занимает.
Коротко
- Сборщик = транспиляция + граф импортов + tree shaking + code splitting + минификация + хеш.
- Turbopack в Next, Vite в остальном; их не настраивают, но понимают.
- Маленький бандл: named-импорты,
import()для тяжёлого кода, Server Components.