一. ✍🏻 前言

前端项目模块增多的情况，如果你是前端项目负责人，手下好多项目好多系统，然后你要对这些系统进行整合，有老的系统，有新的系统，有之前vue2不想重构成vue3的系统，有angular，有react等等...公司让你进行一个整合，那么微前端是个选择。

这次我们来聊聊微前端

二. 💡 what 是什么

📢 问：什么是微前端❓

📢 答：“微前端”（micro-frontends）是多个前端应用聚合的一个应用的架构体系的统称（如果后面这些都记不住，记住前面这句话，理解它就行了）。每个小的应用都可以独立运行、独立开发、独立部署上线。

三. 💡 why 为什么

📢 问：为什么要有微前端❓为什么要有这个东西出现❓

📢 答：微前端出现的目的，是为了将前端应用拆分为更小的、可独立开发和部署的模块，每个模块都可以由不同的团队进行开发和维护。

👆 前面前言部分也说了整合多个模块的问题，不单单是为了解决多个模块整合在一起多团队不同成员开发的问题，还可以解决遗留系统的迁移的这么一个问题，对聚合前端项目，不受限于技术选型，提高开发的效率。

最最重要的是，每个模块可以独立部署上线，互不干扰。

四. 💡 how 怎么做

📢 问：微前端怎么做？怎么动手开始？公司有这个微前端项目的需求要我搭建，怎么开始？方法是什么？如何实施？

📢 答：现有框架->

蚂蚁金服搞得那一套微前端（乾坤qiankun）
腾讯开源的基于webComponents和iframe的微前端框架wujie无界
JavaScript微前端框架，一个将多个单页面应用聚合为一个整体应用single-spa。
京东零售做的微前端框架，基于webcompoenent渲染，从组建思维实现微前端的micro-app

qiankun

📦 安装

yarn add qiankun / npm install qiankun -S

🔌 使用

examples/main/index.js

import { registerMircroApps, start } from 'qiankun';

// 主应用可以使用任意的技术栈，比如vue|react|angular

// 注册子应用

registerMircroApps([
    {
        name: 'react',
        entry: '//localhost:7100',
        container: '#subapp-viewport',
        activeRule: '/react'
    },
    {
        name: 'vue',
        entryL '//localhost:7101',
        container: '#subapp-viewport',
        activeRule: '/vue'
    },
    //...等等
])

🎯 效果

wujie

📦 安装

yarn add wujie / npm install wujie -S

🔌 使用

import { startApp } from 'wujie';

startApp({ 
    name: '唯一id',
    url: '子应用路径',
    el： '容器',
    sync: true
})

🎯 效果

Kapture 2023-11-25 at 11.41.30.gif

...

五. 🎯 技术方案

实现微前端的重要思想就是将应用进行拆解和整合，通常是一个父应用加上一些子应用。要么，使用类似nginx配置不同应用的转发（nginx路由转发），要么就是iframe将多个应用整合到一起（iframe嵌套）。

技术方案	描述
`组合式`应用路由`分发`	每个`子应用`独立构建和部署，运行时由`父应用`来进行`路由管理`，应用加载，启动，卸载，以及通信机制。
`web components`	每个`子应用`需要采用纯`web components`技术编写组件，是一套全新的开发模式。
`iframe嵌套`	父应用单独是一个页面，每个`子应用嵌套一个iframe`，父子通信可采用`postMessage`或`contentWindow`方式。
`nginx路由转发`（运维层面）	nginx配置反向代理，实现不同路径，映射到不同应用。（1）www.example.com/app1 -> app1；(2) www.example.com/app2 -> app2。

nginx配置示例：

☎️ 希望对大家有所帮助，如有错误，望不吝赐教，欢迎评论区留言互相学习。感谢阅读，祝您开发有乐趣。

假设面试官问你有关“微前端”的问题，你能答多少...