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

Ленивая загрузка (разделение кода) — это концепция, при которой мы загружаем некоторый фрагмент кода, когда он действительно нужен. В React мы можем добиться этого с помощью API React.lazy и динамического импорта для загрузки компонентов по требованию.

Ex.

LazilyLoadedComponent.js

import React from 'react';
function LazilyLoadedComponent() {
  return <div>Lazily loaded</div>
}
export default LazilyLoadedComponent

MyComponent.js

import React, { Suspense } from 'react';
export function MyComponent() {
  const [show, setShow] = useState(false);
  const LazilyLoadedCmp = React.lazy(
    () => import(‘./LazilyLoadedComponent’)
  )
  
  // Suspense is a component you use to show an intermediate
  // state (like a loading spinner) till the "lazily" loaded
  // component loads
  return (
      <label for="displayComponent">
        Should component be shown ?
      </label>
      <select onClick={loadComponent} onFocus={loadComponent}
        onChange={
          evt => setShow(evt.target.value === "yes")
        }>
        <option value="yes">Yes show the component</option>
        <option value="no">Do not show the component</option>
      </select>
      <Suspense fallback={<div>loading...</div>}>
        { show && <LazilyLoadedCmp/> }
      </Suspense>
  )
}

В приведенном выше коде, когда пользователь выбирает опцию «Да, показать компонент», LazilyLoadedCmp загружается лениво.

Как это работает, по сути, веб-пакет, в то время как объединение не будет включать код, соответствующий LazilyLoadedComponent в основной пакет, и создаст отдельный фрагмент (пакет JS), который будет загружен в браузере, когда значение состояния «показать» в коде станет истинный

Вышеприведенный код может быть дополнительно оптимизирован в некоторых случаях, когда загрузка пакета может быть выполнена, когда есть вероятность, что пользователь выполнит фактическое действие (в этом случае, выбрав «Да, показать компонент» из раскрывающегося списка), что приведет к в показе компонента.

В приведенном выше примере эта «возможность» может быть, когда пользователь либо щелкает элемент html «выбрать», либо фокусируется на нем. Таким образом, во время любого из этих двух событий мы могли бы загрузить пакет, добавив дополнительную логику (выделена жирным шрифтом) в коде ниже.

MyComponent.js с логикой загрузки Eager

import React, { Suspense } from 'react';
export function MyComponent() {
  const [show, setShow] = useState(false);
  const LazilyLoadedCmp = React.lazy(
    () => import(‘./LazilyLoadedComponent’)
  )
  const loadComponent = () => import(‘./LazilyLoadedComponent’)
  return (
      <label for="displayComponent">
        Should component be shown ?
      </label>
      <select 
        onClick={loadComponent} 
        onFocus={loadComponent}
        onChange={
          evt => setShow(evt.target.value === "yes")
        }>
        <option value="yes">Yes show the component</option>
        <option value="no">Do not show the component</option>
      </select>
      <Suspense fallback={<div>loading...</div>}>
        { show && <LazilyLoadedCmp/> }
      </Suspense>
  )
}

Здесь после выполнения import(‘./LazilyLoadedComponent’) пакет будет загружен, и соответствующее обещание, связанное с динамическим импортом, будет разрешено.

В будущем, если import(‘./LazilyLoadedComponent’) будет выполнен снова, то же разрешенное значение будет возвращено из кеша, а пакет не будет загружаться динамически снова. В результате, когда loadComponent выполняется в результате события click или focus, пакет будет загружен, а когда пользователь выберет параметр Да, показать компонент, пакет к тому времени уже будет загружено, и, таким образом, будет обработано разрешенное значение из кеша, что приведет к более быстрому отображению LazilyLoadedCmp в пользовательском интерфейсе.

Надеюсь, вы узнали что-то новое из этой статьи. Хорошего дня :)