问题标签 [react-lazy-load]

我对反应中的代码拆分有疑问。假设您有一些名为 page1、page2 等的组件，并且还有一个 pages 文件，该文件使用React.lazy导出页面组件，并且您将 app 文件作为呈现这些页面的根组件。

页面文件：

应用程序文件：

当我在 react 中尝试这种设置时没有问题，并且 React 成功呈现页面并为所有页面创建多个块，但我不确定这种方法。我在代码拆分方面做得对吗？

react-lazy-load-image-component为了提高性能，我构建了一个 ReactJS 应用程序。

我的代码包装了需要时间初始化的组件，例如：

它工作正常。但是，这是延迟加载，SSR 将我的标记打印为：

我希望服务器打印所有内容，以便爬虫轻松索引我的页面。我正在使用的库支持该 visibleByDefault属性，这可能是要走的路。

我只是想知道如何从我的装载机传递它：

一直到每个<LazyLoadComponent>？

建议？

我使用 create-react-app (react ^17.0.2, react-scripts 4.0.3) 来构建一个简单的应用程序，该应用程序使用基于路由的延迟加载来执行代码拆分。当我构建这个应用程序时，我看到每个延迟加载的组件都创建了单独的块，这一切都很好，因为我的所有组件都是使用默认值导出的。我的输出是：

然后我更新了我的 package.json 文件以包含以下条目：

使用此配置和 babel.config.js 文件，然后我将我的应用程序发布到我的私人仓库，有效地使用 Babel CLI 转换 src 目录中的所有内容，在发布该文件夹的内容之前将其复制到 dist 文件夹。babel.config.js 只包含：

接下来，我创建了另一个 create-react-app，并在它的根目录中创建了一个 .yarnrc 文件，其中包含我的私人仓库的注册表项。例如：

然后我执行了一个纱线添加命令：

这将第一个应用程序添加为对这个应用程序的依赖项。这成功地将代码复制到 node_modules

然后，在第二个应用程序的 index.js 中，我使用以下命令导入我的第一个应用程序：

然后我使用标准渲染：

运行第二个应用程序，一切都呈现出来，我可以很好地浏览路线。但是我注意到第一个应用程序的延迟加载行为似乎没有发生。我通过构建应用程序确认了这一点，并且可以看到生成的块数少于我的第一个应用程序：

对我来说，这表明对我位于 node_modules 中的模块的动态导入的代码拆分没有以我期望的方式得到尊重。我期待看到与我的第一个应用程序类似的分块模式。通过阅读有关该主题的信息，我目前可以得出的唯一结论是，我的第一个应用程序中的代码最终会出现在供应商块中，并且不会发生进一步的拆分。有人能对此有所了解吗？使用 create-react-app 提供的默认 webpack 配置可以实现我所期望的吗？

免责声明：这些技术对我来说是相当新的，所以如果我从根本上误解了某些东西，或者我正在尝试做一些完全非传统的事情，我深表歉意。

我目前有以下惰性组件导入：

然后在路线上，

• 转到仪表板，加载了一个块。好！
• 转到配置文件，加载了另一个块..不好！如何将这两个导入标记为捆绑在同一个块中？

有没有办法用 React.lazy 做到这一点？

所以我正在开发一个在开始时使用 React@16.13.1 的 ReactJs 应用程序。但是最近我们必须将我们的 App 更新到最新版本的 React。通过升级，我面临 React Lazy 和 Suspense 的问题，并且它们正在抛出错误。

它在旧版本（16.13.1）上运行良好。

这是配置路由的数组。

这就是路由配置数组的使用方式

注意：此代码适用于旧版本的 React。但是当我将我的包升级到最新版本时它会崩溃。

我对 React.lazy() 功能有疑问。我正在开发一个功能，但我被困在了一个点上。

我的场景

我在哪里有一个设置

1. 使用 React.lazy() 懒惰地加载一堆组件
2. 在 Suspense 上方有一个错误边界包装器。
3. 有一个错误回退 ui 组件 ( ErrorFallbackToast) 以在出现错误时显示。

看起来像这样的东西（模拟）

我有一个场景，需要为特定类型的错误显示回退 ui，而不应为其他错误显示。例如

1. 如果组件内发生任何错误（可能是空指针错误或其他），我需要显示回退 ui。
2. 如果在延迟加载组件期间由于任何 React.lazy() 错误而发生任何错误（即块加载失败或网络错误），我不应该显示 fallbackUI。

问题

到目前为止，我还没有找到任何方法来区分 React 延迟加载期间引发的错误与组件运行时错误。有什么方法可以实现我想要的吗？

我愿意使用多个错误边界，但由于这两个错误都是在安装时抛出的，所以我无法实现我想要的任何东西。任何帮助，将不胜感激。谢谢 ！。

我正在使用 Laravel 8 中的 React 脚手架。这是我的 webpack.mix.js

这只会制作 2 个默认的 js 文件（index.js（10 MB）、laravel_app.js（600 KB））。当我使用 mix.extract() 它只是将 js 拆分为基于节点模块的各种文件，而不是基于延迟导入（就像他们在文档中所写的那样（https://laravel-mix.com/docs /6.0/提取））。
懒惰地实施 React 我错过了什么？

我的 tsx 文件是；
进口；

用法;

TL；DR：是否可以在注释中注入常量变量（在运行时不会改变）

我遇到了一个非常独特的情况，我需要我的评论具有特定的价值。

我在 React 中进行代码拆分，在 react 中命名块的方法是在导入旁边添加注释，如下所示：

这使我的延迟加载块在生成的 id 名称上具有可读名称。

在我的代码库中有一个部分，我根据我的文件夹结构为我的组件生成延迟加载的路由，但是我碰壁了，我无法将我的块名称设置为由函数设置的变量。

这是我的功能：

无论如何我可以将path变量注入该评论吗？

额外说明，此generateLink函数在运行时不运行，链接是静态的。

我正在尝试在反应应用程序中添加实现延迟加载，该应用程序在顶级路由中运行良好。但我也希望<Suspense></Suspense>and 为嵌套路由提供后备。根据 react-router-dom ，必须只有Fragment或Route作为 的子级Routes。有没有办法处理这个？

这是代码：