系列3：【深入】qiankun动态与按需加载子应用—像电影一样控制出现时机
一、引言：为何需要动态加载
在现代前端开发中，性能优化始终是一个关键问题。对于微前端架构而言，管理多个子应用带来了前所未有的灵活性，但也对资源的加载和使用效率提出了更高要求。
假设你的微前端项目就像一场电影，而子应用是场景或演员。在不同的情节中，我们只需要特定的场景和演员出现，而不需要所有场景和演员一开始就站在舞台上等待。这时，动态加载和按需加载就成为了关键工具——让需要的内容在正确的时机上场，节省性能开销，提升用户体验。
二、动态加载与按需加载的基本原理
动态加载是指应用程序在运行时按需加载资源，而不是在页面加载时一次性加载所有资源。Qiankun 基于 SystemJS 进行子应用的加载，采用懒加载的方式，只有当用户访问某个子应用时，该子应用才会被动态加载到页面中。
2.1 为什么动态加载重要？
- 性能优化：避免一次性加载过多资源导致的白屏时间延长。
- 资源节省：仅加载用户需要的部分，减少不必要的流量浪费。
- 体验提升：通过按需加载，用户访问子应用时能够享受更快的响应速度。
2.2 动态加载 VS 按需加载
- 动态加载：指的是应用运行时按需加载模块，而不在页面初始化时加载所有内容。
- 按需加载：是动态加载的一种形式，用户访问时才加载对应资源。
二者的核心在于“延迟加载”，从而节省资源。
三、如何在 Qiankun 中实现动态加载
3.1 基本配置
Qiankun 提供了简单而有效的动态加载子应用的机制。以下是基本的动态加载配置：
import { registerMicroApps, start } from 'qiankun';
// 注册多个子应用
registerMicroApps([
{
name: 'vueApp',
entry: '//localhost:7100',
container: '#subapp-container',
activeRule: '/vue',
},
{
name: 'reactApp',
entry: '//localhost:7200',
container: '#subapp-container',
activeRule: '/react',
},
]);
// 启动 Qiankun
start();
在这个配置中，每个子应用都有自己的 entry（入口 URL）、container（容器）和 activeRule（激活规则）。主应用会根据 activeRule 动态加载对应的子应用，这就是最简单的动态加载配置。
3.2 按需加载子应用
按需加载是在用户首次访问某个路由时才去加载对应的子应用，可以通过 Qiankun 的 prefetch 属性进行优化。
3.2.1 开启预加载
Qiankun 默认支持预加载功能，即在用户首次访问页面时，提前加载其他可能需要的子应用。你可以关闭预加载或者按需定制：
start({
prefetch: 'all', // 'all' 表示加载所有子应用
// prefetch: 'none', // 'none' 表示不预加载
// prefetch: (app) => app.name === 'vueApp', // 针对特定的应用预加载
});
通过定制预加载策略，我们可以根据项目需求优化性能。
3.3 异步加载组件
在子应用内部，你还可以进一步优化，通过 Vue 或 React 的异步组件加载来提升性能。
3.3.1 Vue 异步组件加载
const AsyncComponent = () => ({
// 需要加载的组件 (应返回一个 Promise)
component: import('./MyComponent.vue'),
// 加载中时的组件
loading: LoadingComponent,
// 出错时的组件
error: ErrorComponent,
// 延迟加载的时间
delay: 200,
// 出错后重试的次数
retry: 3
});
3.3.2 React 异步组件加载
import React, { Suspense } from 'react';
const MyComponent = React.lazy(() => import('./MyComponent'));
const App = () => (
<Suspense fallback={<div>Loading...</div>}>
<MyComponent />
</Suspense>
);
这些异步加载的实现可以让你的应用按需加载组件，进一步减少初始加载时间。
四、性能优化建议
4.1 避免子应用的重复加载
有时候由于路由切换不合理，可能导致子应用被重复加载。为避免这个问题，我们可以通过 Qiankun 提供的 excludeAssetFilter 属性来过滤不需要重复加载的资源。
start({
excludeAssetFilter: (url) => {
return url.includes('ignore.js');
}
});
通过过滤某些不必要的资源，我们可以显著提升应用的加载性能。
4.2 按需加载路由组件
除了子应用，主应用的路由组件也可以进行按需加载，进一步减少页面初始加载的资源量。
const routes = [
{
path: '/home',
component: () => import('./Home.vue'),
},
{
path: '/about',
component: () => import('./About.vue'),
},
];
按需加载可以显著减少主应用的包体积，让用户在进入页面时感受到更快的加载速度。
五、常见问题与解决方案
5.1 子应用加载失败怎么办？
如果子应用在网络条件不佳的情况下加载失败，Qiankun 会抛出相关的错误。我们可以通过监听这些错误并采取相应措施来改善用户体验。
window.addEventListener('unhandledrejection', function (event) {
console.error('子应用加载失败', event);
// 可以在这里显示友好的错误提示
});
5.2 如何处理子应用的样式冲突？
在微前端架构中，多个子应用共用同一个 DOM 环境，可能导致样式冲突。为避免这种问题，可以为每个子应用启用 scoped CSS 或使用 shadow DOM 来隔离样式。
六、总结
本文深入探讨了如何使用 Qiankun 实现动态加载与按需加载，并分享了具体的配置与性能优化技巧。动态加载的核心在于让子应用按需出现，减少资源浪费，提升用户体验。我们通过多个实用示例，详细解释了如何优化加载性能，并避免常见的坑。
在下一篇文章中，我们将进一步探讨如何实现子应用间的深度通信，让你的微前端架构更加灵活与智能。敬请期待！
希望这篇文章能够帮助你更好地理解如何管理多个子应用，并为你的微前端项目提供实用的解决方案。如果有任何问题或建议，欢迎在评论区讨论！