如何增加角度6中的js和CSS文件的缓存寿命？

Question

我一直在尝试使用灯塔报告来优化我的网页。

性能诊断工具之一说，可以增加我的静态文件的缓存寿命。

在报告中所指出的文件是main.js，polyfills.js，runtime.js和styles.css。据我了解，这些是我网页的主要内容。我当时在考虑使用角度服务工作者增加缓存。但是我找不到任何办法。

我发现增加缓存时间最接近的是角度服务工作者数据组。数据组支持缓存配置。

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

但我不知道如何对AssetGroups执行相同操作。据我了解，js和css文件属于AssetGroups。

这是灯塔报告屏幕截图。

我正在工作的网页是margvel.com，我在github上有代码。

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

如何延长这些文件的缓存寿命？

Answer 1

您需要向浏览器传达这样的信息：它可以缓存收到的静态文件，并从浏览器缓存中返回它们，而不是重新访问服务器以进行后续请求，除非满足某些条件。传达这一点的方式是通过发送某些响应 http 标头以及服务器发送到浏览器的可缓存文件。缓存控制标头就是您在本例中要查找的标头。由于您正在使用 Firebase 托管，因此您需要对其进行配置，以便当 Firebase 为您的文件提供服务时，它将发送您需要的标头以及相关文件。请参阅此内容并将缓存控制标头添加到项目中的 firebase.json 文件中，根据您的喜好或用例配置标头的指令。

参考此示例来设置sources字段，参考此示例来设置cache-control指令。