Сокращение размера полезной нагрузки JavaScript за счет разделения кода

Nov 5, 2018

Available in: English, Español, Português, 中文, 日本語, and 한국어

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

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

Мера #

Если на загрузку всего JavaScript-кода на странице тратится слишком много времени, проверка в Lighthouse завершается неудачей.

Неудачно завершившаяся проверка в Lighthouse, показывающая, что на загрузку скриптов тратится слишком много времени.

Разбейте бандл 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, предоставляют абстракции для упрощения отложенной загрузки без необходимости настраивать ее вручную.

Последнее обновление

Nov 5, 2018 — Улучшить статью

Return to all articles