如何增加 Angular 6 中 js 和 css 文件的缓存寿命？

Question

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

其中一项性能诊断表明要增加我的静态文件的缓存寿命。

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

我发现最接近增加缓存时间的是 Angular Service Worker 数据组。数据组支持缓存配置。

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

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

这是灯塔报告截图。

我正在使用的网页是 margvel.com 我在github 上有代码。

我也在使用 firebase 进行托管。我有，或者我可以更改 firebase 上的缓存策略吗？

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

Answer 1

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

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