从概念上，“微前端”本身就并不明确，虽然【本文受版权保护】【版权所有】唐霜 www.tangshuang.net从“微服务”出发想要分而治之，然在实际操【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net作中，目的却是“聚合”。作为国内较早一批【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。探讨相关技术的人，我一开始是比较认同qi本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】ankun作者kuitos的观点，即“微本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。前端本质上是要兼容不同技术栈，以解决技术【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。债务”。从一开始的出发点，我们就是想找到【原创不易，请尊重版权】原创内容，盗版必究。一条可以让已有的vue、react和其他【转载请注明来源】转载请注明出处：www.tangshuang.net更古早的应用在相同页面中同时运行，以复用【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。曾经写好的站点，而不用担心技术更新迭代所【版权所有，侵权必究】【未经授权禁止转载】带来的推翻重构问题。但是，随着时间的发展【未经授权禁止转载】【版权所有，侵权必究】，我们逐渐意识到，整个前端圈子里很多人并著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】不抱着这种初衷，他们甚至在项目之初就尝试【未经授权禁止转载】【版权所有，侵权必究】采用微前端作为整个项目的架构。这使得事情原创内容，盗版必究。【本文受版权保护】的发展变得有趣，我们猛然发现，把微前端作本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。为一种架构来观察前端项目，会获得更多收益著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】。因此，“兼容技术栈”不再是唯一的想法，【未经授权禁止转载】【本文受版权保护】能够让项目代码具备不同部分之间相互独立、【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】互不影响的组织结构，才是我们的目的。因此【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。，即使在相同技术栈，比如单一的react本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。应用中，我们也在考虑采用微前端架构。于是【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】乎，在前端圈子里，逐渐形成了两条关于微前本文版权归作者所有，未经授权不得转载。【本文受版权保护】端的路线，而今天，我们主要讨论的是其中一转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net条路线，即以乾坤为代表的微前端框架路线。
【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。微前端框架评述【作者：唐霜】
原创内容，盗版必究。未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。早期single-spa框架出现时，其作【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。者并没有考虑很多问题，他只提供了子应用的【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。挂载、卸载等生命周期，至于怎么处理都是开本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】发者自己发挥。但是，很快我们发现，不同子著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。应用之间存在一些冲突问题，例如css样式著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。相互覆盖，导致界面混乱，再例如不同应用之本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】间的js变量冲突，或调用混乱。因此，在s【版权所有】唐霜 www.tangshuang.net【作者：唐霜】ingle-spa基础上，大家开始考虑一转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】些隔离方案，出现了css沙箱、js沙箱等【本文首发于唐霜的博客】原创内容，盗版必究。设计。目前，市面上出现了qiankun、原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】microapp、wujie等框架，它们【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】分别来自阿里、京东和腾讯，代表了国内顶级【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】大厂的探索。
著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】【原创内容，转载请注明出处】但是，且不论沙箱隔离本身所带来的性能问题【本文受版权保护】【转载请注明来源】，这些微前端框架再怎么折腾，始终会在最终【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】效果上差强人意，开发者们必须经过反复的尝本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】试和修改之后，才可能得到自己想要的效果，【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】甚至很多情况下经过研究之后，几乎不可能得著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】到自己想要的效果。究其根源，就是“兼容不【原创不易，请尊重版权】【版权所有，侵权必究】同技术栈”思想作祟的结果。在这种思想影响本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】下，框架试图通过技术手段屏蔽应用间的相互【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。影响，但是由于不同技术栈不同应用实现过程【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net中的一些特殊性质，这些框架，再怎么绞尽脑【转载请注明来源】【本文首发于唐霜的博客】汁，也无法完全覆盖全部情况，因此，各种问【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】题层出不穷，有的开发者接入很顺利，但是有著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。的开发者却异常痛苦。
未经授权，禁止复制转载。【版权所有，侵权必究】未经授权，禁止复制转载。原创内容，盗版必究。我们再来看这种“兼容”思想的本质，是“主本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】体”思想，即应用作为主体，完全不需要考虑未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。被引入的环境。当然，从初衷出发，微前端框本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。架们原本应该用在技术迭代时可以兼容老一代【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】技术实现的应用，以避免推到重来。而在实际转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。中，为了适应微前端框架，后续的开发也得顺【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。从这种开发思路。这就导致，很多问题出现在【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。主体应用一端。由于失去了对内部的绝对控制【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net，主体应用就不可能完全做到接入的顺利，毕【转载请注明来源】本文作者：唐霜，转载请注明出处。竟早期项目想不到自己还会被作为子应用引入未经授权，禁止复制转载。【本文首发于唐霜的博客】的这一天。而正是由于失去这种主体对客体的【本文受版权保护】原创内容，盗版必究。绝对控制，即使新建立的子应用，也很有可能著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。遇到各种不痛快。
【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net相反，如果是前文提到的另外一条路线，即相未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。同技术栈的“微前端架构”模式，则主体应用未经授权，禁止复制转载。【本文受版权保护】对内部的控制就具有绝对主导，因此问题就少【作者：唐霜】【原创内容，转载请注明出处】很多。这侧面说明微前端框架的路线可能存在原创内容，盗版必究。【转载请注明来源】一些偏差。
【本文受版权保护】【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】包括webpack等知名项目，也在其体系【原创内容，转载请注明出处】【本文首发于唐霜的博客】中引入了微前端框架的路线，它们试图在构建转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。环境来载入第三方应用，而非在运行时。无论本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】是编译时，还是运行时，本质上它们都是希望未经授权，禁止复制转载。【原创不易，请尊重版权】在主体应用中，可以便捷的载入已经写好的其转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】他应用。甚至像wujie还提供独立的vu【作者：唐霜】【作者：唐霜】e组件，使用该组件时，就像iframe一本文版权归作者所有，未经授权不得转载。【作者：唐霜】样，只要传入子应用的地址即可，非常便捷。【作者：唐霜】【转载请注明来源】在我看来，此类技术和我们初识的“微前端”【本文首发于唐霜的博客】原创内容，盗版必究。已经逐渐分道扬镳，我倒更愿意称这类技术为著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。前端“嵌入技术”。我们很早就拥有ifra【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.netme这样的嵌入技术，但是由于iframe【未经授权禁止转载】【原创不易，请尊重版权】在体验上存在的不足，我们探索出了一条新路转载请注明出处：www.tangshuang.net【本文受版权保护】径，不过不巧的是，我们用“微前端框架”这未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】个不合时宜的名字将其命名。
【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net原创内容，盗版必究。【原创不易，请尊重版权】UI“嵌入技术”转载请注明出处：www.tangshuang.net
【原创不易，请尊重版权】【本文受版权保护】本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】Web发展至今，几乎已经解决了大部分问题【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。，但是唯独有一项事项至今未解决。从201【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。5年开始，前端技术在ES6标准的推动下，本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。在HTML5的演进下，得到迅猛发展，其中【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】我认为对开发模式有较大影响的，是“ESM转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。odule”和“Web Componen本文作者：唐霜，转载请注明出处。【本文受版权保护】ts”这两套标准，其中，ESModule本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net把之前的多种模块化方案进行了统一，并得到【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】了称赞，目前已经成为标准模块化方案在全部著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】工具链中被支持。而Web Compone转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】nts的命运就没有那么好，因为它的出现时【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net机晚于react。在react出现之前，转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。我们也有“组件”的概念，比如我在2016【本文受版权保护】转载请注明出处：www.tangshuang.net年时，用backbone, angula本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】rjs等进行开发，都有形式上的组件概念，【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。但是真正使得“UI组件”成为一种事实标准【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。的，还得是react。react本身就是【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】以构建UI为目标，它抛弃了HTML和JS未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net分开的开发模式，不再用JS去操作DOM，本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。而是建立了UI=f(state)的新模式著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net，JS即UI，从而避免了Web Comp【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。onents遇到的问题，让UI组件可以直【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】接import到父组件中被使用，这样就形【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】成了一套可以被嵌套的组件体系来获得UI。
原创内容，盗版必究。【原创不易，请尊重版权】【未经授权禁止转载】【未经授权禁止转载】【原创不易，请尊重版权】Web Components标准遇到的问【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。题，就是无法直接import组件。直至今未经授权，禁止复制转载。【本文首发于唐霜的博客】天，Web Components都没有嵌【本文受版权保护】转载请注明出处：www.tangshuang.net套的概念。在该标准早期提出时，其实是有i原创内容，盗版必究。原创内容，盗版必究。mport html template的未经授权，禁止复制转载。【本文首发于唐霜的博客】提案的，但是该提案遇到一些问题，目前已经【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net在事实层面被抛弃了。因此，直至今天，We未经授权，禁止复制转载。【作者：唐霜】b Components都没有成为主流的【作者：唐霜】原创内容，盗版必究。组件构建技术。试想一下，如果使用Web 本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netComponents的标准体系，能做到类【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net似react那样的UI构建体系，选择We【转载请注明来源】转载请注明出处：www.tangshuang.netb Components的人怎么至于如今转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。这么少呢？
【转载请注明来源】【本文受版权保护】【原创内容，转载请注明出处】原创内容，盗版必究。而正是这种import能力的缺失，才有了本文作者：唐霜，转载请注明出处。【本文受版权保护】我们今天的话题。
【原创不易，请尊重版权】【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】当我门需要在一个页面中，嵌入（复用）已有【作者：唐霜】【未经授权禁止转载】的UI，除了iframe，没有现成的we【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】b原生技术。我们早期采用过.shtml技著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】术，通过服务端SSI来实现复用。在ang【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.netular时代，通过ng-include和著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。指令来实现。知道react诞生之后，我们本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net才真正拥有了复用UI的最佳方式。在后re本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】act时代，如vue、svelte、an【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】gular2等框架本质上都是在这一方面吃著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】react的红利。虽然react、vue原创内容，盗版必究。转载请注明出处：www.tangshuang.net等非常优秀，但是它们始终遇到一个问题，就原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。是技术栈的不兼容性。这种不兼容看似无关紧未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。要，但对于真正有远见的团队而言，往往希望未经授权，禁止复制转载。【版权所有，侵权必究】“不把鸡蛋放在一个篮子里”，比如我们之前转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。全力投入在angularjs上，随后re本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】act崛起了，angularjs停止维护【未经授权禁止转载】【转载请注明来源】，生态逐渐凋敝，我们不得不用react对【作者：唐霜】未经授权，禁止复制转载。项目重构。但是，很明显，在react上倾【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】注全部，在将来还会重蹈覆辙。就像我现在的【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。团队，全盘依托vue，但随着业务的发展，【本文首发于唐霜的博客】【版权所有，侵权必究】需要上小程序时，很有可能需要全部重新做一本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。遍。这种技术栈的不兼容，对技术团队而言，【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net不是好事。
【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。那么，“嵌入技术”就自然而然的成为我们视【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。野中的一个备选项。在angularjs中【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net嵌入react组件，在react中嵌入v【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】ue组件，在vue中嵌入其他什么技术实现【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net的组件，甚至来一个大杂烩，什么技术都能有【版权所有，侵权必究】转载请注明出处：www.tangshuang.net。从某种意义上讲，嵌入UI的需求是无处不著作权归作者所有，禁止商业用途转载。【作者：唐霜】在的。我早在2015年时，就经历过客户甲【转载请注明来源】【版权所有】唐霜 www.tangshuang.net方，要购买我们的组件（含数据）的需求，不本文版权归作者所有，未经授权不得转载。【转载请注明来源】要小看，这样的一个个组件的收入，所带来的【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。利润是非常可观的。但是，当时我们遇到了非未经授权，禁止复制转载。【作者：唐霜】常多嵌入问题，甲方网站和我们提供的组件无【作者：唐霜】【本文首发于唐霜的博客】法完全兼容，导致我们损失了很多订单，由于本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net当时的技术限制，虽然我们也写了一大堆如今著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。看起来像屎一样的代码来解决，但如果放在2【本文首发于唐霜的博客】【本文首发于唐霜的博客】024年的今天，或许我们的这些订单就可以转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】轻松拿到。即使在我现在所参与的项目中，也转载请注明出处：www.tangshuang.net原创内容，盗版必究。有很多类似的嵌入UI的需求，例如在不同的【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。频道嵌入一个相同的活动，甚至在不同的域名著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net嵌入相同的某个业务组件。这些需求，如果我著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】们有较好的嵌入技术，或者Web标准提供了【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。import UI的能力，那么就可以轻松【未经授权禁止转载】【作者：唐霜】解决，可惜在今天这个当下，这些需求仍然令【原创不易，请尊重版权】原创内容，盗版必究。人棘手，即使我们已经有微前端框架。除了微【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。前端框架这种路线外，还有其他的一些路线，【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】例如用编译工具把vue组件编译为reac未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】t组件，例如taro等跨端开发框架及其工本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】具，再例如Astro等新生代上层框架，它【本文受版权保护】【关注微信公众号：wwwtangshuangnet】们提出了一个新概念：孤岛架构（也叫群岛架【作者：唐霜】【作者：唐霜】构）。
【作者：唐霜】本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】【本文首发于唐霜的博客】Islands孤岛架构转载请注明出处：www.tangshuang.net
【原创不易，请尊重版权】【本文首发于唐霜的博客】【本文首发于唐霜的博客】【本文首发于唐霜的博客】首先让我们看看【本文首发于唐霜的博客】Islnads Architecture这篇文章来了解孤岛架构是如何被提出的，再【本文受版权保护】【原创内容，转载请注明出处】来聊聊它的核心思想。孤岛架构是为了解决传本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。统SSR/SSG的水合（hydratio【版权所有，侵权必究】未经授权，禁止复制转载。n）问题，传统hydration需要将整【本文首发于唐霜的博客】未经授权，禁止复制转载。个应用的js下载完之后才还是执行，这就导【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。致TTI指标变高，而Islands的想法【版权所有，侵权必究】【原创内容，转载请注明出处】是，把这种“一饼”的做法拆开来，hydr转载请注明出处：www.tangshuang.net【本文受版权保护】ation不是一饼的，而是按需的，假如你未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net的某个组件需要hydration，你需要【原创不易，请尊重版权】【原创不易，请尊重版权】标注出来，框架帮你针对该组件单独做hyd转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】ration，这样，页面中的多个需要hy【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。dration的组件可以并行执行，性能就未经授权，禁止复制转载。【本文首发于唐霜的博客】提升了很多。由于在整个页面中，这些需要h未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.netydration的组件零零散散的分布在不原创内容，盗版必究。转载请注明出处：www.tangshuang.net同地方，就像海中分散的岛屿，因此取了个名【原创内容，转载请注明出处】【本文受版权保护】字“孤岛架构”。
【未经授权禁止转载】【转载请注明来源】本文版权归作者所有，未经授权不得转载。孤岛架构提供了一个新思路，就是“按需”。【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。然而本质上，孤独架构的另一面，却是在讲述【作者：唐霜】【原创内容，转载请注明出处】如何让项目部件之间不再相互影响和纠缠。当【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】Astro把原来的hydration模式【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。，变成拆分并行模式，就注定了不同模块之间【作者：唐霜】【本文首发于唐霜的博客】，可以完全脱离，并在理论上可以做到互不干未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net扰。这几乎和微前端架构是完全相同的思想，原创内容，盗版必究。原创内容，盗版必究。只是孤岛架构更倾向于描绘服务端渲染的某种【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。策略优势。
【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。现在，基于服务端渲染的，还有一种更激进的未经授权，禁止复制转载。【未经授权禁止转载】模式，我们传统意义上的SSR总是需要hy【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】dration这个步骤，而没有一种可能，【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】不需要hydration呢？我门或许可以【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。将组件的html生成一个一个的chunk转载请注明出处：www.tangshuang.net【作者：唐霜】，交由浏览器端来组织和渲染，也就是说，服【作者：唐霜】【原创内容，转载请注明出处】务端完成html的渲染，并将html c【未经授权禁止转载】【本文受版权保护】hunk发送给浏览器，浏览器不需要hyd【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。ration，直接通过patch htm【本文受版权保护】本文作者：唐霜，转载请注明出处。l的模式来实现UI的更新。
【版权所有，侵权必究】未经授权，禁止复制转载。【未经授权禁止转载】未经授权，禁止复制转载。之所以我门这里要讨论孤岛架构，是因为我们【转载请注明来源】【关注微信公众号：wwwtangshuangnet】发现，在某些方面，它和UI嵌入有异曲同工【原创不易，请尊重版权】【转载请注明来源】之妙。
著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net【版权所有，侵权必究】UI嵌入框架著作权归作者所有，禁止商业用途转载。
转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【转载请注明来源】现在，我们需要在应用及其组成部分之间，重【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。新确立主次关系，以建立更精准的开发模式。【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net正如前文所述，微前端式的自底向上开发模式【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net问题多多，不够精准，只有自顶向下才可以有【本文受版权保护】本文作者：唐霜，转载请注明出处。绝对控制权。实际上，目前前端业界，除了微本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】前端框架技术以外，全部开发模式都是自顶向【本文首发于唐霜的博客】【原创不易，请尊重版权】下的，无论是vue还是react的应用，【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】都是从整体应用向具体组件不断的具体化实现著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】。然而，孤岛架构的理念又驱使我们，尽可能原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。的让应用的部分可以像海洋中的孤岛一样，具原创内容，盗版必究。【未经授权禁止转载】有自恰的闭环系统，从而可以屏蔽不同模块之【未经授权禁止转载】【作者：唐霜】间的干扰，甚至屏蔽不同开发团队之间的知识【关注微信公众号：wwwtangshuangnet】【本文受版权保护】盲区。
转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【转载请注明来源】因此，我们可以考虑一种拥有类似微前端框架【版权所有，侵权必究】【原创内容，转载请注明出处】功能的组件化开发体系。组件化开发体系，确著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】保组件嵌组件的树状依赖关系，实现自顶向下【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】的控制；微前端式的分而治之，确保不同模块转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net间的独立性。
【版权所有】唐霜 www.tangshuang.net【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】我们举一个例子，vue2在2023年的最【转载请注明来源】本文版权归作者所有，未经授权不得转载。后一天宣告停止维护，这也就意味着我们必须转载请注明出处：www.tangshuang.net原创内容，盗版必究。向vue3迁移。虽然vue2和vue3在【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】内核上一脉相承，但是不可否认的是，vue【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。2的非常多组件，无法直接在vue3中顺利著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】运行。不升级vue3意味着我们的应用将会【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】在具有安全风险的版本上继续迭代。但如果同本文作者：唐霜，转载请注明出处。【转载请注明来源】时在一个应用中使用vue2和vue3，又未经授权，禁止复制转载。【原创不易，请尊重版权】会存在全局变量冲突。最好的办法，就是让v未经授权，禁止复制转载。【本文受版权保护】ue2的原来组件可以被嵌入到vue3中继【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。续工作，两者同时运行。同样的道理，从an转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。gular切换到react，或者reac【作者：唐霜】【版权所有，侵权必究】t切换到vue，都可以采用这种思路。
未经授权，禁止复制转载。原创内容，盗版必究。转载请注明出处：www.tangshuang.net【版权所有，侵权必究】我在过去半年里，对这个问题思考了很多。依【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】靠微前端框架确实可以实现这一目标，但是市【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net面上的微前端框架体积大、性能差，而且随着【转载请注明来源】【未经授权禁止转载】技术迭代，微前端框架本身也面临着技术过时【作者：唐霜】【版权所有】唐霜 www.tangshuang.net的问题。因此，要从原生技术出发，去思考还转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net有没有其他的可能性。
未经授权，禁止复制转载。【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。经过尝试之后，我发布了【未经授权禁止转载】PHC这个框架转载请注明出处：www.tangshuang.net，它既没有新语法，也没有独立API，是原【原创不易，请尊重版权】【原创内容，转载请注明出处】生Web技术的延伸，是对web的扩展。它【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】的总体积为5Kb，只有5Kb意味着它没有【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】复杂的设计，也没有庞大的代码体系。和微前【转载请注明来源】【本文受版权保护】端框架不同，PHC的出发点是一个组件框架【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】，即弥补Web Components标准著作权归作者所有，禁止商业用途转载。【转载请注明来源】没有import组件的问题，即利用前文所【本文受版权保护】【本文受版权保护】说的UI嵌入思想让基于PHC的组件可以无未经授权，禁止复制转载。【版权所有，侵权必究】限嵌套下去。而它也借鉴了微前端框架的一些【原创内容，转载请注明出处】未经授权，禁止复制转载。成功的想法。PHC加载一个.htm文件来转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】作为一个组件，通过<phc-x>标签来实现UI嵌入（组件引入）。由于没有【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。微前端框架的代理等设计，因此，在PHC框【作者：唐霜】【版权所有，侵权必究】架下运行的代码，接近原生web的性能。同【版权所有，侵权必究】原创内容，盗版必究。时，由于PHC仅仅解决的是UI嵌入问题，原创内容，盗版必究。转载请注明出处：www.tangshuang.net开发者使用什么技术来实现组件UI完全由他未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net自己决定，我在example中使用了vu未经授权，禁止复制转载。原创内容，盗版必究。e和react，甚至把他们混杂在一起。
我相信，Web原生的UI嵌入技术方案一定著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。会在将来以标准的形式发布。但在那之前，我【原创内容，转载请注明出处】【版权所有，侵权必究】所做的一些尝试，对我来说，也是一种乐趣。
【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net结语【版权所有】唐霜 www.tangshuang.net
【作者：唐霜】【作者：唐霜】【作者：唐霜】未经授权，禁止复制转载。【原创内容，转载请注明出处】本文主要围绕“UI嵌入”这个话题展开了阐【未经授权禁止转载】【未经授权禁止转载】述，我认为微前端框架本身存在缺陷，且其初【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】衷已经无法适应当下的开发模式，而真正能够转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】解决问题的，是Web标准发布对应的UI嵌未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。入技术。我在思考之后，发布了PHC框架，原创内容，盗版必究。【原创内容，转载请注明出处】以一个体积极小、性能极高的工具，来使得这本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。个UI嵌入成为可能。在UI嵌入技术的加持转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】下，技术的更新迭代可以更大胆，技术的更迭【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。更有可能带来创新。
原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。2024-02-03 4927
