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

Что предлагает Webpack как часть производительности?

  • Разделение кода
  • Динамическая загрузка
  • Волшебные комментарии
  • Предварительная загрузка и предварительная загрузка ресурсов

Я лично считаю, что если вы примените эти механизмы в своем приложении с умом, вы заметите резкое увеличение времени загрузки приложения.

Разделение кода

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

  • Разделение на поставщиков
  • Разделение точки входа
  • Динамическое разбиение


Уменьшение полезной нагрузки JavaScript с помощью разделения кода | Основы Интернета
Современные сайты часто содержат много кода JavaScript. Эти скрипты часто отправляются большими монолитными пакетами, которые… developers.google.com



однако в мире Webpack вы можете разбить код на асинхронные фрагменты и загрузить их во время сборки.

Асинхронная загрузка модулей и уменьшение TTFB

Если вы загружаете такие модули поверх своих страниц, вы фактически загружаете весь файл и методы.

// import parser utils 
import * from 'utils/parse-utils';

Этого можно избежать, загрузив модуль асинхронно, а TTFB любой страницы можно уменьшить.

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

Динамическая загрузка

Вы можете загружать файлы динамически. Например, если у вас есть разные темы или варианты тестирования AB для запуска, вы можете загрузить их, как показано в примере ниже.

Что происходит в серверной части?

Webpack создаст различные блоки, доступные в themes, а затем загрузит только необходимый файл; что напрямую влияет на TTFB (время до первого байта) и улучшает время страницы.

Волшебные комментарии

Это можно использовать для двух разных целей:

  1. Переопределить имена блоков, если хотите, они могут быть основаны на настройках вашей среды; По умолчанию все блоки, созданные в webpack, называются bundle.js до тех пор, пока вы не захотите использовать осмысленное имя для идентификации вашего файла. Вот как вы можете отменить один.
import(
  /* webpackChunkName: "my-chunk-name" */
  /* webpackMode: "lazy" */
  'myModule'
);

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

import loadTheme = (theme) => import(
   /* webpackMode: "lazy-once" */`themes/${theme}`
);

2. Предварительная загрузка и предварительная загрузка ресурсов по запросу.

Предварительная выборка

Предварительная выборка ссылок используется для предварительной выборки любого будущего ожидаемого ресурса до истечения срока, чтобы обеспечить удобство взаимодействия с пользователем. Его можно использовать с любыми типами ресурсов, включая CSS, изображения, HTML-файлы и т. Д.

Например, если вы создаете веб-сайт электронной коммерции и на домашней странице вы знаете свою аудиторию и предполагаете, что 90% клиентов попадут на страницу «Высшая категория» или «PSP / PLP», в этом случае вы уже загружаете следующую ожидаемую шаблон для удобного взаимодействия с конечным пользователем.

// prefetch next expected module
import(/* webpackPrefetch: true */ "ProductListPage")


Часто задаваемые вопросы о предварительной загрузке ссылок
Предварительная выборка ссылок - это механизм браузера, который использует время простоя браузера для загрузки или предварительной загрузки документов, которые… developer.mozilla.org



Предварительная загрузка

Предварительная загрузка помогает браузеру установить приоритет ресурса, сохранить его в кеше для будущего использования, а также установить CSP и любые заголовки запроса ресурса. С помощью статического веб-сайта вы можете выполнить предварительную загрузку с помощью следующих примеров:

<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">

В Webpack вы можете добиться того же, что и

// preload resources
import(/* webpackPreload: true */ "main")
import(/* webpackPreload: true */ "style")

Надеюсь, это помогло вам в изучении Webpack. Я реализовал большую часть этого в текущем проекте, чтобы обеспечить лучший пользовательский опыт и особенно помнить о людях, использующих сеть 3G. Удачного обучения !!