Сборка Frontend. Тариф Самостоятельный (Дмитрий Холстинин)

​

Цель курса — развить фундаментальное понимание процессов сборки, необходимое для создания производительных, управляемых и гибких фронтенд-приложений.

Вам подойдет курс, если вы:

• Уверенно владеете JavaScript. Хорошо разбираетесь в синтаксисе и семантике JS.
• Пользуетесь Git и GitHub на базовом уровне. Этого достаточно для комфортного прохождения курса.
• Хотите разобраться в сборке с нуля. Мы начнём с основ и дойдём до продвинутого уровня.

Что вам даст этот курс:
1. Понимание эволюции сборки во фронтенде
Поймете, откуда взялась концепция сборки во фронтенде и как она развивалась — чтобы осознанно использовать современные инструменты.

2. Полное представление о процессе сборки
Разберётесь во всех этапах и внутренних механизмах сборки — от входных файлов до финального бандла.

3. Анализ и оптимизация для повышения эффективности
Научитесь анализировать и оптимизировать процесс сборки — повышая производительность и управляемость проекта.

4. Создание собственных плагинов под задачи проекта
Освоите написание собственных плагинов — чтобы адаптировать сборщик под нужды вашего проекта.

5. Выбор сборщика под технические и бизнес-задачи
Сможете уверенно выбирать сборщик под конкретную задачу — исходя из технических особенностей и бизнес-целей.

6. Сборка как инструмент влияния на продукт
Откроете для себя новые возможности влияния на метрики продукта и разработки с помощью сборки.

После курса вы сможете:

• Анализировать сборку в любом проекте и находить точки для улучшения
• Осознанно выбирать сборщик, исходя из требований, а не из популярности
• Оптимизировать скорость сборки и снижать итоговый размер бандла
• Разрабатывать собственные плагины и расширения под задачи команды
• Использовать нейросети грамотно: ускорять работу, сохраняя контроль и точность

Программа курса
1. Вводная лекция
История сборки во frontend. Эволюция инструментов сборки. Модули. Cat, Make, Grunt, Gulp, Browserify. Современные сборщики.

2. Модульная система
Модульная система. Ранние реализации системы модулей в Javascript. AMD, UMD, common.js, system.js, require.js, ESM. Актуальные системы модулей и interoperability.

3. Resolve система
Resolve система. Зачем нужна и как работает. Resolve в системах модулей, сборщиках и nodejs. Алиасы.

4. Target, environment, транспиляция и полифиллы
Target и env сборки. Транспайлинг кода. AST. Полифиллы, Browserslist. Транспайлеры: TSC, Babel, SWC, esbuild.

5. Современные сборщики и отличия между ними
Webpack, Rspack, Rollup, Esbuild, Parcel, Vite, Rolldown, Turbopack. Почему webpack всё еще актуален. Как сборщики работают с модулями, настройка resolve, интеграция с транспайлерами.

6. Основные термины сборки
Entrypoint, модули, граф модулей, бандл, чанк. Хэши. Сжатие кода. Динамическое подключение модуля. Изучаем настройки и интерфейсы различных сборщиков.

7. Ассеты
Работа с ассетами. Способы подключения ассетов. Оптимизация ассетов. Возможности сборщиков при работе с ассетами.

8. Архитектура сборщиков и процесс сборки
Разбираем архитектуру работы сборщиков и процесса сборки, основные этапы сборки. AST. Концепция лоадеров и плагинов.

9. Расширение возможностей сборщиков
Как изменить поведение сборщика. Как добавить дополнительную функциональность. Хуки. Разбираем возможности расширения сборщиков. Пишем плагин самостоятельно.

10. Watch и НМR
Watch режим сборки. Hot Module Reload. DevServer. LiveReload. Как работает, что и зачем можно настроить. Разбираем что умеют сборщики.

11. Отладка и оптимизация процесса сборки
Дебаг сборки. Сложность дебага не JavaScript сборщиков. Потребление памяти, профилирование. Оптимизируем время сборки. Учимся профилировать процесс сборки, инструменты для анализа времени сборки.

12. Отладка собранного кода
Отладка собранного кода. Сурсмапы. Анализаторы бандла. Рантайм код сборщиков. На практике учимся разбираться в собранном коде.

13. Сборка библиотек
Организация библиотеки, package.json, публикация, зависимости. Настройки и нюансы сборки библиотек. В чем разница от сборки конечного приложения. ESM/CJS. На примере настраиваем сборку библиотеки и подбираем самый подходящий сборщик.

14. Сборка микрофронтендов и монорепозиторий
Микрофронтенды. Module Federation. Нюансы сборки микрофронтендов в различных сборщиках. Монорепозиторий. Организация сборки и версионирования. Симлинки. Популярные инструменты для монореп. Настриваем монорепозиторий с микрофронтендами.

15. Оптимизация собранных ассетов
Метрики скорости. Влияние размера и количества кода на скорость. Основные приемы и способы оптимизации. Статическое измерение скорости. Учимся использовать инструменты анализа ассетов.

16. Безопасность
Уязвимости в web. Как работают механизмы защиты от уязвимостей (csp, trusted types). Поддержка и настройка CSP и Trusted Types в сборщиках. Настраиваем CSP в приложении на примере каждого сборщика.

17. Сборка css и typescript
Особенности сборки css и typescript. Препроцессоры. PostCSS. Typescript Compiler.

18. Дополнительные сценарии сборки
Сборка Service Worker, webmanifest, Web Worker, WebAssembly. Сборка расширения для браузера. Экзотические таргеты. Особенности сборки под Node и SSR. На примере настраиваем сборку для SSR приложения.

19. Тенденции и будущее сборки
ES модули. Rust и go в тулчейне сборки. Проблема перехода от CJS к ESM. Веб компоненты и отказ от сборки. WebAssembly как будущее веба.

20. Подведение итогов
Обсуждаем весь пройденный материал и собираем общую картину работы сборки.

Тариф Самостоятельный

• 20 записанных лекций
• Домашние задания — проект на GitHub с задачами и автоматическими проверками
• Доступ к материалам — 6 месяцев