Один большой бандл для всего или много маленьких модулей лучше грузить на сайт?

Раньше, во времена HTTP1, что бы уменьшить количество запросов придумали собирать весь css и js в один файл. На сколько я знаю, дела обстояли следующим образом. Сами сайты были маленькие, задержки на соединение с сервером на каждый файл по отдельность были значительнее, чем время загрузки одного бандла, пусть и со всем содержимым (и тем, чего нет на странице).

Появился HTTP2.
Время идет, а привычки остались.
HTTP2 открывает 1 соединение с сервером и в теории ему не важно количество файлов. С http2 браузер все файлы получает в одном потоке.

И все же, что же лучше?
1. Собирать весь фронт в 2 файла: style.css и script.js, и грузить из на всех страницах.
2. Разделить все на кучу мелких компонентов, и грузить только то, что есть на странице.

Есть ли какие либо иследования, замеры в это области?
Кто-что скажет из личного опыта?
  • Вопрос задан
  • 433 просмотра
Решения вопроса 1
alexey-m-ukolov
@alexey-m-ukolov Куратор тега Веб-разработка
Я на эту тему делал доклад: https://www.youtube.com/watch?v=rQDd5kCwDj8
Там есть и личный опыт и ссылки на исследования.
Правда, с 2016-го что-то могло поменяться, но я, честно говоря, сомневаюсь.

Если резюмировать ответ на вопрос: лучше всего собирать две версии - для HTTP/1 и для HTTP/2 и отдавать клиенту то, во что он умеет.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Не стоит в 2к20 ориентироваться на старые системы. Если у клиента нет поддержки http2, то ему в принципе нет большой разницы, быстро или медленно, иначе он бы уже обновился.

Я исповедую подход к разбиению главных чанков по страницам. Вебпак это хорошо умеет, для React есть loadable components. Идти по пути ютуба и запихивать нужный функционал в чанки я лично не советовал бы, потому что это очень раздражает: страница вроде бы и загрузилась, хочешь нажать на лайк или промотать, а логика еще не готова и ничего не работает.
Ответ написан
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
И все же, что же лучше?
1. Собирать весь фронт в 2 файла: style.css и script.js, и грузить из на всех страницах.
2. Разделить все на кучу мелких компонентов, и грузить только то, что есть на странице.
Не хватает ещё одного пункта:
3. Грузить то, что требуется в данный момент.

Начинаем с того, что уже упомянул Алексей Уколов:
Если резюмировать ответ на вопрос: лучше всего собирать две версии - для HTTP/1 и для HTTP/2 и отдавать клиенту то, во что он умеет.

И затем, пункт 3.
Я создал includeHTML, который может сразу загрузить всё параллельно (скрипты, ноды, стили) или же "подтянуть" нужные ресурсы в нужное время по любым событиям. Это удобно, когда нужно экономить ресурсы клиентского устройства и полосу пропускания: мобильные устройства.
Поскольку синхронность/асинхронность полностью регулируется, приоритетами при запросах ресурсов мы можем сами управлять на уровне искусственного стека/очереди с помощью JS-кода.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы