网站如何在google提交收录,湛江网站seo推广,优化方案官网,太原网站的公司一. 微前端的背景和动机
单页应用 单页应用往往是一个庞大的前端项目#xff0c;由一个团队或多个团队共同开发#xff0c;使用同一套技术栈#xff0c;打包成一个整体#xff0c;部署在一个域名下 随着 Web 应用的功能越来越丰富和复杂#xff0c;单页应用不得不面临以下…一. 微前端的背景和动机
单页应用 单页应用往往是一个庞大的前端项目由一个团队或多个团队共同开发使用同一套技术栈打包成一个整体部署在一个域名下 随着 Web 应用的功能越来越丰富和复杂单页应用不得不面临以下问题
技术栈的选择和升级受限难以适应不同的业务需求和技术发展。项目的可维护性和可测试性降低代码的耦合度高模块的划分不清晰变更的风险大。项目的构建和发布效率低下打包的体积大加载的时间长部署的频率低。
开发和维护成本也越来越高为了解决这些问题微前端的概念应运而生。
微前端 将一个大型的前端应用拆分成多个小型的前端应用每个前端应用可以由不同的团队开发使用不同的技术栈独立部署最后在一个统一的入口进行聚合展示。这样每个前端应用可以专注于自己的业务领域实现高内聚低耦合提高开发效率和质量。 优点
技术栈无关让不同的团队可以使用自己熟悉的技术开发和部署子应用维护成本低独立开发、独立部署提高开发效率和灵活性应用之间的高效解耦避免业务模块间的耦合导致的复杂性和风险平滑迁移和升级框架和系统提升用户体验和满意度。
缺点
额外的开发、学习成本需要设计和实现一套微前端的框架和协议通信和协作问题需要定义和遵守应用之间的一套通信规范和接口隔离和安全问题需要考虑应用之间样式隔离、沙箱隔离、权限控制等方面一致性和可用性问题需要保证应用的风格统一、版本一致、错误处理等方面
二. 微前端的实现方案和框架
实现微前端的方案有多种主要可以分为以下几类
路由分发式通过路由将不同的业务分发到不同的独立前端应用上通常通过 HTTP 服务的反向代理或者浏览器端的路由拦截来实现。这种方案的优点是简单易实现缺点是应用间的切换会有页面刷新用户体验不佳。iframe 嵌套式通过 iframe 将不同的前端应用嵌套在一个主应用中实现应用间的隔离和集成。这种方案的优点是兼容性好隔离性强缺点是 iframe 有很多限制如布局跨域通信性能等问题。Web Components 组件式通过 Web Components 标准将不同的前端应用封装成自定义元素然后在主应用中使用这些元素实现应用间的组合和复用。这种方案的优点是符合 Web 标准组件化程度高缺点是兼容性差需要 polyfill 支持而且有一定的学习成本。组合式应用路由分发式通过在主应用中动态加载和渲染不同的前端应用实现应用间的无缝切换和集成。这种方案的优点是用户体验好技术栈无关缺点是实现难度高需要解决应用间的路由隔离通信等问题。
目前市面上已经有一些成熟的微前端框架如 single-spaqiankunicestark 等它们都是基于组合式应用路由分发微前端的方案提供了一些通用的能力和接口帮助开发者快速搭建微前端系统。
三. 微前端的常见问题
路由系统如何实现子应用的切换和卸载以及主框架和子应用之间的路由协调。一种解决方案是使用 single-spa 库它提供了一套基于 url 的路由机制可以动态加载和卸载子应用同时支持多种技术栈的集成¹²。资源加载如何实现子应用的动态加载和隔离以及主框架和子应用之间的资源共享。一种解决方案是使用 HTML Entry 的方式即将子应用打包成一个 HTML 文件作为入口主框架通过 fetch html 的方式获取子应用的静态资源并将 HTML document 插入到主框架的容器中。状态管理如何实现子应用之间的通信和数据共享以及主框架和子应用之间的状态同步。一种解决方案是使用自定义事件或全局变量的方式实现跨应用的事件监听和数据传递同时避免状态的滥用和污染。样式隔离如何实现子应用的样式不影响主框架和其他子应用以及主框架和子应用之间的样式统一。一种解决方案是使用 Shadow DOM 或 CSS Modules 的方式实现样式的作用域隔离同时遵循一套统一的 UI 设计规范和主题变量。
-----------------------------------------进阶部分 以下主要以qiankun为例--------------------------------
微前端的路由分发机制
根据浏览器的 URL 变化来切换不同的微应用以及在微应用之间同步路由状态。一般来说微前端的路由分发机制可以分为两种模式hash 模式和 history 模式。
hash 模式是指使用 URL 的 hash#部分来标识不同的微应用例如 http://example.com/#/app1/foo 表示 app1 应用的 foo 路由http://example.com/#/app2/bar 表示 app2 应用的 bar 路由。这种模式的优点是实现简单兼容性好缺点是不利于 SEO而且 hash 的长度有限制。
history 模式是指使用 URL 的 pathname/部分来标识不同的微应用例如 http://example.com/app1/foo 表示 app1 应用的 foo 路由http://example.com/app2/bar 表示 app2 应用的 bar 路由。这种模式的优点是 URL 更美观更利于 SEO缺点是需要服务端的支持而且实现复杂度高。
无论是哪种模式微前端的路由分发机制都需要解决以下几个问题
如何在主应用中识别和匹配微应用的路由如何在主应用中激活和切换微应用如何在微应用中获取和更新路由状态如何在主应用和微应用之间保持路由一致性
对于第一个问题一种常见的做法是在注册微应用时指定一个匹配规则例如正则表达式函数或者字符串来判断当前的 URL 是否属于某个微应用。例如qiankun 提供了一个 activeRule 参数可以是一个正则表达式如 /app1/也可以是一个函数如 location location.pathname.startsWith(/app1)来确定是否激活 app1 应用。
对于第二个问题如何在主应用中激活和切换微应用一种常见的做法是使用 single-spa 的 start 和 navigateToUrl 方法来启动微前端系统以及在不同的微应用之间跳转。例如qiankun 在主应用中调用 start() 方法来初始化微前端系统然后在主应用的导航栏中使用 navigateToUrl 方法来实现微应用的切换如 navigateToUrl(/app1/foo)。
对于第三个问题如何在微应用中获取和更新路由状态一种常见的做法是使用浏览器的 history API来监听和修改 URL 的变化以及使用 location 对象来获取当前的 URL 信息。例如qiankun 在微应用中调用 history.pushState 和 history.replaceState 方法来更新 URL 的 pathname 部分以及使用 location.pathname 属性来获取当前的 pathname 值。
对于第四个问题如何在主应用和微应用之间保持路由一致性一种常见的做法是使用 popstate 事件来监听 URL 的变化以及使用 window 对象来获取当前的 URL 信息。例如qiankun 在主应用和微应用中都注册了 popstate 事件的监听器来响应 URL 的变化以及使用 window.location 对象来获取当前的 URL 信息。
微前端的应用隔离策略
微前端的应用隔离策略是指如何保证不同的微应用之间不会相互干扰造成全局变量样式事件等的冲突。一般来说微前端的应用隔离策略可以分为以下几种
JS 沙箱通过代理或重写全局对象如 windowdocumentlocalStorage 等来实现微应用的 JS 隔离。例如qiankun 使用了 Proxy 对象来拦截对全局对象的访问和修改以及使用了 snapshot 方法来保存和恢复全局对象的状态。CSS 隔离通过添加命名空间作用域或者 Shadow DOM来实现微应用的 CSS 隔离。例如qiankun 使用了 prefix 参数来给微应用的样式添加一个前缀以及使用了 shadow 参数来给微应用创建一个 Shadow DOM。DOM 隔离通过添加容器元素或者 Shadow DOM来实现微应用的 DOM 隔离。例如qiankun 使用了 container 参数来给微应用指定一个容器元素以及使用了 shadow 参数来给微应用创建一个 Shadow DOM。
微前端的消息通信方式
微前端的消息通信方式是指如何在主应用和微应用之间以及在不同的微应用之间进行数据的传递和同步。一般来说微前端的消息通信方式可以分为以下几种
props 传递通过在主应用中给微应用传递一些属性来实现数据的传递。例如qiankun 提供了一个 props 参数可以是一个对象如 { name: app1 }也可以是一个函数如 () ({ name: app1 })来给微应用传递一些属性。事件广播通过在主应用和微应用中使用自定义事件来实现数据的广播和订阅。例如qiankun 提供了一个 emit 方法来在主应用中触发一个自定义事件如 emit(foo, bar)以及一个 on 方法来在微应用中监听一个自定义事件如 on(foo, data console.log(data))。全局状态通过在主应用中维护一个全局状态对象来实现数据的共享和同步。例如qiankun 提供了一个 initGlobalState 方法来在主应用中初始化一个全局状态对象如 const { onGlobalStateChange, setGlobalState } initGlobalState({ count: 0 })以及一个 getMicroAppStateActions 方法来在微应用中获取一个全局状态对象的操作方法如 const { onGlobalStateChange, setGlobalState } getMicroAppStateActions()。
微前端适用场景
微前端的适用场景有以下几个
大型复杂的 Web 应用如电商门户企业级等需要支持多个业务领域多个团队多个技术栈多个版本等。需要进行应用的重构或者迁移如从老旧的技术栈迁移到新的技术栈或者从单体应用拆分成微服务等。需要提高应用的开发效率和质量如实现敏捷开发持续集成持续交付等。
结语
微前端是一种前沿的 Web 应用架构模式它可以帮助开发者将一个庞大的前端应用拆分成多个小型的前端应用实现技术栈的自由选择业务模块的独立开发应用部署的快速迭代以及应用架构的增量演进。微前端也有一些挑战和限制需要开发者根据自己的实际情况选择合适的方案和框架以及解决应用间的路由隔离通信等问题。
