问题标签 [loadable-component]

Next.js 和 Gatsby.js 是否使用拆分代码 Loadable Component ？

我说的可加载组件是 Facebook 团队推荐的https://github.com/gregberge/loadable-components

我懒得搜索这个。

你回复我就给分。

我正在尝试在我的 React 通用应用程序中添加用于代码拆分的可加载组件库。我的项目中有 CSS 模块，它曾经运行良好。但是后来我添加了可加载的组件库来进行代码拆分。现在服务器正在工作，但 CSS 没有，页面加载时没有 CSS。我检查了stats.json文件，它缺少 CSS 文件。

webpack.config.js：

服务器.js：

我有一个使用 React 和 Redux 构建的（服务器端渲染）SSR 应用程序。我也使用可加载库。该应用程序托管在 Heroku 上并使用 Cloudflare 缓存。

该应用程序间歇性地在 Heroku 上出现 500 错误，我无法找到错误的根本原因。下面是错误信息

由于这是间歇性发生的，我无法找到发生这种情况的根本原因。以下是发生错误的 Home 组件的详细信息

src/routes/HomeRoute.js

src/routes/Home.js

src/server/createRenderApp.js

请在此处找到在 Sentry 上捕获的错误的屏幕截图。

任何想法或建议肯定会有所帮助。先感谢您。

在我们的项目中，我们有大约 10 个使用 react-lottie 库并加载了可加载组件库的动画。其中一些动画在 Gatsby 开发环境中崩溃。我已经设法缩小了哪些失败的范围，并且有 2 个。

该组件是这样构建的：

然后我们使用代码拆分：

然后我们将组件导入到模块中，如下所示：

我在控制台中得到的错误是：

我检查了此错误消息的可能原因并找到了此线程： https ://github.com/facebook/react/issues/13445 和 代码拆分/react-loadable 问题

但看起来动态导入不会失败。令人困惑的部分是，为什么它只会在某些动画上崩溃而其他每次都可以正常工作。哦

你知道我错过了什么吗？

感谢您的任何建议！

简化我的帖子：

我的 ssr 网页在启动客户端时闪烁，这意味着页面呈现服务器端呈现的 html，然后变为空白，然后重新开始加载所有内容。

浏览细节：

我正在做一个反应项目，我们决定将其从在客户端呈现更改为在服务器中呈现。该项目包括react-router-dom,redux和react-redux,material-ui附带react-jss,loadable/component也处理 head 元素react-helmet-async, 并且在 ssr 中使用express.js这似乎是必须的。

• 因为react-router-dom我做了文档上的所有事情。BrowserRouter在客户端和StaticRouterssr 中使用并将context对象传递给它。
• 对于redux并且react-redux我保存preloaded_state在窗口中的一个变量中并在客户端获取它然后将其传递给存储。还获取了一些外部数据以获取页面源上的内容。所以我在 ssr 中有一些请求和数据获取。
• 因为material-ui我创建了一个new serverSideStyleSheet并收集了整个项目的所有样式。
• 因为react-helmet-async我Helmet为每个页面设置了不同的标签，这些标签收集了不同的标题、描述和......个性化。还有一个helmetProvidercsr 和 ssr 的包装器。
• 起初我使用react-helmet但它与renderToNodeStream.i 不兼容。我没有更改 react-helmet-async 虽然我没有使用 renderToNodeStream 但renderToNodeStream希望它能够迁移到某一天。
• 关于express.js我按照文档所说的那样使用它，但是在我添加之后，我loadable/component无法通过添加 . 所以 app.get('*' , ServerSideRender)我必须添加我想在服务器中呈现的每个 url app.get(url ,ServerSideRender)。
• 关于该项目的另一件事是我没有弹出并使用 create-react-app 创建它并且没有 webpack 配置或 babelrc 但我使用的是 craco.config.js
• 最后一件事是我已经从 ssr 中排除了 index.html，而是我自己在 SSR.js 文件中制作了标签，因此 index.html 仅在客户端中呈现。我非常小心地在 ssr 中编写标签，就像它们在 index.html 中一样

解决方案但不是解决方案：

出现这个问题是因为我在我的Router.js. 所以当我以正常方式导入组件时，没有闪烁，一切都很好，但未使用的 js 会降低我页面的性能分数。我需要可加载组件停止使页面闪烁。

潜入代码：

只是客户

index.html ：仅在客户端呈现

index.js ：仅在客户端呈现

只是服务器

ssrIndex.js

SSR.js

对于客户端和服务器

应用程序.js

当我说谢谢你的时间时，我是认真的。我很乐意听到任何建议或解决方案。

我正在使用打字稿和可加载组件（用于 SSR 实现）开发 React 应用程序，并尝试为可加载组件实现占位符，以减少初始加载时页面的移动（页面首先加载，几秒钟后加载可加载组件出现，将事情向下移动）。我曾尝试使用可加载组件的后备属性，但这会导致更多的变化（后备需要一点时间出现，消失并折叠它所在的空间，然后出现可加载组件）。

