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

Хусейн Джирде

Джереми Вагнер

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

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

Почему разделение кода полезно?

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

Когда дело доходит до Core Web Vitals , сокращение полезной нагрузки JavaScript, загружаемой при запуске, будет способствовать улучшению времени задержки первого ввода (FID) и взаимодействия с следующей отрисовкой (INP) . Причина этого заключается в том, что, освобождая основной поток, приложение может быстрее реагировать на вводимые пользователем данные за счет сокращения затрат на анализ, компиляцию и выполнение JavaScript, связанных с запуском.

В зависимости от архитектуры вашего веб-сайта, особенно если ваш веб-сайт в значительной степени зависит от рендеринга на стороне клиента, уменьшение размера полезных данных JavaScript, отвечающих за рендеринг разметки, может привести к сокращению времени наибольшей отрисовки контента (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 может помочь вам в этом.

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