Кеширование веб-страницы React / Meteor - PullRequest
0 голосов
/ 06 мая 2020

Я хочу ускорить начальную загрузку веб-страницы React / Meteor. Одна из нескольких идей - кэшировать данные. Так что еда такая хорошая ... Это пробовали с работниками сферы обслуживания. Это было возможно только для меня в папке «/ public /», но, кроме того, я хочу кэшировать данные, например, из. "/ client /" для кеширования дополнительных данных. Можно ли кэшировать больше данных из других папок?

Я сделал почти то же, что описано здесь в разделе «Шаг 1 - Добавление сервисного работника»: https://dev.to/jankapunkt/transform-any-meteor-app-into-a-pwa-4k44

ОБНОВЛЕНИЯ: мы используем эту веб-страницу только в intr anet без подключения inte rnet.

1 Ответ

0 голосов
/ 07 мая 2020

вещей с React и Meteor так не работают. Ожидается, что у него будет пакет размером до 1 МБ JS для доставки вашему клиенту. Приложение среднего размера должно иметь размер пакета в формате gzip 400-500 КБ.

Не используйте папку publi c для ресурсов, поместите все в CDN с краевым кешированием, например AWS Cloudfront (store в S3 и выставить через Cloudfront) или любое другое хранилище. В вашем CDN вы можете установить срок действия и контроль кеширования (max-age), и это используется клиентом (браузером) для кеширования ресурсов. Доставьте свои пакеты JS и CSS из CDN. Широко используйте код разделения (в идеале на уровне маршрутизации). По возможности используйте библиотеки asyn c для создания карт, игроков и c вместо NPM (который встроен в ваш комплект). В среде PWA вы будете кэшировать файлы пакетов, а не папку publi c. Учебник, которому вы следовали для PWA, неполон и бесполезен. Он только смотрит, как получить зеленый значок в ревизии, он ничего не делает.

Еще одна вещь, размер вашего пакета Meteor влияет на трафик c на вашем сервере Meteor. Вот почему вам лучше доставить пакет и все ресурсы из CDN. Дополнительное кэширование с помощью сервис-воркеров приводит только к мерцанию, несоответствию между вкладками и браузерами, ошибкам.

...