简介从基本使用->部署->框架源码分析->手写框架，带你全方位刨析single-spa框架前序目的会使用single-spa开发项目，然后打包部署上线刨析single-spa的源码原理手

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

简介从single-spa的缺陷讲起->qiankun是如何从框架层面解决single-spa存在的问题->qiankun源码解读，带你全方位刨析qiankun框架。

封面简介从single-spa的缺陷讲起->qiankun是如何从框架层面解决single-spa存在的问题->qiankun源码解读，带你全方位刨析qiankun框架。

我们在single-spa技术分析基本实现了一个微前端框架需要具备的各种功能，但是又实现的不够彻底，遗留了很多问题需要解决。

本篇我们结合目前业内主流的微前端实现single-spa来说明在生产实践中是如何实现微前端的。single-spa的文档略显凌乱，概念也比较多，初次接触它的同学容易抓不住重点。

技术选型：single-spavuetssystemjswebpack5umd完整的代码结构图single-spa落地结构图.png壳子项目改造开启history模式(试想一下，如果不开启，壳子应用跟子应用都是

像微前端框架single-spa没有实现js沙箱，我们在构建大型微前端应用的时候，很容易造成一些变量的冲突，对应用的可靠性面临巨大的风险。

什么是微前端？微前端就是根据不同的功能拆分成多个独立模块（子应用）,通过主应用来加载这些子应用。微前端的核心在于拆，拆完后在合。微前端的使用场景不同团队开发同一个应用，但是用到的技术栈不同的情况下每个团队独立开发部署，不依赖于别的团队代码老的项目代码和新的技术栈在同一应用中融合有人说了这用iframe一样能解决啊，注意，和微前端相比，iframe有多个弊端。比如1.左侧是一个菜单，右侧内容是加载不

构建主应用1、安装single-spa依赖npminstallsingle-spa--save-d并在mian.js中引入importVuefrom'vue'importAp

背景：一些大的项目，需要一个前端中台，承载各项目组开发的应用，本篇文章是在工作实践后所写，网上找了好多例子也少，记录下来后面供自己预览qiankun是一个基于single-spa的微前端实现库umi插件

js沙箱sandboxproxy快照砂箱，单子应用cssshadowDOM前缀约定式隔离CSSmodule子应用加载添加、卸载移除single-SPA解决问题1兼容各种技术栈更优的性能每个独立模块的代码可做到按需加载

为之后使用微前端方案（single-spa、qiankun）做铺垫。SystemJS是基于标准的模块加

目录一、微前端概述1.基本原理2.微前端的主要优势3.当前微前端方案的一些缺点二、qiankun与single-spa实现原理1.single-spa实现原理(1).路由问题(2).应用入口(3).应用加载

前言笔者在2019年末的时候开始了解微前端这个东西、当时看到两个微前端的框架、分别是single-spa和qiankun、在这两种技术去做选择去学习、看到qiankun是基于single-spa二次封装的

前言笔者在2019年末的时候开始了解微前端这个东西、当时看到两个微前端的框架、分别是single-spa和qiankun、在这两种技术去做选择去学习、看到qiankun是基于single-spa二次封装的

qiankun是一个基于single-spa的微前端实现库umi插件，提供了@umijs/plugin-qiankun供umi应用一键切换成微前端架构系统。

作者：Fly_bit转发链接：https://blog.csdn.net/m0_37968340/article/details/106823974一、前端微服务化的背景和价值：背景：业务模块呈现快速增长趋势，孵化的业务模块也逐渐增多。价值：让产品的前端架构能快速、插件化的支持业务的增加二、设计目标解耦产品前端各业务模块，支持独立开发、发布和部署；设计出提供支持插件化调整业务模块、可多团队共同维护

引子对微前端方向有了解的同学可能都看过qiankun的文档，深入的同学估计也去翻过其代码和single-spa的源码。

在我之前的文章提到过，微前端的本质是分治的处理前端应用以及应用间的关系，那么更进一步，落地一个微前端框架，就会涉及到三点核心要素：子应用的加载；应用间运行时隔离；路由劫持；对于qiankun来说，路由劫持是在single-spa

在我之前的文章提到过，微前端的本质是分治的处理前端应用以及应用间的关系，那么更进一步，落地一个微前端框架，就会涉及到三点核心要素：子应用的加载；应用见运行时隔离；路由劫持；对于qiankun来说，路由劫持是在single-spa

在我之前的文章提到过，微前端的本质是分治的处理前端应用以及应用间的关系，那么更进一步，落地一个微前端框架，就会涉及到三点核心要素：子应用的加载；应用间运行时隔离；路由劫持；对于qiankun来说，路由劫持是在single-spa

最近在做一个项目是关于微前端和微服务今天就说说微前端把，微前端使用的是single-spa项目是用vuecli3脚手架搭建，single-spa实现了大部分框架（vue、react、angular）的启动和卸载处理的

通过前三篇文章对微前端有了一些了解，并初步学习了一些single-spa概念；从这篇开始手动搭建一个基于single-spa的微前端项目框架。

single-spa结合vue项目初探本次案例以vue-element-admin为例，验证single-spa的可接入性。

授权转载自：mongofeng源码地址：https://github.com/mongofeng/vue-mic为什么要用微前端目前随着前端的不断发展，企业工程项目体积越来越大，页面越来越多，项目变得十分臃肿，维护起来也十分困难，有时我们仅仅更改项目简单样式，都需要整个项目重新打包上线，给开发人员造成了不小的麻烦，也非常浪费时间。老项目为了融入到新项目也需要不断进行重构，造成的人力成本也非常的高。

Single-SPA框架之前端微服务化解决方案系列介绍（包含DEMO）https://alili.tech/archive/ea599f7c/https://www.jianshu.com/p/1f409df7de45

原文：www.yuque.com/xiezhongfu/…single-spa框架你值得研究，源码也比较简单：www.yuque.com/xiezhongfu/…到底要不要微前端改造：mp.weixin.qq.com

qiankunqiankun蚂蚁金服基于single-spa的微前端解决方案，生产可用。特性基于single-spa封装，提供了更加开箱即用的API。

也许你看过了Single-Spa，qiankun这些业界成熟方案，非常强大：JS沙箱隔离、多栈支持、子应用并行、子应用嵌套，但仔细想想它真的适合你吗？对于我来说，太重了，概念太多，理解困难。

安装single-spa请看沉末的这篇文章。背景简单介绍下背景吧～为什么要用single-spa呢，是因为公司的项目需要拆项目了，这个时候就需要知道微前端的概念了，那么什么是微前端呢。

前期准备一个使用CRA创建的新项目或者旧项目了解publicPath是什么了解single-spa中关于微前端应用的概念（及qiankun中html-entry的概念）解决如何覆盖CRA配置的问题通常情况下

[email protected]年6月，微前端框架qiankun正式发布了1.0版本，在这一年不到的时间内，我们收获了4k+star，收获了来自single-spa官方团队的问候，支撑了阿里

execScripts}from'import-html-entry';import{isFunction}from'lodash';import{checkActivityFunctions}from'single-spa

