Этап 9 из 19 · ≈ 4 ч

Сборщики — Vite и webpack

Основа с Junior

Dev-сервер, сборка для продакшена, tree shaking, разделение кода и хеши в именах.

Vite — стандарт для новых проектов: в разработке отдаёт ES-модули браузеру почти без сборки (мгновенный старт и горячая перезагрузка), для продакшена собирает оптимизированный бандл. webpack — гибкий сборщик, который встречается в большом числе существующих проектов. Новое поколение — Rspack, Rolldown, Turbopack — написано на Rust ради скорости.

Что важно знать

  • Tree shaking — удаление неиспользуемого кода; работает с ES-модулями и без побочных эффектов при импорте.
  • Разделение кода (code splitting) — отдельные файлы для маршрутов и тяжёлых библиотек через import().
  • Хеш в имени (index-4f2a9c.js) — файлы можно кэшировать навсегда, новая сборка даёт новые имена.
  • Минификация и source maps — для отладки продакшен-кода.
  • Переменные окружения на этапе сборки попадают в бандл открытым текстом — секретам там не место.
  • Анализ размера: rollup-plugin-visualizer, source-map-explorer — найти, какая библиотека раздула бандл.
  • Транспиляция (esbuild, SWC, Babel) — синтаксис под нужные браузеры.

Критерии освоения

Junior ≈ 4 ч

  • Создаёт проект на Vite, запускает dev-сервер и собирает продакшен-версию

Практика. Создать проект на Vite с TypeScript и React и настроить переменные окружения.

Middle ≈ 6 ч

  • Анализирует состав бандла и уменьшает его разделением кода и заменой тяжёлых библиотек
  • Объясняет tree shaking, хеши в именах файлов и source maps

Практика. Уменьшить начальный бандл существующего проекта минимум на 30% и описать, за счёт чего.

Проверка знаний

Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.

Вопросы с собеседований

Смотреть все
Чем отличаются атрибуты async и defer у тега script?Junior

Обычный <script> останавливает разбор HTML до загрузки и выполнения. defer — загрузка параллельно, выполнение после разбора HTML, по порядку подключения. async — загрузка параллельно, выполнение сразу по готовности, в произвольном порядке.

Полный разбор
Зачем нужен сборщик (Vite, webpack) и что он делает?Junior

Сборщик берёт исходники (модули JS/TS, CSS, картинки, импорты из node_modules) и делает оптимизированные файлы для браузера: склеивает модули, транспилирует TypeScript и JSX, минифицирует, удаляет неиспользуемый код (tree shaking), добавляет хеши в имена для…

Полный разбор
Что такое разделение кода (code splitting) и ленивая загрузка?Middle

Вместо одного большого бандла код делят на части, которые грузятся по необходимости: по маршрутам (страница настроек не нужна на главной), по тяжёлым виджетам (редактор, графики, карта). Механизм — динамический import(), сборщик выделяет модуль в отдельный…

Полный разбор
Чем ES-модули отличаются от CommonJS?Junior

CommonJS — исторический формат Node.js: require() и module.exports, загрузка синхронная и динамическая (require можно вызвать где угодно). ES-модули — стандарт языка: import/export, статическая структура, асинхронная загрузка, работают и в браузере, и в…

Полный разбор
Как работают ES-модули — import и export?Junior

Модуль — файл со своей областью видимости: наружу видно только то, что экспортировано. Именованный экспорт export function sum импортируют import { sum } (имя совпадает), default — один на модуль, импортируется под любым именем. Импорты статические (в начале…

Полный разбор
Что такое source maps и как их использовать в продакшене?Middle

Source map — файл соответствия собранного (минифицированного, склеенного) кода исходному: строка 1, столбец 48231 в index-3f2a.js → Cart.tsx:42. Браузерные DevTools и системы сбора ошибок (Sentry и аналоги) по нему показывают исходный стек ошибки. В…

Полный разбор

Документация

← Вся карта «Frontend-разработчик»

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования