微前端qiankun改造日渐庞大的项目教程

项目背景

很多小伙伴在工作中都碰到过和我一样的场景，手上的某个项目越来越大，眼看着每次build时间越来越长，吐了。在杭州某独角兽我碰到了这样的一个项目，他叫运营后台，听名字就知道，他的主要用户是运营人员。问题就是随着公司业务的越来越多，这个运营后台承担的已经不是某一块业务了，而是所有业务的运营操作的中后台都在这上面。你可以这样理解，这个系统的每个一级菜单都是一块独立的业务，相互之间没有任何瓜葛；按常规的理解，这应该是单独的每一个project比较合理，但是正因为他的用户又都是公司的同一群人，他们早已经习惯就在运营后台上去找自己的菜单进行业务操作，拒不接受在他的收藏夹里多出来好几个项目地址。那我们有没有一个办法让我们的项目更好维护，又能让用户不改变他们使用同一个项目的期望呢。这就是写这篇文章的初衷，就是微前端！！

微前端的好处

除了可以解决上面的问题以外，你想想，只要我们把项目改造成了微前端，那每个业务都是独立的project，只不过最终用户都是在一个主项目里去使用，那我们每个project的技术栈也不用定死了，就不存在老项目的技术栈是vue，以至于后面的项目都必须要用vue了，你也可以用react，这就很香不是吗。微前端的原理就是项目被拆成了父子关系，通过基座去引用了子应用，子应用之间是互相隔离的

qiankun

可能是你见过最完善的微前端解决方案

赞 (0)

