javascript - 对具有不同组件的多个部分/ View 进行 react ，异步加载

Question

我在思考构建具有多个页面/ View (仍然是 SAP)的 React 应用程序的最佳方式时遇到了问题。

假设我们有一个简单的应用程序，包含 4 个主要部分(页面):仪表板、用户、统计信息、评论。每个部分都有不同的组件(想想 react 组件)。例如，评论部分将具有如下层次结构:

CommentsSection
- CommentsQueue
-- Comment
--- Text
--- Buttons
- CommentsApproved
--Comment
--- Text
--- Buttons

例如，在像 Angular 这样的框架中，4 个主要部分将被分成部分，并根据要求加载到 ng-view 中，并在其中包含它们各自的组件。当登陆主页时，该应用程序只会加载仪表板 View ，并且在用户单击导航项时，将触发所选路线(即 app/users 或 app/users/:id)，并且该应用程序将加载所需的“template-view-partial”(无需刷新浏览器)。

现在就 React 而言，这将如何发生？似乎所有 View 及其所有组件都需要在浏览器化的 JS 文件中可用，然后应用程序可以更新 DOM。

这似乎是非常错误的，因为我们会在第一次加载时加载所有部分，即使用户根本不需要访问该部分。当然，我们可以将它与服务器上的路由分开，并且只根据路由为页面提供组件，但这需要浏览器刷新，例如在 Angular 中，它会在没有浏览器刷新的情况下发生，因为 View 异步加载。

问题是，这种异步加载如何在基于 React 的应用程序中发生？

Answer 1

我认为有几种不同的方法可以解决这个问题，我将解释我目前在工作和副项目中使用的方法。

我们不使用 browserify，而是使用名为 webpack ( https://github.com/webpack/webpack ) 的模块 bundler 。 webpack 的优点在于它类似于 Browserify，但可以将您的应用程序拆分为多个“包”。这很棒，因为如果我们有多个组件/ View ，用户只需下载该特定 View 所需的功能，而无需一开始就下载所有内容。它允许按需下载 react 组件及其依赖项。

Pete Hunt 写了一篇文章，深入探讨了将 webpack 与 React 一起使用时的好处(包括如何异步加载 React 组件)，以及它与 Browserify 和 Grunt/Gulp 等现代构建工具的相似/不同之处: https://github.com/petehunt/webpack-howto