问题标签 [loadable-component]

我在我的反应服务器端渲染站点中使用可加载组件。它在本地主机中运行良好，然后我尝试在谷歌云功能中运行该站点，但The "path" argument must be of type string. Received undefined出现错误。

这里我添加了我用来调用 loadable-stats.json 文件的代码

这是我的代码结构的屏幕截图

我的 firebase.json 文件

在这里我添加了服务器 index.js 文件

我的 webpack 配置文件

当我使用NODE_ENV=production node functions/main.js. 当我在谷歌云功能中运行时，此代码不起作用firebase serve --only functions,hosting。

建议或建议对我更有帮助。

是否可以从 material-ui 延迟加载单个组件？

我的项目使用了很多 Material-ui 组件，所以即使在摇树之后，我的 material-ui 供应商包也很大。我希望能够延迟加载单个组件并根据它们在应用程序中的使用位置将 material-ui 供应商拆分为更小的部分？这可能吗？已尝试使用loadable，但当我使用任何组件时，它仍会加载所有 material-ui 供应商。

我正在尝试将可加载组件集成到我的 SSR 项目中，并且当我在 localhost:3000 中执行时它正在工作，然后我尝试将它部署在云功能中我收到此错误

[ERR_INVALID_ARG_TYPE]：“路径”参数必须是字符串类型。收到未定义

之后我尝试部署可加载组件服务器端渲染示例，示例代码也给出了相同的错误。

我对 package.json、服务器 main.js 和 app.js 文件进行了一些更改，以便在云函数中工作

这是我的服务器 main.js 文件

在这个文件中，我对示例代码app.listen进行了这些更改，exports.supercharged = functions.https.onRequest(app);并导入了const functions = require('firebase-functions');

这是我的 package.json 文件

在包文件中，我替换了 babel 脚本以将文件复制到函数文件夹而不是 lib

这是我的 app.js

可加载组件在 app.js 中有很多代码，所以我只是用简单的 hello world 文本替换了 app.js

这是我的 firebase.json 文件

这些都是我从可加载组件服务器端渲染异步节点示例中所做的更改

我不知道我在这里错过了什么，如果我错过了或需要添加任何东西，请帮助我

我正在使用无服务器来部署带有 SSR 的 React 应用程序。当我使用可加载组件进行代码拆分时，一切都很好，直到我尝试预取资源。添加 /* webpackPrefetch: true */ 到任何可加载的方法会导致服务器端在导入我的 <App> 时崩溃

重现行为的步骤：

加载 http://localhost:3000

该页面应加载一个“显示/隐藏”链接，该链接显示延迟加载的组件 SomeText。如果您从 app.js 中删除 /* webpackPrefetch: true */ 注释，您将获得预期的行为（但没有预取！）

我正在使用交叉点观察器在用户向下滚动页面时延迟加载我的组件，但与组件关联的 page-data.json 文件正在页面加载时呈现。

这是我如何动态呈现组件的示例。

如何延迟加载 page-data.json 文件以减少初始网络调用？

这是我的 gatsby-ssr

这是我的自定义布局

我正在使用@Loadablecomponents 动态导入文件，但有时页面可能不存在，因为它尚未开发。在那种情况下，我可以显示错误或消息吗？下面是我的代码。

我最近使用可加载组件实现了带有代码拆分的服务器端渲染反应应用程序

但似乎loadable-components 本身依赖于 webpack，因为 loadable 用自己的报告器替换了 jsonp_callback。

那么在使用其他打包工具（如 rollup、esbuild）时，我们可以使用哪些替代选项？

我们是否必须手动遍历反应树以预先配置哪个组件需要哪个块，除非在服务器端渲染上实现代码拆分时没有特定的捆绑器目标库（如可加载组件）？

我最近使用可加载组件实现了带有代码拆分的服务器端渲染反应应用程序

但似乎 loadable-components 本身依赖于 webpack，因为 loadable 用自己的报告器替换了 jsonp_callback。

那么在使用其他打包工具（如 rollup、esbuild）时，我们可以使用哪些替代选项？

我们是否必须手动遍历反应树以预先配置哪个组件需要哪个块，除非在服务器端渲染上实现代码拆分时没有特定的捆绑器目标库（如可加载组件）？

我创建了模块 A，它是我的 React 应用程序的组件库。我计划在模块 B 上使用它，这是我的实际 React 应用程序。

我有一个 index.js ，我通过以下方式使用可加载组件从模块 A 导出我的组件

因此，我使用以下 webpack 配置构建模块 A 并将其部署到 npm

我希望当我在模块 B 上 npm install module A 时能够导入和呈现我的组件，但我得到了以下错误。

loadable-components: 无法异步加载组件 { fileName: undefined, chunkName: undefined, error: 'Loading chunk 2661 failed.\n(error: 2661.js)' }

请提供一些有关如何解决此问题的指导

由于react-loadable和@loadable/component确实存在差异，因此不可能通过loadable-codemod制作 100% 完全自动化的 codemod来处理所需的所有更改。所以react-loadable带有诸如 Loadable.Map、pastDelay、timedOut、delay 等在@loadable/component中不存在的东西。

在 Loadable.Map 我可以组合资源来加载，比如

那么如何使用@loadable/component来实现这个功能