Производительность 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 нуля и по шагам тут:
🔑 Телеграм: https://t.me/tribute/app?startapp=sqGB
🔑 Udemy: https://www.udemy.com/course/react-fu...

➡️ таймлайн ➡️
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: https://t.me/Dmitry_Kolotilshikov
▶ приватный Telegram (Видео без VPN): https://t.me/tribute/app?startapp=sm6T
▶ GitHub: https://github.com/DmitryKolotilshikov
▶ Linkedin:   / kolotilshikov  
▶ Графический дизайн и анимация: https://t.me/getlogo

⚡️ вкусняхи ⚡️
🔑 Курс по 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