Как сократить время загрузки приложения React на 70%

Как сократить время загрузки приложения React на 70%

От автора: при создании масштабных приложений с помощью React основной проблемой, с которой мы сталкиваемся, является их производительность. Когда приложение становится все больше и больше, производительность может ухудшиться. В частности, это влияет на время начальной загрузки приложения.

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

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

Лучшим вариантом разделения кода являются маршруты. Разделение кода на основе маршрутов решает часть проблем. Но большинство приложений используют только 50% преимуществ разделения кода.

Правильно ли мы структурируем компоненты при использовании разделения кода? Мы можем увидеть, почему и как это исправить, используя несколько примеров. Для этого мы собираемся использовать образец приложения React с некоторыми компонентами пользовательского интерфейса.

На скриншоте ниже мы видим компонент панели управления, который имеет несколько вкладок. Каждая вкладка состоит из нескольких компонентов.

Как сократить время загрузки приложения React на 70%

Компонент Dashboard использует разбиение кода на основе маршрута, как показано ниже.

Компонент Dashboard содержит некоторые подкомпоненты, такие как Sales, Profit, Chart, Tiles и Trends, как в приведенном ниже коде.

Мы разделили код на маршруты. Поэтому, готовое приложение содержит отдельный файл сборки для каждого маршрута, как показано ниже.

Как сократить время загрузки приложения React на 70%

Из приведенного выше изображения, файл размером 405,1 КБ является компонентом панели инстрементов, а другие файлы предназначены для заголовка, боковой панели, других компонентов и CSS.

Я разместил приложение на Netlify, чтобы проверить производительность. Поскольку, когда мы тестируем приложение локально, мы не можем увидеть разницу. Когда я тестировал размещенное приложение с помощью GTmetrix, компонент панели инструментов загружался за 2,9 секунды.

Как сократить время загрузки приложения React на 70%

Компонент панели инструментов является начальной страницей для нашего приложения, поэтому, когда мы нажимаем на URL-адрес приложения, будет загружен файл 405,1 КБ вместе с заголовком и боковой панелью.

Первоначально пользователь будет просматривать только вкладку «Продажи», но в нашем примере, компонент панели инструментов содержит несколько вкладок. Браузер также загружает код других вкладок, поэтому он задерживает отрисовку для пользователя. Чтобы уменьшить время начальной загрузки, нам нужно внести некоторые изменения в компонент панели инструментов, как показано ниже.

Здесь я импортировал каждый компонент вкладки с ленивой загрузкой и обернул компонент с ожиданием. Я не вносил никаких изменений в разделение кода на уровне маршрута. Когда мы создаем приложение, добавляются некоторые дополнительные файлы, поскольку мы лениво загружаем каждую вкладку в компоненте панели инструментов. На изображении ниже показано разделение файлов сборки.

Как сократить время загрузки приложения React на 70%

Теперь давайте снова протестируем приложение с GTmetrix с указанными выше изменениями. Посмотрите производительность приложения на изображении ниже.

Как сократить время загрузки приложения React на 70%

Как видите, теперь наш компонент панели инструментов загружается за 1 секунду. Поскольку код вкладки «Продажи» загружается отдельно. Мы сократили время начальной загрузки почти на 2 секунды. Давайте посмотрим на изображения ниже:

Как сократить время загрузки приложения React на 70%

Разделение кода на основе маршрута

Как сократить время загрузки приложения React на 70%

Разделение кода на основе маршрутов и компонентов

Как видите, это огромное улучшение начальной загрузки приложения. Теперь мы сократили время начальной загрузки приложения React на 70% с помощью нескольких настроек, эффективно используя разделение кода в компоненте панели инструментов.

Заключение

Оптимизированное структурирование компонентов и эффективное использование API React повышает производительность крупномасштабных приложений. Спасибо за чтение.

Автор: Nilanth

Источник: javascript.plainenglish.io

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии запрещены.