Производительность web и React приложений, анализ, дебаг, инструменты, примеры

🟢 В данном уроке узнаем как дебажить (анализировать) производительность веб и React приложений. Изучим несколько подходов, посмотрим примеры. В уроке будем использовать такие инструменты как react developer tools, виджет приложение React Scan, google chrome lighthouse, узнаем про профилирование, lazy loading (ленивую загрузку), разницу между development и production сборками, разницу между дебагом в обычной вкладки или в инкогнито, про bundle analyzer, про core web vitals метрики и как они влияют на производительность. Посмотрим на мемоизацию в React на деле и как пофиксить layout shift. Курс React c нуля и по шагам тут: 🔑 Телеграм:
🔑 Udemy:
➡️ таймлайн ➡️ 00:00 старт 00:45 интро приложения 02:18 дебаг перерисовок React dev tools 03:16 React Scan виджет 08:30 рекомендации и авто промт 10:48 профилирование 13:22 performance, dev tools, lighthouse 15:17 метрики, core web vitals 16:32 Layout shift 17:23 фикс для layout shift 19:28 корректное измерение метрик 20:30 локалхост и prod build 22:15 дальнейшие рекомендации 23:48 lazy loading 24:59 bundle analyzer ▶ основной Telegram:
▶ приватный Telegram (Видео без VPN):
▶ GitHub:
▶ Linkedin:   / kolotilshikov   ▶ Графический дизайн и анимация:
⚡️ вкусняхи ⚡️ 🔑 Курс по GIT (одно видео):    • Полный КУРС 2024 по GIT. Команды, терминал...   🔑 CSS Flexbox (2 видео):    • 47. Frontender[1.0] FLEXBOX (флексбокс) те...   🔑 CSS Grid (2 видео):    • 78. Frontender[1.0] CSS GRID | Теория, Пра...   🔑 Препроцессоры SCSS (2 видео):    • 82. Frontender[1.0] ПРЕПРОЦЕССОРЫ SASS | S...   🔑 SVG, svg-спрайты (2 видео):    • 53. Frontender[1.0] Векторная графика SVG ...   🔑 1 уровень - Верстка макета (8 видео):    • 57. Frontender[1.0] Верстка первого макета...   🔑 2 уровень - Верстка макета (8 видео):    • 70. Frontender[1.0] ВЕРСТКА второго макета...   🔑 3 уровень - Верстка макета (10 видео):    • 84. Frontender[1.0] ВЕРСТКА Макета. Обзор ...   ⚙️ Курс Frontender[1.0] разделен на 3 модуля: 1) HTML, CSS, SCSS, БЭМ, Flexbox, Grid, Bootstrap, GIT, FIGMA, верстка 3 макетов (100 уроков); 2) JavaScript, решение задач, написание нескольких приложений; 3) React, Typescript, Redux написание полноценного приложения; 📢 Автор: Дмитрий Колотильщиков #js #frontend #javascript