这句话我听了很久了。我也读了几篇文章，但我仍然无法理解它的实际含义。我总是看到他们给出一些框架名称。但我想了解它的含义以及它为何出现。有人能帮我一下吗？

我的团队开发了一个已经生产了一段时间的角度5应用程序,但我们最近的任务是让应用程序在公司拥有的其他3个站点中运行.一个站点是使用Angular6构建的SPA,另一个站点是SPA但使用Angular5,而另一个站点使用一些较旧的库,如jQuery.

管理层希望我们立即与Angular5 SPA集成,因此我们只是将整个应用程序导出为具有子路由的模块,并让其他应用程序执行引导程序.

但我担心上述方法不适用于非角度站点.由于"主机"应用程序需要知道我们的应用程序的所有依赖关系,这不是一个简单的应用程序(我会说相当大)并且安装它们,这导致两个应用程序需要不同版本的相同的依赖关系,更不用说我们需要在升级依赖项或框架本身时进行同步.在将应用程序嵌入更多站点时,我认为这种方法不会扩展.

我对更一般实现的第一个想法是将我们的应用程序升级到Angular 6并使用自定义元素创建Web组件,但我们需要支持不支持本机封装的IE11和Edge,因此我们需要测试我们的应用程序使用它的每个站点,以确保它们不会破坏我们的样式,我也不知道Web组件是否可以管理子路由.

其他想法是使用iframe,但我的问题是iframe调整大小以适应内容以及如何在'host'应用程序中从iframe中的'常驻'应用程序添加子路由.

有没有更好的方法来实现我们需要做的事情？

理想的解决方案应该允许我们的应用程序在多个站点中使用(每个站点提供特定的配置),而无需我们使用我们的应用程序了解该站点.

谢谢你的帮助.

我们在一个非常大的单体上使用create-react-app(with react-app-rewired)。我们对构建时间做了一些改进（将其缩短到大约 20 秒），但是在构建完成后（按照 a yarn start），应用程序需要 2 分钟才能真正加载到浏览器上。

在app.jsx我尝试删除所有根代码并仅呈现典型的“Hello World”p标签时，它几乎不需要那么长时间。我还使用serve在构建文件夹前面运行了一个基本的 Web 服务器，这表明它可能webpack-dev-server存在应用程序大小问题（或者可以说它是在实际构建之前构建的？）。

在 chrome 开发工具网络选项卡中，阻止页面加载的资产是static/js文件夹中的文件。

这是结果的要点webpack-bundle-analyzer

有没有人知道这个问题的起源以及如何改善构建后加载时间？

你好，我正在学习微前端架构。考虑到我正在开发电子商务应用程序，我有四个垂直领域 - 主页、帐户、PLP&PDP 和购物车&结帐。

我的理解是，每个垂直领域都会有他们的观点、行动、减速器、传奇、商店。在这里，我们将有 4 个 redux 存储。

我的问题是有一些东西，比如用户配置文件缩减器，它们可能对在所有这些微前端应用程序之间共享有用。这里使用 4 redux store 是个好主意吗？

在 React Web 应用程序中处理此问题的正确方法是什么？

我们的团队正在开发一个大型项目,我们希望构建一个包含多种表单和仪表板和功能的大型应用程序.一个整体SPA会变得复杂.所以我们讨论"微前端架构师"的方法.目标是生成包含多个子SPA的父SPA.所有SPA应该具有相同的框架(vueJS).

这种方法背后的想法(https://micro-frontends.org/)

• Web应用程序是由独立团队拥有的功能组合
• 团队拥有独特的业务领域
• 该团队具有跨职能,并从数据库到用户界面开发了端到端的功能
• 它就像自包含系统

我们已经找到了这种方法的一些实现

1)https://micro-frontends.org/

2)CanopyTax with single-spa - > https://github.com/CanopyTax/single-spa

我们想要在我们的前端使用什么:

• VUE

• VUE路由器

• VUE资源

• VUE装载机

• 的WebPack

我们的问题:

1)是否可以使用标准vue工具基于vue创建复合UI(微前端)？

- we are not sure how doable is it with VueJS
- there may already be example projects?

2)我们有多个页面,因此我们需要一个从一侧导航到另一侧的解决方案.我们如何实现页面转换？

3)是否可以在VueJS组件之间建立事件总线？

4)我们如何实现组件之间的双向通信？

- Parent-Child Communication
- Child-Parent Communication

上下文： 我正在构建一个带有 next 及其多区域功能的门户。这允许我们让多个 NextJS 应用程序由不同的团队独立运行，但作为一个应用程序。

问题： 我需要确保所有区域中的页眉、导航和页脚保持一致。为此，我希望在一个地方有一个组件，并在各个区域之间共享它。

不幸的是，nextjs 尚未原生支持 webpack 模块联合，因此我们无法从中受益。

我正在寻找方法来了解使用此功能的人们如何处理共享组件。我的研究和想法仅限于一个解决方案：为我想要共享的组件创建 npm 模块，并将其导入到区域中，然后在区域中传递我需要的数据。这是有代价的：对于像页眉和页脚这样的组件，至少，当发布新版本的包时，我们需要确保所有区域都更新为相同的版本。所以......它并不完美，但似乎就是这样。

我尝试查看NextJS GitHub 讨论，但不幸的是，那里的社区似乎不太活跃（已经有人问过这个问题了，你能在那里找到的唯一答案是我的）。

我决定尝试在这里问这个问题，因为观众更广泛，如果有更好的想法，也许你们可以给我一些启发。

我正在开发一个具有微前端架构的项目。将会有多个微前端，不同的团队会使用不同的 MFE。

在react项目中同时使用类组件和功能组件有什么技术困难吗？或者这只是不好的做法？

使用 React useContexthooks 时，当前需要从树中更高的组件导入才能传入对象Context。举例来说：

// index.jsx
export const MyContext = React.useContext('1')

export function MyApp(props){
  return (
    <MyContext.Provider value='1'>
        <ChildComponent />
    </MyContext.Provider>
  )
}

// ChildComponent.jsx
import {MyContext} from './index';

export function ChildComponent(props){
  const context = useContext(MyContext);
  return (<p> {context} </p>)
}

但如果子组件是联合的，它将单独位于一个单独的存储库中，并且无法从'./index'.

在该MyApp级别，我可以导入ChildComponent：

const ChildComponent= React.lazy(() => import('federatedApp/ChildComponent'))

前提是在 Webpack 配置中，被federatedApp命名为远程，并且 HTML 文档包含远程模块入口点 .js。但我怎样才能给MyContext遥控器federatedApp呢？

猜测答案：我需要将两个组件分成index.jsx两个文件并分别公开它们吗？

哪个是微前端开发的最佳方法/框架？

我有超过 5 个基于 angular、react 和 vue 的应用程序，并希望在单个 UI 上显示所有 5 个应用程序。我们有许多微前端框架，如单个 spa、piral、moisaic 项目、Podium 等等......现在市场上可用。需要一个清晰的图片来帮助我使用任何框架来实现它。

微服务#前端开发

我正在努力将一个整体应用程序分解为 Angular 10 上的微前端。微前端驻留在单独的存储库中，我想在我的微前端中使用 ngrx 存储和效果。我无法StoreModule.forRoot()在微前端的应用程序模块中执行此操作。我想在 shell 应用程序中创建一个根存储，并且想在微前端中使用减速器和效果。我没有使用任何像 SPA 这样的框架，而是使用 webpack 模块联合插件。我该怎么办？任何帮助将不胜感激和欢迎。