MicroApp MicroApp是由京东前端团队推出的一款微前端框架,它从组件化的思维,基于类WebComponent进行微前端的渲染,旨在降低上手难度、提升工作效率。MicroApp无关技术栈,也不和业务绑定,可以用于任何前端框架。 并且micro-app与技术栈无关,对前端框架没有限制,任何框架都可以作为基座应用嵌入任何类型的子应用。 特点 使用...
根据市场的反馈准备入手京东的微前端框架micro-app,所以让我调研了一下,目前体验还不错。 微前端 首先介绍一下什么是微前端。 微前端的概念是由ThoughtWorks在2016年提出的,它借鉴了微服务的架构理念,核心在于将一个庞大的前端应用拆分成多个独立灵活的小型应用,每个应用都可以独立开发、独立运行、独立部署,再将这些小...
子应用在public文件夹中新建assets文件夹,在assets文件夹下建一个vite1 文件夹,静态资源放置于此 主应用开发环境使用proxy,线上环境使用nginx转发 子应用使用组件插槽或者pinia,路由懒加载报错问题 小项目几个路由加载页面不使用懒加载, 大项目中懒加载的时候不要使用pinia或者组件中不适用 主应用为了美观重写菜单 Header...
《前端架构:从入门到微前端》是一本围绕前端架构的实施手册,从基础的架构规范,到如何设计前端架构,再到采用微前端架构拆分复杂的前端应用。本书通过系统地介绍前端架构世界的方方面面,来帮助前端工程师更好地进行系统设计。 前端架构包含以下五部分内容。 设计:讲述了架构设计的模式,以及设计和制定前端工作流。 基础:...
京东微前端:京东微前端采用了基于 Web Components 的技术栈,使用自研的微前端框架来进行组织和管理微前端应用。 阿里微前端:阿里微前端采用了基于微前端架构飞冰(Ice)的技术栈,使用自研的插件化中台框架来实现微前端的组织和运行。 技术栈和生态系统: 京东微前端:京东微前端使用了 Web Components 技术,不依赖特定的前...
一、微前端框架选型 (1)现有框架 1.single-spa是一个将多个单页面应用聚合为一个整体应用的 JavaScript 微前端框架。 2.qiankun是一款基于 single-spa 封装的微前端框架。 3.MicroApp京东出品,一款基于 WebComponent 的思想,轻量、高效、功能强大的微前端框架。
微前端中经常出现资源丢失的现象,原因是基座应用将子应用的资源加载到自己的页面渲染,如果子应用的静态资源地址是相对地址,浏览器会以基座应用所在域名地址补全静态资源,从而导致资源丢失。 资源地址补全就是将子应用静态资源的相对地址补全为绝对地址,保证地址指向正确的资源路径,这种操作类似于webpack在运行时设置publicPat...
这样就既能保证我们的协同开发效率,又可以有很好的用户体验。所以近些年,微前端这个概念被越来越多的公司和团队所提及和应用,当然也涌现出了很多的微前端解决方案。而京东MicroApp接入成本特别的低,对子应用的几乎0侵入性,同时能,性能又很高,兼容性也极好。 下面我们来深度解析下,MicroApp最突出的核心方案。
二、京东micro-app和腾讯wujie 基于Web Components 技术实现,wujie为轻量级的微前端框架,micro-app为相对完整的微前端解决方案,提供了更多的功能和生态支持,如状态管理、路由管理等。 使用方法一致,替换库即可 1、主mian.js 1 2 3 4 import{ createApp } from'micro-app'; ...
同时前端技术的发展迅猛,导致功能扩展吃力,重构成本高,稳定性低。 为了能够将前端模块解耦,通过相关技术调研,最终选择了无界微前端框架作为物流客服系统解耦支持。为了更好的使用无界微前端框架,我们对其运行机制进行了相关了解,以下是对无界运行机制的一些认识。 基本用法 主应用配置 import WujieVue from 'wujie-vue2'...