微前端——乾坤

背景

在使用Angular项目过程中，发现如下问题：

• 随着需求越来越多，模块越来越多，打包的时间越来越长，有的时候甚至会出现内存溢出的问题。虽然通过修改打包时的内存能暂时解决问题，但治标不治本，问题始终没有解决。
• 许多模块相对稳定，很多迭代不会修改相关功能，因此希望在打包的时候不去打包这些模块
• 在项目实际过程中对用户有功能权限配置，希望未配置相关功能的用户不需要加载相关模块
• 开发过程中，因为一些需求要升级技术栈，但是因为项目太大，升级相对复杂，容易出问题

微前端

为了能够解决以上问题，我们在项目中引入了微前端。至于什么是微前端，不懂的同学可以去查看相关概念。在经过一系列的对比以后，最终选择使用阿里的微前端解决方案——乾坤。

实际使用

主项目

主要功能包括：

1. 登录登出相关功能
2. 根据权限渲染导航栏菜单
3. 子项目的注册
4. 父子项目传参
5. 其他功能(完善中)

部分相关代码（子项目的注册及父子项目传参）

const getSubProjectProps = (): { AccessToken: string } => {
  const subProps = {
    AccessToken: StorageService.getItem(StorageConfig.keys.AccessToken),
  };

  return subProps;
};

const getSubProjectConfig = (): RegistrableApp[] => {
  const getActiveRule = (routerPrefix) => {
    console.log(location.pathname);
    return (location) => location.pathname.startsWith(routerPrefix);
  };

  const loader = (loading) => SubAppContent({ loading });

  const apps: RegistrableApp[] = [];
  for (const obj of SubProjectConfig) {
    const activeRule = getActiveRule(`/${obj.activeRule}`);

    apps.push({
      name: obj.name, // 必选，微应用的名称，微应用之间必须确保唯一
      entry: obj.entry, // 必选，微应用的 entry 地址
      container: '#subapp-container', // 必选，微应用的容器节点的选择器或者 Element 实例
      activeRule: activeRule, // 必选，微应用的激活规则
      loader, // 可选，loading 状态发生变化时会调用的方法
      props: getSubProjectProps(), // 可选，主应用需要传递给微应用的数据
    });
  }

  return apps;
};

const apps = getSubProjectConfig();

  const lifeCyclesFun = (app: LoadableApp<{}>, desc: string): any => {
    console.log(desc, app);
  };

  /**
   * Step1 初始化应用（可选）
   */
  SubAppContent({ loading: true });

  /**
   * Step2 注册子应用
   */
  registerMicroApps(apps, {
    beforeLoad: [(app) => lifeCyclesFun(app, 'before load')],
    beforeMount: [(app) => lifeCyclesFun(app, 'before mount')],
    afterUnmount: [(app) => lifeCyclesFun(app, 'after unmount')],
  });

  /**
   * Step3 设置默认进入的子应用
   */
 setDefaultMountApp('#/first');

  /**
   * Step4 启动应用
   */
  start({
    prefetch: true,
    singular: true,
    fetch: window.fetch,
  });

  runAfterFirstMounted(() => {
    console.log('[MainApp] first app mounted');
  });

子项目

主要功能包括：

1. 接入微前端，保证同时运行和独立运行，并处理相关页面和功能的显示和隐藏
2. 处理父应用传入的参数，如Token
3. 样式风格调整
4. 各业务系统功能

实际项目是由Angular的项目拆分而成，所以子项目都是Angular项目。具体怎么接入Angular项目，请参照微前端乾坤+Angular9

注：因为是公司内部项目，不能给出源码，只能贴出部分代码，代码不够完善，请大家勿喷。如果大家在使用乾坤过程中遇到问题，希望能够留言，大家一起交流互相学习。