基于 Vite + Qiankun + ESM 的现代化微前端框架
本项目是一套适配现代构建体系、高隔离、高性能的轻量微前端开源解决方案,基于 Vite 极速构建工具 + Qiankun 成熟微前端内核搭建,原生支持 ESM 模块化规范,并默认开启 Qiankun 严格样式隔离能力。
针对传统 Webpack 微前端打包慢、ESM 适配兼容差、子应用样式全局污染、沙箱隔离不彻底等行业痛点做了深度优化,完美适配 Vite 生态的极速热更新、按需构建、轻量化打包特性。
✨ 核心特性
相较于传统 Qiankun 微前端方案,本框架聚焦现代化、高隔离、轻量化、易拓展四大核心优势:
⚡ Vite 原生驱动:摒弃 Webpack 笨重构建,依托 Vite 极速冷启动、毫秒级 HMR 热更新、按需编译能力,大幅提升微前端多应用并行开发效率,解决多子应用调试卡顿问题。
🔒 严格样式隔离(strictStyleIsolation):默认开启 Qiankun 原生 Shadow DOM 严格样式隔离,彻底杜绝主应用、各子应用之间的 CSS 全局污染、样式层级覆盖、样式冲突问题,相比实验性隔离方案兼容性更强、隔离更彻底。
📦 完整 ESM 模块化支持:深度适配 ESM 原生加载规范,解决 Vite 项目接入 Qiankun 后的模块加载异常、资源解析失败、动态导入报错等常见问题,告别传统 UMD 打包兼容弊端,打包体积更小、加载速度更快、符合现代前端工程规范。
🛡️ 完善的沙箱隔离机制:搭配 JS 沙箱环境,实现全局变量、Window 方法、事件监听的完全隔离,子应用挂载独立运行、卸载彻底清空,杜绝全局变量泄露、内存残留,大幅提升系统稳定性。
🔗 技术栈无关接入:兼容 Vue、React、原生 JS 等所有主流前端技术栈,主、子应用可异构技术栈接入,支持新旧系统无缝融合,适配遗留项目微前端改造。
🚀 轻量化高性能:精简冗余配置,保留核心微前端能力,无重度依赖,构建产物体积小、首屏加载快、应用切换无卡顿,适配 PC 中台、移动端 H5 等多场景。
📋 标准化工程规范:统一主子应用接入规范、路由配置、状态通信、生命周期管理,开箱即用,降低微前端落地门槛,无需重复踩坑配置。
🛠️ 在线demo
https://mapps.frmstock.org.cn/