问题标签 [react-lazy-load]

所以我面临的问题是这个。当我加载页面时，没有呈现 Header 组件的样式，但是当我删除加载逻辑时它们是。问题可能出在 Header 组件 BCS 中，它位于除 Login 之外的每个 Route 中。我需要在除登录之外的每条路径上呈现它。错误可能在哪里？

在我的应用程序中，我有两个大型组件，其中包括很多面板，每个面板都有几个或更多其他组件。这需要很长时间才能渲染。我猜1-2秒。

这是如何工作的一个简单示例。我有 2 个标签，我们可以称它们为 tab1 和 tab2。如果我点击 tab1，我将渲染 DummyPanel，如果我点击 tab2，我将渲染 ResponsivePanel。问题是，这些面板的渲染速度很慢，应用程序将冻结 1-2 秒。

所以我需要一些东西如果我渲染这些组件，它会设置加载，当组件准备好时，它会渲染它们。或者将渲染前 5 个面板并逐渐休息。

我发现 React.lazy + Suspense。在加载和第一个选项卡交换（tab1/tab2）时效果很好。它将设置加载，然后渲染组件。但问题是它只会在第一次尝试时起作用，如果我开始在选项卡之间交换后它会停止使用延迟加载 + 悬念。它只是冻结了一秒钟，然后重新渲染面板。

我猜是因为缓存，应用程序会下载部分。缓存它们并停止再次悬念。

所以问题是，有没有办法解决这个问题，在每个标签交换上强制懒惰+暂停？或者你们知道更好的解决方案吗？总是先加载加载，然后加载组件，或者它会渲染前 5 个面板，然后慢慢渲染其余的面板？

代码片段，我在其中渲染 suspense + 惰性组件。如果 tabIndex === 0 或 1，则只有“if”语句。所以 tab1 是 tabIndex = 0，而 tab2 是 tabIndex = 1

);

我尝试使用 React 延迟和 Suspense 加载。我有用于延迟加载的简单登录页面和动画页面。但是，如果我刷新或打开此页面，我将看不到动画。但是当fallback = <p> Loading... </p> 这样写它是工作。如何用动画做到这一点？
这是我延迟加载的主页：

这个动画页面：

我怎么能像上工作负载动画一样做到这一点？

我使用lazyand suspenseof React 来实现路由延迟加载。

登陆页面是主页，用户可以重定向到创建页面。

但我发现预取不起作用！

我预计<link rel="prefetch"/>当用户登陆主页时，将插入 html 以预取 Create 页面的捆绑包。

我正在寻找替代preloadAll()from react-loadable。我们react-loadable仅在以下用例中使用。由于它仅在一个用例中使用，我想摆脱react-loadable并采用另一种方法而不使用外部模块。

我无法想出一个替代方案。所以我的问题是，我们可以实现以下测试用例react lazy吗？感谢您的建议。

lazysizes似乎使用起来很简单，但我无法让它真正延迟加载带有反应的图像......它会在滚动到视图之前加载视口之外的底部图像，正如您在这个最小的代码框示例中看到的那样。

（此代码几乎完全是从lazysizes 文档中复制的）

我究竟做错了什么？

当我尝试使用将一个 React 组件导入另一个组件时出现 TypeScript 错误React.lazy

模板/错误报告/index.tsx

模板/页脚/index.tsx

Footer尽管我有默认导出，但我收到 TypeScript 错误BugReport

这里有一个注意事项，我index.ts在 BugReport 文件夹中也有文件，当我删除该文件时错误消失了，但它需要在那里

我正在对一个使用react-lazyload延迟加载的组件进行单元测试。在我的单元测试中渲染时，我注意到Lazyload没有渲染内容并且它的占位符正在显示。我尝试使用带有 async/await 的 waitFor 来等待延迟加载的内容在下一个滴答周期中呈现，但它仍然失败并且screen.debug()仍然在 dom 中显示占位符。

有什么方法可以测试这样的组件吗？这是我尝试过的：

延迟加载的内容有一个 div，上面有预期的文本。

据我了解，React lazy 会将您的包拆分为多个文件。假设我对 React.router 使用延迟加载。如果我们的服务器设置为通过 GET 请求发送整个包，那么 React.router 如何增量地从服务器获取文件？无论如何它都不必接收整个捆绑包吗？

我正在尝试测试react-lazy-load-image-component使用 JestJS 制作的惰性初始化组件。以下是我的测试：

该组件编码为：

而<Carousel />渲染定义为：

没有延迟加载，我的测试工作正常。

延迟加载的包装器，我的测试失败了：TypeError: Cannot read property 'prototype' of undefined. 错误发生在const { container } = render(.... 我试图模拟滚动效果。还没有为我工作。

如何使用内部延迟加载向组件添加笑话覆盖？