Содержание
React - одна из самых используемых Javascript-библиотек (или фреймворков, или как вы хотите ее описать). Но давайте будем честными: чем сложнее становится проект, тем критичнее оптимизация его производительности.
В сегодняшней статье я расскажу о 10 небольших советах, которые я использовал все эти годы для повышения производительности своих React-приложений. Надеюсь, вы найдете здесь несколько новых трюков!
1️⃣ Используйте производственную сборку
Это довольно очевидно, но вы будете поражены количеством проектов, в которых я работал как фрилансер, и когда я присоединился к ним, я обнаружил,*что они используют сборку dev в production.
При разработке приложения вы всегда должны использовать производственную сборку, чтобы обеспечить его наилучшую производительность. Производственные сборки выполняют множество оптимизаций, таких как модификация и удаление мертвого кода (плюс некоторые зависимости ведут себя по-разному в зависимости от того, какой тип сборки их вызывает).
Чтобы использовать производственную сборку, если вы используете CRA или Vite, вы можете выполнить команду npm run build или yarn build или установить переменную окружения NODE_ENV в значение production при запуске сервера разработки.
2️⃣ Использование динамического импорта
Динамический импорт впечатляет (по крайней мере, меня), поскольку он позволяет загружать модули только тогда, когда это необходимо, вместо того чтобы загружать их при запуске приложения.
Как вы понимаете, это значительно улучшает время начальной загрузки приложения.
Многие используют типичный для React способ с методом await import(’’), но я рекомендую вам использовать модуль loadable-components.
Я предпочитаю этот модуль, потому что он динамически загружает модули, а также разделяет их по коду, и… он загружает модули только тогда, когда они используются для рендеринга чего-либо! Так что еще лучше.
Вы можете использовать его следующим образом:
3️⃣ Используйте функциональные компоненты
Ну, это скорее мнение, но функциональные компоненты - это текущий стандарт для React. Да, вы все еще можете использовать компоненты классов, но вы не сможете использовать хуки по назначению. И давайте будем честными, это основная функция для последних версий React!
Кроме того, функциональные компоненты не имеют накладных расходов, как компоненты классов, и вы можете легко реализовать такие функции, как запоминание, что может еще больше повысить производительность.
Примером функционального компонента может быть:
4️⃣ Use Memoization
Мемоизация компонента - это фантастический способ повысить производительность, поскольку вы предотвратите повторный рендеринг, если реквизиты не изменились (плюс, вы также сможете избежать сетевых запросов, если вдруг окажется, что вы выполняете какие-то внутренние действия).
Как вы, возможно, знаете, в React для такого поведения используются хуки useMemo и useCallback.
Например, если вы хотите кэшировать переменную только для того, чтобы она обновлялась при изменении состояния, вы можете использовать следующий код:
5️⃣ Use a Performance Profiler
Ни одно руководство по оптимизации не может быть завершено без этого совета. Все эти маленькие советы полезны (и есть много других, которые вы могли бы использовать), но главное - определить, где в вашем приложении происходит потеря производительности.
В этом и заключается цель профилировщика производительности: выявить узкие места в вашем коде.
К счастью, вы можете использовать такой профилировщик, как тот, что входит в состав расширения React Developer Tools.
Эта статья получилась короткой, но это и было целью. Я хочу дать вам некоторые важные сведения об улучшениях, которые я люблю делать, но я начну писать серию статей об оптимизации React, где мы будем подробно рассматривать каждую технику. Так что если вам интересно узнать об этом больше, не забудьте следить за мной!