Разделение кода в React — все, что вам нужно знать

Глубокое погружение в разделение кода в React.

Многие фреймворки JavaScript объединяют все зависимости в один большой файл. Это упрощает добавление вашего JavaScript на HTML-страницу. Для пакета требуется только один тег ссылки, и для настройки страницы требуется меньше вызовов, поскольку весь JavaScript находится в одном месте.

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

Здесь вам может помочь разделение кода. Разделение кода позволяет стратегически исключать определенные зависимости из пакетов, а затем вставлять их только там, где они необходимы. Это означает, что они также не загружаются до тех пор, пока они не потребуются — загрузка JavaScript только тогда, когда это необходимо, ускоряет время загрузки страницы.

Как сделать разделение кода в React

Динамический импорт

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

До:

import { add } from './math';
console.log(add(16, 26));

После:

import("./math").then(math => {
  console.log(math.add(16, 26));
});

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

Использование React.lazy

Функция React.lazy позволяет отображать динамический импорт как обычный компонент.

До:

import MyComponent from './MyComponent';

После:

const MyComponent = React.lazy(() => import('./MyComponent'));

React.lazy принимает функцию, которая должна вызывать динамический import(). Это должно вернуть Promise, который разрешается в модуль с экспортом default, содержащим компонент React.

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

import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

function MainComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <MyComponent />
      </Suspense>
    </div>
  );
}

Свойство fallback принимает любые элементы React, которые вы хотите отобразить, ожидая загрузки компонента. Вы можете разместить компонент Suspense в любом месте над ленивым компонентом. Вы даже можете обернуть несколько ленивых компонентов одним компонентом Suspense.[ссылка]

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

import React, { Suspense } from 'react';
import MyErrorBoundary from './MyErrorBoundary';
const MyComponent = React.lazy(() => import('./MyComponent'));

function MainComponent() {
  return (
    <div>
      <MyErrorBoundary>
        <Suspense fallback={<div>Loading...</div>}>
          <MyComponent />
        </Suspense>
      </MyErrorBoundary>
    </div>
  );
}

Где реализовать разделение кода

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

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

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

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
      </Switch>
    </Suspense>
  </Router>
);

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

React также позволяет разделить код на компоненты, а не на необработанную функциональность. Функция React-loadable дает вам возможность создать настраиваемый загрузчик, который динамически импортирует фрагмент кода, необходимый только один раз. Обертывание динамического импорта в загрузчик предотвращает их включение в пакет загрузки страницы.

import Loadable from 'react-loadable';

function ProgressIndicator() {
  return <div>In Progress...</div>;
}

const LoaderContainerComponent = Loadable({
  loader: () => import('./loadable-another-component'),
  LoadingComponent: ProgressIndicator
});

class MyComponent extends React.Component {
  render() {
    return <LoaderContainerComponent/>;
  }
}

Теперь разделите свой код на части.

Дополнительная литература:

Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Получите эксклюзивный доступ к возможностям написания и советам в нашем сообществе Discord.