Код-Расщепление

Пакетирование

Большинство приложений React будут «связывать» свои файлы с помощью таких инструментов, как Webpack или Browserify. Связывание - это процесс отслеживания импортированных файлов и объединения их в один файл: «комплект». Затем этот пакет можно включить на веб-страницу, чтобы загрузить сразу все приложение.

пример

Приложение:

// app.js
import { add } from './math.js';
console.log(add(16, 26)); // 42
// math.js
export function add(a, b) {
  return a + b;
}

Bundle:

function add(a, b) {
  return a + b;
}
console.log(add(16, 26)); // 42

Замечания:

Ваши связки могут в конечном итоге выглядеть совсем иначе.

Такие инструменты, как Create React App, Next.js, Gatsby, уже имеют готовую настройку Webpack для комплектации вашего приложения.

Разделение кода

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

Чтобы избежать попадания в большой пакет, хорошо бы опередить проблему и начать «расщеплять» свой пакет. Разделение кода - это функция, поддерживаемая такими пакетами, как Webpack и Browserify (посредством factor-bundle), которые могут создавать несколько пакетов, которые можно динамически загружать во время выполнения.

Разделение кода вашего приложения может помочь вам «лениво загрузить» только то, что в данный момент требуется пользователю, что может значительно повысить производительность вашего приложения. Хотя вы не сократили общий объем кода в своем приложении, вы избежали загрузки кода, который может никогда не потребоваться пользователю, и сократили объем кода, необходимый при первоначальной загрузке.

Импортировать()

Лучший способ внедрить разделение кода в ваше приложение - через динамический синтаксис import ().

До:

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

После:

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

Замечания:

Синтаксис динамического импорта () - это предложение ECMAScript (JavaScript), которое в настоящее время не является частью языкового стандарта. Ожидается, что будет принято в будущем.

Когда Webpack сталкивается с этим синтаксисом, он автоматически начинает разделять код вашего приложения. Если вы используете приложение Create React, оно уже настроено для вас, и вы можете сразу начать его использовать. Это также поддерживается из коробки в Next.js.

React.lazy

Замечания:

React.lazy и Suspense пока недоступны для рендеринга на стороне сервера. Если вы хотите выполнить разбиение кода в приложении, отображаемом на сервере, мы рекомендуем Загружаемые компоненты. У этого есть хорошее руководство для разделения пакета с рендерингом на стороне сервера.

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

До:

import OtherComponent from './OtherComponent';
function MyComponent() {
  return (
   <div>
      <OtherComponent />
    </div>
  );
}

После:

const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
  return (
   <div>
      <OtherComponent />
    </div>
  );
}

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

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