August 2022
Beginner to intermediate
270 pages
7h 38m
Chinese
Content preview from 微前端设计与实现
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.
微前端的架构和挑战
｜
23
纵向拆分，而横向拆分需要更多的前期投入以创建可靠且能通过快速反馈来循环迭代的开
发体验。
3.1.4
微前端组合
构建一个微前端应用有几种方法，如图
3-3
所示。
源服务器
客户端
CDN
客户端组合 边缘侧组合 服务器端组合
图 3-3：三种微前端组合
从图
3-3
中，我们可以看到三种组合微前端的方式：
•
客户端组合
•
边缘侧组合
•
服务器端组合
左侧的图示是客户端组合，
App shell
直接从
CDN
加载多个微前端
。如果微前端还没有在
CDN
缓存
，则从源服务器加载。中间的图示是边缘侧组合，即在
CDN
层构建最终视图，
从源服务器查找微前端，并将最终结果交付给客户端。右侧的图示是服务器端组合，即在
源服务器组合视图，缓存在
CDN
层，最后提供给客户端。
现在让我们从技术角度看一下每种架构是如何实现的。
1.
客户端组合
在客户端组合的情况下，
App shell
自己加载微前端
。微前端应该有一个
JavaScript
文件或
HTML
文件作为入口文件
。如果是
HTML
文件，则
App shell
可以在
DOM
中动态追加节
点，或者使用
JavaScript
文件初始化
JavaScript
应用。
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access
More than 5,000 organizations count on O’Reilly
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.Julian F.
I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.Addison B.
I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.Amir M.
I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.