微前端、Web 组件和共享库 [英] Micro-Frontends, Web Components, and Sharing Libraries
问题描述
所以我正在努力将我公司的应用程序迁移到微前端方法.我们遵循 https://micro-frontends.org/ 中描述的标准.虽然在幕后一切目前都在使用 React，但我们正在用 Web 组件包装东西，以便我们在未来拥有独立于框架的自由和灵活性.我们已经建立并运行了一个工作架构，到目前为止它运行良好.我们甚至在 Web 组件规范之上创建了一个漂亮的兼容层，它允许我们将类似 React 的 props 传递给 Web 组件，包括对象、数组，甚至函数.这允许他们之间更好的互动.
so I'm working on migrating my company's app to a micro-frontend approach. We are following the standard described in https://micro-frontends.org/. While under the hood everything is currently using React, we are wrapping things with Web Components so that we will have the freedom and flexibility to be framework-agnostic in the future. We've got a working architecture up and running and so far it is working beautifully. We even created a fancy compatibility layer on top of the Web Component spec which allows us to pass React-like props to the Web Components, including Objects, Arrays, and even Functions. This allows for much better interaction between them.
我们现在主要关注的是库的重复.我们是一家 React 商店，所以即使我们有这种与框架无关的方法，一切都在使用 React.虽然这种新方法使我们能够将应用的各个部分单独升级到更新的 React 版本(最终)，但我们仍然不喜欢 React 库有这么多重复的想法.
The main concern we have right now is duplication of libraries. We're a React shop, so even though we have this framework agnostic approach, everything is using React. While this new approach gives us the ability to individually upgrade pieces of our app to a newer React version (finally), we still don't like the idea of so much duplication of the React library.
正确地说，即使是 Gzipped，React/ReactDOM 也超过 40kb.单独来说这是非常小的，但是按比例放大它开始占用越来越多的带宽.RAM 方面问题不大，这些库大约有 130kb，而且考虑到现在大多数设备的 RAM 容量，这不是什么大问题.
To put it in perspective, even Gzipped, React/ReactDOM are over 40kb. That's super tiny individually, but scaled up it starts to take up more and more bandwidth. RAM-wise it's less of an issue, about 130kb for those libraries, and given the RAM capacity of most devices now it's not a huge deal.
但是，当然，我们希望尽可能优化和简化.所以我希望有人可以提出一种方法，让微前端应用程序(包含在 Web 组件中的应用程序)可以从父应用程序获取 React 和其他库.
But, of course, we want things to be as optimized and streamlined as possible. So I'm hoping someone can suggest a way for the micro-frontend apps (the ones wrapped in a Web Component) can get React and other libraries from the parent app.
您应该知道父应用 JavaScript 在微前端之前加载.每个微前端都通过
