使用Webpack和React的实际例子
将Javascript代码捆绑成几个文件被称为bundle splitting。它使最初的页面加载时只下载极少量的代码，而网络应用的其他部分则在以后根据需要加载。
捆绑分割和懒惰加载的一些常见的使用情况是：
- 当用户移动到应用程序的一个新视图时，你可以懒惰地加载更多的代码。
- 加载也可能与某个特定的动作相联系，比如滚动或按下按钮。
- 你也可以尝试猜测用户接下来会尝试做什么，并相应地加载代码。
- 当用户试图访问该功能时，它就已经在那里了。
1.使用Webpack进行动态导入
Webpack允许你在运行时动态地导入模块。让我们来看看我们如何在实践中做到这一点。
正如你所看到的，动态 导入 语句可以在你的代码中的任何地方使用，以告诉Webpack为所需的导入构建一个捆绑包。由于该 模态部分只有在用户点击按钮时才会出现，我们可以延迟加载包，直到用户执行该操作。
动态导入使每一个组件都能发挥微前端的作用，而不需要投入到一个完整的框架中。一个组件可以独立开发、版本管理和部署，使用的工具包括 位.
现在，即使一个组件是独立开发的，但这并不意味着它需要对其未来的托管应用程序完全不了解。Bit提倡使用其'Compositoins'功能进行手动和自动集成测试，以验证这种未来的集成将是成功的。
Bit的'compositions'验证了独立开发的组件将在未来的托管应用程序中按照预期进行整合。
2.用于加载React组件的分裂API
Fusion.js提供了 分裂 API来自 fusion-core，它产生一个包装组件，在捆绑加载时显示不同的加载组件：
- 一个错误组件，如果加载时遇到错误。
- 实际的组件，一旦捆绑加载完毕。
与前面的例子类似。
这个辅助API使捆绑分割的React组件变得更容易，这样就不需要手工重复模板代码了：
拆分顶层组件路由是另一种减少下载时间的技术。
推迟JS捆绑加载，直到用户访问该路由是一个好主意。
在上面的例子中，分裂的API被用来延迟 你好组件 Split接收了一个加载属性，决定是否显示底层组件。
此外，我们也可以在这种情况下使用动态导入，等到浏览器获取了包之后再进行导入。在这两种情况下，一旦加载完成， 你好组件 会在加载完成后出现。
3.分离供应商捆绑
首先，你可能会问，为什么我们需要这个？主要的好处是，Vendor bundle不会经常变化。因此，我们利用缓存来改善重复性的页面加载。
注意：如果你使用Webpack 4或更早的版本，你将需要CommonsChunkPlugin来管理bundle的分割。
如果你现在触发一个构建 (npm run build)，你应该看到如下内容。
⬡ webpack: Build Finished
4.将供应商捆绑包分割成多个
通常，所有的节点模块都被编译成一个Vendor bundle。
但是，你知道吗，我们可以偶尔将一个或多个节点模块分配到不同的bundle中？
例如，由于React模块不太可能在一次构建中被修改，当性能至关重要时，将其缓存为一个单独的包是有意义的。
Webpack配置文件现在接受了一个 优化 属性来分割供应商捆绑包，从Webpack 4开始。使用Fusion.js的开发者也可以通过以下方式将该配置添加到应用程序的根目录中 fusionrc.js添加到应用的根目录中。
有了这个配置，构建将把供应商捆绑包划分为client-vendor.js和client-vendor-react.js
5.用React.lazy加载的组件
React.lazy这个函数可以让你把一个动态导入的组件渲染成一个普通组件。
之前：
const MyComponent = React.lazy(() => import("./MyComponent"));
后：
const OtherComponent = React.lazy(() => import('./OtherComponent'));
然后，这个懒惰组件应该做在一个悬念组件内，允许我们显示回退内容（如加载指示器）。
在等待组件加载时，回退道具接受任何你想渲染的React元素。Suspense组件可以放在懒惰组件上方的任何地方。
你也可以用一个Suspense组件来包裹几个懒惰组件。
结论
当你检查你的网站的性能时，你应该发现两个改进。你的关键包的大小将缩小，并且将为某些页面添加新的包。
在用户体验方面，用户将更早地收到一个完全渲染和互动的网站。效果的程度将由捆绑大小的减少和其他因素的总和决定。
较小的下载尺寸有助于改善结果。然而，任何被加载的JavaScript代码也必须被解析和执行，所以我们也节省了CPU时间。
