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