Формат
в записи
Необходимый уровень
Junior+
Сборка Frontend
Цель курса — развить фундаментальное понимание процессов сборки, необходимое для создания производительных, управляемых и гибких фронтенд-приложений
Что вам даст этот курс
Понимание эволюции сборки во фронтенде
Поймете, откуда взялась концепция сборки во фронтенде и как она развивалась — чтобы осознанно использовать современные инструменты.
Полное представление о процессе сборки
Разберётесь во всех этапах и внутренних механизмах сборки — от входных файлов до финального бандла.
Анализ и оптимизация для повышения эффективности
Научитесь анализировать и оптимизировать процесс сборки — повышая производительность и управляемость проекта.
Создание собственных плагинов под задачи проекта
Освоите написание собственных плагинов — чтобы адаптировать сборщик под нужды вашего проекта.
Выбор сборщика под технические и бизнес-задачи
Сможете уверенно выбирать сборщик под конкретную задачу — исходя из технических особенностей и бизнес-целей.
Сборка как инструмент влияния на продукт
Откроете для себя новые возможности влияния на метрики продукта и разработки с помощью сборки.
После курса вы сможете
Анализировать сборку в любом проекте и находить точки для улучшения
Осознанно выбирать сборщик, исходя из требований, а не из популярности
Оптимизировать скорость сборки и снижать итоговый размер бандла
Разрабатывать собственные плагины и расширения под задачи команды
Использовать нейросети грамотно: ускорять работу, сохраняя контроль и точность
Дмитрий Холстинин
автор курса
Да. Курс помогает посмотреть на сборку шире — как на концепцию, а не конкретный инструмент.
Вы поймёте, как разные сборщики решают одни и те же задачи, и сможете выбрать подходящий под ваш проект. Возможно, вам подойдёт что-то проще, быстрее или гибче, чем Webpack, но и про него мы тоже подробно поговорим.
Александр
Junior Frontend-разработчик
Я хотел на курс по Webpack, а тут просто “сборка”. Мне это подойдёт?
Дмитрий Холстинин
автор курса
Нейросеть не знает контекста проекта и не учтёт нюансы. Она предложит общий вариант, а не оптимальный.
В крупных компаниях, особенно в BigTech, такие решения требуют ручной настройки и глубокого понимания — ChatGPT не заменит вашу экспертизу. Однако в ходе курса тему нейросетей мы все же затронем и покажем как грамотно их использовать в работе.
Александр
Junior Frontend-разработчик
Зачем мне изучать сборку, если можно спросить у нейросетей?
Дмитрий Холстинин
автор курса
Любой разработчик, который растёт в профессии, сталкивается со сборкой. Это фундамент.
Без неё вы не сможете полноценно развиваться как инженер и претендовать на senior-уровень. Разобраться в сборке — это про профессиональную зрелость.
Александр
Junior Frontend-разработчик
Зачем мне вообще погружаться в сборку?
Дмитрий Холстинин
автор курса
Да. Вы поймёте, что именно делает ваша сборка, какие процессы происходят под капотом и где можно улучшить.
Это сэкономит часы отладки, избавит от багов и даст уверенность при работе с чужими или масштабируемыми проектами.
Александр
Junior Frontend-разработчик
А если у нас сборка уже настроена — мне это нужно?
Что будет плюсом
Опыт работы с любым сборщиком
Хотите разобраться в сборке с нуля
Мы начнём с основ и дойдём до продвинутого уровня.
Пользуетесь Git и GitHub на базовом уровне
Этого достаточно для комфортного прохождения курса.
Вам подойдет курс, если вы
Уверенно владеете JavaScript
Хорошо разбираетесь в синтаксисе
и семантике JS.
и семантике JS.
программа курса
История сборки во frontend. Эволюция инструментов сборки. Модули. Cat, Make, Grunt, Gulp, Browserify. Современные сборщики.
Модульная система. Ранние реализации системы модулей в Javascript. AMD, UMD, common.js, system.js, require.js, ESM. Актуальные системы модулей и interoperability.
Resolve система. Зачем нужна и как работает. Resolve в системах модулей, сборщиках и nodejs. Алиасы.
Target и env сборки. Транспайлинг кода. AST. Полифиллы, Browserslist. Транспайлеры: TSC, Babel, SWC, esbuild.
Webpack, Rspack, Rollup, Esbuild, Parcel, Vite, Rolldown, Turbopack. Почему webpack всё еще актуален. Как сборщики работают с модулями, настройка resolve, интеграция с транспайлерами.
Entrypoint, модули, граф модулей, бандл, чанк. Хэши. Сжатие кода. Динамическое подключение модуля. Изучаем настройки и интерфейсы различных сборщиков.
Работа с ассетами. Способы подключения ассетов. Оптимизация ассетов. Возможности сборщиков при работе с ассетами.
Разбираем архитектуру работы сборщиков и процесса сборки, основные этапы сборки. AST. Концепция лоадеров и плагинов.
Как изменить поведение сборщика. Как добавить дополнительную функциональность. Хуки. Разбираем возможности расширения сборщиков. Пишем плагин самостоятельно.
Watch режим сборки. Hot Module Reload. DevServer. LiveReload. Как работает, что и зачем можно настроить. Разбираем что умеют сборщики.
Дебаг сборки. Сложность дебага не JavaScript сборщиков. Потребление памяти, профилирование. Оптимизируем время сборки. Учимся профилировать процесс сборки, инструменты для анализа времени сборки.
Отладка собранного кода. Сурсмапы. Анализаторы бандла. Рантайм код сборщиков. На практике учимся разбираться в собранном коде.
Организация библиотеки, package.json, публикация, зависимости. Настройки и нюансы сборки библиотек. В чем разница от сборки конечного приложения. ESM/CJS. На примере настраиваем сборку библиотеки и подбираем самый подходящий сборщик.
Микрофронтенды. Module Federation. Нюансы сборки микрофронтендов в различных сборщиках. Монорепозиторий. Организация сборки и версионирования. Симлинки. Популярные инструменты для монореп. Настриваем монорепозиторий с микрофронтендами.
Метрики скорости. Влияние размера и количества кода на скорость. Основные приемы и способы оптимизации. Статическое измерение скорости. Учимся использовать инструменты анализа ассетов.
Уязвимости в web. Как работают механизмы защиты от уязвимостей (csp, trusted types). Поддержка и настройка CSP и Trusted Types в сборщиках. Настраиваем CSP в приложении на примере каждого сборщика.
Особенности сборки css и typescript. Препроцессоры. PostCSS. Typescript Compiler.
Сборка Service Worker, webmanifest, Web Worker, WebAssembly. Сборка расширения для браузера. Экзотические таргеты. Особенности сборки под Node и SSR. На примере настраиваем сборку для SSR приложения.
ES модули. Rust и go в тулчейне сборки. Проблема перехода от CJS к ESM. Веб компоненты и отказ от сборки. WebAssembly как будущее веба.
Обсуждаем весь пройденный материал и собираем общую картину работы сборки.
Прокачал скиллы — получи подтверждение
В конце обучения ты пройдёшь итоговое тестирование и получишь сертификат. Мы обучаем по государственной лицензии № Л035-01218-23/01835619.
Полностью или разделив оплату с тобой,
например 50/50 или 75/25
например 50/50 или 75/25
Расскажем всё про курс
Сообщим стоимость
Ответим на ваши вопросы
Подготовим договор и счёт
Этот курс может оплатить твой работодатель
5 лет
занимаюсь инфраструктурой Frontend
6 лет
в коммерческой разработке
Автор курсов
Ведущий разработчик
в «Т-Банк»
дмитрий холстинин
автор курса и преподаватель
Вот что говорят студенты прошлого потока Webpack
Вафин Артём
Подача информации, четко и по делу. Дополнительная информация по субботам/воскресениям.
Изместьев Борислав
Понравилась часть с объяснением работы лоадеров и плагинов и очень пригодилась секция по оптимизации сборки. Лекция по безопасности топ, там у меня были пробелы.
87% учеников
возвращаются за следующим курсом после покупки первого
Фахреев Рафаэль
На курсе понравилось, что рассматривалась очень сложная тема, сразу понятно что это не инфобизнесменство
Тихомиров Руслан
Все понравилось в целом. Дмитрий хороший преподаватель). Я Уменьшил вес бандла и скорость загрузки в 2 раза)
часто задаваемые вопросы
На лекциях соотношение примерно 60% теории и 40% практики. Все возможности сборщиков, которые рассматриваются, сразу же проверяются
на практике. Все домашние задания также будут исключительно практическими.
на практике. Все домашние задания также будут исключительно практическими.
Курс рассчитан на тех, кто уже достаточно уверенно работает с JavaScript. Возможно, тебе не стоит торопиться — сначала лучше немного подтянуть основы.
Да, ближе к завершению срока мы предложим тебе продлить доступ.
Да, ты можешь использовать бонусы при оплате — максимум до 7 000 баллов за курс. Если возникнут сложности с оплатой, напиши нам в бот.
Да, есть. Нажимая на кнопку «оплатить» вам будет предложено несколько вариантов оплаты, в том числе и в рассрочку. Рассрочка
предоставляется на срок от 3 до 12 месяцев по вашему желанию. Также действует рассрочка для граждан Казахстана, Узбекистана и Республики
Беларусь. Для получения подробной информации и оформления рассрочки в этих странах, пишите нам в телеграмм бот. Для граждан других
стран возможна рассрочка на 3 месяца от нашей школы Kobezzza Lab. Свяжитесь с нами через бот.
предоставляется на срок от 3 до 12 месяцев по вашему желанию. Также действует рассрочка для граждан Казахстана, Узбекистана и Республики
Беларусь. Для получения подробной информации и оформления рассрочки в этих странах, пишите нам в телеграмм бот. Для граждан других
стран возможна рассрочка на 3 месяца от нашей школы Kobezzza Lab. Свяжитесь с нами через бот.
Да, мы предоставляем все необходимые документы. Для работодателей доступен только тариф "Все включено".
Чтобы оформить заявку, напиши нам в бот.
Чтобы оформить заявку, напиши нам в бот.
Да, мы принимаем платежи со всего мира. Если возникнут трудности с оплатой — напиши нам в бот, и мы поможем с оформлением.
Да, у нас есть образовательная лицензия. Регистрационный номер лицензии –
№ Л035-01218-23/01835619. Ознакомиться с лицензией
№ Л035-01218-23/01835619. Ознакомиться с лицензией
Да, у нас есть образовательная лицензия, а значит, ты можешь оформить налоговый вычет. Обучение в лицензированной школе даёт право на возврат до 13% от стоимости, но не более 19 500 рублей в год — в соответствии с лимитом на вычет в 150 000 рублей (на 2024 год). Социальный налоговый вычет можно оформлять ежегодно и таким образом снизить расходы на образование.
Остались вопросы?
Напиши нам, мы с удовольствием на них ответим
