我正在为我的 react 应用程序使用 create-react-app 样板，并为路由使用 react-router 3.0.0 版本。

我想在需要时加载组件，即基本上是代码拆分。

我被卡住了，因为我不知道如何进行代码拆分，因为我有一个 HOC 可以检查用户角色，如果用户没有特定路线的角色，那么我会将用户重定向到一些“未经授权”的路线。

我还有 onEnter 函数，需要在加载任何组件之前调用它，它将检查用户令牌是否已过期，如果令牌已过期，我会将用户重定向到登录页面。

因此，如果有人可以在这种情况下帮助我进行代码拆分。

下面是我的 Route.js 文件

我有以下 webpack 配置：

当我运行 webpack 时，我希望它生成两个文件：source1.bundle.js和source2.bundle.js.

但它也会产生一个神秘的0.bundle.js并将其放在与其他文件相同的目录中。

然后当我打开浏览器时，我得到一个错误：

因为我的包是从一个单独的绝对/static/bundles/目录加载的，这0.bundle.js是试图从当前页面而不是/static/bundles/. 这个文件是什么，如何为它指定加载路径？

我正在尝试使用react-router-server.
它使用 webpack 块 ID 来决定要预加载哪些文件，但由于某种原因，块 ID 的顺序在我的服务器和客户端代码之间是不同的。

为了弄清楚出了什么问题，我想知道 webpack 如何决定哪个块获取哪个 id。

我一直在寻找一个很好的解决方案，可以在匹配的路由上按需加载异步反应组件，而无需 Webpack 导入、System.import、require.ensure……

我想避免客户端代码中的 Webpack 足迹。

在服务器上，我获取所有路由并将匹配的位置呈现为静态 HTML/JS。就像经典的 SSR。

我的解决方案是：

• 使用 Webpack 将异步组件打包到静态包（c1.js、c2.js、...）
• 将地图存储为 Routes => 异步组件为 json ("/path" => c1.js )
• wrap=true使用ajax上的参数请求 React-Rroute(RR4) 匹配路径
• 如果路由存在，并且参数在服务器上wrap=true渲染c1.js以从数据库中获取数据（通用 ajax）
• 将数据和原始c1.js 包装为脚本响应
• 将响应作为脚本子附加到正文或父 React 组件 Dom
• 脚本解包数据和代码，存储它们（例如 Redux）并将异步组件（c1.js）附加/渲染到 React Dom

这样我就有一个小的入口文件，并且可以：

1. 按需请求路由https://host和加载组件（/path）
2. 在入口处请求路由https://host/path并渲染完整的组件（无异步）
3. 使用 RR4请求路由https://host/path并获取和呈现异步组件
4. 像2一样重新加载页面。

5. 使用浏览器历史记录（后退）而不请求数据或组件（都存在于 Redux 存储和脚本标签中）

6. 能够使用分页组件（加载更多数据并重用获取的组件）

我对此的想法：
将异步组件直接渲染到 Dom，而不是将它们缓存在脚本标记中，这将在卸载父组件时丢失组件代码（因为 main.bundle.js 中不存在异步组件）

问题：

• 是否有一种经过验证的方法来处理异步组件加载（仅 React 代码且没有Webpack hacky 导入）并能够通用渲染？

• 将反应代码拆分到独立包上是不好的做法吗？

  /li>
• 附加脚本标记以响应组件 dom 是不好的做法（如<App/>或<Home/>）
  • HMR 怎么样（可能有副作用）？

昨天我在尝试将代码拆分为多个文件时遇到了问题。

昨天早上，我的整个代码都在一个文件中，为了更轻松地跟踪所有内容，我想将代码拆分为更多文件。

这很顺利，直到我得到一个需要声明变量的函数，尽管我已经有了（但可能在错误的地方）。

因为代码太长，我把所有文件都放到了pastebin。

我在 main.cpp 中声明了“字段”：

整个文件在这里：https ://pastebin.com/Jy1XvdpL

我想在我的 field.cpp 中使用它：

field.h 看起来像这样：

问题是我不知道在哪里定义 char 字段，因为如果在这些文件中的任何一个中完成，我都会收到错误。那么我需要做什么才能让 char 字段在 field.cpp 中工作并因此在我的 main 中工作？

PS 这是我的第一个 C++ 程序，我每天都在学习新东西。我很感激任何关于如何更好地做某些事情的提示^^

亲切的问候，本杰明

我正在尝试在我的 webpack 配置中为 prod 构建实现代码拆分 - 将供应商文件与应用程序代码分开。但是当我尝试构建时，出现以下错误：

基本上列出了我的依赖项中的包。这是我的 Webpack.dist.conf 文件中的一个片段：

编辑 我发现问题出在字体真棒。我从 vendor.js 中删除 font-awesome 的那一刻，一切都开始正常了。仍然不知道导致此错误的 font-awesome 有什么问题。

我正在构建一个要在 React 应用程序中导入的组件库。我想公开这些组件，以便可以在应用程序中动态导入它们。

我尝试了什么：

库 > index.js

库 > webpack.config.js

构建结果

我想要达到的目标：

应用 > index.js

我想如何导出组件以便它们一一可用？还是有其他方法？

我正在编写一个基于 Ruby Sinatra 后端的 React 应用程序。main.js 文件呈现应用程序：

我曾经将所有组件都放在一个文件中，但想将它们拆分为单独的文件。如果我在每个父组件文件中导入子组件，我只能设法让这个运行，就像在 Galery.js 中这样：

是否可以避免显式导入所需的组件，而是将它们加载到 main.js 文件中？最好不要在每个文件中导入 Component 模块。

这是我的 webpack 配置：

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

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

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

如何在 VueJS 中实现渐进式渲染，仅在客户端？