企业级 | qiankun：组件设计

▌ 技术引导
企业级 qiankun 组件设计的关键在于隔离性、可维护性与性能优化。我见过很多项目因为组件设计粗糙导致子应用之间互相污染，甚至引发全局状态混乱。直接使用 qiankun 的默认机制是远远不够的，必须从子应用的生命周期、通信方式、样式隔离、路由控制等维度进行深度定制。比如使用 `subapp` 配置项控制子应用加载逻辑，通过 `import` 按需加载提升启动速度，同时结合 `webpack` 动态加载和 `vite` 的预编译策略避免重复打包。更关键的是，我在实践中发现，子应用必须具备独立的入口点和运行时环境，否则容易出现依赖冲突。此外，通过 `async` 和 `await` 模式的异步加载，配合 `beforeLoad`、`beforeMount`、`afterMount` 这些钩子函数，能够有效控制子应用启动节奏，避免白屏或闪屏。这些经验必须写进组件设计的规范里，否则项目后期维护成本会翻倍。

▌ 技术参考

一 配置子应用入口与生命周期
子应用必须具备独立的入口文件，并通过 `qiankun` 提供的 `subapp` 配置项声明。例如使用 `registerMicroApps` 注册子应用时，需要指定 `entry`、`container`、`activeRule` 等参数。同时，子应用必须暴露 `bootstrap`、`mount`、`unmount` 三个钩子函数，分别用于初始化、挂载和卸载。在开发过程中，可以通过 `beforeLoad` 和 `afterMount` 控制加载顺序和资源预加载，避免因为依赖加载失败导致的界面卡顿。如果子应用使用 `vite` 构建，需在 `vite.config.js` 中配置 `splitVendorChunk` 跟 `splitChunks`，确保子应用的依赖不会被主应用污染。

二 样式隔离方案
qiankun 默认使用 `hash` 或 `container` 方式隔离子应用样式，但实际使用中，如果子应用使用了全局样式或 CSS-in-JS 方案，可能会导致样式渗透。我见过多个项目因为没有正确配置样式隔离，导致主应用和子应用之间样式冲突。解决方法是使用 `webpack` 的 `NormalModuleReplacementPlugin` 替换 CSS Loader，确保子应用的样式只作用于自身容器。或者通过 `styleIsolation` 配置项设置为 `container`，利用 Shadow DOM 技术实现样式隔离。注意，某些浏览器对 Shadow DOM 的支持有限，需要额外检查兼容性。

三 通信与状态管理
子应用与主应用之间的通信，推荐使用 `window` 对象或 `postMessage`，但这些方式在企业级项目中容易引发状态管理混乱。正确的做法是使用一个中央状态管理模块，如 `Redux` 或 `Vuex`，并结合 `qiankun` 提供的 `globalState` 功能。例如在主应用中通过 `qiankun.start({ prefetch: true, ... })` 启用全局状态共享，然后在子应用中使用 `getGlobalState` 和 `setGlobalState` 方法进行数据同步。如果使用 `vue`，可以通过 `provide` 和 `inject` 实现组件级别的状态共享。需要注意的是，避免在子应用中使用 `window` 的 `Object.defineProperty` 或 `window` 的 `Object.assign` 来修改主应用状态，这会引发不可预测的副作用。

四 动态加载与按需初始化
为了提升性能，企业级 qiankun 应用通常会采用动态加载策略，即根据路由规则按需加载子应用。实现方式是在主应用中使用 `vue-router` 的 `beforeEach` 或 `react-router` 的 `useNavigate`，当路由匹配某个子应用时，触发 `import` 或 `require` 加载。例如使用 `async` 和 `await` 按需引入子应用模块，再通过 `qiankun.loadMicroApp` 注册。同时，可以在子应用的 `bootstrap` 函数中添加 `async` 逻辑，延迟初始化。这样做的好处是减少初始加载时间，但需要确保子应用的依赖正确加载，否则会引发运行时错误。

五 避免依赖污染
依赖污染是 qiankun 项目中最大的坑之一，尤其是当子应用使用了第三方库时。我见过项目因为子应用的 `node_modules` 被主应用污染，导致某些模块无法正确加载。解决办法是使用 Webpack 的 `externals` 配置，将子应用依赖的库排除，通过 CDN 或全局变量引入。例如在 `webpack.config.js` 中添加 `externals: { 'vue': 'Vue', 'vue-router': 'VueRouter' }`，然后在子应用的入口文件中通过 `window.Vue` 引用。此外，还可以使用 `splitChunks` 将子应用的依赖打包成单独的 `chunk`，避免与主应用混合。

