微前端方案小结

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

什么是微前端？

微前端借鉴了微服务的架构理念，核心在于将一个庞大的前端应用拆分为多个独立的小应用，每个应用独立开发、独立部署、独立运行，然后再将小应用融合为一个完整的应用。减少了项目之间的耦合，提高了扩展性。

Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently. -- Micro Frontends

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。

解决了什么问题？

微前端主要解决了两个问题：

伴随着项目的迭代，应用变的越来越大，维护成本增高。
一个项目跨部门、跨团队开发，协作效率低下。

微前端的价值

拆分庞大的应用为独立的小应用，独立开发，独立部署
拆分后的独立应用方便增量升级和局部回滚
独立应用之间可以互相通信（类比iframe）、基础库的复用
旧系统和新系统融合
各个系统可以使用不同的技术体系

微前端框架汇总

目前社区中已经有很多开源的解决方案。

single-spa

single-spa是一个比较早的微前端框架了。在一个single-spa中，你的 SPA 包含许多被注册的应用，而各个应用可以使用不同的框架。被注册的这些应用维护自己的客户端路由，使用自己需要的框架或者类库。应用只要通过挂载，便可渲染自己的 html 页面，并自由实现功能。

single-spa是将每个应用注册到一个single-spa中，每个应用都只有自己的 **name**、加载应用的函数、激活应用的函数。

singleSpa.registerApplication({
  name: 'myApp',
  app: () => import('src/myApp/main.js'),
  activeWhen: ['/myApp', (location) => location.pathname.startsWith('/some/other/path')],
  customProps: {
    some: 'value',
  },
});
singleSpa.registerApplication({
  name: 'myApp',
  app: () => import('src/myApp/main.js'),
  activeWhen: ['/myApp', (location) => location.pathname.startsWith('/some/other/path')],
  customProps: (name, location) => ({
    some: 'value',
  }),
});