Нужен совет PWA относительно большого количества статических активов

Question

Я создаю образовательное приложение, которое имеет около 1100 SVG.Они очень маленькие на SVG, как 800 байтов.Я совершенно новичок в реагировании.

Для каждого SVG у меня есть аудио.

Поэтому

• 1100 svgs

• 1100 аудиоклипов

Я использую приложение create-Reaction-app.

Собираюсь использовать howlerJS для обеспечения кэширования аудиофайлов.

Также лениво загружать svgs.

Кеширует ли приложение create-реагировать приложение svgs?

Должен ли я изменить свой подход?Может быть, объединить svgs в спрайт ..

Должен ли я объединять mp3-файлы и воспроизводить части аудио по мере необходимости ..

Мое главное, чтобы аудио и svgs устанавливались при установке PWA пользователем.

Любые отзывы будут оценены

Answer 1

В вашей проблеме нет волшебной палочки, но вот несколько ключевых моментов, которые следует учитывать:

• У вас не займет много времени сделать запрос и получить ответ накаждую пару SVG / аудио, которую выбирает пользователь (по требованию, а не 1100 в целом).

• Не зная логику и UX вашего приложения, я могу экстраполировать загрузку 3 МБ SVG и 10 МБаудио будет более заметным, чем ожидание запроса / ответа по требованию размером 11 КБ.

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

• Кэшируйте все, что уже было загружено, чтобы избежать повторных запросов

• Попробуйте оптимизировать ваши источники в первую очередь, поскольку минимальные изменения в отдельном файле приведут к значительному влиянию на масштаб x1000.Хорошее место для начала - проверка вашей плавающей запятой в SVG: старайтесь избегать чего-то вроде <path d="M33.6286316,13.9605932... и делайте это настолько простым, насколько позволяет ваша точность.В большинстве случаев <path d="M33.62,13.96... сделает работу.