4、启动3个项目测试下1、微前端qiankun是一个基于single-spa的微前端实现库，旨在帮助

前言本篇手写简易single-spa流程首先初始化项目npminit-ynpminstallrolluprollup-plugin-serve编写rollup.config.jsimportservefrom"rollup-plugin-serve

前言第一篇的single-spa模式存在样式没有隔离，以及需要手动引入js的问题。

那什么是qiankun呢qiankun是一个基于single-spa

关于antdesginofvue微前端qiankun项目集成qiankun介绍qiankun是一个基于single-spa的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。

qiankun是一个基于single-spa的微前端

微前端概念示意图qiankun简单介绍下图是qiankun开发团队对微前端的提出的方案设计，最终产出物就是qiankun基于single-spa封装，提供了更加开箱即用的API技术栈无关，任意技术栈的应用均可使用

2019年6月，数控机床分期锁破解qiankun正式发布了1.0版本，在这一年不到的时间内，我们收获了4k+star，收获了来自single-spa官方团队的问候，支撑了阿里200+线上应用，也成为社区很多团队选用的微前端解决方案

原文地址微前端是我参加工作不久，一个同事大佬在公司尝试推行的，本人有幸参与其中。在微前端的概念出现之前，微服务就已经出现并且大火，而微前端就是借鉴了微服务的架构而产生的，他们很相似，我们可以对比着理解。微服务微前端一个微服务就是由一组接口构成，接口地址一般是URL。当微服务收到一个接口的请求时，会进行路由找到相应的逻辑，输出响应内容。后端微服务会有一个网关，作为单一入口接收所有的客户端接口请求，根

构建应用single-spa应用与普通的单页面是一样的，只不过它没有HTML页面。在一个single-spa中，你的SPA包含许多被注册的应用，而各个应用可以使用不同的框架。

安装single-spa请看沉末的这篇文章。背景简单介绍下背景吧～为什么要用single-spa呢，是因为公司的项目需要拆项目了，这个时候就需要知道微前端的概念了，那么什么是微前端呢。

安装single-spa请看沉末的这篇文章。背景简单介绍下背景吧～为什么要用single-spa呢，是因为公司的项目需要拆项目了，这个时候就需要知道微前端的概念了，那么什么是微前端呢。

前期准备一个使用CRA创建的新项目或者旧项目了解publicPath是什么了解single-spa中关于微前端应用的概念（及qiankun中html-entry的概念）解决如何覆盖CRA配置的问题通常情况下

[email protected]年6月，微前端框架qiankun正式发布了1.0版本，在这一年不到的时间内，我们收获了4k+star，收获了来自single-spa官方团队的问候，支撑了阿里

也许你看过了Single-Spa，qiankun这些业界成熟方案，非常强大：JS沙箱隔离、多栈支持、子应用并行、子应用嵌套，但仔细想想它真的适合你吗？对于我来说，太重了，概念太多，理解困难。

此篇文章只简单梳理思路，不会源码逐行分析，看此文章前请熟悉qiankun和single-spa的使用最好暴露出的API,从index.ts文件可以看出下面暴露的APIexport{loadMicroApp