Angular: установка maxAge для файлов статического содержимого - PullRequest
Новая
       12

Angular: установка maxAge для файлов статического содержимого

1 голос
/ 19 марта 2019

My Lighthouse Report предлагает мне «обслуживать активы с помощью эффективной политики кэширования».Моя проблема в том, что моим файлам runtime.xxx.js, polyfills.xxx.js, main.xxx.js и styles.xxx.js требуется более длительное время жизни кэша, чем 1 час.Можно ли добиться более длительного срока действия кэша для этих файлов с помощью Service Worker?Если так, то как?

Я использую ServiceWorker, который использует файл ngsw-config.

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html"
        ],
        "versionedFiles": [
          "/*.bundle.css",
          "/*.bundle.js",
          "*.js",
          "/*.chunk.js"
        ]
      },
      "cacheConfig": {
        "maxSize": 100,
        "maxAge": "86400",
        "strategy": "performance"
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**"
        ]
      }
    }
  ]
}

Когда я использую Google Chrome DevTools и перехожу в автономный режим, мое приложение по-прежнему отображается.Вкладка «Сеть» показывает, что мой styles.xxx.css - «(из Service Worker)», а мои runtime.xxx.js, polyfills.xxx.js и main.xxx.js - «(из кэша памяти)».Когда я нажимаю на runtime.xxx.js, элемент управления кэшем вкладки Headers имеет значение max-age = 3600.(Возможно, настройка заголовка по умолчанию переопределяет мой Service Worker.)

Я включил информацию на вкладке Chrome Dev Tools Network, когда приложение находится в автономном режиме.И мои файлы находятся в dist / maldonado-a /.Например, dist / maldonado-a / polyfills.xxx.js.

enter image description here

enter image description here

Пожалуйста, напишите мне, если вам нужна дополнительная информация.Спасибо.

1 Ответ

1 голос
/ 26 марта 2019

Я думаю, что существует небольшая путаница между кэшированием, выполняемым работником службы, и тем, что сообщает Lighthouse.

Параметр cache равен ngsw-config.config и указывает, как долго Service Service должен сохранять файл в кэше (для автономного использования), прежде чем снова запрашивать его с сервера.

Lighthouse ссылается на заголовок кэша HTTP, который, по его словам, является слишком низким. Таким образом, из документов Lighthouse вы должны установить заголовок на: 

Cache-Control: max-age=31536000

Теперь это вне сферы Angular ... это ответственность вашего HTTP-сервера. Как это настроить, зависит от того, что вы используете: IIS, Apache и т. Д.

Один из вариантов, который следует рассмотреть с помощью SPA (одностраничных приложений), таких как Angular, заключается в том, что, если вы поместите их в CDN, вы получите отличное кэширование (и отличную оценку Lighthouse!).

Посмотрите на Azure CDN или Google CDN ... возможно, есть и один из AWS.

...