Разделение кода в Next JS

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

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

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

Разделение кода дает много преимуществ:

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

Как импортировать компонент?

// для экспорта по умолчанию
import AppComponent from ‘./AppComponent’;

// для именованного экспорта
import { OtherComponent } from './AppComponent';

Как выполнить динамический импорт в React?

import React from 'react';

// для экспорта по умолчанию
const DynamicComponent = React.lazy(() => import('./AppComponent'));

React.lazy пока поддерживает только экспорт по умолчанию. Если модуль, который нужно импортировать, использует именованные экспорты, создайте промежуточный модуль, и он проведет реэкспорт по умолчанию.

Как выполнить динамический импорт в Next js?

import dynamic from 'next/dynamic';

// для экспорта по умолчанию
const DynamicComponent = dynamic(() => import('../AppComponent'));

// для именованного экспорта
const DynamicComponent = dynamic(() => import('../AppComponent').then((AppComponent) => AppComponent.OtherComponent));

Модуль next/dynamic реализует ленивую загрузку импорта компонентов React и является расширением React.lazy .

Что показывать пользователю между импортом компонента и его отображением?

Если вы работаете с последней версией React.js, то можно использовать suspense:

import { Suspense } from 'react';
import dynamic from 'next/dynamic';

import Loader from './Loader';

const DynamicComponent = dynamic(() => import('../AppComponent'), { suspense: true });

export default function App() {
  return (
    <Suspense fallback={<Loader />}>
      <DynamicComponent />
    </Suspense>
  )
}

Просто установите значение атрибута suspense как true. Страница сначала отобразит fallback Suspense, а затем, когда граница Suspense будет разрешена,  —  DynamicComponent.

При работе на более старой версии React.js можно использовать атрибут loading.

const AppComponent = dynamic(() => import('../AppComponent'),{
  loading: () => <Loader />,
})

Для рендеринга компонентов на стороне клиента можно отключить рендеринг на стороне сервера (SSR) для компонентов, которые не требуют усиленного взаимодействия с пользователем или имеют внешние зависимости. Для рендеринга на стороне клиента значение атрибута ssr можно установить как false.

const AppComponent = dynamic(() => import('../AppComponent'),{
  ssr: false,
})

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

const dayjs = (await import("dayjs")).default;

CodeSandbox

Заключение

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

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

Читайте также:

• Nexus  —  новый визуализатор дерева компонентов для Next.js
• Как создать NFT-маркетплейс с полным стеком
• Обзор текущего состояния Next.js Router

Читайте нас в Telegram, VK и Дзен

---

Перевод статьи Jayesh bhade: Code Splitting in Next Js