我当时正在考虑使用钩子来加载这个组件，但是我一个接一个地出错。我想知道是否可以在 useEffect 中使用可加载组件？另外，如何使用从 loadable(() => import('/someModule')) 返回的模块？只是正常使用它是行不通的。

我通常可以像这样加载可加载组件：

并尝试使用以下功能在加载时在其位置放置一个占位符：

然后使用它：

但是，我得到错误：

似乎模块的类型是 {$$typeof: Symbol(react.forward_ref), render: ƒ, preload: ƒ, load: ƒ} 但 React 拒绝渲染它。

我也尝试调用 SomeComponent 作为

有没有人对如何使它工作或什至可能有任何想法？

我有一个 JSON 文件，其中包含多个脚本文件路径，我希望能够将这些脚本动态加载到我的 React 应用程序中，以根据元数据中的规范构建每个组件。目前，我的应用程序中有元数据作为Metadata数据对象。

元数据.json：

每个脚本都导出一个我希望能够用来构造组件的函数。出于故障排除的目的，它目前只返回一条简单的消息。

我做了一些研究并确定了 @loadable/component 包。使用这个包 as import loadable from "@loadable/component";，我尝试将我的脚本加载到 App.js 中，如下所示：

我尝试过的一切都会引发 TypeError createLayer is not a function。如何加载函数？

我也尝试过惰性方法。

我在这里重新创建了我的问题的工作演示。

编辑：我试图把它放在我的应用程序的顶部

这会导致 TypeError 未处理拒绝（错误）：找不到模块 './createFirstLayer.js'。(匿名函数) src/components lazy /^.*$/ groupOptions: {} namespace object:66

我也尝试过

我的目标是能够调用适当的函数来创建特定的层，并在元数据中匹配它们。

我正在尝试使用@loadable/component.

我目前的情况：这就是我在我的网站上为机器人实现 SSR 的方式。由于它仅适用于机器人，因此我不使用hydrate. 基本上，我index.html为普通用户发送带有 JS 包的脚本标签的 ，或者我为机器人发送一个完全呈现的 HTML 页面，而无需hydrate.

我的目标：我想@loadable/component总是从我的服务器返回 SSR 页面，并hydrate用来附加我的 JS 包。并以此实现代码拆分。

这是我目前构建应用程序的方式（伪代码）：

它基本上是 2 个构建，其中一个是使用 webpack 进行捆绑，另一个基本上是将文件src从distApp.

这就是我的服务器所做的（伪代码）

上述步骤适用于我的初始要求（ssr 仅适用于机器人）。

但是我加@loadable/component了实现分码+SSR之后，上面的设置就不行了。

因为现在我有dynamic imports一些路线。例如：

所以我的renderToString(<App/>)电话大部分都是空的，因为它没有加载那些AsyncPages.

在可加载组件的文档上：服务器端渲染他们有一个关于如何实现这一点的示例存储库。

但是他们的例子有点复杂，似乎他们webpack在服务器内部使用。我将在下面发布他们在他们的服务器上所做的事情。

问题

我真的必须使用webpack捆绑我的应用程序的服务器代码才能@loadable/component像他们在示例中显示的那样用于 SSR 吗？我不能只使用某种babel插件将其转换dynamic imports为常规require调用吗？这样我就可以像以前那样渲染它了？

很奇怪，他们使用webpack-dev-middleware. 就像这个例子应该只用于开发。有人知道带有生产示例的回购吗？

我正在尝试使用我创建的组件库以在其他项目中重用。在其中，我使用了带有 webpack 和代码拆分的可加载组件。

但是，当导入 Next.js 项目时，会返回错误，表明您无法从该库中导入组件。

我有两个项目：

• 项目 A = 组件库
• 项目 B = 将导入项目 A

导入库的项目 B（项目 A）：

(node:20271) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'SomeComponent' of undefined

导入库的配置（项目 A）：

webpack.build.config.js

src/index.js

上面，只有 @components 文件夹有 loadable-components

.babelrc

在Project B中，我只用生成的块导入这个库。

但是，无论组件是否按需加载，都会显示相同的错误。

我究竟做错了什么？有什么建议吗？

谢谢！

在将服务器端渲染React应用程序迁移到可加载组件以进行代码拆分和延迟加载后，初始包大小及其下载时间按预期减少。然而，在将经典的React渲染方法替换为可加载组件后，在其余应用程序代码不变的情况下，我在PageSpeed / LightHouse中的 Cumulative Layout Shift 得分从 0.05 上升到 1 或更多。我的意思是即使没有动态加载任何组件，否则情况会更糟。

我做错了什么？

可加载组件之前的 SSR 代码（良好的 CLS 分数）：

服务器端 ：

客户端 ：

可加载组件后的 SSR （糟糕的 CLS 分数）：

服务器端 ：

客户端 ：

备注：

• 根据PageSpeed和LightHouse的说法，它是代码的整个 HTML<main>部分（填充了用 路由的组件React Router），就好像 SSR 页面被完全重新渲染，尽管使用hydrate.
• 如果没有Loadable Components，完全相同的代码不会导致布局转移。