问题标签 [react-loadable]

我正在使用 react loadable 代码拆分组件。我还使用Extract CSS Chunks来拆分我的样式表。在服务器端渲染和初始客户端渲染期间一切正常，但是当我转换到新页面并动态导入组件时，正在获取 JS，但组件的相应 CSS 不是。

当我的所有 CSS 都在一个文件中时，这不是问题，但现在不是，我如何获取 CSS 和 JS 以用于动态导入的组件？这就是Webpack Flush Chunks应该帮助的吗？

提前致谢！

我编写了一个自定义逻辑来处理 react-router-dom .v4 中的异步路由加载包。这是完美的工作。但我也听说过有用的包和漂亮的 API 来做同样的事情，比如React-Loadable. 它有一个问题，我无法在组件的挂载上获取从 Redux 推送的道具/状态，抛出这个包。

在下面的两个示例中，我的代码从custom样式改写为react-loadable样式。最后一个是 react-loadable 版本，它不会抛出 state/props。

我的个人代码：

相同的代码，但使用 React-Loadable：

这是一个基本的标题组件，包括在点击时显示登录/注册表单的按钮。

当然，这样做的目的是在请求之前不应加载登录和注册组件。

react-loadable 正在创建一个附加文件（ 0.js ），该文件似乎包含注册组件，但我的搜索没有发现任何对登录的引用。

无论如何，在初始加载时，登录和注册都被加载，正如我的 console.log 所示。

当然，我希望在单击触发按钮之前不会加载它们。

请注意，我确实尝试在路由上使用 react-loadable，它似乎工作正常，即，我可以在开发工具的网络选项卡上看到正在加载的文件。

另外，我碰巧有一个服务人员现在正在预缓存构建文件，但我认为这不会影响这一点。还是应该？它不在路线上。

标头组件的摘录：

加载功能：

}

我正在使用 react-loadable 来加载视图。下面的代码工作正常：

但是我有多个视图，因此我想通过用变量替换路径字符串来概括（重构）上述代码。这就是问题开始的地方。我尝试了以下技术，但它不加载目标视图，而是只保留加载视图，这只是一个包含简单“加载...”字符串的临时视图。

我错过了什么吗？谢谢。

服务器端渲染是否react-loadable可以与 Webpack 4 和 Babel 7 一起使用？在按照说明操作时，我无法使其成功运行。

在仅遵循客户端步骤之后，Webpack 为每个可加载组件正确输出单独的块，这在我在浏览器中加载页面时反映出来（即：块是延迟加载的）。

但是，在执行所有 SSR 步骤后，服务器会引发以下错误：

我的routes/index.js文件：

SO上的这个问题可能与我在上面看到的服务器错误有关，但提供的信息更少。

我.babelrc已经在使用@babel/plugin-syntax-dynamic-import，但我尝试添加babel-plugin-dynamic-import-node. 这修复了服务器问题，但 Webpack 不再构建块。

我一直无法找到一个明确的例子来让它发挥作用。关于正确设置的信息相互矛盾。例如，react-loadable README 说使用包含的react-loadable/babel插件，而lib 作者的这篇文章说使用babel-plugin-import-inspector. 此 PR似乎试图解决 Webpack 4 的问题，但已关闭，并且分叉的库似乎也有问题。

我在用：

• 通天塔 7
• 节点 10.4
• 反应 16.5
• 可加载的 5.5
• 网络包 4

我正在尝试在第三方反应组件上使用 react-loadable。它只是显示空白页。当我用它来编码拆分我自己的组件时，它工作得很好。

我确信我使用的方式是错误的。请指教。谢谢。

目标：支持根据某些安全性或定义的用户角色要求动态加载 Javascript 模块，这样即使在开发工具中识别了模块的名称，也无法通过控制台成功导入。

JavaScript 模块可以轻松上传到 Firebase (#AskFirebase) 等云存储服务，并且可以firebase.functions().httpsCallable("ghost");根据自定义声明或类似测试的存在使用 Firebase 云函数有条件地检索代码。

最后，我想做的事...

...就是把一个 webpack 的 React 组件放到云端，经过服务器端安全检查后有条件的下载到客户端，然后import()放到用户的客户端环境中渲染。

将 Javascript 存储在云中并有条件地下载到客户端很容易。一旦我在客户端中获得了 webpack 的代码，我就可以像使用Function(downloadedRestrictedComponent)一样将它添加到用户的环境中，import('./RestrictedComponent')但我不知道如何从组件中获取默认导出，以便我可以实际渲染事情。

import(pathToComponent)返回加载的模块，据我所知，没有传递import()字符串或流的选项，只有模块的路径。并将Function(downloadedComponent)下载的代码添加到客户端环境中，但我不知道如何访问模块的导出以呈现动态加载的 React 组件。

有没有办法从下载的流中动态导入 Javascript 模块？

编辑添加：感谢您的回复。不熟悉 Blob 和URL.createObjectURL. 知道为什么找不到吗？

过去几天我一直在努力消除页面闪烁。我的项目从 create-react-app 开始，然后我使用帮助来设置 SSR 和各种其他选项。当我开始遇到问题时，我剥离了我的代码并弹出。这是我的代码。您可以使用 构建npm run build和启动 SSR npm run serve。访问http://localhost:3000/以查看结果。

我的应用程序中有两条路线：Home和About.

Going to / (Home) 可以按需要工作：react-loadable识别home捆绑包，为其注入<script>标签，然后将页面发送到门外。客户端加载所有捆绑包并在没有闪存的情况下进行反应。

转到 /about 会导致页面闪烁（确保从服务器加载页面以查看此内容）。moment-timezone我在组件中添加了一个 import for about，webpack 巧妙地将它移动到自己的包中，与包分开about。问题是react-loadable它只看到它需要about捆绑包，而不是包含时刻时区的额外捆绑包。因此，在客户端，当 react 接管时，它发现它缺少一个模块，将页面空白，加载包含缺少模块的包，然后重新渲染（至少，我认为它是这样工作的）。

我错过了什么？我正在使用 React-Loadable 自述文件中描述的 babel 和 webpack 插件。看起来 React-Loadable 只够聪明，可以深入一层，看不到导入模块的依赖项是什么，但肯定不是这样，是吗？

我在我的应用程序中使用“react-loadable”来延迟加载一些我不想在应用程序加载后立即渲染的组件，目前我正在遵循基于路由的代码拆分。

我的文件结构：

内容ignitus-About/Components/index.js如下：

这是我的延迟加载 AboutUs 组件的代码片段：

但是您会在这里注意到的是，我正在编写 About 组件的确切/完整路径，但在我的Components目录中，我只有 2 个文件一个index.js和另一个About.js。

这index.js是通过执行此操作导出About组件：

但是当我在我的可加载组件中写这个时：

index.js它会引发错误，所以我的问题是 react-lodable 是否期望组件的确切路径，如果不是，那么如何从可加载组件中导出我的 About组件。

整个代码库

所以，当我像这样延迟加载我的组件时：

它工作正常。

如果我尝试像这样延迟加载：

它抛出一个错误：

一段时间以来，我一直在使用react-loadable来动态导入我的 React 组件。

在最近的 React 版本 16.6 中，React 团队也包含 React.lazy()了动态导入。

仍然使用这个包有什么好处react-loadable吗，或者是时候迁移到新的 React 版本了？