Уменьшите полезную нагрузку JavaScript с помощью разделения кода

Houssein Djirdeh

Jeremy Wagner

Никто не любит ждать. Более 50% пользователей покидают веб-сайт, если его загрузка занимает более 3 секунд .

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

Почему разделение кода выгодно?

Разделение кода — это метод, направленный на минимизацию времени запуска. Когда мы запускаем приложение с меньшим количеством JavaScript-кода, мы можем ускорить интерактивность приложений, минимизируя нагрузку на основной поток в этот критически важный период.

Что касается основных параметров веб-приложения (Core Web Vitals ), то сокращение объема загружаемого при запуске JavaScript-кода способствует улучшению времени отрисовки до следующего кадра (Interaction to Next Paint, INP) . Причина в том, что, освобождая основной поток, приложение может быстрее реагировать на ввод пользователя за счет снижения затрат на синтаксический анализ, компиляцию и выполнение JavaScript-кода при запуске.

В зависимости от архитектуры вашего веб-сайта — особенно если он в значительной степени полагается на рендеринг на стороне клиента — уменьшение размера JavaScript-кода, отвечающего за рендеринг разметки, может привести к улучшению времени Largest Contentful Paint (LCP) . Это может произойти, когда ресурс LCP обнаруживается браузером с задержкой до завершения рендеринга разметки на стороне клиента, или когда основной поток слишком занят для рендеринга этого элемента LCP . Оба сценария могут задерживать время LCP для страницы.

Мера

Lighthouse выдает сообщение о неудачной проверке, если выполнение всего JavaScript-кода на странице занимает значительное количество времени.

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

Популярные сборщики модулей, такие как webpack , Parcel и Rollup, позволяют разделять ваши пакеты с помощью динамического импорта . Например, рассмотрим следующий фрагмент кода, демонстрирующий пример метода someFunction , который срабатывает при отправке формы.

import moduleA from "library";

form.addEventListener("submit", e => {
  e.preventDefault();
  someFunction();
});

const someFunction = () => {
  // uses moduleA
}

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

form.addEventListener("submit", e => {
  e.preventDefault();
  import('library.moduleA')
    .then(module => module.default) // using the default export
    .then(() => someFunction())
    .catch(handleError());
});

const someFunction = () => {
    // uses moduleA
}

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

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

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