从0到1落地微前端架构, MicroApp实战招聘网站
核心代码，注释必读
// download：
3w ukoou com
微前端架构体系的优势 微前端架构体系带来了许多优势，包括：
团队自治：不同团队可以独立开发和部署自己的应用组件，减少了团队之间的协调成本。 技术栈无关：每个应用组件可以使用不同的技术栈和框架，无需强制统一。 增量升级：每个应用组件可以独立升级，无需整体替换或停机。 更好的可扩展性：新的功能可以以应用组件的形式进行添加，而不是整体重构应用系统。 更好的代码复用：不同应用组件间可以共享和复用代码，加快开发速度。
微前端架构体系的适用场景 微前端架构体系适用于以下场景：
大型单体应用拆分：当一个应用系统逐渐变得庞大且难以维护时，可以将其拆分为多个应用组件，以提高系统的可维护性和可扩展性。 多团队协作开发：当不同的团队需要独立开发和维护不同的功能模块时，微前端架构体系可以提供团队自治的能力。 技术栈多样性：当应用系统中使用了不同的技术栈和框架时，可以使用微前端架构体系来组合和集成这些技术栈。
从0到1落地微前端架构, MicroApp实战招聘网站 - 微前端预加载
start 启动应用
-
prefetch 可选，是否开启预加载，默认为 true。配置为 true 则会在第一个微应用 mount 完成后开始预加载其他微应用的静态资源，配置为 'all' 则主应用 start 后即开始预加载所有微应用静态资源。配置为 string[] 则会在第一个微应用 mounted 后开始加载数组内的微应用资源。配置为 function 则可完全自定义应用的资源加载时机 (首屏应用及次屏应用)。
-
sandbox - boolean | { strictStyleIsolation?: boolean } - 可选，是否开启沙箱，默认为 true。当配置为 { strictStyleIsolation: true } 表示开启严格的样式隔离模式。这种模式下 qiankun 会为每个微应用的容器包裹上一个 shadow dom 节点，从而确保微应用的样式不会对全局造成影响。
-
singular，是否为单实例场景，默认为 true。
export let frameworkConfiguration: FrameworkConfiguration = {};
export function start(opts: FrameworkConfiguration = {}) {
// prefetch 默认 true
frameworkConfiguration = { prefetch: true, singular: true, sandbox: true, ...opts };
const { prefetch, sandbox, singular, urlRerouteOnly, ...importEntryOpts } = frameworkConfiguration;
// 预加载
if (prefetch) {
// importEntryOpts 是预加载配置
// microApps 是所有注册的 子应用
doPrefetchStrategy(microApps, prefetch, importEntryOpts);
}
if (sandbox) {
if (!window.Proxy) {
console.warn('[qiankun] Miss window.Proxy, proxySandbox will degenerate into snapshotSandbox');
// 快照沙箱不支持非 singular 模式
if (!singular) {
console.error('[qiankun] singular is forced to be true when sandbox enable but proxySandbox unavailable');
frameworkConfiguration.singular = true;
}
}
}
// 调用 aingle spa start 事件
startSingleSpa({ urlRerouteOnly });
frameworkStartedDefer.resolve();
}
doPrefetchStrategy 预加载的实现，解析 prefetchStrategy 不同的配置，根据配置调用 prefetchImmediately 或者是 prefetchAfterFirstMounted
export function doPrefetchStrategy(
apps: AppMetadata[],
prefetchStrategy: PrefetchStrategy,
importEntryOpts?: ImportEntryOpts,
) {
// 定义了一个函数，appname --> app
const appsName2Apps = (names: string[]): AppMetadata[] => apps.filter(app => names.includes(app.name));
// prefetchStrategy 是数组，数组中的每个都是需要预加载的子应用名称
if (Array.isArray(prefetchStrategy)) {
// 调用 prefetchAfterFirstMounted 方法
prefetchAfterFirstMounted(appsName2Apps(prefetchStrategy as string[]), importEntryOpts);
}
// prefetchStrategy 是个函数
else if (isFunction(prefetchStrategy)) {
(async () => {
// critical rendering apps would be prefetch as earlier as possible
// 该函数返回两个数组，分别表示需要立即加载的，以及首个应用加载完毕后加载的
const { criticalAppNames = [], minorAppsName = [] } = await prefetchStrategy(apps);
prefetchImmediately(appsName2Apps(criticalAppNames), importEntryOpts);
prefetchAfterFirstMounted(appsName2Apps(minorAppsName), importEntryOpts);
})();
} else {
switch (prefetchStrategy) {
case true:
// 首个应用 mounted 之后开始 fetch 其余应用资源
prefetchAfterFirstMounted(apps, importEntryOpts);
break;
case 'all':
// 立刻开始 fetch 所有应用的资源
prefetchImmediately(apps, importEntryOpts);
break;
default:
break;
}
}
}
从0到1落地微前端架构, MicroApp实战招聘网站 - 微应用的组件复用
微应用的组件复用是指在微前端架构下，不同微应用之间共享和重用组件。这样做有助于减少重复开发，提高开发效率，并确保一致的用户体验。
实现微应用的组件复用通常可以采取以下几种方法：
-
独立组件库：将可复用的组件抽离出来形成一个独立的组件库，不同微应用可以引用该组件库来使用这些组件。这种方式可以通过npm包、私有npm服务或git submodule等方式进行管理和发布。
-
Web Components：使用Web Components技术创建自定义元素或组件，在不同微应用中都能够使用这些自定义元素。这种方式需要确保微应用支持Web Components标准。
-
共享代码库：将共享的组件代码放在一个独立的代码库中，然后由不同的微应用引入和使用。这种方式可能需要处理好版本控制和依赖管理的问题。
