微前端也火了很久了，业界的技术方案也有很多种。这玩意吧，确实也是好东西，它能解决什么问题呢？
本次摘要
微前端是什么
为什么需要微前端
对比几种微前端方案
简述网易云方案
总结
常见问题
微前端是什么
微前端是一种web 应用技术方案，可以独立编译、发布、开发，可以拥有不同技术栈
传统项目问题
对于大型前端项目，比如公司内部管理系统（CRM系统），如果将所有业务放在一个前端项目里，随着业务功能不断增加，就会导致如下这些问题：
代码规模庞大，导致编译时间过长，开发、打包速度越来越慢
项目文件越来越多，导致查找相关文件变得越来越困难
某一个业务的小改动，导致整个项目的打包和部署
不能支持多个技术栈，也不利于多个团队共同维护开发
为什么需要微前端
互不影响，升级简单。
可以很方便的复用已有的功能模块，避免重复开发。
几种常见的微前端方法
qiankun
蚂蚁金融研发，基于 single-spa，有基座
EMP
YY PC端的技术方案，基于webpack5 Module Federation，俗称联邦模块，无基座
网易云
方案很简单，有基座，子项目共享基座的vue实例，router与vuex也抽离到基座管理，vue router vuex实例都在基座，各个子项目得main.js是连接基座与子项目得桥梁
qiankun
qiankun基座代码架构很庞大，也无法完全做到状态隔离，使用方式通过使用乾坤的方法注册子应用，项目迁移时改动较小
特点：庞大，无法完全应用隔离，改动小
EMP
使用的webpack5新特性联邦模块，无基座，是一个典型的去中心应用，需要在每一个子项目写一个配置文件
特点：联邦模块，去中心应用
网易云方案的总结
主项目：用于管理子项目的路由切换、注册子项目的路由和全局 Store 层、提供全局库和方法
子项目：用于开发子业务线业务代码，一个子项目对应一个子业务线
主项目的 html 要访问子项目里的编译后的 js / css 等资源，需要进行代理转发
主项目 router.js 文件中定义了在 vue-router 的 beforeEach 钩子去拦截路由，
并根据即将跳转的路由分析出需要哪个子项目，然后去异步加载对应子项目入口文件
子项目的入口文件 main.js 仅需要将子项目的 routes 与 Store暴露给主项目
基座有批量启动命令的功能
常见问题
1）微前端与NPM对比
2）微前端与多页面片对比
3）子项目的页面权限校验必须在主项目中进行
4）主项目的 html 如何访问子项目里的编译后的 js / css 等资源
5）如果子项目代码更新后，除了打包部署子项目之外，还需要打包部署主项目吗？
6）子项目入口文件 main.js 不使用 chunkhash 的话，如何防止该文件始终被缓存呢？
7）公共组件如何复用
8）如何合并各个项目
一，对比NPM
更新npm包版本
更新A管理系统应用的npm包版本
发布部署A管理系统应用
对B和C管理系统应用循环2和3步骤
微前端一个闪亮点，就是可以做到一键更新。如下图
二，与多页面片对比
多页面片会将所有依赖项（node_modules）中都打包，所有项目都公用依赖
三，页面权限校验必须在主项目中进行
因为主项目是路由控制器，router实例是在主项目中创建的
四，主项目的 html 如何访问子项目里的编译后的 js / css 等资源
如果是本地开发时，可以通过 webpack 提供的 proxy，例如：
const PROXY = {
‘/app-a/‘: {
target: ‘http://localhost:10241/'
}
};
主项目和子项目放在一个文件夹中按照相对路径引用
五，子项目代码更新后，是否还需要部署主项目
不需要，项目关联只有main.js，main.js是不需要打包hash值
六，main.js没有hash值，如何配置缓存
与max商量了，见main.js打包到特定的目录，例如 nocache/main.js
七，公共组件如何复用
公共组件必须抽离到主项目，这样才能项目启动的时候就申明
八，如何合并目前已有的各个spa项目
这套方案无法实现，网易云方案是拆分巨无霸项目，单一页面片，单一vue router实例，且只支持一个base配置
优缺点
优点
子项目可单独打包、单独部署上线，提升了开发和打包的速度
子项目之间开发互相独立，互不影响，可在不同仓库进行维护，减少的单个项目的规模
保持单页应用的体验，子项目之间切换不刷新
改造成本低，对现有项目侵入度较低，业务线迁移成本也较低
保证整体项目统一一个技术栈
缺点：
主项目和子项目需要共用一个 Vue 实例，所以无法做到某个子项目单独使用最新版 Vue（例如 Vue3）或者 React
网易云原创作者教程：https://juejin.cn/post/6844904079441805326
github仓库：https://github.com/micro-frontends-vue/async-routes