docs

剑鱼微前端状况简述

微前端简述

目前主流的微前端框架技术思想，都是基于WebComponent的思路，通过js沙箱、样式隔离、元素隔离、路由隔离模拟实现了ShadowDom的隔离特性，并结合CustomElement将微前端封装成一个类WebComponent组件，从而实现微前端的组件化渲染。

技术选择

在2022年前期工作台搭建时，调研了当时主流的微前端技术框架 qiankun、无界、mirco-app。

结合当时技术状况，以及生成环境的稳定性，选择使用社区成熟度、热度较高的 qiankun。

集成流程

基座（工作台）

仅仅需要注册子应用，

配置示例：

 qiankun: {
  name: 'testSubApp',
  entry: '/page_test/index.html',
  rule: '/test'
},

子应用集成

• 1. 配置子应用生命周期

vue项目，main.js入口文件示例

import { easySubAppRegister } from '@jianyu/easy-inject-qiankun'
export const { bootstrap, mount, unmount } = easySubAppRegister({
    Vue,
    router,
    store,
    App,
    el: '#app'
})

• 2. 导出模块

历史项目，基于 vue@cli 配置 webpack 示例

configureWebpack: {
    ...,
    output: {
      library: 'testSubApp',
      libraryTarget: 'umd',
      jsonpFunction: `webpackJsonp_${packageName}`
    },
}

新项目，基于 vite 配置示例

import { legacyQiankun } from 'vite-plugin-legacy-qiankun'

...

plugins: [
    ...,
     legacyQiankun({
      name: 'testSubApp',
      devSandbox: false
    }) 
]