2、样式隔离问题 single-spa中没有做这部分的工作。如果保证一个大型项目中,主应用和微应用之间,微应用和微应用之间的样式隔离。比如应用样式以自己的应用名称开头 3、JS隔离问题 single-spa中没有做这部分的工作。JS全局对象污染,没有保证微应用A和微应用B的window互相没有影响 4、资源预加载 single-spa中没有...
微前端与Monorepo的架构设计 微前端singlespa,先说说singleSpa的缺点不够灵活不能动态加载css文件css不隔离没有js沙箱的机制(没有全局对象每次切换的应用都是同一个window)但是刚刚接触微前端可以了解一下微前端的基础使用qiankun微前端框架已经很成熟也是基于singleSpa来
缺点:singleSpa 不够灵活,不能动态加载js文件;样式不隔离,没有js沙箱的机制 1、新建项目 // 生成子应用vue create child-vue 生成父应用 vue createparent-vue 2、子应用 子应用main.js文件 微应用路由改造,添加一个特定的前缀 微应用入口改造,挂载点变更和生命周期函数导出 打包工具配置更改 importVuefrom'vue'...
其实single-spa文件实现是不难的,从上面看也就几行代码,主要是理解思路,代码是其次,路由跳转路径尤其得注意。 single-spa的缺点: 1,从上面的运行结果可以看出,主应用加载子应用会出现样式冲突,样式污染。 2,js也会存在同样的污染问题(主:window.a 子:window.a 当子应用挂载到主应用时,会出现问题) 3,主应用必...
directory,就是项目创建在哪个目录下,默认是点,就是当前目录,为了方便管理所有微前端应用,我把这个项目创建在platform目录,这个目录它会自动创建,select type,应用的类型,选择single-spa root config,接下来是包管理器,选择yarn,当然选其他的也可以,是否使用ts,因为是简单的demo,就不用了,是否使用single-spa-layout,...
为什么?你最终创建的结构具有微服务的所有缺点,并没有任何优点:你的应用相互耦合,并且同时更改多个应用程序才能进行更新。 对性能有什么影响? 当按照推荐方式进行配置时,您的代码性能和包的大小将与已被拆分的单个应用程序基本相同。主要区别在于添加single-spa库(如果你选择使用SystemJS)。其他差别主要归结为一个(we...
single-spa 的文档略显凌乱,概念也比较多,初次接触它的同学容易抓不住重点。今天我们尝试整理出一条清晰的脉络,让感兴趣的同学能够快速理解它。 在single-spa 的架构设计中,有两种主要角色,主应用和子应用,如下图。 主应用力求足够简单,只负责子应用的调度,业务逻辑都由子应用来承担。
缺点在于受制于技术,难以兼容不同框架的应用,导致必须重构的方式支持技术上的变更,大多数这种投入对业务没有帮助。 微前端架构很好的借鉴了SPA无刷新的特点,在SPA之上引入新的分层实现应用切换的功能: 微前端落地 - 概念 在进入代码之前有一系列的技术和概念需要先介绍: SingleSPA:SingleSPA是一套微前端框架,上图...
而SPA 正好可以解决上面的问题: •切换路由就是切换页面组件,组件的挂载和卸载非常快•单页应用肯定共享 DOM•前端控制路由,想前就前,想后就后•React 通信有 Redux,Vue 通信有 Vuex,可与 App 组件进行资源共享,交流很爽 这就给我们一个启发:能不能有这么一个巨型 SPA 框架,把现有的 SPA 当成 Page Co...