微前端实现方案对比Qiankun VS npm组件

架构层面:

1、Qiankun是典型的微前端架构,侧重构建多个独立前端应用协同工作的架构,主应用负责自用用的加载、卸载和通信;子应用不限制,可以是VUE、React等;

2、Qiankun松耦合,各个自应用独立开发,测试和部署,互不影响;可以多个团队协同工作

3、NPM组件单应用组件化架构:主要用于单页面应用或者传统前端项目的组件化开发

4、NPM组件和项目紧密集成,组件修改可能会影响整个项目,耦合度较高

技术栈兼容

Qiankun:与技术栈无关

NPM组件:技术栈依赖,除了用JS封装的组件可以通用之外,React封装的组件只能在React中应用,Vue的组件只能在Vue中应用

开发和部署

Qiankun:独立开发部署,不影响其他子应用和主应用,部署比较复杂,主要是自应用和主应用的部署顺序和版本兼容问题

npm组件:开发修改比较繁琐,特别是有嵌套比较深的底层组件,整个改动需要更新嵌套流程的所有npm项目;相对Qiankun部署简单很多,只需要改npm 组件并发布,更新项目中组件版本;

通信方式

Qiankun:通信方式比较丰富,props、全局事件总线等

npm 组件:通信方式比较简单,主要通过组件的属性和事件来实现

适用场景

Qiankun:大型复杂,多团队协作的项目;需要对现有项目进行技术栈升级时,可实现渐进式升级

NPM组件:小型项目和组件复用,小型项目或者代码复用场景

相关推荐
Coder_Ke1 分钟前
源码没错,API 却“失踪”了:微信开发者工具的一次作用域背刺
前端
渣波6 分钟前
从“迷路”到“瞬移”:彻底搞懂 React Router 的 `useLocation` 与 `useNavigate`
前端·javascript
申君健24864182772026 分钟前
WebGPU 开发入门:从设备初始化到渲染一帧
前端
橘子星7 分钟前
React Context + 自定义 Hooks:告别 Props 地狱,一行代码跨层级传数据
前端·javascript
moMo7 分钟前
前端路由,其实就是三个对象在演戏
前端·react.js
用户2930750976698 分钟前
React 自定义 Hooks 实战:用 useMouse 理解响应式封装
前端
小月土星9 分钟前
自定义业务 Hook:从零解剖一个 React + TypeScript Todo 应用:用金字塔思维看透前端架构
react.js·架构·前端框架
触底反弹10 分钟前
🔥 别再只用 useRef 拿 DOM 了!这 5 个实战场景让你彻底理解它(附源码解析 + 面试题)
前端·javascript·react.js
玉宇夕落11 分钟前
useRef + Web Worker —— 从零到一理解React多线程协作原理
前端
用户69190268133911 分钟前
React useRef、useEffect、useState 与 Web Worker 多线程实践
前端