微前端-乾坤qiankun

2019-2020年前端最火的技术之一：微前端

微前端究竟是什么？

微前端是近三年前端社区比较火的技术方案，试图把拆分大型后端系统的一些益处引入前端。

微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。

微前端的核心在于拆, 拆完后再合!

微前端，即前端微服务。是将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的小块，而在用户看来仍然是内聚的单个产品。

微前端主要解决的问题：

1）毫无相关的业务，独立部署，降低运维成本。 (独立业务拆离)

2）团队人员逐渐增多，产品功能复杂，代码冲突频繁、影响面大，需独立部署。（独立模块拆离）

3）在业务中，运行比较稳定，运维不频繁的项目部分，需独立部署。（稳定业务拆离）

4）架构比较老但运行比较稳定的项目部分，近期不计划重构的，需独立部署。（独立架构拆离）

微前端特点：独立开发、独立部署、独立运行、增量升级（单个服务升级）。

微前端方案正确的架构姿势：应用之间不应该有任何直接或间接的技术栈、依赖、以及实现上的耦合。

Single-spa微前端方案结合了MPA和SPA的优势，可以在单个页面内集成多个应用。

技术栈无关

独立部署每一个单页面应用

新功能使用新框架，旧的单页应用不用重写可以共存

改善初始加载时间，延迟加载代码

qiankun示例

微前端拆离工具：qiankun

主应用配置：

1.安装乾坤

$ yarn add qiankun # 或者 npm i qiankun –S

2.注册微服务

I.自动注册

// 在主应用中注册子应用

II.手动注册

import { loadMicroApp } from 'qiankun';

name跟container需要名称不一致。

3.子应用访问

I.跨域

devServer: {
headers: {// 重点1: 允许跨域访问子应用页面
‘Access-Control-Allow-Origin’: ‘http://localhost:7100’,//设置多域名，逗号隔开
},

子应用配置：

I.main.js配置

II.路由配置

import '../../public-path' // 重点3：引入public-path文件

router里面添加

主子应用传参：

主应用：

import { initGlobalState } from "qiankun“

const actions = initGlobalState(state);
actions.onGlobalStateChange((state, prev) => {
// state: 变更后的状态; prev 变更前的状态
console.log(state, prev);
});
actions.setGlobalState(state);
actions.offGlobalStateChange();

子应用：

export function mount(props) {

props.onGlobalStateChange((state, prev) => {

// state: 变更后的状态; prev 变更前的状态

console.log(state, prev);

});

props.setGlobalState(state);

}

微前端-乾坤qiankun相关推荐

微前端——乾坤qiankun Demo
微前端--qiankun(乾坤)实例一.什么是微前端微前端就是将不同的功能按照不同的维度拆分成多个子应用.通过主应用来加载这些子应用.微前端的核心在于拆,拆完后在合! 二.为什么使用微前端不同团 ...
深入浅出解析阿里成熟的微前端框架 qiankun 源码【图文并茂】
来源:leaf(a1029563229 ) https://github.com/a1029563229/blogs/blob/master/Source-Code/qiankun/1.md 本文将针 ...
深入浅出解析阿里成熟的微前端框架 qiankun 源码
本文将针对微前端框架 qiankun 的源码进行深入解析,在源码讲解之前,我们先来了解一下什么是微前端. 微前端是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将单页面前端应用由单一的 ...
微前端—乾坤初体验
昨天新建了两个项目,上手体验了一下微前端乾坤,感觉很神奇,但官网教程似乎对新手不大友好,上手完以后感觉很简单,但中间过程实在繁琐,各种报错和百度,今天上班摸鱼,记录一下全部过程,方便日后操作. 1.乾 ...
目标是最完善的微前端解决方案 - qiankun 2.0
距 qiankun 开源已过去了 11 个月,距上次官方发声已过去 8 个月. Announcing qiankun@2.0 2019 年 6 月,微前端框架 qiankun 正式发布了 1. ...
微前端乾坤js react实践
微前端乾坤js实践微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略.解耦团队之间的龚和渡,解耦技术栈的龚和渡,节省团队间沟通成本,解决技术栈之间无法业务打 ...
万字长文+图文并茂+全面解析微前端框架 qiankun 源码 - qiankun 篇
写在开头微前端系列文章: 基于 qiankun 的微前端最佳实践(万字长文) - 从 0 到 1 篇基于 qiankun 的微前端最佳实践(图文并茂) - 应用间通信篇基于 qiankun 的微 ...
微前端框架qiankun项目实战（一）--本地开发篇
❝ 作者:黑化程序员 https://juejin.cn/post/6970310177517993998 ❞ 大家好,我是小黑. 公司使用技术栈是vue,最近遇到了一个需求,要把原有后台管理系统的功 ...
微前端之qiankun
qiankun 前言 bug qiankun实战总结 qiankun中的沙箱机制前言 qiankun 框架是基于single-spa框架的,所以遵循的协议都一样,也是向外暴露三个钩子函数,但是qi ...

微前端-乾坤qiankun

微前端-乾坤qiankun相关推荐

最新文章

热门文章