Химаншу Гупта, разработчик программного обеспечения в GE, недавно говорил о повышении производительности с помощью React.js на встрече React-Next.js. В этом сообщении в блоге представлены основные выводы из его выступления.

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

Вот вопрос к вам: каково среднее время загрузки веб-страницы до того, как клиент уйдет? Ответ пять секунд. Если ваш настольный сайт загружается более двух секунд, вы рискуете потерять доход. Для мобильных браузеров порог составляет восемь секунд.

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

import * as React from 'react';
import * as ReactDOM from 'react-dom/client;
class Check extends React.Component {
render() {
return <h2>Hi!</h2>;
 re
    }
}
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<Check />);

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

Ошибка заключается в импорте ненужного кода.

Например, использование import * as ReactDOM from ‘react-dom/client’; может показаться безобидным, но при использовании в 300 строках кода это может значительно увеличить время работы над производительностью.

Чтобы избежать подобных проблем, разработчикам следует:

  • Избегайте ненужного импорта
  • Используйте фрагменты крючков
  • Избегайте использования локального хранилища без крайней необходимости

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

Теперь поговорим о, пожалуй, самой недооцененной функции в React, т.е. React DOM.

export function Movie({ title, releaseDate }) {
return (
<div>
<div> Movie title: {title}</div >
<div> Release date: {releaseDate}</div>
</div>
);
}
export const MemoizedMovie = React.memo(Movie);

В приведенном выше примере изменение реквизита запускает цепную реакцию, при которой компонент и его дочерние элементы повторно визуализируются, вызывая изменения в данных DOM.

Вот где React Memo пригодится.

Преимущество React Memo

Предположим, у вас есть родительский компонент с тремя функциями: название фильма, дата выпуска и количество просмотров в реальном времени. Количество просмотров в реальном времени — это данные в реальном времени, а два других — нет. Когда вы визуализируете родительский компонент, он будет перерисовывать все. Однако, если вы используете React Memo, он создаст отдельный компонент для данных не в реальном времени и сохранит предыдущее состояние в виртуальной памяти. Если изменений нет, он не будет повторно отображать дочерние компоненты, экономя время и ресурсы.

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

Взгляните на следующую карту

Размер пакета и файл index.js — две распространенные причины снижения производительности. Файл index.js часто бывает слишком большим и увеличивает время загрузки, если не разбит на части. Чтобы решить эту проблему, вы можете разделить файл на более мелкие фрагменты, используя отложенную загрузку.

Ленивая загрузка сначала загружает контент, а затем загружает необходимые пакеты или файлы в фоновом режиме, когда пользователь прокручивает страницу вниз. Например, на странице информационной панели с графиками и деталями заказа вы можете объединить функции над информационной панелью и загрузить их в один отдельный пакет. Точно так же вы можете загрузить функции под панелью инструментов в другом отдельном пакете. Используйте ленивую загрузку для тестов компонентов, чтобы избежать загрузки ненужного контента.

Часто возникает вопрос, когда разбивать файлы на части. Лучше всего выделить пакетный файл для React, если он превышает 2 МБ. Если на сайте много контента, он может достигать 3,5 или 4 МБ максимум.

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

import React, { Suspense, lazy } from 'react';
const Billing = lazy(() => import(/ webpackChunkName: "billing" / '/routes/Billing'));
const FeatureA = lazy(() => import(/ webpackChunkName: "feature-a" / '/routes/FeatureA'));
const FeatureB = lazy(() => import(/ webpackChunkName: "feature-b" */ '/routes/FeatureB'));
const App = () => (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/billing" element={<Billing />} />
<Route path="/feature-a" element={<FeatureA />} />
<Route path="/feature-b" element={<FeatureB />} />
</Routes>
</Suspense>
</Router>

);
export default App;

Оптимизация определенных функций имеет решающее значение для повышения производительности проекта. Давайте обсудим несколько эффективных стратегий.

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

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

При работе с дорогостоящими операциями, такими как автоматические предложения в строке поиска, важно рассмотреть возможность реализации методов дросселирования или устранения дребезга. Регулирование ограничивает количество запросов, сделанных в течение определенного периода времени, предотвращая чрезмерные запросы и оптимизируя использование ресурсов. С другой стороны, debounce вводит задержку перед выполнением функции, что позволяет эффективно обрабатывать дорогостоящие операции. Например, устранение дребезга может быть полезно в сценариях, где требуется рассмотрение в реальном времени для быстрого выполнения приоритетных задач.

Чтобы реализовать устранение дребезга, вы можете создать функцию устранения дребезга, которая возвращает новую функцию с таймером. Этот таймер определяет задержку перед выполнением функции. Для более продвинутых функций устранения дребезга можно использовать сторонние библиотеки, такие как Lodash.

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

Заключение

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

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

Например, домашняя страница Amazon эффективно использует регулирование для быстрой загрузки контента, обеспечивая бесперебойную работу пользователей.

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

Эта статья написана Chayan.