问题标签 [react-suspense]

我的团队编写了一个 Web 应用程序，create-react-app我们希望在初始页面加载时保持较小的包大小。现在我们只是在输出的 javascript 文件上运行gzip并了解整个包的大小（类似于 的输出），但这还不足以告诉我们所有包的大小初始页面加载需要。wcbuild/react-scripts build

现在我计划依靠解析build/index.html和查找哪些脚本标签引用绝对路径（以避免计算第三方脚本），以便识别在初始页面加载时加载了哪些块，但我确实想知道代码是否可能加载对初始绘制很重要的 javascript 端。我不这么认为，但我也不明白 CRA 是如何工作的，不足以明确地说出来。

我的队友也在想，也许我们应该只在无头浏览器中加载登录页面，并确定以这种方式加载页面时加载的脚本，尽管最好有一种更轻量级的方式来执行此检查。

提前致谢！

我将以下组件包装在一个组件中Suspense：

MyComponentuses i18next，这会触发加载翻译的悬念。Eveything 工作，但微调器只显示一瞬间，然后它消失，因为 AJAX 请求i18next正在完成。

我可以告诉Suspense组件以某种方式显示微调器至少 2 秒吗？这将在视觉上改善用户体验。有这样的东西会很棒：

我无法控制i18nextAJAX，或者我认为可以，因为它是一个库。

是否有可能实现我想要的Suspense？

我的应用程序可以在其他浏览器上运行，但不能（在 v44 上）如果我删除延迟加载，它可以正常工作。

我正在使用React.lazy并Suspense拆分我的代码。

• 通天塔 7.5.0
• 网络包 4.28.3
• 反应 16.7.0

尝试过搞乱 webpack 和 babel 配置。似乎错误是由 eval 中的以下代码引发的。我认为这是杀死它的传播语法。但是，我不知道如何让 babel 将其转换为 es5 作为其 webpack 代码本身。

网络包配置：

通天塔配置

预期：像其他浏览器一样在边缘工作

实际：一旦你碰到触发延迟加载的东西就会死亡

我想知道是否有一种好方法可以防止反应中的后备闪现。我正在使用反应路由器，问题是当一个组件被挂起时，后备加载程序会非常快地闪烁，这很烦人。我在这里看到了答案React suspense/lazy delay? 如下所示：

但我的问题是我有一个具有透明背景的覆盖加载微调器，并且在解决承诺之前组件实际上不会加载。这会使页面在没有内容的情况下挂起半秒钟，实际上比微调器的闪烁更烦人。

所以我想问题是有没有人找到解决这个问题的好方法。我真的很想在页面中添加类似 nprogress 的内容，但不知道如何使用 React.suspense 实现它。我可能只需要重新使用 react loadable，但我真的不想在 react 具有开箱即用的基本相同功能时使用。

我正在寻找一种使用 react-testing-library 测试 React.Suspense 回退的方法。考虑这个例子：

使用getByText('loading...')似乎不起作用。想知道是否有在 RTL 中测试这个的好方法。

谢谢

我正在尝试将新的酶 api 用于酶 3.10.0 中引入的 suspenseFallback。

使用的版本：

• 酶适配器反应 16：1.14.0
• 酶：3.10.0
• 反应：16.9.0
• 开玩笑：23.6.0

我无法让它返回我的后备或触发惰性内部的导入。

有什么我想念的吗？

被测组件

单元测试

这是我的惰性组件：

我像这样导入它：

在我的测试中，我有这样的事情：

我期望测试通过，console.log 打印出来：

但不是<Bones />我得到<lazy />并且它没有通过测试。

如何模拟导入的 Lazy React 组件，以便我的简单测试通过？

我知道 Suspense 组件是 React-ian 的代码拆分方法，它使网页加载速度更快。现在，假设您有这样的组件层次结构：

首先假设只有InnerWrapper延迟加载，而在第二种情况下，它们都是延迟加载的。

React 会延迟加载InnerWrapperafterOuterWrapper的加载，还是同时加载它们？具体来说，是否在第一个组件加载后延迟渲染 2nd Suspense 的 fallback。

我一直在关注 Ben Awad 的视频，并试图扩展这个想法以响应SuspenseList，但当我更改revealOrder. 在所有情况下，端点都被一个接一个地调用，并以forwards模式加载。

演示回购

这是我的设置：

这是由webpack-dev-server具有以下配置的 a 加载的：

现在，假设我们正在渲染

在初始加载时，这可以正常工作。MobileApp块下载而没有DesktopApp。但是，只要我更改组件中的任何数据并HMR启动 - 重新加载就会下载DesktopApp块。

这显然违背了代码拆分的目的。有谁知道如何阻止这种情况发生？

需要明确的是：我已经输出console.log(shouldServeMobile)并且它始终是true. 另外，我在这里尝试了这个建议：Webpack-dev-server 在每次更改后都会发出所有块，但它根本没有帮助。