qiankun - 微前端

qiankun

作用：

• 在主应用注册子应用。
• 在子应用中声明并导出周期函数，包括mount函数，供主应用调用并传递props(.container)参数 export function mount (props) { render(props) }。其中render这里将子应用挂载到props.container上，即完成了子应用挂载到主应用。

npm包：
文档：https://qiankun.umijs.org/zh/guide/getting-started

原理：https://qiankun.umijs.org/zh/guide

在主应用中注册子应用

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'vueApp',
    entry: '//localhost:8080',
    container: '#container',
    activeRule: '/app-vue',
  },
  {
    name: 'angularApp',
    entry: '//localhost:4200',
    container: '#container',
    activeRule: '/app-angular',
  },
]);
// 启动 qiankun
start();

在子应用中接入主应用

import './public-path';
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import routes from './router';
import store from './store';

Vue.config.productionTip = false;

let router = null;
let instance = null;
function render(props = {}) {
  const { container } = props;
  router = new VueRouter({
    base: window.__POWERED_BY_QIANKUN__ ? '/app-vue/' : '/',
    mode: 'history',
    routes,
  });

  instance = new Vue({
    router,
    store,
    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;
  router = null;
}

vite-plugin-qiankun

作用：帮助子应用快速接入qiankun的vite插件。即作为qiankun子vite应用，如何接入qiankun主应用上。即在vite子应用中接入主应用

npm包：https://www.npmjs.com/package/vite-plugin-qiankun

原理：将本地应用注册为qiankun子应用，通过qiankunWindow对象，获取qiankun主应用container，将本地应用app挂载到container中。

import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper';

if(!qiankunWindow.__POWERED_BY_QIANKUN__) { // 是否是qiankun子应用
	render();
}

// qiankun子应用注册生命周期函数，供主应用调用
renderWithQiankun({
  mount(props) {
    setProjectFavicon(FAVICON_LINK);
    render(props.container);
  },
  update() {
    console.log('code updated');
  },
  bootstrap() {
    console.log('code bootstraped');
  },
  unmount() {
    restoreOriginalFavicon();
    app?.unmount();
    app = null;
  },
});

funtion render(container) {
	const router = createRouter({
    	history: createWebHistory(qiankunWindow.__POWERED_BY_QIANKUN__ ? '/app-vue' : ''), // 这里的'/app-vue'，是在主应用注册子应用时，声明的路由前缀activeRule
    routes,
  });
	app.mount(container?.querySelector('#code-app') || '#code-app');
}

qiankun和iframe 的区别

qiankun和iframe都是用于在Web应用中嵌入或集成其他应用的方法，但它们有一些显著的区别：

1. 嵌入技术：
   iframe：是一种HTML元素，可以用于在一个页面中嵌入另一个HTML文档。它创建了一个独立的浏览器环境，包含自己的DOM和JavaScript作用域。
   qiankun：是一种微前端框架，基于Single-SPA，它允许开发者以应用级别嵌入多个子应用，这些子应用共享同一个浏览器环境，并可以相互通信。

2. 独立性：
   iframe：沙箱独立性高，每个iframe内部的内容与宿主页面之间是完全隔离的。因此，它对于安全性和隔离性有优势。
   qiankun：提供应用间的共享和通信能力，允许子应用共享宿主应用的上下文，但这意味着隔离性没有iframe那么强。

3. 通信机制：
   iframe：通信较为困难，通常需要使用postMessage来在iframe和宿主页面之间传递信息。
   qiankun：具有内置的应用间通信机制，通过主应用和子应用之间的生命周期函数传递信息。

4. 样式影响：
   iframe：样式隔离，子应用不会影响宿主页面的样式。
   qiankun：需要处理样式隔离问题，可能需要使用CSS Modules或其他技术避免样式冲突。

5. 开发体验：
   iframe：使用起来比较直接，但功能有限。
   qiankun：提供更好的开发体验，支持更复杂的微前端架构，但需要一定的学习成本。

6. 资源复用：
   iframe：由于完全隔离，无法共享外部资源，例如公共的JavaScript库。
   qiankun：可以共享资源，避免加载重复的库，提高性能。