УСКОРЬ React-приложение с помощью Разделения Кода (Code Splitting)
УСКОРЬ React-приложение с помощью Разделения Кода (Code Splitting) https://youtu.be/gE9ObPf9lec В этом видео разбираем один из самых простых и эффективных способов ускорить React-приложение — **Code Splitting**. Покажу на реальном примере, как разделить JavaScript-бандл на отдельные части и загружать код только тогда, когда он действительно нужен пользователю. Мы разберём: • что такое Code Splitting и зачем он нужен • как работает динамический import() в JavaScript • как использовать React.lazy для ленивой загрузки компонентов • как разделять код между страницами приложения • как лениво загружать обычные модули и функции • как это влияет на размер бандла и производительность На практике создадим небольшое приложение с несколькими страницами (Home, Settings, Analytics), добавим lazy loading и посмотрим, как браузер подгружает chunks только при переходе на страницу. Если вы хотите писать **быстрые и масштабируемые React-приложения**, понимание code splitting — обязательный инженерный навык. Таймкоды: 00:00 Вступление 00:14 React приложение 01:23 Что такое разделение кода 02:00 Динамический импорт функции 02:55 Ленивая загрузка страницы 03:40 Компонент Suspense 05:12 Именованный импорт 06:12 Ленивая загрузка компонентов 07:06 Выводы Технологии в видео: React JavaScript Dynamic import() React.lazy Code Splitting Material UI Chart.js Поддержать канал: USDT (TRC20 / TRON): TVvAfehhHNqGMWugjFXtxwkANzfPo7q9ue Boosty: https://boosty.to/nomagiccoding/donate #react #javascript #webdev #frontend #reactjs
УСКОРЬ React-приложение с помощью Разделения Кода (Code Splitting) https://youtu.be/gE9ObPf9lec В этом видео разбираем один из самых простых и эффективных способов ускорить React-приложение — **Code Splitting**. Покажу на реальном примере, как разделить JavaScript-бандл на отдельные части и загружать код только тогда, когда он действительно нужен пользователю. Мы разберём: • что такое Code Splitting и зачем он нужен • как работает динамический import() в JavaScript • как использовать React.lazy для ленивой загрузки компонентов • как разделять код между страницами приложения • как лениво загружать обычные модули и функции • как это влияет на размер бандла и производительность На практике создадим небольшое приложение с несколькими страницами (Home, Settings, Analytics), добавим lazy loading и посмотрим, как браузер подгружает chunks только при переходе на страницу. Если вы хотите писать **быстрые и масштабируемые React-приложения**, понимание code splitting — обязательный инженерный навык. Таймкоды: 00:00 Вступление 00:14 React приложение 01:23 Что такое разделение кода 02:00 Динамический импорт функции 02:55 Ленивая загрузка страницы 03:40 Компонент Suspense 05:12 Именованный импорт 06:12 Ленивая загрузка компонентов 07:06 Выводы Технологии в видео: React JavaScript Dynamic import() React.lazy Code Splitting Material UI Chart.js Поддержать канал: USDT (TRC20 / TRON): TVvAfehhHNqGMWugjFXtxwkANzfPo7q9ue Boosty: https://boosty.to/nomagiccoding/donate #react #javascript #webdev #frontend #reactjs