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

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

Пример:

App

// 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 , Next.js , Gatsby или аналогичный инструмент, у вас будет установка Webpack из коробки, чтобы связать ваше приложение. Если вы этого не сделаете, вам нужно будет настроить соединение. Например, см. Руководства по установке и началу работы в документах Webpack.

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

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

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

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

import()

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

До:

import { add } from './math';

console.log(add(16, 26));

После:

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

Заметка:

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

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

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

При использовании Babel вам нужно убедиться, что Babel может анализировать динамический синтаксис импорта, но не преобразовывает его. Для этого вам понадобится babel-plugin-syntax-dynamic-import .

Библиотеки

React Loadable

React Loadable обертывает динамический импорт в приятный API, совместимый с реакцией, для введения кода в ваше приложение в данном компоненте.

До:

import OtherComponent from './OtherComponent';

const MyComponent = () => (
  <OtherComponent/>
);

После:

import Loadable from 'react-loadable';

const LoadableOtherComponent = Loadable({
  loader: () => import('./OtherComponent'),
  loading: () => <div>Loading...</div>,
});

const MyComponent = () => (
  <LoadableOtherComponent/>
);

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

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

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

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

Вот пример того, как настроить разбиение на основе маршрута на ваше приложение, используя библиотеки, такие как React Router и React Loadable .

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Loadable from 'react-loadable';

const Loading = () => <div>Loading...</div>;

const Home = Loadable({
  loader: () => import('./routes/Home'),
  loading: Loading,
});

const About = Loadable({
  loader: () => import('./routes/About'),
  loading: Loading,
});

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