美文网首页
微前端

微前端

作者: monkeyfly36 | 来源:发表于2020-12-31 14:02 被阅读0次

2020.12.30
微前端解决特定问题：技术栈无关
https://micro-frontends.org/
https://martinfowler.com/articles/micro-frontends.html
https://qiankun.umijs.org/zh

image.png

最早的微前端是iframe的spa版
目前用的好的是阿里的qiankun

微前端原理

  1. 加载应用 （html-loader）
    1. 通过html，解析出页面加载的css，js，和容器html

？？？2. css污染

  1. 每个子应用改在，用不同的css前缀
  2. 动态样式表
  3. shadow dom
  4. 。。。css in js
  5. scroped css
  6. js沙箱
    1. Eval(function(){js content})内部执行加载的js 完成了封装
    2. window.xx = 123
      1. proxy window
    3. window 快照
      1. 每次应用加载前，记录一下，应用写在的时候，恢复一下
  7. 路由切换
    1. 拦截一下addEventListener， 拦截一下hashchage，popstate（history）记录

？？
子应用生命周期
通信方案

相关文章

  • 微前端导读

    为什么需要学习微前端？我们通过3w（what，why，how）的方式来讲解微前端 1、什么是微前端？ 微前端就是将...

  • 微前端：了解下概念

    qiankun（乾坤） 微前端实践 可能是你见过最完善的微前端解决方案 实施微前端的六种方式 微前端-美团系列

  • 【前端】架构设计

    一、微前端 微前端架构 应用自治 单一职责 技术栈无关 为什么需要微前端 遗留系统迁移 后端解耦，前端聚合 热闹驱...

  • 微前端技术

    一.微前端概念 前端微服务 二.常用前端架构 MPA(体验不好)SPA（体验号，但是体量大） 三.微前端架构 技术...

  • 前端微应用化

    微应用与微前端 微应用框架是一种类微前端框架； 相比与微前端，微应用实施成本低、技术难度小、维护成本低； 微应用化...

  • 微前端——乾坤qiankun Demo

    微前端——qiankun（乾坤）实例 一、什么是微前端 微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过...

  • 基于Umi探索微前端以及其融合方案

    写在前面 “微前端”这个概念已经在前端圈火了很长一段时间了，关于什么是微前端，微前端干了什么，其和传统iframe...

  • 万字长文+图文并茂+全面解析 qiankun 源码 - qian

    本文将针对微前端框架 qiankun 的源码进行深入解析，在源码讲解之前，我们先来了解一下什么是 微前端。 微前端...

  • 微前端

    背景 近几年前端技术发展迅猛，框架组件层出不穷，导致企业中慢慢沉淀了很多不同技术栈的前端应用。同时随着前端业务复杂...

  • 微前端

    微前端 实现方式 iframe nginx配置（前后端不分离） 微前端优点纯前端解决方案可以使用多种技术栈完善的生...

网友评论

      本文标题：微前端

      本文链接：https://www.haomeiwen.com/subject/hgihoktx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|微前端|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！