Современные веб-приложения теперь рассматриваются как наборы модулей, взаимодействующих друг с другом для создания функций/функций. Объединение – это процесс объединения кода в один "пакет" (например, скрипт/файл) для доставки пользователю.

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

Пример объединения кода (до разделения кода):

Необработанный код:

// /pages/Index.js import { add } from '../components/math.js' console.log(add(15, 15)); // 30 // /components/math.js export function add(a, b) { return a + b; }

Связанный код:

function add(a, b) { return a + b; } console.log(add(15, 15)); // 30

Как видите, объединение — это процесс объединения импортированных файлов/"модулей" в один "пакет". Хотя это здорово, это может привести к длительной загрузке, поскольку ваше приложение увеличивается в размере с добавлением страниц и функций.

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

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

Одна вещь, которая делает Гэтсби мощным, заключается в том, что он делает это для вас. Gatsby автоматически и разумно разделяет код на пакеты при запуске gatsby build. Однако делает это определенным образом. Например:

Представьте, что на вашем веб-сайте есть две страницы: целевая страница и страница контактов. Каждая страница имеет 2 уникальных компонента; всего 4:

— Целевая страница

  • Hero.js (компонент)
  • Services.js (компонент)

— Контактная страница

  • ContactInfo.js (компонент)
  • ContactForm.js (компонент)

В традиционном приложении React пользователь, посетивший целевую страницу, загрузит пакет, содержащий все компоненты — Hero, Services, ContactInfo и ContactForm — несмотря на то, что для правильного отображения нужны только компоненты Hero и Services. целевая страница.

Умножьте это, скажем, на 10 страниц, и у вас есть проблема — вы обслуживаете 10 МБ полезной нагрузки для страницы размером 1 МБ.

Вот как Гэтсби подходит к разделению кода: постранично.

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

Итак… решение?

Компоненты разделения кода вместо страниц

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

Команда React создала React.lazy и Suspense для реализации этого, но, к сожалению, ни один из них не совместим с рендерингом на стороне сервера/Gatsby.

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

Прочитайте полный пост: https://snappywebdesign.net/blog/gatsby-code-splitting

Первоначально опубликовано на https://snappywebdesign.net.