Create React App serviceworker 不包括生成的文件之一

Question

TLDR：似乎 Create React App 生成的块 js 文件之一没有包含在 serviceworker 中。

我认为我们有一个非常普通的 Create React App（版本 4.0.3）配置，并且启用了 serviceworker。当我进行构建时（使用 npm 运行构建），它会创建一个包含两个块文件的 build/static/js 文件夹：一个主块文件（即 main.9c46d9a1.chunk.js）和一个 2.* 块js 文件（即 2.ab51bb70.chunk.js）。在生成的 asset-manifest.json 文件中，它们是这样列出的：

"main.js": "./static/js/main.9c46d9a1.chunk.js",
"static/js/2.ab51bb70.chunk.js": "./static/js/2.ab51bb70.chunk.js",

我已经在服务-worker.ts 中添加了日志记录以旋转 self.__WB_MANIFEST 并从所有 PrecacheEntry 对象中打印出 URL。当我在浏览器中加载应用程序时，serviceWorker 被加载，并打印出：

WB_MANIFEST[0]: [object Object], ./index.html service-worker.js:1:54224
WB_MANIFEST[1]: [object Object], ./static/css/2.c01127d3.chunk.css service-worker.js:1:54224
WB_MANIFEST[2]: [object Object], ./static/css/main.f8831819.chunk.css service-worker.js:1:54224
WB_MANIFEST[3]: [object Object], ./static/js/main.9c46d9a1.chunk.js service-worker.js:1:54224
WB_MANIFEST[4]: [object Object], ./static/js/runtime-main.fbeb3cf7.js service-worker.js:1:54224
WB_MANIFEST[5]: [object Object], ./static/media/fa-brands-400.5a306647.svg service-worker.js:1:54224
WB_MANIFEST[6]: [object Object], ./static/media/fa-brands-400.64ed668a.woff2 service-worker.js:1:54224
WB_MANIFEST[7]: [object Object], ./static/media/fa-brands-400.a37daad3.woff service-worker.js:1:54224
WB_MANIFEST[8]: [object Object], ./static/media/fa-brands-400.ccef0bae.eot service-worker.js:1:54224
WB_MANIFEST[9]: [object Object], ./static/media/fa-brands-400.cd5546e6.ttf service-worker.js:1:54224
WB_MANIFEST[10]: [object Object], ./static/media/fa-duotone-900.0c96b470.svg service-worker.js:1:54224
WB_MANIFEST[11]: [object Object], ./static/media/fa-duotone-900.2314c0f5.woff2 service-worker.js:1:54224
WB_MANIFEST[12]: [object Object], ./static/media/fa-duotone-900.3fdb2223.eot service-worker.js:1:54224
WB_MANIFEST[13]: [object Object], ./static/media/fa-duotone-900.a0e65102.ttf service-worker.js:1:54224
WB_MANIFEST[14]: [object Object], ./static/media/fa-duotone-900.c94100ae.woff service-worker.js:1:54224
WB_MANIFEST[15]: [object Object], ./static/media/fa-light-300.006ea550.svg service-worker.js:1:54224
WB_MANIFEST[16]: [object Object], ./static/media/fa-light-300.1f49a99d.woff2 service-worker.js:1:54224
WB_MANIFEST[17]: [object Object], ./static/media/fa-light-300.6373bfef.ttf service-worker.js:1:54224
WB_MANIFEST[18]: [object Object], ./static/media/fa-light-300.c08a2df1.eot service-worker.js:1:54224
WB_MANIFEST[19]: [object Object], ./static/media/fa-light-300.e5757ebc.woff service-worker.js:1:54224
WB_MANIFEST[20]: [object Object], ./static/media/fa-regular-400.27f55d89.woff service-worker.js:1:54224
WB_MANIFEST[21]: [object Object], ./static/media/fa-regular-400.3a392f72.woff2 service-worker.js:1:54224
WB_MANIFEST[22]: [object Object], ./static/media/fa-regular-400.51f647b6.svg service-worker.js:1:54224
WB_MANIFEST[23]: [object Object], ./static/media/fa-regular-400.7088e010.ttf service-worker.js:1:54224
WB_MANIFEST[24]: [object Object], ./static/media/fa-regular-400.916bee0f.eot service-worker.js:1:54224
WB_MANIFEST[25]: [object Object], ./static/media/fa-solid-900.33d63de0.eot service-worker.js:1:54224
WB_MANIFEST[26]: [object Object], ./static/media/fa-solid-900.471ea344.woff2 service-worker.js:1:54224
WB_MANIFEST[27]: [object Object], ./static/media/fa-solid-900.b82704a9.svg service-worker.js:1:54224
WB_MANIFEST[28]: [object Object], ./static/media/fa-solid-900.c6787dfa.woff service-worker.js:1:54224
WB_MANIFEST[29]: [object Object], ./static/media/fa-solid-900.d0c4cb0e.ttf service-worker.js:1:54224
WB_MANIFEST[30]: [object Object], ./static/media/stateface-regular-webfont.338df6ef.ttf service-worker.js:1:54224
WB_MANIFEST[31]: [object Object], ./static/media/stateface-regular-webfont.8242df53.eot service-worker.js:1:54224
WB_MANIFEST[32]: [object Object], ./static/media/stateface-regular-webfont.ceeb3940.woff service-worker.js:1:54224
WB_MANIFEST[33]: [object Object], ./static/media/stateface-regular-webfont.fe14ecab.svg service-worker.js:1:54224
WB_MANIFEST[34]: [object Object], ./static/media/wb-btn.dd321b43.woff2 service-worker.js:1:54224
WB_MANIFEST[35]: [object Object], ./static/media/wb-btn.e81ff3cf.woff service-worker.js:1:54224
WB_MANIFEST[36]: [object Object], ./static/media/wb.3b7c6f3d.woff service-worker.js:1:54224
WB_MANIFEST[37]: [object Object], ./static/media/wb.92fe6c4c.ttf service-worker.js:1:54224
WB_MANIFEST[38]: [object Object], ./static/media/wb.e244f767.svg service-worker.js:1:54224
WB_MANIFEST[39]: [object Object], ./static/media/wb.ec198838.eot service-worker.js:1:54224

