Create Reaction App ServicWorker不包括其中一个生成的文件 [英] Create React App serviceworker is not including one of the generated files

问题描述

TLDR：似乎由Create Reaction App生成的某个区块js文件未包含在ServiceWorker中。

我认为我们有一个非常普通的Create Reaction App(Version 4.0.3)配置，其中启用了ServiceWorker。当我进行构建(使用NPM run Build)时，它会创建一个Build/Static/js文件夹，其中包含两个块文件：一个主块文件(即main.9c46d9a1.chunk.js)和一个2.*块js文件(即2.ab51bb70.chunk.js)。在生成的ASSET-MANIFENT.json文件中，它们如下所示：

• "；main.js"；："；./static/js/main.9c46d9a1.chunk.js"；，
静态/
• "；static/js/2.ab51bb70.chunk.js"；：/js/2.ab51bb70.chunk.js"；，

我添加了登录service-worker.ts以遍历sel.__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文件。如果我打开浏览器开发工具，转到Network选项卡，然后重新加载浏览器，我会看到正在从SericeWorker加载主块js文件，并且正在从缓存加载2.*块js文件。

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

我可以强制将2.*块js文件存储在serviceWorker中，方法是修改service-worker.ts并添加用于查找该文件并添加该文件的RegisterRoute调用。但我的理解是这个文件，因为它是由Create Reaction应用程序构建自动生成的，所以应该自动添加到对service-worker.ts中的precacheAndRoute(self.__WB_MANIFEST);的调用中。

我怀疑此处路径的不同可能与不加载2.*块js文件有关，但这只是一种猜测。

• "；main.js"；："；./static/js/main.9c46d9a1.chunk.js"；，
静态/
• "；static/js/2.ab51bb70.chunk.js"；：/js/2.ab51bb70.chunk.js"；，

在ASSET-MANIFENT.json中也有一个类似的条目，对应于2.*块的css文件，该条目将被添加到WB_MANIFEST(请参见上面的日志)，因此我的怀疑可能没有道理。

• "；static/css/2.c01127d3.chunk.css"；："；./static/css/2.c01127d3.chunk.css"；，

谢谢。

推荐答案

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

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

找到减小块大小的方法是最好的方法，而巨大的块从一开始就不是一个很好的用户体验。但如果您不能减小区块大小，则可以选择弹出并修改InjectManifestwebpack插件配置中的maximumFileSizeToCacheInBytes配置。

这篇关于Create Reaction App ServicWorker不包括其中一个生成的文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！