Статьи

Объединение файлов и HTTP / 2: переосмысление передового опыта

Это редакционная статья нашего последнего JavaScript-бюллетеня, подпишитесь здесь

Почти все приложения JavaScript в наши дни будут использовать процесс сборки. Даже если вы не переходите от ES2015 или TypeScript, выполнение каких-либо процессов объединения и минимизации вашего кода стало стандартной практикой. Причина этого заключается в том, что выполнение HTTP-запроса сопряжено с большими издержками. Предоставление меньшего количества больших файлов работает более эффективно, чем многие меньшие. С принятием следующей версии основного протокола Интернета, HTTP / 2 , возможно, пришло время переосмыслить лучшие практики.

HTTP / 2 основан на протоколе SPDY от Google, который был разработан для улучшения задержки загрузки страницы и повышения безопасности по сравнению с существующим стандартом HTTP 1.1. Работа над новым протоколом началась в 2012 году, причем первой версией разработки была прямая копия SPDY. Окончательный вариант стандарта был опубликован в мае 2015 года, а в мае этого года Google объявил, что больше не будет поддерживать SPDY в Chrome.

Чем HTTP / 2 отличается от своего предшественника? Одним из основных отличий является то, что HTTP / 2 — это двоичный протокол, а не текстовый. Это позволяет ему быть более компактным, эффективным для анализа и менее подверженным ошибкам. Одним из ключевых преимуществ протокола является то, что он мультиплексирован, что означает, что несколько файлов могут быть переданы по одному соединению. Еще одна рекламируемая функция — Server Push, которая позволяет серверу передавать ресурсы клиенту до их запроса, предварительно заполнив кэш.

Поддержка нового протокола довольно хорошая , включая все основные браузеры. Серверная часть, Apache2, Nginx и Microsoft IIS все поддерживают его, наряду с Node.js версии 5.0 и выше. Большинство поставщиков браузеров заявили, что они будут поддерживать HTTP / 2 только по соединениям TLS, хотя с появлением Let’s Encrypt, предоставляющего бесплатные SSL-сертификаты, это простое требование. Согласно данным, собранным W3Techs в июне этого года, около 8,4% из первых 10 миллионов веб-сайтов теперь поддерживают новый протокол. Если вы являетесь пользователем Chrome, вы можете использовать расширение индикатора HTTP / 2 и SPDY, чтобы сразу увидеть, какие сайты вы посещаете по HTTP / 2.

Что означает принятие HTTP / 2 для разработчиков JavaScript? Наша текущая практика объединения нескольких файлов в пакеты затрудняет эффективную кеширование нашего браузера браузером: изменение одной строки кода в одном модуле требует повторной загрузки всего связанного файла. Поскольку мультиплексирование HTTP / 2 делает запросы относительно недорогими, мы можем разделить наш код на более мелкие пакеты и лучше использовать кэширование, чтобы наши приложения эффективно использовали пропускную способность пользователей.

Но если запросы дешевые, конечно, мы должны просто отказаться от пакетирования в целом? На первый взгляд, это имеет смысл, но стоимость HTTP-запросов — не единственный фактор, который следует учитывать. Веб-серверы также имеют ограничения на то, насколько эффективно они могут обслуживать большое количество файлов. Поскольку сообщество JavaScript движется к распространению более мелких, более сфокусированных модулей, передача этих файлов клиенту без какого-либо связывания будет далеко не идеальной. Кроме того, объединение файлов обеспечивает лучшее сжатие и экономит пропускную способность.

Итак, когда вы должны подумать о переходе на HTTP / 2? Ответ, это зависит. Хотя поддержка браузера очень хорошая, если ваша целевая аудитория по-прежнему застряла на более старых версиях IE, вам не повезло, поэтому проверьте статистику посещений, чтобы убедиться, что это то, что может принести пользу большинству ваших пользователей. От всего этого я убеждаю то, что поддержка и принятие нового протокола на удивление далеко продвинулись, и, как разработчики, мы не можем игнорировать эту тенденцию.

Какую стратегию комплектации вы используете? Вы думаете о переходе на HTTP / 2, или, может быть, у вас уже есть? Дай мне знать в комментариях!