微前端架构(1)[通俗易懂]

大家好，欢迎来到IT知识分享网。

1. 什么是微前端

         微前端是一种软件架构,类似于组件架构(但不能独立构建和发布),能将前端项目拆解成一些更小并能够独立开发部署的微型应用(每个应用都可以使用不同框架技术),然后再把这里微应用再组合起来,成为一个整体应用架构的模式。

2. 应用场景

        拆分巨型应用,使应用变得更加可维护

        兼容历史应用,实现增量开发

3. 微前端的价值

– 增量迁移

        旧项目想使用新技术时,以前只有2种方式

1. 直接迁移(无法实现)  2.完全重写(耗费成本大),

        这时候需要用到微前端的架构,保留原有的项目时,可以完全用新框架开发新需求,然后再使用微前端架构进行整合(人员技术的提升,产品成本降低)

– 独立发布

        单页应用中,是使用组件构建界面的, 应用中每个功能或者是问题修复完后都需要对整个项目进行打包和发布(这里就存在构建发布的耗时)

– 允许单个团队做出技术决策

        微前端的架构与框架技术无法,当一个应用由多个本门或者团队开发时,每个团队都可以用到自己擅长的技术进行开发

4. 如何实现微前端

– 多个微应用如何进行合并?

        微应用容器,每个微应用都需要被注册到容器中,每一个应用都是一个独立JavaScript模块,通过模块化的方式被容器启动和运行,模块化的方式运行可以防止不同的微应用运行时同时发生冲突

– 微应用中如何实现路由?

        微前端架构中,当路由发生变化时,容器应用会优先拦截路由的变化,根据路由匹配相应的微应用,再启动微应用的路由,然后再到具体页面的组件

– 微应用与微应用之间如何实现状态共存?

        通过发布订阅模式实现状态共享,例如Rx.js(可以把 RxJS 当做是用来处理事件的 Lodash )

– 微应用与微应用之间如何实现框架共存?

        通过import-map和webpack中的externals属性

– 如何模块化

        微应用应该被打包为模块化,但是因为浏览器不支持模块化,所以需要用到systemjs去实现,它是一个js库,有属于自己模块化的规范,可以使用webpack将其转换为systemjs支持的模块

        webpack->(三大框架应用)打包->webpack把es模块转成->systemjs模块->浏览器通过systemjs进行加载并运行

•         为什么不用npm

               1. 发布效率低下(迭代的麻烦以及迭代后每个项目都要拉下来再重新构建项1目)

               2. 多团队协作容易不规范(每个人拥有它,也代表没有人拥有它)

(未完待续…….)