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'，是在主应用注册子应用时，声明的路由前缀activeRuleroutes,});app.mount(container?.querySelector('#code-app') || '#code-app');
}
qiankun和iframe 的区别
qiankun和iframe都是用于在Web应用中嵌入或集成其他应用的方法，但它们有一些显著的区别：
-
嵌入技术：
iframe：是一种HTML元素，可以用于在一个页面中嵌入另一个HTML文档。它创建了一个独立的浏览器环境，包含自己的DOM和JavaScript作用域。
qiankun：是一种微前端框架，基于Single-SPA，它允许开发者以应用级别嵌入多个子应用，这些子应用共享同一个浏览器环境，并可以相互通信。 -
独立性：
iframe：沙箱独立性高，每个iframe内部的内容与宿主页面之间是完全隔离的。因此，它对于安全性和隔离性有优势。
qiankun：提供应用间的共享和通信能力，允许子应用共享宿主应用的上下文，但这意味着隔离性没有iframe那么强。 -
通信机制：
iframe：通信较为困难，通常需要使用postMessage来在iframe和宿主页面之间传递信息。
qiankun：具有内置的应用间通信机制，通过主应用和子应用之间的生命周期函数传递信息。 -
样式影响：
iframe：样式隔离，子应用不会影响宿主页面的样式。
qiankun：需要处理样式隔离问题，可能需要使用CSS Modules或其他技术避免样式冲突。 -
开发体验：
iframe：使用起来比较直接，但功能有限。
qiankun：提供更好的开发体验，支持更复杂的微前端架构，但需要一定的学习成本。 -
资源复用：
iframe：由于完全隔离，无法共享外部资源，例如公共的JavaScript库。
qiankun：可以共享资源，避免加载重复的库，提高性能。