#27: 🍕 React Pizza v2 — Оптимизируем сборку JS-файла. Code Splitting, Tree Shaking, Reexport

• Проект практически завершен, осталось доработать мелкие детали.  

• В следующем курсе автор будет рассказывать о фронтенде и бэкенде.  

• В следующем курсе автор будет объяснять, как оптимизировать рендеринг и загрузку страницы.  

• Это важно для создания производительного и быстрого приложения.  

• Тема сегодняшнего урока - разделение кода.  

• В прошлом уроке автор объяснял оптимизацию перерисовок.  

• В этом уроке автор продолжит объяснять, как оптимизировать приложение и сделать его более производительным.  

• В видео объясняется, как разделять код в приложении на React, когда оно отправляется в продакшн.  

• При сборке проекта, все компоненты и файлы объединяются в один большой файл, что может привести к увеличению размера бандла.  

• В этом уроке будет показано, как разделять код с помощью React Router, чтобы уменьшить размер бандла.  

• Динамический импорт позволяет импортировать код из другого файла и использовать его отдельно.  

• В видео показано, как использовать динамический импорт с помощью React Router.  

• Это позволяет импортировать код из другого файла и использовать его отдельно, что может уменьшить размер бандла.  

• Объясняется, что при обычном импорте кода из библиотеки, он добавляется в итоговый бандл.  

• При динамическом импорте, код загружается отдельно и может быть подгружен позже.  

• Динамический импорт позволяет подгружать код лениво, то есть не сразу при запуске приложения.  

• Это может быть полезно для компонентов, которые не нужны сразу при загрузке приложения.  

• Реакт Лейзи позволяет подгружать компоненты лениво, то есть только когда они нужны.  

• Это может быть полезно для уменьшения размера бандла и ускорения загрузки приложения.  

• Автор объясняет, как использовать динамический импорт для оптимизации загрузки компонентов в приложении.  

• Он демонстрирует, как использовать функцию lazy loading для загрузки компонентов только тогда, когда они необходимы.  

• Это позволяет уменьшить размер бандла и ускорить загрузку приложения.  

• Автор тестирует приложение после оптимизации и сравнивает результаты сборки.  

• Он обнаруживает, что размер бандла уменьшился, и приложение загружается быстрее.  

• Это положительно влияет на пользовательский опыт и может улучшить позиции в поисковых системах.  

• Автор подводит итоги и отмечает, что оптимизация загрузки компонентов может сэкономить до 10 килобайт.  

• Он также подчеркивает, что это небольшой показатель, но он все равно может быть полезен.  

• В видео обсуждается процесс сжатия кода с помощью Code Splitting, который позволяет разделить код на отдельные файлы и хранить их в отдельных папках.  

• Это позволяет уменьшить размер проекта и улучшить его производительность.  

• В видео также обсуждается использование React Lazy для ленивой подгрузки страниц.  

• Это позволяет загружать только необходимые компоненты при переходе на определенную страницу, что сокращает время загрузки и улучшает производительность приложения.  

• В видео также обсуждается использование React Router для динамической подгрузки страниц.  

• Это позволяет загружать только необходимые компоненты при переходе на определенную страницу, что сокращает время загрузки и улучшает производительность приложения.  

• Объясняется разница между реакт лейзи и реакт лод, которые позволяют делать разделение кода в приложении.  

• Реакт лод - это альтернатива реакт лейзи, которая также позволяет делать разделение кода, но имеет некоторые особенности.  

• Реакт лод может быть использован для серверного рендеринга, но не обязателен для этого.  

• Реакт лод может быть использован в проектах, которые не используют серверный рендеринг.  

• Реакт лод позволяет лениво подгружать компоненты, что может быть полезно для оптимизации производительности приложения.  

• Автор объясняет, как импортировать и экспортировать компоненты в React Lazy.  

• Он объясняет, что если компонент импортируется с помощью динамического импорта, то он будет работать на клиенте и сервере.  

• Он также объясняет, что можно использовать разделение кода на основе маршрута, но это не обязательно.  

• Автор объясняет, что три-шейкинг - это механизм, который позволяет сократить размер бандла, удаляя неиспользуемый код.  

• Он объясняет, что React Lazy поддерживает только экспорт по умолчанию, и если модуль использует именованный экспорт, можно создать промежуточный модуль для повторного экспорта его как модуля по умолчанию.  

• Автор объясняет, что импортировать компоненты декларативным способом (по отдельности из папки компонентов) - это хорошо, но плохо, если количество импортов растет.  

• Он объясняет, что это хорошо, если приложение будет импортировать только определенные компоненты из папки компонентов, и они будут подгружаться только при рендеринге.  

• Создание отдельной точки индекса внутри папки компонентов для удобного импортирования всех компонентов.  

• Использование реэкспорта для связывания экспорта и импорта компонентов.  

• Реэкспорт не всегда является хорошим решением, так как он может привести к проблемам с производительностью.  

• Второй проблемой является то, что импортирование всех компонентов может привести к увеличению количества кода и нагрузке на сервер.  

• Рекомендуется импортировать только те компоненты, которые действительно нужны.  

• Автор рассказывает о том, как оптимизировать импорт компонентов в пакете, используя три шейкинг.  

• Он объясняет, что если вы хотите импортировать только определенные файлы, то можно использовать три шейкинг, чтобы избежать загрузки всех файлов.  

• Автор объясняет, что экспорт позволяет вытащить определенные компоненты и импортировать их отдельно.  

• Он также рассказывает о том, как использовать именованные экспорты вместо экспорта по умолчанию.  

• Автор демонстрирует, как перестроить проект, используя именованные экспорты вместо экспорта по умолчанию.  

• Он проверяет, что все работает корректно после перестройки проекта.  

• В видео обсуждается, что теперь в проекте используется более грамотный способ экспортирования компонентов, что позволяет импортировать их по отдельности, а не по частям.  

• Это улучшает три шейкинг и репорты, так как позволяет загружать только необходимый код.  

• Автор объясняет, что есть много разных практик для оптимизации и улучшения проекта, но самый популярный и важный - это разделение кода.  

• Это позволяет оптимизировать бандл и подгружать только необходимый код.