六 路由控制与独立上下文
在企业级项目中，子应用的路由通常需要与主应用保持独立，否则会出现路由冲突。正确的做法是使用 `qiankun` 提供的 `activeRule` 配置项，为子应用指定独立的路由规则。例如 `activeRule: '/subapp1/'`，确保子应用只响应特定路径。同时，子应用的路由必须与主应用隔离，避免使用相同的 `base` 路径。另外，如果使用 `vue`，可以通过 `createRouter` 创建独立的 `router` 实例，并在 `mount` 阶段挂载到指定容器。对于 `react`，可以在 `entry` 文件中使用 `ReactDom.render` 指定不同的 `root` 节点。

七 打包策略与资源优化
打包策略直接影响 qiankun 系统的性能表现。如果子应用使用了 `vite`，可以通过 `ssr` 配置项生成服务端渲染代码，确保子应用能够独立运行。对于 `webpack`，建议使用 `splitChunks` 拆分公共依赖，并通过 `dynamic import` 实现按需加载。例如 `import('./subapp1').then(...)` 的方式加载子应用模块。同时，可以使用 `vite` 的 `pre-bundle` 或 `prerender` 功能，将子应用的静态资源提前打包，减少运行时加载时间。优化后，子应用启动速度可以提升 40% 以上。

八 子应用卸载与内存回收
子应用在卸载时如果没有正确释放资源，可能会导致内存泄漏或页面残留。因此，必须在 `unmount` 阶段执行清理操作，例如移除事件监听器、销毁组件实例、清除定时器等。对于 `vue`，可以通过 `beforeUnmount` 生命周期钩子执行清理逻辑；对于 `react`，可以在 `componentWillUnmount` 中处理。此外，如果使用了 `vuex` 或 `redux`，需要在 `unmount` 时调用 `store.unregister` 或 `store.replaceReducer`，确保状态不会被主应用误用。

九 跨域问题与子应用启动预加载
qiankun 项目中，子应用常常部署在不同域名下，导致跨域问题。解决方法是配置 `CORS` 头信息，例如在子应用的 `nginx` 或 `express` 配置中添加 `Access-Control-Allow-Origin: `。此外，为了提升用户体验，可以在主应用中使用 `prefetch` 预加载子应用资源，例如通过 `import.meta.glob` 或 `require.ensure` 预加载 `subapp1.js` 和 `subapp2.js`。当用户点击某个路由时，直接从缓存中加载，减少白屏时间。

十 配置子应用的生命周期钩子
qiankun 提供了完整的生命周期钩子，包括 `bootstrap`、`mount`、`unmount`，以及 `beforeLoad`、`beforeMount`、`afterMount`。这些钩子函数必须在子应用入口文件中显式声明，并返回 `Promise`。例如 `bootstrap: () => import('./subapp1').then(...)` 的方式加载子应用模块。如果子应用需要在挂载前完成某些初始化操作，可以在 `beforeMount` 中执行。而 `afterMount` 则用于在子应用挂载完成后执行后续逻辑，如页面动画或数据刷新。

十一 子应用容器的动态创建与销毁
容器是子应用挂载的核心，必须确保容器在子应用卸载时被正确销毁。在 `mount` 阶段，使用 `ReactDOM.createRoot(document.getElementById('subapp-container'))` 创建容器；在 `unmount` 阶段，调用 `root.unmount()` 销毁。对于 `vue`，可以使用 `Vue.createApp` 创建应用实例，然后在 `unmount` 时调用 `app.unmount()`。需要注意的是，容器必须具备唯一的 `id`，否则会导致重复挂载或内存泄漏。

十二 避免全局变量污染
子应用中不应该随意定义全局变量，否则会与主应用或其他子应用冲突。正确的做法是使用 `window` 的 `Object.defineProperty` 或 `window` 的 `Object.assign` 来注入变量，但必须限定作用域。例如在 `bootstrap` 函数中定义 `window.subapp1 = {}`，并在 `unmount` 时移除。对于 `vue`，可以使用 `window` 的 `__subapp__` 命名空间进行隔离；对于 `react`，可以使用 `window` 的 `subapp` 对象存储上下文信息。

