问题标签 [react-loadable]

我正在使用 create-react-app 创建一个应用程序，并使用 react-loadable 延迟加载组件。

我想要做的是为加载器对象或 react-loadble 模块的可加载函数导入动态路径。

代码：

如果我将路径字符串放在路径变量的位置（例如 import('./pages/Home')）并调用它起作用的函数。但是当我像上面的代码一样使用它时，Loader 会加载，但它不会再继续加载组件了。如果我在导入中使用变量，为什么它不起作用？

我正在使用 create-react-app 构建一个 React 应用程序，现在我正在为其中的代码拆分而苦苦挣扎。我正在使用反应加载。在开发环境中一切都很好，但是当它在一些更深的路线上构建一些块时（例如 /test/2 或 /test-a/42）没有加载，因为没有找到块（404）。

这就是我使用 react-loadable 加载组件的方式

这是我在路线中使用这些组件的方式

正如我所说，在开发模式下一切似乎都很好，但是在我构建应用程序后，在生产模式下找不到路线/test/:id和块。/test-a/:id任何答案都会真正挽救我的生命，谢谢

所以我有一个包含 2 个部分的 webpack 4 react 应用程序：

• 登录组件
• 应用程序的其余部分

我的 routes.js 看起来像这样：

我的 webpack 生成 2 个 js 文件 bundle.min.js 和 0.min.js

我的假设是，默认情况下，如果用户未登录，则仅登录组件将加载 0.min.js，如果用户已登录，则应用程序的其余部分将加载，但我同时看到 bundle.min.js 和 0 .min.js 正在加载。

我根据 React-loadable 文档做了所有事情，但它不适用于 css 模块。

我正在使用服务器端渲染。

客户端错误：

服务器上的错误：

我正在使用 react-loadable@5.5.0 在基本的 Web 应用程序上进行代码拆分。无论我是否设置了delay道具，加载微调器都会在页面加载时立即闪烁，没有延迟。我已经剥离了应用程序以删除一些路由逻辑，删除了 CSS 动画，尝试了 @5 版本的早期版本，删除了仍然呈现的 AppBar，图标仍然在页面加载时立即闪烁，没有延迟。这是 Loadable 实现的精简版本：

我不知道如何继续前进，有没有人遇到过同样的问题？是否有其他信息可能有助于解决问题？

我从未设置过 http2，但我认为 cloudflare 将请求作为 http2 服务。但是，当我看到开发工具瀑布时，它看起来像 http1。因为当我刚刚使用 http2 测试站点进行测试时，它显示我正在服务 http2。

如您所见，它一次可以获取 5 或 6 个。

我需要设置 ngnix http2 而不是依赖 cloudflare 吗？我还添加了 webpack 优化选项以允许更多请求。

我是 react-loadable 库的新手。我想知道是否可以在服务器上使用 React 的 renderToNodeStream 而不是 renderToString。

服务器 index.js：

导入 index.js 的 render.js 文件：

我没有找到任何使用renderToNodeStream唯一的示例或模式renderToString。这是接近还是远离？我希望能够使用 renderToNodeStream 来获得更快的响应。

我正在尝试使用react-loadable来动态导入组件。

我有一个这样的配置文件：

清单.ts

我有一个AppRoutesList.tsx文件，我在其中通过使用 react-loadable 为组件注册路由。

因此对于上述配置，它应该注册 /test 路径以在位置“./Test/App.tsx”加载组件（默认导出）

但是当我确实去这条路线时，我只看到加载文本。在 chrome 检查器中，我看到 props 被传递给 RedirectIfAuthenticated 组件，而组件 prop 没有被传递：

这意味着我的 LoadableComponent 没有在这里返回实际的组件。我不知道如何解决这个问题。谢谢。

额外信息：

RedirectIfAuthenticated组件具有以下代码：

Here is the relevant code before manual code splitting:

here is the code after code splitting:

I've also tried the tutorial here: https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html

which seems to be the same thing that react-loadable is doing.

I'm using webpack v4 with an ejected create-react-app and the following babel packages / plugins:

"@babel/cli": "^7.2.0" "@babel/plugin-proposal-class-properties": "^7.2.1" "@babel/plugin-proposal-export-default-from": "^7.2.0" "@babel/preset-env": "^7.2.0" "acorn": "^6.0.4" "babel-eslint": "^9.0.0" "babel-plugin-dynamic-import-node": "^2.2.0" "babel-plugin-lodash": "^3.3.4" "babel-core": "^6.26.3", "babel-jest": "20.0.3", "babel-loader": "^8.0.4", "babel-preset-react-app": "^6.1.0", "babel-runtime": "*",

it's not such a big deal that it isn't reducing the bundle size, i just can't seem to figure out why this is the case.

为了提高站点性能，我正在考虑代码拆分一些我在初始构建时不需要的组件。在寻找一些选项后，我决定使用react-loadable。

根据 react-loadable 文档，我们可以并行加载多个资源。有了这个想法和文档中给出的示例代码，我试图实现一个组件，该组件获取组件以及呈现组件所需的数据。但我面临的问题是，每次我尝试使用Loadable.Map功能时，我都会TypeError: loader is not a function在控制台中得到一个，并且只显示加载状态。文档是否损坏或我的实施？