后端有微服务，那前端呢？初探微前端的世界( 四 ) _微前端

再来是 Host 的部分，基本上设定的内容跟 Remote 大同小异，差别在于 Remote 需要设定 exposes 的 components 以及 filename ，而 Host 则是要设定该 Remote 的文件位置。
在文件位置中我们会以三种内容组合，写法上会像这样：name@remoteURL/filename ，其中 name 就是上方介绍到的 export 出去的名称，remoteURL 则是 Remote 区块内 Webpack config 中所设定的 output path 相关设定，而 filename 则是上方介绍到的 export 出去的文件名称。
最终的写法就会像下方这样：

文章插图

于笔者在 shared 的区块都没有加上 eager: true ，所以这边在抓取 components 时都是用 async 的方式去抓取，因此笔者建议会使用的方式进行 data fetching 这样会比较安全喔！

文章插图

最终呈现在网页上的画面就会像下图这样：

文章插图

事例地址：https://github.com/w5151381guy/micro-frontend-practice
总结
这次介绍了 Micro Frontends 以及 Microservices 这两种目前最多人讨论的架构，希望可以让读者更了解一些新时代的架构所带来的优缺点，文章的篇幅可能有点多，读者可以边看边消化一下这样才能更好的理解所有的内容。