问题标签 [react-loadable]

我在需要时使用 react-loadable 加载组件，但在 react-loadable 中，我们必须显示一些加载组件，直到组件在后台加载，但我想显示前一个组件，直到下一个组件加载。请帮我解决这个问题。注意 - 我正在使用 webpack 进行基于路由的代码拆分。

有什么方法可以在生产模式下从 if 语句中完全排除某些代码？

我试图做这样的事情：

问题是，当应用程序构建时，您仍然可以从调试组件中看到源代码，想法是完全剥离它，因为在生产模式下组件永远不会被使用。

即使我延迟加载它仍然不能满足我，因为我想完全摆脱它，这样我就可以隐藏所有调试功能。

我使用 react-loadable (5.4.0) 加载了一个组件，该组件还加载了一些其他本地和外部库：

这是定义的可加载：

我遇到的问题：如果我异步包含的模块还导入了以前从未从我的应用程序导入的本地模块，我会收到此错误：

警告：React.createElement：类型无效——需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：对象。

检查LoadableComponent. 在可加载组件...

例如：在上面的代码中，我已经./something导入了这个。如果此模块以前从未在我的应用程序中加载过，我会收到上述错误。

如果我：

• 将模块导入其他地方（至于validationAPI，导入没有问题）
• 删除导入

...该应用程序有效，我有异步行为。

注意：是否使用进口的东西并不重要。

我也尝试将something模块移动到其他地方，但这似乎与模块位置或相对导入语法无关。

另请注意，外部库不会给我任何问题：例如：该codemirror库仅包含在该文件中，但它仍然有效。只有本地模块给了我这个问题。

找到的唯一解决方法：不导入以前从未导入的任何内容，而是something在组件文件中包含内联模块内容。

这是可以接受的，但文件大小有点膨胀。

我不确定这是 react-loadable 或 webpack 或其他东西的问题。有什么建议吗？

我一直在尝试将 React 可加载库与 Webpack 4 一起使用。在 SSR 上，页面加载正确（所有异步导入内容都已加载）。但是，异步组件消失了一会儿。react-loadable.json 似乎没有正确的信息，因为它没有获取页面所需的所有块（以某种方式在服务器端正确显示）。当我 console.log 块时，只显示了几个块。这可能是因为某些路线是动态的吗？

请看下面的附加屏幕截图

由Script发起的是refetching部分

解析发生在服务器端，脚本部分发生在客户端

我如何从 react-loadable.json 捕获所需的块

产品服务器

客户端

拆分块设置

如果有必要，我很乐意提供更多信息

I want when I submit the email and the password to login, it will be redirected to the dashboard, my code is below :

My route :

When I run it, I get :

How can I fix that please ?

我有一个问题react-loadable，我有一个很大的组件列表，这些组件可能会或可能不会根据用户生成的内容呈现。我正在使用 switch 语句来呈现正确的语句。

用户生成内容的（简化）列表可能如下所示：

const content = ['Paragraph', 'Image', 'Paragraph', 'Canvas'];

现在，我想要做的是只有使用的组件进入捆绑包。相反，包含在以下 switch case 中的所有这些都包含在捆绑包中。为什么？

例如，dynamic-video-component即使未使用，也会在捆绑包中结束。有没有办法防止这种情况？

当前使用 Webpack 4 的 webpack 设置

问题：

当我尝试启动节点服务器控制台尖叫：

我发现使用函数 addImport() 的 babel-plugin-import-inspector 又被弃用并引发错误。

我不能停止使用这个插件，因为它与 react-loadable 高度相关；（

在这种情况下我该怎么办？我的 babel 版本是 7，可能我应该降级吗？

顺便说一句，babel 让我使用 @babel/helper-module-imports 并使用从该模块公开的函数，但我不明白如何使用。

谢谢！

我制作 app.client.js 和 app.server.js 包，另外我执行代码拆分并创建 vendor.chunk.js 1.chunk.js（这个应该是我的组件包，它是根据请求上传的）。

当我查看它们时，它们都是不同的，但是当我通过 DevTools 查看它们时，每个包都像下面的屏幕所示：

这是我用来执行 res.send(~html~) 的 renderer.js 的一部分：

你能解释一下为什么它坏了吗？谢谢！

UPD：如下设置我的 server/index.js 文件后...

...我还有另一个问题：1.chunk.js 和 1.chunk.js.map 以某种方式重复，并且 devtools 警告我错误“意外令牌：”。这是它现在的样子：

我正在使用webpack 4.6.0并babel 7.0.0构建react 16.3网络应用程序。

我的 js 资产在 https://domain/js/app.bundle.js 下

我使用 react-loadable 将组件拆分成块。这些块也位于 /js/ 下，但是，react 从相对路径中获取它们，即：

这当然行不通。

问题：如何告诉 react 或 webpack 使用绝对路径 /js/ 来获取块？

这是我的 webpack.config.json

这是我在 package.json 中的包

这是我为测试代码拆分而更改的反应代码

我正在使用 react-loadable 库在 reactJS 中进行延迟加载。它非常适合渲染组件。但是当我使用延迟属性时，渲染时间不受影响。那么，我需要在这里更新什么？

感谢您的帮助。