#独家
请问在vite打包中 通过@originjs/vite-plugin-federation 实现某个页面组件模块联邦后整个项目如何合理的进行分片打包?

2023-05-10 0 3,330

vite打包中 通过@originjs/vite-plugin-federation 实现某个页面组件模块联邦后远端整个项目如何合理的进行分片打包,需要进行分片的包主要有:’react’, ‘react-dom’, ‘react-router-dom’,antd,lodash。目前遇到的问题是远端项目不进行分片能正常运行,分片后就报错,代码片段:

// 分片规则
const manualChunksConfig = {
  react: ['react', 'react-dom', 'react-router-dom'],
  mobx: ['mobx', 'mobx-react', 'mobx-react-lite'],
  antd: ['antd'],
  lodash: ['lodash'],
  moment: ['moment'],
  '@ats-design/icons': ['@ats-design/icons'], // 内部组件
  '@sales/ui-web': ['@sales/ui-web'], // 内部组件
};
federation配置:  

federation({
        name: 'mm-app',
        filename: 'remoteEntry.js',
        exposes: {
          './List': '/src/pages/table/index.tsx',
        },
        shared: [
          {
            react: {
              import: false,
            },
            mobx: {
              import: false,
            },
            antd: {
              import: false,
            },
            lodash: {
              import: false,
            },
            moment: {
              import: false,
            },
            '@ats-design/icons': {
              import: false,
            },
            '@sales/ui-web': {
              import: false,
            },
          },
        ],

上述规则有什么问题么?

看看官方的文档和示例:https://github.com/originjs/vite-plugin-federation
这里介绍了shared配置的作用和原理:https://github.com/originjs/vite-plugin-federation/wiki/shared

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 有软官网所有资源来源于开发团队,加入会员即可下载使用!如有问题请联系右下角在线客服!
2. 有软官方保障所有软件都通过人工亲测,为每位会员用户提供安全可靠的应用软件、游戏资源下载及程序开发服务。
3. 有软团队针对会员诉求,历经多年拥有现今开发成果, 每款应用程序上线前都经过人工测试无误后提供安装使用,只为会员提供安全原创的应用。
4. PC/移动端应用下载后如遇安装使用问题请联系右下角在线客服或提交工单,一对一指导解决疑难。

有软官网_用软件,找有软 技术分享 请问在vite打包中 通过@originjs/vite-plugin-federation 实现某个页面组件模块联邦后整个项目如何合理的进行分片打包? https://www.jiaruvip.com/1716.html

有软应用商店是经过官方安全认证,保障正版软件平台

相关资源

官方客服团队

为您解决烦忧 - 24小时在线 专业服务