浅了解一下『微前端』

1 什么是微前端

微前端的核心理念是将前端应用程序看作是一个整体,由多个独立的部分组成。每个部分被视为一个微前端应用,它们可以具有自己的技术栈、开发流程和团队组织。这种方式使得团队可以独立开发和部署各个子应用,减少了协调和合并的复杂性。

2 为什么使用微前端

为了解决团队平台系统多且相互独立,系统体量大且页面多,开发效率低、接入成本高。

当前应用痛点
浅了解一下『微前端』_第1张图片

  • 项目中的组件和功能模块会越来越多,导致整个项目的打包速度变慢;
  • 因为文件夹的数量会随着功能模块的增多而增多,查找代码会变得越来越慢;
  • 如果只改动其中一个模块的情况,需要把整个项目重新打包上线;
  • 所有的项目都基本只能使用同一技术框架,不便引入新技术栈。如:react、vue等。

3 微前端的特点

  • 技术栈无关 主框架不限制接入应用的技术栈,子应用可自主选择技术栈
  • 独立开发/部署 各个团队之间仓库独立,单独部署,互不依赖
  • 增量升级 当一个应用庞大之后,技术升级或重构相当麻烦,而微应用具备渐进式升级的特性
  • 独立运行时 微应用之间运行时互不依赖,有独立的状态管理
  • 提升效率 应用越庞大,越难以维护,协作效率越低下。微应用可以很好拆分,提升效率
    浅了解一下『微前端』_第2张图片

4 微前端方案

浅了解一下『微前端』_第3张图片

4.1 基于 iframe 完全隔离的方案

最早也是最熟悉的解决方案就是通过iframe

显著的优点
1.非常简单,无需任何改造
2.完美隔离,JS、CSS 都是独立的运行环境
3.不限制使用,页面上可以放多个 iframe 来组合业务

缺点非常突出
1.无法保持路由状态,刷新后路由状态就丢失
2.完全的隔离导致与子应用的交互变得极其困难,只能采用postMessage方式。
3.iframe 中的弹窗无法突破其本身
整个应用全量资源加载,加载太慢

浅了解一下『微前端』_第4张图片

4.2 基于 single-spa 路由劫持方案

qiankun 是一个基于 single-spa 的微前端实现库:qiankun文档

4.2.1 创建父子应用
vue create mian
vue create sbuapp
4.2.2 主应用安装qiankun
npm i qiankun -S
4.2.3 主应用配置

main.js:

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

//qiankun配置
import { registerMicroApps, start } from 'qiankun';

//子应用列表
let apps = [
{
name:'subapp',
entry:'//localhost:8080',//子应用的地址,这里演示是本地启动的地址。
container:'#app',//子应用的容器节点的选择器(vue一般为app)
activeRule:'/subapp',//访问子应用的规则,比如:主应用为localhost:8081,那访问该子应用的url应为localhost:8081/subapp
}
]

//注册子应用
registerMicroApps(apps);

//启动
start();

new Vue({
render: h => h(App),
}).$mount('#app')
4.2.4 子应用配置

根目录创建public-path.js文件
//public-path.js

if (window.POWERED_BY_QIANKUN) {
webpack_public_path = window.INJECTED_PUBLIC_PATH_BY_QIANKUN;
}

main.js:

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

let instance = null;
function render(props = {}) {
const { container } = props;
instance = new Vue({
render: (h) => h(App),
}).$mount(container ? container.querySelector('#app') : '#app');
}

// 独立运行时
if (!window.POWERED_BY_QIANKUN) {
render();
}

export async function bootstrap() {
console.log('[vue] vue app bootstraped');
}
export async function mount(props) {
console.log('[vue] props from main framework', props);
render(props);
}
export async function unmount() {
instance.$destroy();
instance.$el.innerHTML = '';
instance = null;
}
4.2.5 本地启动主应用和子应用

这里先启动子应用,然后启动主应用,访问主应用OK:http://localhost:8084,然后著应用地址+/subapp 访问子应用:http://localhost:8084/subapp

跨域报错
解决跨域问题
qiankun官网早就给出来了 https://qiankun.umijs.org/zh/guide/tutorial#vue-%E5%BE%AE%E5%BA%94%E7%94%A8
copy到子应用vue.config.js:

const { defineConfig } = require('@vue/cli-service')
const { name } = require('./package');
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
headers: {
'Access-Control-Allow-Origin': '*',
},
},
configureWebpack: {
output: {
library: ${name}-[name],
libraryTarget: 'umd', // 把微应用打包成 umd 库格式
jsonpFunction: webpackJsonp_${name},

你可能感兴趣的:(前端,vue,前端,vue)