【发布时间】：2021-04-14 21:25:53
【问题描述】：
我使用 React 17 和 cra-template-pwa 编写了一个带有 create-react-app 的 PWA。我的应用非常基础，但会加载一些模块，例如 Axios 和 UI 组件库。
该问题的一些背景知识：我正在尝试变得聪明，并通过使用动态模块加载在我的 PWA 上获得良好的 Lighthouse 性能数据。基本上，我希望 Lighthouse 测量我的应用程序框架的负载，而其他所有内容都在之后加载（我知道这不会对我的用户有太大帮助，但我有理由想要针对高灯塔数量进行优化）。
所以我的做法是：在我的 index.js 中，我只静态导入 react 和 react-dom，然后使用 React.lazy 和 suspense 导入我的 App 组件。我最初在 useEffect 挂钩中触发了导入，但我无限聪明地决定在页面加载事件中触发导入。它工作正常。
然后在我的 App.js 中，由于并非所有内容都是 React 组件，我正在使用： const chunk = import('./appChunk.js').then(...) 来加载我其他的各种模块。
再次，一切正常。
但我看到的行为是：在 Chrome 开发工具中，Service Worker 下的“应用程序”选项卡中，我的 Service Worker 长时间显示为“尝试安装”。当我查看网络选项卡时，我看到我的应用程序正在加载大量模块。看来我的生产 CRA 构建中有大约 255 个模块，总计 10MB。这些都加载完成后，Service Worker 状态变为绿色并显示已安装，并且我的 PWA 提示被触发。
但是，Lighthouse 在此完成之前超时，并且无法创建任何输出。在我的服务人员未注册的情况下，我得到了非常好的 Lighthouse 性能数据。但是开启 service worker 会导致灯塔错误并且没有报告。
这给我留下了很多问题，我不确定要问他们的顺序，哈哈。我不确定为什么我的应用程序构建会生成 255 个捆绑包。我不确定为什么 Chrome 在将我的 service worker 标记为已安装之前等待所有这些包加载，或者 Chrome 甚至如何知道或关心它们。在加载模块时，我正在运行加载微调器。由于所有导入都是异步触发的，Chrome/Lighthouse 不应该已经看到我的应用已加载吗？
我在一年前创建了一个 PWA，其范围和规模相似。在这种情况下，我退出了 React 应用程序以手动配置捆绑。我没有这些问题。老实说，我不记得我在配置时做了什么——我在某个地方关注了一些博客，但丢失了链接。但是现在 CRA 支持动态模块加载，我认为我可以在不弹出的情况下度过难关。
非常感谢您对正在发生的事情和/或我如何深入了解它的任何见解。
【问题讨论】：
-
另一个奇怪的细节。如果我不注册服务人员，它不会加载所有这些包。它只加载少量并且可以快速使用。但只需将注销切换到注册，它就会在作为 PWA 激活之前加载所有这些。我真的不知道这里发生了什么。
标签： reactjs webpack create-react-app progressive-web-apps