问题标签 [react-lazy-load]

我对 webpack 的使用感到困惑，因为 webpack 是依赖管理器并创建了一个包，但这并没有在CoreUi模板中发生。

表示此coreUi模板使用React Lazy loadinglikeconst Login = React.lazy(() => import('./views/Pages/Login'));但不使用 webpack。

那么如何lazy loading工作？延迟加载不需要 webpack 吗？如果是，那么为什么是 webpack ？

我对这里的 react 可加载库印象深刻：https ://github.com/jamiebuilds/react-loadable

但是如果我使用它（通过在加载事件后load调用）这是否有益，我会感到困惑setState

在我读过的所有示例/博客中，到处都是点击 CTA 的地方。

所以问题是，我应该在 ' load' 事件上动态导入组件，它会提高我的页面性能吗？

我关心的是我的反应应用程序的灯塔分数。

谢谢

我不得不用悬念和 react.lazy 打破我的一些路线，以确保我的捆绑文件不荒谬。但是这样做之后，我的第一个悬念括号之后的路线不再起作用了？

在下面的示例中，链接 1 - 6 的路由正常工作（没有问题，并且它们正确呈现）。但是 Suspense 内部的组件和它之后的所有组件（悬念内部和外部）都没有正确加载。您转到该路线，页面上没有任何内容。甚至 Spinner 组件也不会作为后备加载。我已经尝试删除微调器组件作为后备组件，然后只是进行加载......即使这样也不会出现在页面上。

我的进口声明：

我的组件导入结构示例：

（我的路由树示例）

编辑：展示我修复它的方式。

在我的反应应用程序中，我使用React.lazy(() => import("...")). 但我无法实现支持延迟加载的测试用例。

没有React.lazy(() => import("..."))我的测试用例工作正常，但只有React.lazy它不起作用。

请在这方面提供帮助。

验证.jsx

这是我的测试代码。

auth.spec.jsx

当我将运行我的测试用例时，我收到以下错误

在我的项目中，我曾经依赖 react-loadable 来做一些代码拆分，与 react-router 一起延迟加载。就像是：

和

分析组件实现componentDidMount和使用路由器的history.push状态变化。当一个新的 url 被推送并改变了一些参数，但仍然导致这个相同的“分析”组件时，只有componentDidUpdate被调用。我更新了这段代码以使用 React.lazy：

和

和

但是现在componentDidMound每次都意外调用。我不清楚这与反应路由器有关React.lazy还是与反应路由器有关。有什么线索吗？

直到几天前，我的 LazyLoad 实现都运行良好，但现在我似乎无法让它工作。

这是我的组件：

在 App.js 中它是这样调用的：

但它不会工作！这是演示环境： https ://gifted-kare-1c0eba.netlify.com/

（检查 Inspector 中的 Network 选项卡以查看所有图像都是从初始加载请求的）

这里还有一个视频

知道我做错了什么吗？

Thanks in advance, Morten

AsPer 错误延迟加载在导入时显示错误，在使用延迟加载应用程序工作正常之前。

我有一个使用 React-lazy-load-component 库制作的图像列表，它工作得很好，但我不能有任何过渡效果，正如文档所承诺的那样。

这是我的代码：

由于导入css文件不起作用，所以我直接在我的styled-component中编写了css源代码。到目前为止没有成功。

如何解决这个问题？

我有一种情况，我想在部署后触发对 chunk.js 等资产的重试，如果失败，这样用户就不会看到空白屏幕。为此我做了什么：

现在，当任何 chunk.js 加载失败时，这与 Chrome 完美配合，因为它命中 5 次。（阻止来自开发工具的任何 chunk.js 调用以观察本地行为）

但是对于 IE 11，重试根本不会发生。请解释为什么它会这样。

参考

我一直在尝试创建一个 404 not found 页面并在那里重定向所有不匹配的路由，当前配置为整个上下文：

• 如果我将重定向组件移动到延迟加载组件的悬念之上，我将不再能够激活管理模块的路由。
• 如果我在 Suspense 之后移动所有内容，包括 /404，即使手动导航到它，它也不再为 /404 路由加载 NotFound 组件。

尝试了我在文档中找到的各种其他解决方案，但它们似乎都不起作用，这是设计使然还是错误？如果是设计，那么设计是什么？这似乎是每个应用程序都需要的用例。