Hyperapp / Webpack -如何编写拆分组件

Question

为了减少我的应用程序的初始负载，我尝试进行代码分割。例如，我成功地拆分了twilio视频，在用户按“调用”时加载和初始化。

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

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

现在，我想对组件或路由进行同样的操作(在登录页面上不加载用户profil )。是否有任何相当于

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

或

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

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

Answer 1

过去很难。这些天来，Webpack模块联合会使它呼吸。

他们有吨样本让你开始工作。例如，基本主机远程示例有一个满足您需要的简单场景。只需将整个Github，cd提取到这个示例中，并运行它(如每个示例的README中所解释的)。

注意“网络”选项卡。除非明确请求，否则不会加载组件。

基本实例

基本主机远程示例有两个独立的包：app1和app2。

1. app1希望使用来自app2 的组件
   • 它将app2添加到remotes中的它的WMF配置中。

2. app2提供了一个Button组件
   • app2 exposes Button in 它的WMF配置.

3. app1/src/App.js动态加载按钮。(它在初始渲染时这样做，使按需加载变得不那么明显了。)
4. 当时间到来时，app1使用动态import请求组件。
5. 它使用React.lazy包装加载，如: const RemoteButton = React.lazy(() => import("app2/Button"))；

- E.g., you can do this in a `useEffect`, or a `Route.render` callback etc.

1. 一旦加载，app1就可以使用该Button。加载时，它显示一条加载消息，使用Suspense：

- Alternatively, instead of using `lazy` and `Suspense`, you can just take the promise returned from the `import(...)` statement and handle the asynchronous loading any way you prefer. Of course, `WMF` is not at all restricted to `react` and can load any module dynamically.
- Note that both, `app1` and `app2` have the same `shared` setup, making sure that those shared dependencies are only loaded one time, and not bundled/duplicated with remotely loaded code:

{ // .共享：{dom：{ singleton: true }，"react-dom"：{ singleton: true }，}

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

1. 非动态导入总是在加载时解析(从而使其成为非动态依赖项)，以及
2. “动态require”不能由webpack捆绑，因为浏览器没有commonjs的概念(除非您使用一些黑客，在这种情况下，您将失去相关的“加载promise")。

WMF样本

WMF需要一些学习，但是它的所有示例都有以下共同元素：

1. 每个样本都有多个独立的包。
2. 每个包都有自己的webpack.config.js。
3. 每个包通常充当主机(动态提供组件)或这些组件的使用者，或者两者兼而有之。
4. 在development模式中，您通常使用集成良好的webpack-dev-server提供所有服务。
   • 注意:在production模式下，您希望对您的配置进行一些小的调整。当webpack-dev-server不存在时，您的构建只是向您的构建输出添加一些额外的remoteEntry.js文件。

5. 您可以使用shared配置轻松地配置如何处理公共依赖项。(通常您希望它们充当单例，这意味着每个人都应该共享共同的依赖项，而不是打包自己的依赖项。)
6. 如果你想坚持把所有的东西都放在一个包里，那也是可能的。只需将其expose并将自己的(独立的)组件添加到自己的remotes中即可。不确定它是否有效，但值得一试。

最后一句话

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

最令人烦恼的是，WMF目前在Webpack页面上仍然没有适当的API文档，但我相信它很快就会出现。目前，只有一个不是所有的抛光概念说明的收集。

这位WMF作者本人就是承诺尽快提供更好的文件™️。

幸运的是，对于学习，样本真的很好，积极维护和仍然在增强。