qiankun的面试题
- [一. qiankun基础](#一. qiankun基础)
-
- [1. 什么是 qiankun？](#1. 什么是 qiankun？)
- 2.微前端构成
- [3.qiankun 的核心特性](#3.qiankun 的核心特性)
- [二. qiankun的核心原理](#二. qiankun的核心原理)
-
- [1.qiankun 的实现原理](#1.qiankun 的实现原理)
- [2. qiankun 中 HTML Entry 是什么](#2. qiankun 中 HTML Entry 是什么)
- [三. qiankun的生命周期](#三. qiankun的生命周期)
-
- [1. 子应用的生命周期有哪些](#1. 子应用的生命周期有哪些)
- 2.主应用生命周期
- [四. 沙箱与隔离](#四. 沙箱与隔离)
-
- [1.qiankun 的 JS 沙箱有几种](#1.qiankun 的 JS 沙箱有几种)
- [2. 样式隔离如何实现](#2. 样式隔离如何实现)
- [3. 样式冲突怎么解决](#3. 样式冲突怎么解决)
- [五. 应用通信](#五. 应用通信)
-
- [1. qiankun 应用间通信方式](#1. qiankun 应用间通信方式)
- [六、配置 & 实战题](#六、配置 & 实战题)
-
- 1.主应用如何注册子应用
- 2.子应用必须做哪些配置
- [3.子应用如何判断运行在 qiankun 环境](#3.子应用如何判断运行在 qiankun 环境)
- [七、常见问题 & 解决方案（必背）](#七、常见问题 & 解决方案（必背）)
-
- [1.子应用静态资源（图片 / 字体）404](#1.子应用静态资源（图片 / 字体）404)
- [2.子应用跳转后刷新 404](#2.子应用跳转后刷新 404)
- 3.多实例子应用同时运行
- 4.如何预加载子应用
一. qiankun基础
1. 什么是 qiankun？
qiankun 是基于 single-spa 封装的阿里开源微前端框架。
用于将一个大型应用拆分成多个独立子应用。
实现技术栈无关、独立开发、独立部署、独立运行。
2.微前端构成
一个主应用（基座）
多个独立子应用（Vue/React/Angular/JQuery 都行）
子应用可独立开发、构建、部署
最终用户使用时是一个完整应用
3.qiankun 的核心特性
技术栈无关（Vue2/Vue3/React/Angular 任意混用）
HTML Entry 接入方式（直接访问子应用 index.html）
样式隔离
JS 沙箱
应用间通信
资源预加载
独立开发 / 部署
二. qiankun的核心原理
1.qiankun 的实现原理
路由劫持：监听 URL 变化，匹配子应用规则
加载子应用：fetch 获取子应用 HTML、CSS、JS
HTML 解析：提取 JS、CSS，动态执行
JS 沙箱：隔离子应用全局变量，防止污染
样式隔离：防止子应用之间样式冲突
生命周期管理：统一管理子应用 bootstrap/mount/unmount
2. qiankun 中 HTML Entry 是什么
子应用只需要暴露一个 index.html
主应用通过 fetch 拉取页面，解析出 js、css、静态资源
不用配置 entry、assets 等复杂规则，接入成本极低
三. qiankun的生命周期
1. 子应用的生命周期有哪些
必须导出 4 个生命周期钩子：
bootstrap：初始化（只执行一次）
mount：子应用挂载（渲染）
unmount：子应用卸载（销毁）
update：可选，子应用更新
js
export async function bootstrap() {}
export async function mount(props) {}
export async function unmount() {}2.主应用生命周期
主应用使用 registerMicroApps 注册，可配置：
beforeLoad
beforeMount
afterMount
beforeUnmount
afterUnmount
四. 沙箱与隔离
1.qiankun 的 JS 沙箱有几种
三种沙箱，自动降级：
ProxySandbox（推荐）：ES6 Proxy，支持多实例
SnapshotSandbox：快照沙箱，不支持多实例
LegacySandbox：单实例沙箱（老版）
作用：
隔离 window 全局变量
子应用卸载后可还原环境
避免多应用冲突
2. 样式隔离如何实现
1：自动样式隔离：strictStyleIsolation
使用 ShadowDOM 完全隔离
2：实验性样式隔离：experimentalStyleIsolation
给子应用样式自动加前缀，如 div[data-qiankun="app1"]
3：最佳实践：CSS Modules / scoped / CSS-in-JS
3. 样式冲突怎么解决
开启 experimentalStyleIsolation
子应用统一加命名空间
使用 scoped/css modules
避免全局选择器（#app, * 等）
五. 应用通信
1. qiankun 应用间通信方式
1.1：props 传递（最常用）
主应用向子应用传方法 / 数据，子应用通过 mount(props) 接收。
1.2：全局状态共享 initGlobalState
qiankun 内置的简易全局状态管理。
1.3：CustomEvent 自定义事件
1.4：localStorage / sessionStorage
1.5：URL 传参
initGlobalState 使用方式
js
// 主应用
import { initGlobalState } from 'qiankun'
const actions = initGlobalState({ user: '' })
actions.onGlobalStateChange()
actions.setGlobalState()
// 子应用通过 props 获取 actions六、配置 & 实战题
1.主应用如何注册子应用
js
import { registerMicroApps, start } from 'qiankun'
registerMicroApps([
{
name: 'app1',
entry: 'http://localhost:8081',
container: '#container',
activeRule: '/app1'
}
])
start()2.子应用必须做哪些配置
导出生命周期
配置 publicPath
配置打包：library、libraryTarget
路由 base 路径
3.子应用如何判断运行在 qiankun 环境
js
window.__POWERED_BY_QIANKUN__七、常见问题 & 解决方案（必背）
1.子应用静态资源（图片 / 字体）404
原因：子应用打包后资源路径错误。
解决：
js
if (window.__POWERED_BY_QIANKUN__) {
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}2.子应用跳转后刷新 404
主应用、子应用都配置 history 模式路由
Nginx 配置 try_files uri uri/ /index.html;
3.多实例子应用同时运行
必须使用 ProxySandbox，不能用快照沙箱。
start({ sandbox: { strictStyleIsolation: true } })
4.如何预加载子应用
js
start({ prefetch: true })
``
true：主应用启动后空闲时预加载
all：加载完主应用直接预加载所有子应用
# 八、对比 & 架构题
## 1. qiankun vs single-spa
single-spa：轻量、需手动配置资源
qiankun：开箱即用、HTML Entry、沙箱、样式隔离、生产可用
## 2. qiankun vs iframe
iframe：隔离彻底，但通信难、路由不同步、性能差、UI 不同步
qiankun：同域、路由统一、通信顺畅、性能好、体验是真正单页应用
## 3.微前端的优缺点
```js
优点
技术栈无关
独立部署
业务解耦
老项目迁移成本低
缺点
额外复杂度
调试变复杂
资源重复加载（可通过 externals 优化）
性能开销