Webpack模块联合延迟加载remoteEntry.js

mrwjdhj3  于 2023-08-06  发布在  Webpack
关注(0)|答案(2)|浏览(171)

当我使用React和ReactRouter时,我可以延迟加载应用程序的入口文件吗?当我进入页面时,有很多对我拥有的每个应用程序的remoteEntry.js文件的请求。我不想因为性能而在开始时获取它。我想在访问特定应用程序的路由时加载它们。


的数据

p1tboqfb

p1tboqfb1#

您需要使用基于Promise的动态远程。
例如,与其将远程定义为URL,不如:

  1. module.exports = {
  2. plugins: [
  3. new ModuleFederationPlugin({
  4. name: 'host',
  5. remotes: {
  6. app1: 'app1@http://localhost:3001/remoteEntry.js',
  7. },
  8. }),
  9. ],
  10. };

字符串
您可以在webpack.config.js中删除此引用,并将远程定义为将在运行时解析的promise:

  1. const loadScope = (url: string, scope: string) => {
  2. const element: any = document.createElement('script');
  3. const promise = new Promise((resolve, reject) => {
  4. element.src = url;
  5. element.type = 'text/javascript';
  6. element.async = true;
  7. element.onload = () => resolve(window[scope]);
  8. element.onerror = reject;
  9. });
  10. document.head.appendChild(element);
  11. promise.finally(() => document.head.removeChild(element));
  12. return promise;
  13. };
  14. const loadModule = async (url: string, scope: string, module: string) => {
  15. try {
  16. const container = await loadScope(url, scope);
  17. await __webpack_init_sharing__('default');
  18. await container.init(__webpack_share_scopes__.default);
  19. const factory = await container.get(module);
  20. return factory();
  21. } catch (error) {
  22. console.error('Error loading module:', error);
  23. throw error;
  24. }
  25. };
  26. const MyApp = React.lazy(() =>
  27. loadModule(
  28. 'http://localhost:3001/remoteEntry.js',
  29. 'app1',
  30. './MyApp',
  31. ),
  32. );


有关详细信息,请参阅Webpack 5文档。

展开查看全部
oalqel3c

oalqel3c2#

  1. new ModuleFederationPlugin({
  2. name: 'reactParent',
  3. filename: 'remoteEntry.js',
  4. remotes: {
  5. reactChild: 'reactChild@/reactChild/remoteEntry.js',
  6. svelteChild: 'svelteChild@/svelteChild/remoteEntry.js',
  7. vueChild: 'vueChild@/vueChild/remoteEntry.js'
  8. }
  9. })

字符串
将remoteEntry.js文件的路径放入Webpack配置中即可完成工作。在这个例子中,我的应用程序被设置为将请求代理到微前端,因此/reactChild被代理到特定应用程序正在运行的位置。

相关问题