7

我一直在尝试使用lighthouse report优化我的网页。

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

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

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

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

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

这是灯塔报告的屏幕截图。

在此处输入图像描述

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

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

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

4

1 回答 1

0

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

参考这个例子来设置源字段，参考这个例子来设置缓存控制指令。

于 2021-12-28T07:05:06.170 回答