最简单的微前端方案学习（网易云async-routers）

Mr豆花
212 阅读5分钟

微前端也火了很久了，业界的技术方案也有很多种。这玩意吧，确实也是好东西，它能解决什么问题呢？

本次摘要

  • 微前端是什么
  • 为什么需要微前端
  • 对比几种微前端方案
  • 简述网易云方案
  • 总结
  • 常见问题

微前端是什么

微前端是一种web 应用技术方案，可以独立编译、发布、开发，可以拥有不同技术栈

传统项目问题

对于大型前端项目，比如公司内部管理系统（CRM系统），如果将所有业务放在一个前端项目里，随着业务功能不断增加，就会导致如下这些问题：

  • 代码规模庞大，导致编译时间过长，开发、打包速度越来越慢

  • 项目文件越来越多，导致查找相关文件变得越来越困难

  • 某一个业务的小改动，导致整个项目的打包和部署

  • 不能支持多个技术栈，也不利于多个团队共同维护开发

为什么需要微前端

互不影响，升级简单。

可以很方便的复用已有的功能模块，避免重复开发。

几种常见的微前端方法

  • qiankun

蚂蚁金融研发，基于 single-spa，有基座

  • EMP

YY PC端的技术方案，基于webpack5 Module Federation，俗称联邦模块，无基座

  • 网易云

方案很简单，有基座，子项目共享基座的vue实例，router与vuex也抽离到基座管理，vue router vuex实例都在基座，各个子项目得main.js是连接基座与子项目得桥梁

qiankun

qiankun基座代码架构很庞大，也无法完全做到状态隔离，使用方式通过使用乾坤的方法注册子应用，项目迁移时改动较小

特点：庞大，无法完全应用隔离，改动小

EMP

使用的webpack5新特性联邦模块，无基座，是一个典型的去中心应用，需要在每一个子项目写一个配置文件

特点：联邦模块，去中心应用

网易云方案的总结

  1. 主项目：用于管理子项目的路由切换、注册子项目的路由和全局 Store 层、提供全局库和方法
  2. 子项目：用于开发子业务线业务代码，一个子项目对应一个子业务线
  3. 主项目的 html 要访问子项目里的编译后的 js / css 等资源，需要进行代理转发
  4. 主项目 router.js 文件中定义了在 vue-router 的 beforeEach 钩子去拦截路由，

并根据即将跳转的路由分析出需要哪个子项目，然后去异步加载对应子项目入口文件

  1. 子项目的入口文件 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

网易云原创作者教程：juejin.cn/post/684490…

github仓库：github.com/micro-front…

avatar
文章
阅读
粉丝