问题标签 [react-lazy-load]

我有一个包含两个页面的基本路由：home 和 about。我已经用 react.lazy 导入了这两个页面，并用一个悬念后备来包装它们。

主页加载良好，但是当我想导航到 /about 时，页面变为空白，控制台中没有任何错误。怎么会这样？

另外，如何在本地开发中看到 about 页面在调用之前未加载？

这是路线和代码：

谢谢！

我有一个应用程序，它在登录页面上有 2 个部分，即 Entrance1 和 Entrance2。我想以这样一种方式设计我的 approutes 和延迟加载：当用户单击 Entrance1 时，只有与 Entrance1 相关的路由和 Entrance1 内部所需的组件应该加载到包中（React-lazy 和 suspense。此处不使用 webpack）。Entrance1 和 Entrance2 内 50% 的路由和组件是重复的。

我有一个沙箱，其中所有属于 Entrance1 和 Entrance2 的路由都位于一个 Approute 中。为简洁起见，我在沙箱中添加了最少的路由和组件。但是我的应用程序有 25 条属于 Entrance1 的路由，并且大部分相同的路由用于 Entrance2（网址指向 /entrance2/comp1 而不是 /entrance1/comp1），我觉得这不是一个好的设计。此外，它会使捆绑包不必要地沉重。

如何让这个工作？

创建应用程序的未优化方式

使用 React.lazy 将 App 基于 Routing Link 分解成小包

优化路由和捆绑

1. 最初，npm run build 后的捆绑器显示了 4 个捆绑包，如下所示：-

   创建优化的生产版本...编译成功。

2. 后期优化：- 创建优化的生产版本...编译成功。

我是新来的反应。我想根据 的值导入“darkMode.css”或“lightMode.css”（到基于类的组件）props。

想象一下我有以下功能（在基于类的组件中）：

有没有办法使用这个函数导入“darkMode.css”或“lightMode.css”？

感谢您的帮助！

我正在使用 React 路由器根据特定的 url 呈现我的不同页面。不，我想使用React.lazy来延迟加载我所有的页面组件：

这项工作真的很好，但是当我去的时候/page，我的所有东西都Home消失了，我只看到了后备Loading page...组件（页面消失了，然后另一个页面很快出现，这让用户感到不安）。

这是默认行为，React.Suspense但在这种情况下，有没有办法让实际的主页在屏幕上呈现，消息在Loading page...顶部，当Page组件加载时，只呈现它并替换主页？

我最近注意到我的网站在第一次加载时出现了一些主要的性能问题。在做了一些挖掘之后，我注意到这是由于我的应用程序加载了应用程序中的每一个图像，即使它不是必需的。我以为我用 react lazy 来解决这个问题

但显然反应懒惰只关心组件逻辑。什么都有帮助！我在下面发布了一些带有加载时间的屏幕截图。

所有带有“步骤”一词的图片都是完全不同页面的一部分。

最好的问候，亚当！

我想知道使用 React Lazy 和 Supense 与我在下面展示的内容相比有哪些好处。第一个示例是使用 useState 和 Onload Prop，第二个示例是使用 React Lazy 和 Suspense。

VS这个

ImageComponent.js

我正在使用 react-router@latest 和代码拆分创建一个反应应用程序。一切正常，除了当我单击关于链接或仪表板链接时布局组件会重新呈现所有内容。请帮我解决这个问题。我已经阅读了许多博客文章，但没有得到任何适合我的解决方案。

我为该https://github.com/riyasat/ReactRouterTest创建了一个存储库。

这是我的组件

主要部件

布局组件

关于组件

仪表板组件

我正在尝试将我的 React 应用程序动态转换为延迟加载组件以提高 Lighthouse 性能得分，并且一直在遵循React 代码拆分文档来做到这一点。

按照文档，我尝试切换组件在 App.js 文件中的加载方式，如下所示：

但是，当我这样做时，带有组件的 App.js 中的路由无法加载，因为当服务器尝试获取 http://localhost:3000/App.js 时站点出现 404 错误。我是否需要向我的服务器添加一条路由以返回我想要延迟加载的每个组件？文档上没有关于此的内容...

寻找发生这种情况的原因，而不是重做我的 App.js 路由的方法。

我一直在阅读有关延迟加载代码的内容。

使用延迟加载，只会加载所需的代码，并且这样做，您的初始加载会更快（因为您将加载更少的代码）并且您的整体速度会根据需要更快。

这是我理解的。在单页应用程序中，最初将整个页面加载到浏览器上。我们使用 webpack 之类的模块捆绑器将应用程序捆绑到单个页面中。一切都很好。现在，如果应用程序大小很大，加载时间会增加。为了提高性能，我们可以将捆绑包分成单独的块，仅在需要时才加载。我的问题是，如果我们必须将页面分成块，它是否仍然是单页应用程序，因为浏览器必须在需要时向服务器请求这些块？我觉得我的知识存在差距，我不知道缺少什么。

我尝试使用React.lazy()和Suspense组件在我的仪表板中动态加载。它适用于硬编码值，但不适用于变量。我现在有点无语了。可能是一个愚蠢的错误！

作品：

不工作：

也不起作用：

我可以添加的一件事是小部件道具是从公用文件夹中的 json 文件填充的。