阅读 177

微前端从零到一

微前端是什么

微前端就是一种由独立交付的多个前端应用组成整体的架构风格。具体的来说,就是将前端应用分解成一些更小、更简单能够独立开发、测试、部署的小块,而在用户看来仍然是内聚的单个产品。

业务背景

抛开业务的架构设计都是耍流氓 ------鲁迅

最近,公司要求将我们风控与安全部门的所有前端系统集成到一个主系统里面来,这样有利于员工更好的操作我们平台的系统。需求很明确,就是要集成我们现有的前端系统,从0开始重做一个新系统那当然是不可能的,此时当下比较火热的微前端架构,就是解决这样一个实际存在的需求的最佳实现方案。

方案设计

但是当下微前端架构有很多,应该如何选择呢,这里我列举了一些常见的微前端解决方案:

方式开发成本维护成本可行性同一框架要求潜在风险
「1」路由分发通过后端路由分发不同前端页面
「2」iFrame页面刷新子应用状态无法保存
「3」应用微服务化针对每个框架做定制及 Hook
「4」微件化针对构建系统,如 webpack 进行 hack
「5」微应用化统一不同应用的构建规范
「6」Web Components新技术,浏览器的兼容问题

相比较之下,最终我们选择了应用微服务化,当然一些老的前端项目可能需要使用iframe的形式,为什么我们会做出这么一个选择呢,我认为有以下两点主要原因:

  1. 首先我们是对现有的前端项目做集成,在不大规模改动现有代码的的前提下,方案4,5,6都是不可取的方案。
  2. 对于用户体验来看,使用iframe刷新页面时会丢失页面的状态

基于此,我们大致的微前端结构图如下:

这是一种基于单实列应用:

还有一种比较复杂的多实列应用,由于较复杂,此处就简单介绍一下架构图如下:

可能会遇到的问题

那么对于这个方案的研究,我们在实施前,一定要考虑到可能会遇到的问题与挑战,我在此罗列了一下几个点:

  1. 父应用需要做到哪些事情?
  2. 子应用应该在compiler时导入还是应该在runtime的时候导入?
  3. 各个应用之间如何隔离?比如全局变量,css样式,路由导航?
  4. 父子应用之间的通信应该如何达成?

带着以上问题,我开始技术调研,最终选择了蚂蚁的qiankun框架,它完美的解决了我上面提及的所有情况。

来看看它的官方介绍:

具体实施

说了这么多理论基础,让我们来试试具体的实施,我们需要做些什么

  1. 第一步我们当然应该新建一个父应用,在父应用中注册子应用
registerMicroApps([
  {
    name: 'react app', // app name registered
    entry: '//localhost:8081',
    container: '#yourContainer',
    activeRule: '/yourActiveRule',
  },
  {
    name: 'vue app',
    entry: '//localhost:7100',
    container: '#yourContainer2',
    activeRule: '/yourActiveRule2',
  },
]);
复制代码
  1. 改造子应用,让子应用打包模式改成umd,暴露入口文件,导出各个生命周期函数。
module.exports = {  
  output: {
    library: `${packageName}-[name]`,
    libraryTarget: 'umd',
    jsonpFunction: `webpackJsonp_${packageName}`,
  },
  devServer: {    
    headers: {      
        //指定允许其他域名访问      
        "Access-Control-Allow-Origin""http://localhost:8080",
        "Access-Control-Allow-Credentials"true,    
    },  
  }
}
复制代码
  1. 父子应用通信

目前来看qiankun的通信方式有一下几种:

  • 使用url的形式传递参数
  • 通过生命周期的props
  • 通过原生的自定义事件通信(CustomEvent)
  • 全局变量
  1. 共同依赖如何解决

暂时没有解决,计划会将业务中的公用组件抽离出来。

总结

在一个具体业务需求面前,我们可以看到微前端是我们不二的选择,虽然目前微前端还有很多缺陷,但是它依然可以解决我们大多数问题:

  • 各个子项目技术栈无需统一
  • 面对老项目无需一次性改版
  • 项目之间可以独立部署

这次的分享就先到这,有时间可以简单研究一下qiankun2的源码,加油呀