问题标签 [react-loadable]

我正在尝试将代码拆分应用于我的 React 应用程序。下面的代码是我的路线，由Loadablefrom应用了代码拆分react-loadable。通过实现，每次我访问每个页面时，都会正确加载来自 webpack 的代码块。但是，当我最初访问我的网页时，它最初会导致屏幕闪烁。之后，如果我移动到另一个页面，屏幕不再闪烁。仅在最初访问我的网站时才会发生。

有谁知道为什么会这样？我的配置有问题吗？

顺便说一句，我在我的 React 应用程序中使用了 Node.js 的服务器端渲染。是否与代码拆分导致的屏幕闪烁有关？

路线.jsx

src/index.js

我在 React 中使用 loadable 来动态加载我的组件。所以我正在导出每个组件的索引并将它们导入 app.js 中。但问题是我仍然在 WebStorm 中收到一个错误，即导出默认值在单个组件索引文件中未使用。

这是我的代码。这是在我的 App.js 文件中。

我的组件索引文件。

WebStorm 中的错误截图：

我正在尝试使用react-loadable来实现代码拆分，并且按照文档中的建议，我为它创建了一个 HOC，如下所示：

我像这样使用它

但我收到以下错误

参考这里的文档，他们提到了这个问题以及如何解决它，我尝试添加modules, 和webpack属性，但它没有用。

顺便说一句：在 webpack.config.js 中，我已将“src”目录添加到解析模块中，如下所示：

我确定我错过了什么，但我可以得到它......

我们使用 react 和react-loadable。

在我们的应用程序初始化期间，我们正在验证我们定义component.preload的每个方法是否存在。<Route />

如果缺少该方法，我们会显示一个警告，表明该组件应该是可加载的。

我们使用webpack 4，有没有办法自动包装组件，这样我们就不用手动去做了？

这是一个组件的样子：

这是包装在 react-loadable 组件中的相同组件：

1. 我们在不同的包<Route />中声明。node_modules
2. 它可以使用<Resource />（来自react-admin）而不是<Route />
3. 它们不以 ESM 格式分发，而仅以CJS (CommonJS) 格式分发。

我有一个可用的 react.js 应用程序，它使用 npm start（使用 create-react-app 构建的应用程序）工作。当我尝试运行 npm run build 时，它会构建应用程序。我使用

它加载第一个仪表板页面，但不与服务器通信。我已将 console.log 语句放在服务器中以检查是否有任何请求进入，但它从不记录任何内容......这意味着客户端不与服务器交谈。我在 package.json 中有代理语句以连接到端口 3300 上的服务器。这在开发模式下有效，但在生产模式下似乎无法获取 package.json 中的代理设置。

请指导...这是我第一次切换到生产模式...任何有关切换到生产模式的指导都会有所帮助。

顺便说一句，我也使用 react-loadable ......

我react-loadable用来拆分我的代码。我一开始就选择在路线级别执行此操作。我的routes.js样子是这样的：

这是我唯一使用的地方react-loadable。

当我构建应用程序时，我得到了我的命名块，但我也得到了一堆随机编号的块：

这些其他块似乎包含诸如moment.js,之类react-select的内容，还有另一个包含react-dom肯定会包含在每个页面中的内容？

我想知道为什么会发生这种情况以及如何命名这些块或将它们与页面块合并？

我正在尝试测试一个组件，该组件使用 React Loadable 呈现几个异步导入的子项，例如 Modal。我的测试看起来像这样

测试给出了一个不是很有帮助的错误，如下所示

我根本找不到有关此错误的信息。任何人都可以在这里阐明一下吗？

在此先感谢您的时间！

我怎样才能拥有 Next.js 之类的数据获取（getInitialProps）与React Router和React Loadable使用Razzle。我在没有 react-loadable但没有代码拆分的情况下获取数据，应用程序包太大，为客户端加载页面需要很长时间。

这段代码有效，但我只是不明白我一年前做了什么（它与前面的例子有点不同）

服务器.js

路线：

我的组件是这样的：

React Loadable Component 具有可以加载 Component 的 preload() 方法，所以我尝试了： route.component.preload()但它不起作用。

我尝试了可加载组件，它也有同样的问题，但我可以用可加载组件替换反应加载（我首选的库是可加载组件，因为它可以使用 StrictMode）。

实际上，after.js解决了这个问题（它使用 Razzle），如果我可以提取代码拆分逻辑并在我的应用程序中使用它，或者有一些数据获取和react-loadable的工作示例，那就太棒了。

我有一个 git 存储库，我将其作为 npm 模块导入到我的 package.json 文件中。现在我正在尝试使用 react-loadable 加载这个组件，但我的 bundle.js 大小似乎没有减少。虽然我可以看到创建了一个块，但它不包含我的组件代码。它仍然存在于主 bundle.js 文件中。谁能提到另一个用作 npm 模块的 git 存储库是否支持延迟加载？

我们最近一直在考虑将代码拆分到我们复杂的 Web 应用程序中，以减少主包的大小。我们关注的主要部分是使用 webpack 和 react-loadable 进行动态导入。

我遇到了一些我认为是相当大的问题，举个例子：

其中 FirstChild.jsx 和 SecondChild.jsx 都导入相同的服务：

当与 webpack 捆绑时，我们最终得到 3 个文件：

• 主包（包括父组件）
• FirstChild 捆绑包（包括MyService）
• SecondChild 捆绑包（其中还包括MyService）

在这一点上，我看到了一个问题 - 我们MyService在两个文件之间都有重复项。对于一些小型应用程序，这可能不是问题（或者如果服务只是帮助方法），但如果我们使用我们的服务在应用程序的整个生命周期内存储一些数据，我们最终会得到两个对象引用服务，因此完全违背了它的意义。

我知道这里的服务可以“顶级”移动ParentComponent到每个组件，并可能作为道具传递给每个组件，但它似乎破坏了 webpack 首先拥有的架构 - 能够导入我们的任何东西需要我们需要的任何地方，它只创建一个参考。如果您有很多嵌套组件都需要导入各种服务和其他组件，这也可能会出现问题。

显然，这个例子很简单，但是将它实现到一个具有非常复杂架构的大型应用程序中可能会立即让我们遇到问题。

对此有什么想法吗？谢谢！