微前端拆分策略：基于qiankun的ERP系统重构实录

一、重构背景与目标

大型ERP系统通常面临以下痛点：

巨石应用：功能耦合度高，迭代效率低

技术栈僵化：难以局部引入新技术

部署阻塞：微小改动需全量回归测试

重构目标：

实现模块独立开发/部署

支持渐进式技术升级

降低团队协作成本

二、核心拆分策略

graph TD

A[主应用容器] --> B[采购子应用]

A --> C[仓储子应用]

A --> D[财务子应用]

A --> E[HR子应用]

按功能域划分：$ \text{模块}_i = { \text{采购}, \text{仓储}, \text{财务}...} $

子应用自治：独立仓库、技术栈、CI/CD

基础库抽离为共享包

通过Webpack externals配置：

module.exports = {

externals: {

'lodash': '_',

'moment': 'moment'

}

}

主子应用通信：采用qiankun的initGlobalState

// 主应用

const actions = initGlobalState({ user: null });

// 子应用

export function mount(props) {

props.onGlobalStateChange((state) => {

console.log(state.user)

});

}

三、qiankon实施关键步骤

主应用改造

// 注册子应用

registerMicroApps([

{

name: 'purchase-app',

entry: '//localhost:7101',

container: '#sub-container',

activeRule: '/purchase'

},

// 其他模块...

]);

// 启动

start({ prefetch: 'all' });

子应用适配

// 导出生命周期钩子

export async function bootstrap() { /* 初始化 */ }

export async function mount(props) { /* 渲染 */ }

export async function unmount() { /* 卸载 */ }

样式隔离方案

/* 启用严格隔离 */

.start({ sandbox: { strictStyleIsolation: true } })

/* 添加命名空间 */

.purchase-module .list-item { ... }

四、性能优化实践

子应用webpack配置：

output: {

library: `${packageName}-[name]`,

libraryTarget: 'umd',

jsonpFunction: `webpackJsonp_${packageName}`,

}

API网关统一路由： $$ \begin{cases} \text{/api/purchase} \rightarrow \text{采购服务} \ \text{/api/finance} \rightarrow \text{财务服务} \end{cases} $$

子应用资源hash命名

主应用配置resourceCache

五、重构收益

指标 重构前 重构后 提升

构建时间 8.2min 1.3min 84%↓

部署频率 2次/周 15次/周 650%↑

故障影响范围 全系统 单模块 80%↓

六、经验总结

拆分边界：避免过度碎片化，单个子应用不小于3人月工作量

版本管控：主应用锁定qiankun版本，子应用可独立升级

监控体系：建立主子应用健康检查联动机制

灰度策略：采用渐进式更新： $$ \text{新版本覆盖率} = \frac{\text{命中新版本用户数}}{\text{总用户数}} \times 100% $$