【问题标题】：Hyperapp / Webpack - How to code split componentHyperapp / Webpack - 如何编码拆分组件
【发布时间】：2021-08-09 18:07:42
【问题描述】：

为了减少我的应用程序的初始负载，我尝试进行代码拆分。例如，我成功拆分了 twilio-video，以在用户按下“呼叫”时加载和初始化

import('twilio-video').then(Video => {
    Video.connect(twilioInfo.data.token, options).then(room => {
        ...
    });
});

Webpack 正确拆分代码并在需要时加载。

现在我想对组件或路由做同样的事情（当我们站在登录页面时不加载用户配置文件）。有没有等价的

const OtherComponent = React.lazy(() => import('./OtherComponent'));

或

const Home = lazy(() => import('./routes/Home'));

或任何其他方式在路由路径被命中时加载组件？

【问题讨论】：

【解决方案1】：

过去非常困难。这些天来，Webpack Module Federation 让人喘不过气来。

他们有tons of samples 来帮助您入门。例如，the basic-host-remote sample 有一个适合您需要的简单方案。只需将整个 Github 存储库 cd 提取到此示例中，然后运行它（如每个示例的 README 中所述）。

请留意“网络”标签。组件在被明确请求之前不会加载。

基本示例

The basic-host-remote sample 有两个单独的包：app1 和 app2。

app1 想使用来自app2 的组件
- 在its WMF config 中将app2 添加到其remotes
app2 提供了一个 Button 组件
- app2exposesButtonits WMF config。
app1/src/App.js 动态加载按钮。（它在初始渲染期间这样做，使得按需加载不那么明显。）
时机成熟时，app1 使用动态 import 请求组件。
它使用React.lazy 包装负载，如下所示：
```
const RemoteButton = React.lazy(() => import("app2/Button"));
```
- 例如，您可以在 useEffect 或 Route.render 回调等中执行此操作。
app1 可以使用 Button，一旦它被加载。加载时，它会显示一条加载消息，使用 Suspense：
```
<React.Suspense fallback={<LoadingScreen />}>
  <RemoteButton />
</React.Suspense>
```
- 或者，不使用lazy 和Suspense，您可以只使用import(...) 语句返回的promise，并以您喜欢的任何方式处理异步加载。当然，WMF 完全不限于react，可以动态加载任何模块。
- 请注意，app1 和 app2 具有相同的 shared 设置，确保这些共享依赖项仅加载一次，而不是与远程加载的代码捆绑/复制：
```
{
  // ...
  shared: { react: { singleton: true }, "react-dom": { singleton: true } },
}
```

注意WMF动态加载必须使用动态import（即import(...)），因为：

非动态导入将始终在加载时解析（因此使其成为非动态依赖项），并且
“动态require”不能被webpack打包，因为浏览器没有commonjs的概念（除非你使用一些hack，在这种情况下，你会丢失相关的“加载promise”）。

WMF 示例

WMF 需要一点学习，但它的所有样本都有以下共同元素：

每个样本都有多个独立的包。
每个包都有自己的webpack.config.js
每个包通常充当宿主（动态提供组件）或此类组件的消费者，或两者兼而有之。
在development 模式下，您通常使用完美集成的webpack-dev-server 提供所有内容。
- 注意：在production 模式下，您需要对配置进行一些小的调整。当webpack-dev-server 不在图片中时，您的构建只是将一些额外的remoteEntry.js 文件添加到您的构建输出中。
您可以使用shared 配置轻松配置如何处理常见依赖项。（通常您希望它们充当单例，这意味着每个人都应该共享共同的依赖项，而不是打包自己的。）
如果你想坚持把所有东西都放在一个包里，这也是可能的。只需expose 并将它自己的（独立）组件添加到它自己的remotes。不确定它是否有效，但值得一试。

同样，这需要一点学习曲线，但我发现这绝对值得。感觉就像我见过的最复杂的动态构建 + 加载系统之一。

最烦人的是，WMF 目前在 Webpack 页面上仍然没有适当的 API 文档，但我相信它很快就会出现。目前，只有一个不太完善的collection of conceptual notes。

幸运的是，对于学习，the samples 非常好，积极维护并且仍在不断增强。

【讨论】：