Skip to content
О сайте Блог Обучение Исследовать узоры Case studies
Содержание
  • Мера

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

Nov 5, 2018
Available in: English, Español, Português, 中文, 日本語 и 한국어
Appears in: Ускорение загрузки
Houssein Djirdeh
Houssein Djirdeh
TwitterGitHubGlitchHomepage
Содержание
  • Мера

Никто не любит долго ждать. Более 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 — Улучшить статью
Codelabs

See it in action

Learn more and put this guide into action.

  • Reduce JavaScript payloads with code splitting
Return to all articles
Поделиться
подписаться

Contribute

  • Сообщить об ошибке
  • Просмотреть исходный код

Дополнительная информация

  • developer.chrome.com
  • Новости Chrome
  • Разборы конкретных случаев
  • Подкасты
  • Шоу

Соцсети

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Все продукты
  • Условия и конфиденциальность
  • Правила сообщества

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.