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

bookmark_border Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Houssein Djirdeh

Jeremy Wagner

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

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

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

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

Когда дело доходит до Core Web Vitals , сокращение полезных нагрузок JavaScript, загружаемых при запуске, будет способствовать улучшению времени Interaction to Next Paint (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 может помочь вам сделать это.

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