相关推荐

  • ant-design-pro使用qiankun微服务配置动态主题色的问题

    ant-design-pro使用qiankun微服务配置动态主题色的问题

    使用微服务后,遇到一个问题,主应用和子应用的主题色不一致.希望可以通过主应用的颜色动态变换子应用的主题色ant-design-pro可以通过config.ts配置全局主题色所有最优的方法是可以通过改变主题色,来动态配置.官方最新版本的https://github.com/ant-design/ant-design-pro/releases/tag/v5.2.0已经支持了,通过<SettingDrawer>设置之前的版本不支持直接修改主题色.但是ant-design支持全局修改组件颜色跟着官方的

  • 详解ant-design-pro使用qiankun微服务

    详解ant-design-pro使用qiankun微服务

    目录 主应用配置 子应用配置 微服务现在挺火的,优点也很明显如果有多个应用都有相同页面时,就可以使用微服务,可以避免重复写代码 在网上搜了下,很多例子都是基于官方文档的例子,官方文档:https://umijs.org/zh-CN/plugins/plugin-qiankun.比较简单,实际使用场景会有特殊情况我根据自己项目的情况总结了一下使用方法 我们两个项目都是ant-design-pro的,我这里的例子也用的ant-design-pro项目生成的, githup地址:https://git

  • 微前端qiankun沙箱实现源码解读

    目录 前言 LegacySandbox单实例沙箱 ProxySandbox多实例沙箱 SapshotSandbox 快照沙箱 结束语 前言 上篇我们介绍了微前端实现沙箱的几种方式,没看过的可以下看下JS沙箱这篇内容,扫盲一下.接下来我们通过源 码详细分析下qiankun沙箱实现,我们clone下qiankun代码,代码主要在sandbox文件夹下,目录结构为 ├── common.ts ├── index.ts // 入口文件 ├── legacy │ └── sandbox.ts // 代理沙

  • 微前端qiankun改造日渐庞大的项目教程

    项目背景 很多小伙伴在工作中都碰到过和我一样的场景,手上的某个项目越来越大,眼看着每次build时间越来越长,吐了.在杭州某独角兽我碰到了这样的一个项目,他叫运营后台,听名字就知道,他的主要用户是运营人员.问题就是随着公司业务的越来越多,这个运营后台承担的已经不是某一块业务了,而是所有业务的运营操作的中后台都在这上面.你可以这样理解,这个系统的每个一级菜单都是一块独立的业务,相互之间没有任何瓜葛:按常规的理解,这应该是单独的每一个project比较合理,但是正因为他的用户又都是公司的同一群人,他

  • 基于微前端qiankun的多页签缓存方案实践

    基于微前端qiankun的多页签缓存方案实践

    目录 一.多页签是什么? 1.1 单页面应用实现多页签 1.2 使用qiankun进行微前端改造后,多页签缓存有什么不同 二.方案选择 2.1 方案一:多个子应用同时存在 2.2 方案二:同一时间仅加载一个子应用,同时保存其他应用的状态 2.3 最终选择 三.具体实现 3.1 从组件级别的缓存到应用级别的缓存 3.2 移花接木——将vnode重新挂载到一个新实例上 3.3 解决应用级缓存方案的问题 3.3.1 vue-router相关问题 3.3.2 父子组件通信 3.3.3 缓存管理,防止内存

  • Vue qiankun微前端实现详解

    目录 引言 What:微前端是什么 Why:为什么选择微前端 微前端能做到什么 为什么不使用iFrame How:微前端实践 在主应用中注册微应用 在子应用导出相应的生命周期钩子 结尾 引言 前端时间有个契机,让我们团队开始进行微前端的相关实践. 最近正好有些成果了,来一个阶段性的总结,也方便后续进一步的开发. 可能第一次听说微前端的同学都会不明觉厉,那么ta到底是个啥?本章会从以下3个角度阐述我的理解: What:微前端是什么 Why:为什么选择微前端 How:微前端实践 What:微前端是什

  • vite构建项目并支持微前端

    目录 基础配置 支持微前端构建 其他说明 1. 老旧浏览器的支持 2. 关于 TypeScript 的说明 3. 对接 CDN 4. 构建出错 4.1 找不到包 4.2 请求超时 4.3 导入模块出错 小结 得益于 esbuild 的超高性能,vite 在诞生之初就备受关注,且一直保持着活跃的开发迭代.截至目前,vite 已经迭代到了 2.7.10 版本,各方面也基本具备了在生产使用的条件.这段时间,我在项目中尝试了使用 vite 进行打包构建,本文就是这次构建的过程记录. 基础配置 首先使用v

  • 微前端框架qiankun源码剖析之下篇

    目录 引言 四.沙箱隔离 4.1 JS隔离 1. Snapshot沙箱 2. Legacy沙箱 3. Proxy沙箱 4.2 CSS隔离 1. ShadowDOM 2. Scoped CSS 五.通信方式 六.结语 引言 承接上文  微前端框架qiankun源码剖析之上篇 注意: 受篇幅限制,本文中所粘贴的代码都是经过作者删减梳理后的,只为讲述qiankun框架原理而展示,并非完整源码.如果需要阅读相关源码可以自行打开文中链接. 四.沙箱隔离 在基于single-spa开发的微前端应用中,子应用

  • 详解无界微前端是如何渲染子应用的demo解析

    目录 正文 无界渲染子应用的步骤 创建子应用 iframe 解析入口 HTML 处理 CSS 并重新嵌入 HTML 创建 webComponent 并挂载 HTML JS 的执行细节 简单的实现 将 UI 渲染到 shadowRoot 挟持 document 的属性/方法 副作用的处理 DOM 相关的副作用处理 修正相对 URl 修正 shadowRoot head.body iframe 的副作用处理 History API window/document 属性/事件 location 对象

  • 基于Vue实现微前端的示例代码

       前端微服务化一直是前端社区的一个热门话题,早在2018年就有不少开发者提出过各种解决方案.或许是未得精髓,个人认为基于Web Components的实现脱离整体打包逻辑的,难以工程化.直到遇到了vue-cli 3,子模块打包的问题得以迎刃而解.2019年秋,团队内部初步实现前端分布式开发,解决了集中式开发部署的"老大难"问题.个人认为,随着WebAssembly等技术的兴起,"前端后移"越来越明显,前端微服务会成为大前端的一个趋势.下面简单分享下本人对前端微服

  • 基于Vue CSR的微前端实现方案实践

    在这里就不讲微前端的各种优缺点,直接假设你在负责一个中后台管理系统的开发,所有的业务模块全部都在一个项目中打包,随着业务量的不断增长,编译越来越慢,你期望可以从老的项目中将新的业务进行独立开发.独立部署,以微应用的形式嵌入到老项目中. 本篇文章的受众是那些希望在新老的项目中,在不需要你对老项目进行改动老项目的前提下,嵌入微应用,如果本篇文章对你有帮助,请点个:+1:! 核心要素 构建生产环境代码,输出远程组件所需的 JSON 通过 ajax 请求,拿到这个 JSON 的数据,传给 远程组件 新项

  • JS微前端MicroApp基础使用

    目录 1. 介绍 2. 主应用 2.1 路由配置和基础页面 2.2 全局生命周期配置 2.3 主应用插件系统 3. 子应用 3.1 Webpack + Vue 子应用 3.2 Webpack + React 子应用 4. 应用路由配置说明 4.1 主应用路由 4.2 子应用路由 1. 介绍 MicroApp 是“京东零售”团队在2021年7月正式发布的一个微前端框架,并且抛弃了 Single SPA 的实现理念,基于 CustomElement 和 ShadowDom 来实现. MicroAPP

随机推荐