Загружайте только те файлы JavaScript, которые вам нужны, и тогда, когда они вам нужны.

Что такое разделение кода?

Разделение кода – это разделение кода на различные пакеты или компоненты, которые затем можно загружать по запросу или параллельно. ~ МДН

Основное преимущество разделения кода

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

Что вам нужно

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

Начало работы

Разделение кода относительно легко реализовать. Нам нужно только обновить наш роутер. Для начала я покажу приложение без включенного разделения кода. Основное внимание будет уделено маршрутизатору самого высокого уровня. Используемая библиотека маршрутизации не имеет значения.

После того, как я создам свое приложение, в моей папке dist будет один файл JavaScript, содержащий все мое приложение.

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

Включить Webpack AsyncChunkNames

Этот шаг необязателен, но полезен для отладки

Было бы хорошо иметь способ идентифицировать ваши новые файлы после их создания. webpack-async-chunk-names-plugin позволяет настроить имена ваших файлов.

Установить:

yarn add webpack-async-chunk-names-plugin -D

Внутри webpack.config.js:

// require the package
const AsyncChunkNames = require("webpack-async-chunk-names-plugin")

// add to your plugin array
plugins: [
  new AsyncChunkNames(),
]
// include a chunchunkFilename option inside output. This will get convered later.
output: {
  filename: "[name].[hash].js",
  chunkFilename: "[name].[hash].js", <--
  publicPath: "/",
}

Обновить маршрутизатор

Далее нам нужно обновить наш маршрутизатор, используя две функции React, Lazy и Suspense.

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

export default MyComponent

const Component = React.lazy(() => import(./path-to-component))

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

<Suspense fallback={<LinearProgress />}>
  <Component />
</Suspense>

Объединение этих двух функций — это то, как мы обеспечиваем разделение кода.

Возвращаясь к необязательной опции chunkFilename, которую мы добавили в нашу конфигурацию Webpack. вы можете добавить /* webpackChunkName: “name” */ в свой оператор ленивого импорта, чтобы дать вашим файлам имя, которое вы можете идентифицировать. Это хорошая функция, которая поможет с любыми ошибками, которые могут возникнуть позже.

Когда Webpack увидит эту конфигурацию, он все сделает за вас.

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

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

Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку здесь.