问题标签 [react-loadable]

我正在尝试使用反应可加载和动态导入将代码拆分为多个捆绑包。拆分过程非常有效。但是，当我尝试使用魔术注释webpackChunkName让 Webpack 自定义包名称时，它总是将我的包命名为 0.bundle.js 1.bundle.js ....

我在我的 .babelrc 中使用chunkFilename: '[name].bundle.js'过webpack.config.js并且还明确地将“ ”comments: true

经过一整天的研究，我真的感到很沮丧。如果有人有线索，真的很感激。

这是我的配置

webpack.config.js

.babelrc

路由器文件

构建结果：

我在这里错过了什么吗？

我有一个通过 react-loadable 加载的组件。正在加载的组件在 componentWillReceiveProps 中有一些逻辑，用于检测它是否需要获取更多数据等。

当通过 react loadable 加载时，它会调用 render 1 次，并且永远不会调用 componentWillReceiveProps。

这个组件包含在另一个组件中，该组件进行一些初始数据调用并将结果发送到Thing

有什么想法吗？它再次调用return <Component，但在这种情况下似乎它正在创建一个新组件。

我真的不明白为什么在 create-react-app 构建中的代码拆分时我会遇到 React-Loadable 这样的问题。我正在尝试通过路由拆分代码并遵循文档和其他地方提到的基本规则，但只生成第一个组件块，而不是生成所有组件块。请就此提出您的解决方案或要点。

下面是 react-loadable 组件

我目前正在使用带有 react loadable 的 webpack 4 来创建块。它实际上块取决于断点。但是，供应商规模保持不变。React loadable 还不支持 webpack 4 吗？或者我缺少一些设置？

CSS实际上似乎被分成了块，虽然

使用 Create-react-app，我想延迟加载我的一些组件，只要这些组件与我的主要组件（我在其中定义路由）位于同一文件夹中，它就可以正常工作，但是只要我想加载来自另一个文件夹的组件，例如

它无法找到/导入模块。（如果我移动文件，完全相同的模块将起作用！

我做了一个完整的例子，可以在这里看到

• 我还尝试将路由更改为 src/x/x 而不是 ../x/x 但再次出现错误。

我使用 React Router 和 React Loadable 根据路由对我的应用进行代码拆分：

在 App.js 中：

在 Component1Loader 中：

在 Component2Loader 中：

如何根据路由预加载组件？例如，大多数用户会从首页导航到 /page1，所以我想预加载它。

在 /page1 上时，我想预取 /page2。

我有一个非常简单的 React 组件，用于react-loadable动态导入另一个组件。代码看起来类似于以下内容：

我试图通过使用 Enzyme to 来测试这个组件mount outerLoadableComponent，它创建了一个包装器outerLoadableComponent，我可以看到它的LoaderComponent包装loadingState设置为 true。但是，我被困在内部import无法解决的地步。这似乎是一个承诺，只有在导入实际通过时才会解决，但是即使有一些超时，它也不起作用：

我babel-rc在dynamic-import-node测试之外运行它一切正常。但是似乎没有明确/记录的方式来模拟（使用 sinon）import承诺的结果。有任何想法吗？

我有一个父组件 A，创建一个子组件 B。这个子组件的定义是使用 Loadable 导入的。在下文中，组件 B 是目录。

现在我想在渲染这个组件之前获取一些初始数据，如文档中所述。这是我所拥有的：

我想fetchCatalogInitialData使用参数调用，即 URL、令牌等。这是否可行？

我正在尝试将 react loadable 与服务器端渲染一起使用。

我的 babel 插件配置

渲染期间的服务器响应，其中：

得到：

我想我的错误来自react-loadable.json哪个键之一undefined

但是如果我有这样定义的模块，我可以弄清楚它是如何变得未定义的webpackChunkName：

也许有人有类似的问题或知道任何解决方案？

CSS 文件将如何在客户端使用 react-loadable 库动态加载？

我在服务器端和客户端渲染中都包含了 react-loadable 库，从服务器端渲染一切正常，但客户端，CSS 将如何动态加载？

webpack.config.prod.js：客户端/服务器 -

Server index.js：

renderer.js：

Browser.js：