作者:vivo 互联网前端团队- Tang Xiao 本文梳理了基于阿里开源微前端框架qiankun,实现多页签及子应用缓存的方案,同时还类比了多个不同方案之间的区别及优劣势,为使用微前端进行多页签开发的同学,提供一些参考. 一.多页签是什么? 我们常见的浏览器多页签.编辑器多页签,从产品角度来说,就是为了能够实现用户访问可记录,快速定位工作区等作用:那对于单页应用,可以通过实现多页签,对用户的访问记录进行缓存,从而提供更好的用户体验. 前端可以通过多种方式实现多页签,常见的方案有两种: 通过C…

️本文为博客园社区首发文章,未获授权禁止转载 大家好,我是aehyok,一个住在深圳城市的佛系码农‍♀️,如果你喜欢我的文章,可以通过点赞帮我聚集灵力️. 个人github仓库地址: https:github.com/aehyok 本文讲解微前端qiankun demo仓库地址 : https:github.com/aehyok/vue-qiankun 目前基于dev分支进行开发和测试 本demo已部署腾讯云 http://139.186.205.7:8080/(服务器配置较低,如有访问比较慢,…

序 这才2月中旬,广州就已经渐渐地进入了夏季,--夏天总是让人焦虑的.过年闲暇时间写下了微前端这系列的终章,欢迎拍砖.如果你习惯直接上手代码,不妨跳到实践一节,直接上代码教程玩一玩. qiankun原理和API介绍 qiankun是基于singlespa框架的一个上层应用,它提供了完整的生命周期,和一些钩子函数,通过路由匹配来动态加载注册微应用,同时提供了一系列api对微应用做管理和预加载等,它相对singlespa来说进步是比较大的. 所以---qiankun实质上是singlespa的一个封…

我们在single-spa 技术分析 基本实现了一个微前端框架需要具备的各种功能,但是又实现的不够彻底,遗留了很多问题需要解决.虽然官方提供了很多样例和最佳实践,但是总显得过于单薄,总给人一种"问题解决了,但是又没有完全解决"的感觉. qiankun 在 single-spa 的基础上做了二次开发,完善了很多功能,算是一个比较完备的微前端框架了.今天我们来聊一聊 qiankun 的技术原理. 在本系列的开头,我们提到微前端的核心问题其实就是解决如何加载子应用以及如果做好子应用间的隔离问…

封面 简介 从 single-spa 的缺陷讲起 -> qiankun 是如何从框架层面解决 single-spa 存在的问题 -> qiankun 源码解读,带你全方位刨析 qiankun 框架. 介绍 qiankun 是基于 single-spa 做了二次封装的微前端框架,通过解决了 single-spa 的一些弊端和不足,来帮助大家实现更简单.无痛的构建一个生产可用的微前端架构系统. 微前端框架 之 single-spa 从入门到精通 通过从 基本使用 -> 部署 -> 框架…

初步认识微前端 微前端是什么 现在的前端应用,功能.交互日益复杂,若只由一个团队负责,随着时间的推进,会越来越庞大,愈发难以维护. 微前端这个名词,第一次提出是在2016年底.它将微服务(将单一应用程序划分成一组小的服务,服务之间相同配合,为用户提供最终价值)这个应用于服务端的技术扩展到前端领域. 微前端背后的想法是:将网站或 web 应用程序视为由独立团队负责的子应用(或模块.功能)的组合. 微前端核心是:拆.和. 拆,即将一个应用拆成多个子应用.每个子应用由单独的团队负责,独立开发.发布 和…

10月份换了新的工作,参与完一个月的需求迭代后,接到了项目重构的任务.简单来说,需要在短时间内提出方案设想,同时进行本地验证,最终需要拿出一套技术替换方案来.于是,埋头苦干了一个月,总算干了点成绩出来,今天把当时的思考和实践做个简单总结,就当是个复盘吧. 一.老项目现状 最初接触到的老项目,使用到的前端技术栈主要是(jQuery1.8 + layui-v2.5.4 + ExtJS4.2.1.883),当时拿到这个项目的时候,上手书写起来竟然有点手生,毕竟这几年长时间使用的都是vue和react,…

前言 最近需要重构一个老项目,定的方案用微前端去改造.主应用是老的项目,微应用是新的项目,由于重构时间比较紧张,子应用还需要使用父应用的一些组件.过程中遇到一些问题,记录一下. 方案 我们知道qiankun,可以通过props通信传递数据,把组件通过props传递过去不就行了.来开始改造我们的代码 主应用 导入组件,通过props共享出去 import { registerMicroApps, start, setDefaultMountApp } from 'qiankun'; // 导入一些…

微前端大赏二-singlespa实践 微前端大赏二-singlespa实践 序 介绍singleSpa singleSpa核心逻辑 搭建环境 vue main react child 生命周期 结论 参考文章 序 介绍singleSpa singleSpa是一个javascript库它可以让很多小页面.小的组件.不通架构的前端组件在一个页面应用程序中共存. 这里有一个演示: (https://single-spa.surge.sh/) 这个库可以让你的应用可以使用多个不同的技术栈(vue.rea…

微前端 & 微前端实践 & 微前端教程 微前端 micro frontends https://micro-frontends.org/ https://github.com/neuland/micro-frontends 2016, ThoughtWorks technology radar https://martinfowler.com/articles/micro-frontends.html 每个微型前端都独立部署到生产中 每个应用程序应由一个团队拥有 每个服务器都可以独立构建和…