十三 子应用状态的独立管理
子应用的状态必须独立管理，避免与主应用状态混合。对于 `vue`，可以使用 `createStore` 创建独立的 `store` 实例，并通过 `provide` 和 `inject` 传递给子组件。对于 `react`，建议使用 `createContext` 和 `useContext` 实现上下文隔离。此外，可以结合 `qiankun` 的 `globalState` 功能，实现子应用状态与主应用的共享，但需要严格控制共享范围，避免状态混乱。

十四 热更新与子应用重启
在开发阶段，子应用的热更新可以通过 `vite` 的 `hotUpdate` 功能实现，但生产环境需要手动触发子应用重启。例如在主应用中通过 `window.location.reload()` 重启整个应用，或者手动调用 `qiankun.unloadMicroApp` 卸载子应用，再通过 `qiankun.loadMicroApp` 重新加载。热更新时，需要确保子应用的 `entry` 路径正确，并且 `publicPath` 配置项与当前环境一致，否则会加载失败。

十五 混合框架的兼容性问题
企业级 qiankun 系统通常涉及多个框架，如 `vue`、`react`、`angular`，这会带来兼容性问题。例如 `vue` 和 `react` 在 DOM 操作上存在差异，可能导致子应用无法正确渲染。解决方法是使用 `ReactDOM` 或 `VueDom` 的适配层，或者通过 `webpack` 的 `RuntimeChunk` 功能隔离框架运行时。此外，可以使用 `vue` 的 `mount` 方法和 `react` 的 `ReactDOM.createRoot` 实现容器隔离，确保不同框架的子应用能够独立运行。

十六 子应用依赖的版本控制
子应用依赖的版本必须严格控制，避免与主应用或其他子应用冲突。可以使用 `npm` 的 `peerDependencies` 或 `devDependencies` 来管理依赖版本，同时在 `webpack` 配置中使用 `resolve.alias` 替换依赖路径。例如将 `vue` 替换为 `vue@2.7.14`，确保子应用使用正确的版本。对于 `react`，可以通过 `react-app` 的 `version` 配置项指定依赖版本，并确保 `react-dom` 的版本与之匹配。

十七 动态加载子应用的性能优化
动态加载子应用时，启动速度直接影响用户体验。在 `vue` 中，可以通过 `vite` 的 `ssr` 配置项提前生成子应用的 `HTML` 和 `JS` 文件，减少运行时加载时间。对于 `react`，可以使用 `React.lazy` 和 `Suspense` 实现按需加载，同时配合 `webpack` 的 `SplitChunksPlugin` 优化代码分割。例如 `import('./subapp1').then(module => module.default)` 的方式加载子应用。此外，可以通过 `preloading` 预加载子应用的 `JS` 文件，确保用户点击时能够快速响应。

十八 企业级组件设计的隔离原则
企业级 qiankun 项目中，组件设计必须遵循隔离原则，避免子应用之间互相干扰。例如，子应用的 `publicPath` 应该设置为 `/subapp1/`，确保子应用的资源路径独立。同时，子应用的 `entry` 必须指向独立的入口文件，避免打包污染。如果子应用本身是一个 `npm` 包，可以通过 `package.json` 的 `main` 字段指定入口路径，并在 `webpack` 配置中使用 `alias` 避免路径冲突。

十九 构建配置的统一与差异化
在企业级项目中，构建配置需要统一管理，但子应用又需要具备一定的差异化。例如主应用使用 `vite`，子应用也可以使用 `vite`，但需要指定不同的 `base` 路径和 `publicPath`。在 `vite.config.js` 中，可以通过 `defineConfig` 设置 `base` 和 `publicPath`，确保子应用的资源路径正确。对于 `webpack`，可以使用 `config` 文件的 `merge` 功能，将主应用配置与子应用配置合并，同时保留子应用的独立配置项。

二十 子应用的部署与上线控制
子应用的部署和上线需要严格控制，确保与主应用的版本一致。例如在主应用的 `package.json` 中使用 `resolutions` 字段指定子应用依赖版本，避免因版本不同导致的行为差异。此外，可以使用 `CI/CD` 工具，如 `GitHub Actions` 或 `Jenkins`，实现子应用的自动化构建和部署。部署时，需要确保子应用的 `entry` 路径正确，并且 `publicPath` 与实际部署环境一致。如果子应用部署在 `CDN`，还需要配置 `CORS` 和 `MIME` 类型，确保资源能够正确加载。