深入浅出微前端（qiankun）
最新回答
梁小鬼
2026-10-31 17:47:24
微前端的核心理念是将前端应用视为整体，由独立部分组成，每个部分作为微前端应用，具有自定义技术栈、开发流程与团队组织，实现独立开发与部署，减少复杂协调与合并。
IFrame在传统前端应用中用于嵌入其他网页或应用，但微前端架构不推荐使用，原因在于限制因素，包括隔离性、通信机制与性能优化不足。
微前端架构采用Web Components、JavaScript模块加载器等技术，提供更好的隔离性、通信机制与性能优化，使架构更灵活。
在Vue项目中，通过`this.router.push`与`this.router.replace`触发`history.pushState`与`history.replaceState`事件。通过监听`window.onpopstate`与`window.location.pathname`匹配路由，加载与路由匹配的子应用。
加载子应用时，获取子应用HTML文本，通过`importHTML`函数处理文本，实现内联与外链脚本的分离与加载。
qiankun基于single-spa实现，依赖import-html-entry处理HTML与CSS，实现HTML Entry与Sandbox特性。
UMD格式用于前端模块化开发，支持CommonJS、AMD及全局定义模块，使不同环境都能正常运行。
qiankun要求子应用打包为UMD库格式，便于主应用获取入口文件中的生命钩子函数，实现主子应用通信。
importHTML函数实现HTML内容加载，包含模板、样式与脚本的解析与处理，通过大量正则与替换，实现脚本的内链与外链处理。
JavaScript沙箱提供隔离执行环境，限制代码访问权限，确保安全执行。
SnapshotSandbox与LegacySandbox实现微应用样式隔离，通过代理技术创建独立执行环境，确保应用间样式独立。
在qiankun中开启样式隔离，使用shadow dom包裹微应用容器，确保样式不会全局影响。实验性模式下，通过特殊选择器限定样式影响范围，但需注意事件处理与样式应用问题。
Vue scoped在单文件组件中使用，为每个子应用添加唯一属性选择器，解决样式隔离与事件处理问题。
热门标签
