在我的项目中，我使用 react-lodable 插件来延迟加载 js 文件并使用 hydra 进行服务器端渲染。但是页面布局完成后，网页会在客户端重新渲染整个页面。

从服务器向客户端提供 html 时出现重新渲染问题。

这个问题与 react-lodable 或任何其他问题有关吗？

我正在尝试在嵌套路由上的应用程序中实现基于路由的代码拆分。

我想将主路由子路由分解为与主块分开的块。

mainRoutes.js

VDClient.js

根/index.js

构建完成后，我可以看到除 vddesktop 块之外的所有块。我在这里错过了什么吗？

生成的其他块不包含路由或路由代码/dashboard，这是预期的行为。所有的进口都是有序的，所以我认为这不应该是一个问题。

我也尝试过使用 react-loadable，但不幸的是，这给了我一个全新的 webpack 4 问题。

参考： webpack 4 react loadable 不会根据夹点拆分供应商基础 https://github.com/jamiebuilds/react-loadable/pull/110

请让我知道我是否可以提供更多可能有助于解决此问题的信息。这将是一个巨大的帮助。

生殖示例回购

module_esnext_import_image

如何重现

然后，查看dist文件夹内部。您应该会看到类似的内容，src.7753e686.png而不是1.some-random-id.png（文件名以 开头1）。

由于我要导入的图像是1.png，因此文件名也应以 开头，1以便图像链接自index.html. 但是，由于生成的图像文件以dist开头src，因此图像链接中断。

我对代码做了很多更改，以找到这个问题的核心，并且似乎发生这种情况时

1. tsconfig.json 编译器选项->“模块”：“esnext”
2. 使用 react-loadable
3. 在加载的组件中导入图像

如果我更改 tsconfig.json compilerOptions -> "module": " commonjs"，那么它似乎工作正常。

我想知道是否有人知道为什么会这样。

我目前正在尝试为反应服务器端渲染进行代码拆分。除了令人耳目一新的部分外，一切都很好。当我刷新页面时，一切都显示在服务器端。但是，在客户端接管延迟加载组件之前的那一瞬间消失了，然后当客户端再次开始渲染时它会显示出来。

"webpack": "^4.4.0", "mini-css-extract-plugin": "^0.4.0",

react-loadable.json 部分

样式样式的 webpack 块选项：{ name: 'styles', test: /.css$/, chunks: 'all', enforce: true },

Server.js react-loadable 设置部分

即使所有页面都正确加载，bundles 变量总是空数组。有谁知道如何解决这个问题？或者什么可能导致这个问题？

我正在尝试实现一个有 10-15 页的应用程序。这适用于 react-router 但我应该使用 react-loadable 来获得 Spinner 和加载效果......

但是如何在 loadable 中导入路由器组件？

我应该为每个组件创建一个 const 变量吗？

像这样 ：

还是可以用其他技巧？

我有两种路线：一条路线user和一条project路线。user路由是顶级 URL 资源，而project属于user. 例如：/users/1/foo和/users/1/projects/2/bar。

我只想在路由不包含时显示特定于用户路由的组件/projects/:id，并且只要包含特定于项目的组件。

在这两种情况下尝试以下操作都会加载/users/:id路由：

通常，这可以通过使用带有条件的组件来显示任一组件来非常容易地实现，但是我的要求是我想动态加载用户和项目特定的组件（导入由自动处理） webpack，react-loadable所以它看起来就像我需要一个路由级别的解决方案，或者可能是使用react-loadable.

编辑 问题是我为路线指定了错误的路径。只要我将更具体的 ( project) 路线放在首位，就可以做我想做的事<Switch />

我有一个动态加载的组件

问题：我的模块没有正确解析，因此组件没有在屏幕上呈现。

测试：组件应该呈现

在使用 jest 进行测试时，我要么超时（使用 done 时），要么我的组件在第一个滴答声中没有加载，这导致测试用例失败。

我想实现每个主路由的代码拆分，以便每个页面都有自己的文件（及其子组件），例如我有一个主渲染函数，其中Route包含指向容器的组件：

每个容器看起来像这样：

我试图包装一个容器并在路由中引用它，但它不起作用：

那么应该包装什么呢？

我想实现这样的目标：

然后我想导出其中的特定组件，如 Grid、Row、Col，通常按如下方式导入：

我在测试React使用react-loadable. 比如说，我有一个Button组件，根据它是否接收到一个icon道具，它会像这样加载一个Icon组件：

按钮.js

然而，当我测试这个组件时，Icon还没有加载，而是测试只找到<div>Loading...</div>元素......

Button.test.js

有没有一种优雅的方法可以在不使用实际setTimeouts 的情况下处理这种情况？