webpack - 在工作箱中预缓存文件有什么意义？

Question

所以我正在读这个:

https://developers.google.com/web/tools/workbox/guides/precache-files/

它是这样说的:

Precaching a file will ensure that a file is downloaded and cached before a 
service worker is installed, meaning that if your service worker is installed, 
your files will be cached.

例子中描述了service worker会下载3个文件，也就是指定的3个文件。

鉴于我正在使用 webpack 插件，并且我的 precache-manifest 文件包含所有我捆绑的 .js 文件，这是否意味着当我第一次访问该网站时，我下载几乎所有东西？ (这不会使 Workbox 的实现对 PWA 无用吗？)

拥有一个需要通过版本控制跟踪所有 .js 文件的文件有什么意义？

我还检查了控制台，在“网络”选项卡中，浏览器似乎没有下载所有内容，所以我不确定仅加载所需内容的应用程序与 list 之间的链接(或缺少链接)文件引用了几乎所有内容。

Answer 1

您正确理解了预缓存的意义。

如果您的 webpack 构建包含许多大多数用户不太可能需要的“可选”资源，那么修剪 Assets 列表以进行预缓存是个好主意。您不必预先缓存所有内容。

您可以在插件配置中使用 include/exclude 选项来设置白名单/黑名单 Assets 文件名模式，以及 includeChunks/ excludeChunks 将整个 block 列入白/黑名单。还有更多详情in the docs .