Проблемы с кешированием активов в приложении Angular - PullRequest
Новая
       13

Проблемы с кешированием активов в приложении Angular

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

У меня есть приложение Angular 8, для которого у меня возникли проблемы с кешированием во время развертывания новых выпусков. В основном я заметил, что при использовании ng build --prod опция outputHashing установлена ​​на all в моем angular.json. Следовательно, все файлы, сгенерированные ng build, имеют в своих именах содержимое ha sh, что хорошо по двум причинам:

  1. браузер может безопасно долгое время кэшировать файлы моего приложения (если содержимое файла изменяется в новом выпуске, изменяется имя и, следовательно, файл перезагружается всеми клиентами)
  2. если файл не изменяется от одного выпуска к другому, он не будет повторно загружен

(примечание: index. html никогда не кэшируется)

Это кажется довольно эффективным.

Проблема в том, что не все файлы имеют этот кеш перебор имя. Файлы, объявленные как активы в angular.json, просто копируются «как есть» во время сборки. Поэтому, если я выпущу новую версию своего приложения, у меня нет никакой гарантии, что клиенты будут использовать последние версии ресурсов.

Эти ресурсы включают JSON файлы перевода (используются ngx-translate) , изображения (указанные непосредственно в шаблонах приложения), а также другие вещи.

Я много читал об этом в Stack Overflow и GitHub, но не нашел подходящего решения.

Я попытался использовать @angular-builders/custom-webpack:browser с настраиваемой конфигурацией Webpack, которая использует html-loader и file-loader для переименования файлов, а также каждой ссылки на них в исходном коде, но это, похоже, не сработало.

Возможно ли иметь имена очистки кеша для файлов ресурсов в приложении Angular? Если да, то какой подход рекомендуется и как он работает?

1 Ответ

0 голосов
/ 05 мая 2020
  1. Вы правы, в активах не дается га sh.
  2. И еще один заметный недостаток производительности заключается в том, что они добавляют свой собственный тег скрипта в index. html. Пакеты, которые создаются из основного свойства в параметрах построителя, зависят от этого сценария. Так что, если по какой-то причине этот скрипт задерживается (например, его большой актив), то весь bootstrap задерживается! И, может быть, этот сценарий ассета мог бы принести ленивый, если bootstrap не зависит от него?

Мне любопытно, почему это не сработало для вас:

Я пробовал использовать браузер @ angular -builders / custom-webpack: с настраиваемой конфигурацией Webpack, которая использует html -loader и file-loader для переименования файлов, а также каждой ссылки на них в исходном коде но это, похоже, не сработало.

Я буду счастлив взглянуть на это в другом вопросе. Это наш подход.

...