皇冠app下载安装- 字节跳动的微前端沙盒实践

本文以字节跳动的微前端项目运行时隔离任务出发，深入解说 sandbox （后称沙盒）的技术实现，以及上述实际实现历程中一些发生过的问题。把一些关键细节和多年的采坑履历充实的分享给读者，希望能对大家有一些资助和启发。至于对微前端的整体思考，可以参考：《前端微服务在字节跳动的打磨与应用》，希望读者在读本文之前已经有所相识。1. 沙盒应该做什么首先从沙盒对微前端以致前端的意义开始讲起。

沙盒对软件工程来说其观点不算是新鲜事物，仅看前端对隔离的需求也由来已久。而且凭据差别的实际业务场景，已经有过很是多和有特色的探索。古老的 Iframe一切都从 iframe 开始讲起了，横竖是个看上去很美的解决方案。

没有真的用过的人肯定都市这样想象。但有些可能等到你要真的搞一个通过 iframe 全面聚合的才知道。单纯的 iframe 聚合很是贫苦，需要许多补漏的劳动量。旧的 iframe 的方案可以在一定水平上解决了耦合问题。

详细是把一个站点页面拆成 N 个 frame，每个 frame 单独跑一个独立的域名。它的利益很是清楚，独立上下，独立运行，谁都不会故障谁。可是是不是这样沙盒就完成了呢？这样算不算沙盒就欠好说了，会有许多差别的看法和理论。

好比一些看法可能会以为沙盒不是像这样全独立，而是以隔离模拟独立。后面我们会再次谈到这个看法，并从实现角度分享一些我们的思考结果。

因为一个完整的项目包罗大量公用的功效和代码，例如登录身份、站内信，业务模块只是其中的一个部门。这部门完全用跨 window 通信实现起来很费时艰苦，而且单页应用了 React 或类似的加载技术展示之后，iframe 的效果也逊色许多。

想要突破这些限制，难题就许多了。古老的难题第一点不用多说列位都市想到 deeplinking 的问题，对吧，至少这点得做到才气算是一个工程，尤其 MVC 时代以来路由一直很是重要。另有就是种种共享的工具，好比登录怎么共享。iframe 固然也不是不行。

和前面后面提到的诸多问题一样都不是不行、而是很贫苦，要针对他去解决许多难题。从效果上讲，最终也完全可以形成一个不错的 iframe 沙盒。另一显然的难题是，组件库、组件气势派头的父子通报，以及 React VUE 等渲染引擎的底层代码、内存工具的通报。

开端的实现是加入分片打包功效，拆 common chunk 并独立部署 CDN 上，最后在加载时，通过浏览器自身的缓存能力加速会见。可是运行时内存并不共享，对包的运行时修改也难以复用。另有数据层的设计，数据 Store 等等。

数据层至少要有一定的事件买通的功效。搞欠好就牵一发动全身，改一个需求，不得不公布四五个项目。

2. 沙盒应该像什么前面提到过我们不希望沙盒是完全独立的运行时情况，而是有分享和协同的可靠情况。这一章我们希望能说清我们希望沙盒提供怎样的功效、如何使用。虚拟化、容器化、Docker到这里开始讲到优美的景物了，docker。

从解耦的角度看，服务端的微服务主要是通过 docker 技术实现虚拟化的底层支持，使服务开发者可以体会不到情况的区别、抹平运行时差异的。可以说对微服务来说，docker 是这些年能获得如此的生长的一个基石。

单纯说微服务的观点自己，良久之前也有这个观点的，有面向服务编程的理论。可是生长很少，兑现仍然很难题，搞虚拟机很贫苦。而且还包罗开发体验的工具，我打包的镜像——要想交付一致得包罗整个操作系统吗？这对开发体验影响很坏。

在 docker 获得普遍应用之前，微服务在服务端的使用主要基于虚机。相比之下使用很是庞大、维护成本提高。虚拟机不说多贫苦了，大家都懂。它吃掉的资源，和容器化技术比完全不在一个量级。

另有好比当你想要打个快照连磁盘都吃掉。而且多个服务之间的资源协和谐有效分配，实现起来也极端难题。诸多扩大的成本问题直到随着 docker 的沙盒体系才得以解决。微服务才成为一个趋势。

惋惜的是这样的容器情况在前端浏览器内的运行时还不存在。所以这里已经可以看出我们提出的前端沙盒、对它的期望，是让它就像 Docker（而 iframe 在这个比喻里就相当于虚拟机）那样。

我们搞的这套机制是像 Docker 的前端运行时容器，像 Docker 一样让前端的拆分能轻松一点、分享容易一点、资源节约一点。固然这不是否认 iframe 的方案。3. 沙盒应该怎么做那么我们说的这种沙盒，这种轻量级、强调组件间协同相同、很是节约资源的沙盒怎么做呢，下面我分 3 个偏向划分先容。

（这块还不会有详细的实现，主要从可能性上分析在浏览器里怎么造沙盒。）3.1 单历程与多历程参考单核、操作系统历程，模拟历程切换计谋。

我们的沙盒实质上在让一个浏览器去跑多个“独立”的应用，那么这里对操作系统的模拟、最终趋同一定避不开。在这个角度上，和其他语言相比 JavaScript 占了一个奇特的执行特点的自制：它自身是单线程的。我怎么做实质上也都是在一个线程内。相当于我们这个操作系统从一开始就限定了单核只有一个着力气。

那么一个操作系统，怎么做多历程并行呢， 单历程可简朴通过根路由等等规则控制，每次只激活一个，大家做 context 切换即可；多历程并行就正好可以使用 JavaScript 的特性，我可以封装每个独立的事件循环。好比 setTimeout、种种事件回调的 handler，我们在实际 function 外面先切换 context，再执行你原本希望绑定的 function。这样是线程宁静的。

总结下来就会是下面两。

本文来源：皇冠新体育app-www.haifayw.cn