问题标签 [react-loadable]

我已经在我的项目中成功添加了 react-loadable 库以启用代码拆分，我发现的唯一问题是 webpack 生成的块没有命名，它们被赋予整数名称。

我的 react-loadable 使用代码是

我添加了注释来告诉 webpack 3 我希望这个块被命名为 app. 我做错了什么吗？

我正在使用异步加载匹配的路由react-router v4。react-loadable

• AsycnExamplePageLoadable是一个用from包裹的组件react-loadable，例如：

目前，当我路由到不同的页面时，react-router将在异步路由解析之前立即匹配路由。从而显示LoadingComponentfrom react-loadable。

我怎样才能使它react-router只在异步组件被解析后才呈现异步组件？

PS：我正在尝试创建类似于Youtube的页面加载效果。

我正在尝试在我的使用服务器端渲染的 create-react-app 应用程序中进行一些代码拆分。

我正在利用“react-loadable”进行代码拆分：https ://github.com/thejameskyle/react-loadable

到目前为止，我只是将我的Home.js组件与我的应用程序的其余部分分开，只是为了看看它是否有效。在开发模式下（阅读：不是 SSR），它被分块并且工作正常。

但是，我无法在服务器上运行。我正在按照他们的 Github 页面上的指南进行操作，但由于需要进行 webpack 更改而被卡住了。在create-react-app应用程序中，您无法访问 webpack，因为它被隐藏起来了。

我在启动服务器时收到的错误是：

我很确定这是因为我没有按照指南中的说明正确配置 webpack。

在指南中，它明确说明了 SSR：

首先，我们需要 Webpack 告诉我们每个模块存在于哪些包中。为此，有 React Loadable Webpack 插件。

从 react-loadable/webpack 导入 ReactLoadablePlugin 并将其包含在您的 webpack 配置中。向它传递一个文件名，用于存储有关我们的包的 JSON 数据的位置。

我认为如果不弹出，这是不可能的。任何人都知道是否react-loadable可以在create-react-app服务器端渲染的应用程序中使用？

我正在尝试使用 react-loadable 将代码拆分引入我的应用程序。我在一个非常简单的组件上进行了尝试：

但是，当呈现此组件时，我收到以下错误：

我没有看到任何明显的错误，我无法在该回购中提出问题。

背景： 我面临着对工具进行现代化改造并将其转换为带有反应前端的微服务的任务。我的想法是有一个通用的顶级组件，例如包含导航和包含该功能的每个微服务的组件。

方法：

• 在本地捆绑组件，使其成为有效的整体前端，并且前端代码仅在 repo 中分离。

我认为这将放弃不必为每次更改重新部署整个应用程序的优势

• 通过在配置文件中定义它们，从微服务中延迟加载每个组件的缩小包

使用这种方法，我可以自己 webpack 每个组件并从主页异步导入它，但可能会有巨大的开销

我阅读了有关使用 react-loadable 和捆绑 react-router 或 webpack 的基于组件的拆分，但我找不到有关如何从不同的 URL 端点加载小包的信息。

问题： 是否可以自己捆绑 react 组件并从不同的资源 URL 导入它们，一种方法是如何实现的？（或者 React 是否适合这种情况）

我尝试使用 react-loadable by route 进行代码拆分。这似乎会降低性能，因为要加载更多文件。我知道制作一个捆绑文件是一般做法的原因是小型多个文件在 http 1 上速度变慢。所以我想知道我的代码拆分是否做错了，或者它通常会降低 http 1 的性能？由于一些常见组件位于多个 chunk.js 中，因此总文件大小也变得更大。我做错了吗？

我正在尝试使用 ServerSide Rendering 使 react-loadable 工作。我有一个相当大的应用程序，它使用多个 HOCconnect组件，添加路由器等。

组件似乎没问题，而是通过react-redux或其他 HOC 连接的智能组件。 react-loadable似乎并没有将其作为单独的模块并在.json创建的模块中undefined抛出。

正确加载的哑组件示例：

不加载的智能组件示例：

我的服务器的 html 渲染如下所示。这里的所有内容都是从官方文档中复制的：

哪个按预期记录：

这真的让我发疯。这个包看起来真的很好，我想使用它。但是我找不到任何关于此类问题的信息，而且 Github 上也没有问题部分。

接受任何建议或帮助。提前致谢。

我有一个导出所有 SVG 组件的索引文件：

然后稍后在应用程序中，我像这样使用它们：

因为我有很多这些图标，我想用react-lodable.

我试过了：

但这给了我一个错误：

warning.js?6327:33 警告：React.createElement：类型无效——需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入

这可能是因为Icons.Twitter在某些时候PulsingCircleLoader没有静态Twitter属性。

我怎样才能解决这个问题？

我试图使用代码拆分，react-router发现react-loadable在多个地方都有建议（https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/guides/code- split.md和https://reactjs.org/docs/code-splitting.html）。是否可以将 react-router 和 react-loadable 与服务器端渲染结合起来。默认情况下，我的应用程序尝试在应用程序初始化后立即显示加载元素，这违背了服务器端呈现的目的。理想情况下，只有在初始页面加载时，我才会使用ReactDOM.hydrate函数来初始化应用程序（在加载正确的块之后），然后像往常一样继续使用应用程序（显示加载元素）

我有下一个代码：

当状态更新（kappa变为真并p出现）时，活动路由上的组件（无论它是什么 -IndexPage或Registration）重新安装。如果我在 App 中手动导入组件并将其传递给Route没有代码拆分的组件，则不会重新安装路由上的组件（这很明显）。

我也试过 webpack 的动态导入，像这样：

whereimport(`/path/to/${this.props.component}/index.jsx`)运行componentDidMount并填充AsyncView的状态，它的行为类似于Loadable情况。

我想，问题是componentforRoute是一个匿名函数

问题是：如何避免重新安装路由组件？