webpack & HTTP/2

внешний интерфейс HTTP Программа перевода самородков Webpack

webpack & HTTP/2

Начнем с анекдота про HTTP/2:

С HTTP/2 вам больше не нужно упаковывать модули.

HTTP/2 может быть мультиплексирован, и все модули могут использовать одно и то же соединение параллельно, поэтому несколько запросов больше не требуют дополнительных затрат на двусторонний обмен. Каждый модуль может кэшироваться независимо.

К сожалению, действительность неудовлетворительна.

предыдущая статья

В следующей статье подробно объясняется соответствующая информация и проводится несколько экспериментов для ее проверки. Вы можете прочитать их (или пропустить их и просто прочитать краткое содержание).

Forgo JS packaging? Not so fast Традиционный совет для веб-разработчиков — объединить файлы JavaScript, используемые их веб-страницами, в один или (максимум…engineering.khanacademy.org

The Right Way to Bundle Your Assets for Faster Sites over HTTP/2 Скорость всегда является приоритетом в веб-разработке.С введением HTTP/2 мы можем увеличить производительность для…medium.com

Тема статьи:

  • По сравнению со склеиванием в один файл, передача нескольких файлов по-прежнему имеетПротокол накладных расходов.
  • По сравнению с несколькими небольшими файлами метод одного файлакомпрессияболее дружелюбный.
  • По сравнению с обработкой одного большого файла,серверОбработка нескольких небольших файлов происходит медленнее.

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

Большее количество пакетов означает более высокую частоту попаданий в кэш, но это не очень хорошо для сжатия.

AggressiveSplittingPlugin

Webpack 2 предоставляет вам такие инструменты. Большинство внутренностей веб-пакета похожи на это, собирая набор модулей в куски и выводя файл. У нас также есть фаза оптимизации для изменения этих фрагментов, просто нужен плагин для этой оптимизации.

плагинAggressiveSplittingPluginРазделите исходные куски на более мелкие. Вы можете указать желаемый размер блока. Это улучшает кеширование, но плохо для сжатия (и времени передачи для HTTP/1).

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

Теперь у нас есть эффективное фрагментирование для HTTP/2.

Изменить приложение

Но это еще не конец. Когда приложение обновляется, мы хотим как можно больше повторно использовать ранее созданные блоки. Таким образом, каждый раз, когда AggressiveSplittingPlugin находит подходящий размер фрагмента (в пределах ограничения) и разделяет фрагментымодуль(модули) ихэш(хеш) сохранить вrecordsсередина.

Recordsнаходится во время компиляции веб-пакетастатус компиляцииconcept, доступ к которому можно получить через файл JSON.

когда снова звонятAggressiveSplittingPlugin, прежде чем пытаться отсоединить оставшиеся модули, он пытаетсяrecordsсерединавосстанавливатьсяКусок. Это гарантирует возможность повторного использования кэшированных блоков.

Начальная загрузка и сервер

Приложение, использующее этот метод, больше не выводит отдельный файл, содержащийся в файле HTML, вместо этого оно выводит несколько фрагментов, которые необходимо загрузить, и приложение может использовать несколько тегов сценария (параллельно) для загрузки каждого фрагмента. так:

<script src="1ea296932eacbe248905.js"></script>
<script src="0b3a074667143853404c.js"></script>
<script src="0dd8c061aff2a2791815.js"></script>
<script src="191b812fa5f7504151f7.js"></script>
<script src="08702f45497539ef6ea6.js"></script>
<script src="195c9326275620b0e9c2.js"></script>
<script src="19817b3a0378aedb2143.js"></script>
<script src="0e7a65e649387d773247.js"></script>
<script src="13167c9702de79d2f4fd.js"></script>
<script src="1154be40ff0e8dd16e9f.js"></script>
<script src="129ce3c198a25d9ace74.js"></script>
<script src="032d1fc9a213dfaf2c79.js"></script>
<script src="07df084bbafc95c1df47.js"></script>
<script src="15c45a570bb174ae448e.js"></script>
<script src="02099ada43bbf02a9f73.js"></script>
<script src="17bc99aaed6b9a23da78.js"></script>
<script src="02d127598b1c99dcd2d0.js"></script>

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

При запросе HTML-файлаHTTP/2 сервер pushЭти блоки могут быть переданы клиентам. Кроме того, поскольку более старые файлы с большей вероятностью будут кэшироваться, лучше сначала отправить самые новые файлы. Если кеш уже есть, клиент может отменить отправку с сервера, но для этого требуется двусторонний обмен.

webpack использует разделение кода длянагрузка по требованию, который может обрабатывать параллельные запросы.

В заключение

webpack 2 предоставляет инструменты для HTTP/2, улучшающие кэширование и транспортировку. Не беспокойтесь о том, что ваш технический стек не рассчитан на будущее.

УведомлениеAggressiveSplittingPluginвсе ещеЭкспериментальные свойства.

Мне очень интересен ваш опыт~

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,React,внешний интерфейс,задняя часть,товар,дизайнЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.

Категории