调整 React 延迟加载 Webpack 输出以组合两个 Web 应用程序
我们有一个 React Web 应用程序,其中每个路由都是延迟加载的:
const HomeScreen = React.lazy(() => import('../components/HomeScreen/HomeScreen'));
正如预期的那样,这会在生产构建期间生成各种 JS 文件:
- main.js
- 1.main.js
- 2.main.js
有没有办法加载这些生成的生产代码我们还有另一个网络应用程序吗? 它们只是替换特定 DOM 元素的内容吗?如果是这样,他们是如何做的呢?
We have a React Webapp where every route is lazy loaded:
const HomeScreen = React.lazy(() => import('../components/HomeScreen/HomeScreen'));
This, as expected, generates various JS files during a production build:
- main.js
- 1.main.js
- 2.main.js
Is there any way to load those generated production code in another Webapp we have?
Do they simply replace the content of a specific DOM element? and if so, how do they go about it?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
您可以为此使用模块联合
https://levelup.gitconnected.com/microfrontends-module-federation-exusing-remote-from-legacy-react-webpack4-created-by-f3753d70d34e
You can use Module Fedration for this
https://levelup.gitconnected.com/microfrontends-module-federation-exposing-remote-from-legacy-react-webpack4-created-by-f3753d70d34e