请注意，它不包含 2.* 块 js 文件。这导致发生的是：

当应用程序的版本 A 安装并在浏览器中加载它的 serviceworker 时，serviceworker 加载它的所有文件，并缓存 2.* 块 js 文件。如果我打开浏览器开发工具，转到网络选项卡，然后重新加载浏览器，我会看到主块 js 文件正在从 serviceworker 加载，而 2.* 块 js 文件正在从缓存中加载。

然后浏览器缓存（但不是 serviceworker）被清除或过期，然后浏览器关闭。
稍后会安装应用程序的新版本 B，因此版本 A 中的文件不再位于服务器上。
之后的某个时间，应用程序会在浏览器中打开。旧版本的 serviceworker（来自应用程序的版本 A）被加载，并去寻找旧版本 2.* 块文件。它找不到它（因为它不在 serviceworker 中，并且不再在服务器上，并且浏览器缓存有 cleared/expired）。该应用程序未加载，而是出现空白屏幕。 serviceworker 确实看到有新版本可用并将其注册为“下一个”serviceworker，但是您必须关闭应用程序并重新打开它才能摆脱空白的白屏并看到应用程序的下一个版本。

我可以强制将 2.* chunk js 文件存储在 serviceworker 中，方法是修改 service-worker.ts 并添加一个 registerRoute 调用来查找并添加该文件。但我的理解是这个文件，因为它是由 create react app build 自动生成的，应该在 service-worker.ts.

中对 precacheAndRoute(self.__WB_MANIFEST); 的调用中自动添加

我怀疑这里的路径差异，来自 asset-manifest.json 文件，可能与 2.* chunk js 文件没有加载有关，但这只是一个猜测。

"main.js": "./static/js/main.9c46d9a1.chunk.js",
"static/js/2.ab51bb70.chunk.js": "./static/js/2.ab51bb70.chunk.js",

在 asset-manifest.json 中也有一个类似的条目用于 2.* 块 css 文件，并且正在添加到 WB_MANIFEST（参见上面的日志），所以我的怀疑可能没有根据。

"static/css/2.c01127d3.chunk.css": "./static/css/2.c01127d3.chunk.css",

谢谢。

Answer 1

maximumFileSizeToCacheInBytes 配置选项可能在这里起作用。在 c-r-a 中，它是 set to 5mb，因此如果您的块大于 5mb，它将被排除在要预缓存的资产列表之外。

如果发生这种情况，应该在您的 webpack 构建过程中记录一条警告消息，解释当前限制是什么以及哪些资产超过了该限制。

找到一种方法来减小块的大小是最好的方法，巨大的块一开始并不是很好的用户体验。但是如果你不能减小块大小，那么弹出并修改 InjectManifest webpack 插件配置中的 maximumFileSizeToCacheInBytes 配置是你的另一个选择。

Create React App serviceworker 不包括生成的文件之一

Create React App serviceworker is not including one of the generated files

reactjs

service-worker

create-react-app