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

如何解决Create React App serviceworker 不包含生成的文件之一

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

我认为我们有一个非常普通的 Create React App（版本 4.0.3）配置，并启用了 serviceworker。当我进行构建（使用 npm run build）时，它会创建一个包含两个块文件的 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",

我已经在 service-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 文件被缓存。如果我打开浏览器开发工具，转到网络选项卡，然后重新加载浏览器，我会看到正在从 serviceworker 加载主块 js 文件，正在从缓存加载 2.* 块 js 文件。

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

我可以通过修改 service-worker.ts 并添加查找此文件并添加它的 registerRoute 调用来强制将 2.* 块 js 文件存储在 serviceworker 中。但我的理解是这个文件，因为它是由 create react app build 自动生成的，应该在 service-worker.ts 中对 precacheAndRoute(self.__WB_MANIFEST); 的调用中自动添加。

我怀疑这里的路径差异，来自 asset-manifest.json 文件，可能以某种方式与 2.* 块 js 文件无法加载有关，但这只是一个猜测。

• "main.js": "./static/js/main.9c46d9a1.chunk.js",

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

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

谢谢。

解决方法

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

如果发生这种情况，应该记录一条警告消息作为 webpack 构建过程的一部分，说明当前限制是什么以及哪些资产超过了该限制。

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