如何在Angular 6中增加JS和CSS文件的缓存寿命？

Question

我一直在尝试使用Lighthouse报告来优化我的网页。其中一个性能诊断建议增加静态文件的缓存生命周期。报告中指出的文件是main.js、polyfills.js、runtime.js和styles.css。据我所知，这些是我的网页的主要组成部分。我想使用Angular Service Worker来增加缓存，但我找不到任何方法来实现。我找到的与增加缓存时间最接近的东西是Angular Service Worker数据组。数据组支持缓存配置。

cacheConfig: {
    maxSize: number;
    maxAge: string;
    timeout?: string;
    strategy?: 'freshness' | 'performance';
  };

但我不知道如何为AssetGroups做同样的事情。据我了解，js和css文件属于AssetGroups。

这是lighthouse报告的截图。

我的网页是margvel.com，我正在编写代码并将其放在github上。

我还使用firebase进行托管。我是否拥有或可以更改firebase的缓存策略？

如何增加这些文件的缓存寿命？

- GreedyAi

Answer 1

您需要告诉浏览器它可以缓存已接收的静态文件，并从浏览器缓存中返回它们，而不是在后续请求中重新访问服务器，除非满足特定条件。您传达这一点的方式是通过发送某些响应http头与可缓存文件一起发送到浏览器。在这种情况下，您要寻找的是cache-control头。由于您正在使用Firebase托管，因此您需要配置它，以便当Firebase提供您的文件时，它将使用相关文件发送您所需的标头。请参考this并将cache-control头添加到您项目中的firebase.json文件中，将标头的指令配置为您喜欢的方式或用例。

以this为例设置源字段，以this为例设置缓存控制指令。

- jay