问题标签 [loadable-component]

我有以下情况，我事先不知道要加载哪个组件。使用 React.lazy 的解决方案如下

如何使用可加载组件实现相同的目标

我已使用本文在服务器站点https://loadable-components.com/docs/server-side-rendering/上配置代码拆分。

据我了解entrypoints: ['browser']，通过拆分的块检测到入口点，无法通过包检测到，我应该怎么做才能检测到拆分的块？这是我尝试导入页面组件的方法

我的应用基于 Reactjs SSR。我的动态可加载组件很少。我正在使用@loadable/component 来实现相同的目的。我在服务器端使用“chunkExtractor.getScriptElements()”来加载文件。下面是构建目录结构。

构建目录

本地主机从公共目录提供服务。我的应用程序运行良好，但在块文件夹中的文件的网络选项卡中出现 404 错误。在浏览器中，它仅加载 .chunk.js 文件。为什么不考虑块文件夹下的文件。我该如何解决这个问题。对于块文件夹中的文件，我在网络选项卡中收到 404 错误。

我正在尝试设置 SSR 以使用@loadable/components. 我所有的设置都是基于带有 babel 和 webpack 插件的文档。当我尝试运行node server.js它时运行正常，但是当我打开浏览器并抛出以下错误（进入节点控制台）时：

如您所见，回溯中有@MYSCOPE，其中包含我的一些内部包（如果重要的话）。

@loadable/server/lib/util.js是以下函数：

当我尝试在第42console.log(modulePath)行时，我看到整个 stats JSON 输出似乎是错误的，我应该得到一个单一的模块路径（据我所知）。

有什么帮助吗？

如果需要，我可以共享配置文件的某些特定部分。因为我在控制台输出中看到了我自己的包，它的构建似乎有问题（它在 cjs 构建的客户端上完美运行），但是将完整的 stats 对象作为模块路径非常令人困惑。

UPD：演示https://www.dropbox.com/s/9r947cgg4qvqbu4/loadable-test.zip?dl=0

跑

重建：

我正在尝试对一个大文件进行代码拆分，并在需要时让它异步加载。

当我尝试单击 webapp 的受影响部分时，Chrome 开发工具显示此错误（参见图片）。表明我没有正确设置某些东西，但我正在关注文档并且看不出有什么不同。

我的代码如下：

routes.js - 匹配路由并返回反应容器。AsyncSignupPage.js - 实际上只是导入 Signup 并使其“可加载”/异步。Signup.js - 实际的注册页面容器。

路线.js：

AsyncSignupPage.js：

我暂时离开 AsyncSignupPage 只返回一个 div，因为仅此一项就产生了这个问题。

我在这里做错了什么？

任何人都有将创建的 React 应用程序转换create-react-app为使用服务器端渲染和代码拆分的经验loadable-components吗？我知道这是一个普遍的问题，但主要是为这种方法寻找一般指导或任何主要的危险信号。我想保留开箱即用的好东西create-react-app——尤其是实时重新加载开发环境——同时使用 SSR 和代码拆分添加优化。我可以使用express后端和handlebars模板来完成这项工作，但我面临着许多挑战，让代码拆分在此设置下正常工作。任何提示/故事表示赞赏！

我loadable component在 ReactJS 项目中使用。对于 SSR，但在运行 start 命令时出现以下错误，我在 GitHub 中看到与我的问题相关的问题，但主要解决方案对我不起作用。

这是我的路由文件，我在以下文件中添加了所有路由并加载它baseLoadable：

这是我要渲染为字符串的渲染文件，然后调用 HTML 来创建 HTML，但在 catch 部分出现错误

当我有 10 秒的超时来加载页脚时，试图弄清楚为什么这两个同时加载。目前我正在同时获得两个负载。

I am trying to learn how to do code-splitting through dynamic imports, but unfortunately I am getting an error as follows:

And in the error is happening in the following line:

Webpack.config as follows:

I also have a babel.config.js:

我正在尝试提高我的网站性能，Google Chrome Lighthouse 告诉我为 ssr 使用可加载组件以“删除未使用的 javascript”。

我在文档中发现它似乎是一个对我的案例具有有用功能的库，例如：组件拆分/加载库。

我的问题是：

1. @loadable/component 真的那么好吗？
2. 如果它很好，我应该将它用于任何组件/库导入吗？

谢谢！