Правильно ли организовывать доставку frontend-а подобным образом?

Question

[Виктор Кулябин]

Собрал шаблон сборки проекта - репозиторий с подробным описанием

Краткое описание
Шаблон позволяет загружать на страницы только необходимые ресурсы. Достигается это путем разделения страницы на блоки (компоненты). Ресурсы загружаются на страницу посредством ajax запроса. Ответ кешируется в localStorage. При загрузке проверятся актуальность кеша.

Хотел бы узнать у сообщества:

1. Насколько правилен такой подход к доставке ресурсов?
   
2. Плюсы и минусы данного подхода?
   
3. Есть ли аналоги данного подхода?
   
4. Можно ли организовать тоже самое с помощью webpack-а?
   
5. Что можно улучшить?
   

Буду благодарен за конструктивную критику и развернутые ответы.
Заранее спасибо.

Comments

[forspamonly2]

кажется вы пытаетесь изобрести service worker

https://serviceworke.rs/strategy-cache-and-update_...

Answer 1

[Николай Шабалин]

Первая мысль. HTTP-запросы очень дорогие. У вас есть lazy-load, чтобы не загружать, например, футер на очень длинном сайте?

Как Вы инвалидируете кеш?

Смотрели ли вы в сторону нативных es6-модулей?

В целом, мне идея нравится, но так как нативные модули не прижились пока ещё, то и Вас походу проблемы с этим будут.

Comments

[Виктор Кулябин]

Как Вы инвалидируете кеш?

В json ответе приходит 2 значения. Тело ресурса и отдельно его хеш. Все это записывается в localStorage.
При следующей загрузке страницы, загружается все из кеша, но в тоже время делается запрос на сервер. Снова приходит тело и хэш. Сравниваем, если хеши разные то заменяем ресурс(css/js) на новый.

Смотрели ли вы в сторону нативных es6-модулей?

Еще нет, посмотрю.

HTTP-запросы очень дорогие.

Согласен. Но в любом случае они есть. Независимо от того каким образом подключены ресурсы. И я подумал почему бы не решить до запроса ресурсов, что именно нам необходимо.

[Николай Шабалин]

Виктор Кулябин, да, только в вашем случае вы на каждой странице отправляете все http-запросы, а в обычном сайте у нас все ресурсы кладутся в кеш к пользователю и http-запросов к таким ресурсам нет.
То есть при повторном обращение к сайту (f5) мы достаем ресурсы уже из кеша, а вы все равно делаете http-запрос, чтобы сравнить тело и хэш.

[Виктор Кулябин]

Николай Шабалин, да, но я думаю что скорость первой загрузки важнее, наличия фоновых запросов. А данное решение как раз загружает только нужные для данной страницы скрипты и стили. Я еще не проводил сравнительные тесты на каком то значимом сайте, но думаю выигрыш в скорости должен быть.

Фоновые запросы можно доработать, не передавать тело без необходимости.

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

Такие пляски может и не нужны, если используется цмс типа битрикса например, где все ресурсы итак должны быть раскиданы по компонентам, но возникает проблема неудобства поддержки. Хотелось бы иметь scss и js где то в отдельной директории, обрабатывать их gulp... А не лазить на 3-5 уровней по компонентам битрикса, особенно если это комплексные... Ищя нужный css чтобы поправить одно свойство. А в варианте выше все собрано в одном месте.
Что думаете по этому поводу?