如何获取平均大小的Web应用程序

Question

我有一个平均大小的网络应用程序，其中包含构成前端部分的HTML，CSS，png和Javascript文件。我正在使用服务工作者来添加我的应用程序在不在线时工作的能力。我必须向服务工作者提供缓存所需文件的列表，但我不知道如何告诉我实际需要哪些文件。当您使用npm安装软件包时，您还会获得一些您不需要的东西，因此我无法缓存所有内容。

我知道浏览器调试窗口的网络选项卡显示实际正在加载的内容，但这太繁琐了。有什么方法可以自动化吗？

谢谢！

Blake McBride

Answer 1

你会遇到五个令人头疼的问题：

1. 并非所有浏览器都完全支持服务工作者和缓存
2. 服务工作者和缓存项目版本控制可能很痛苦（例如：如果v2从v1删除项目，v1用户在v3上重新联机，不再有删除，...）
3. 缓存大小有浏览器限制
4. 当其他应用/网站使用大量存储时，浏览器有时会清除缓存
5. 正如您所确定的那样，您需要一个明确且易于管理的列表

虽然这不能回答您的明确问题，但有一个建议可能会限制您的痛苦，即：在将文件添加到服务工作者缓存之前，设置cache-control和expires标头并构建如果您的用户在离线时遇到缓存未命中，则逻辑会失败 - 请参阅Cache-Control。

设置缓存控件后，从浏览器的开发工具中的网络选项卡中，您将看到从设备缓存加载的资源的不同状态代码，这是您的开始列表缓存。

从那里，您可以在控制台中执行以下操作，以利用Performance API生成文件列表

window.performance
  .getEntriesByType("resource")
  .forEach( (resource) => console.log( resource.name ) );

Answer 2

我发现如果您右键单击Chrome浏览器调试窗口的“网络”标签的内容，则可以选择“另存为内容为HAR”。这将保存显示所有已加载资源的XML文件。然后做：

grep '"url":' xxx.xxx.xxx.xxx.har

您将获得完整的资源列表。