多个独立构建可以组成一个应用，这些独立构建之间应该没有依赖关系，可以独立开发和部署。这通常被称为微前端，但不限于此。这是webpack1官方对module-federation的描述，也是vite-plugin-federation2的描述。为什么创建vite-plugin-federationwebpack5的module-federation让我们看到了一些令人兴奋的特性，但是有一个限制，你必须使用webpack5才能使用module-federationfeature，但是你知道，vite发展很快，我们要使用module-federationonvite，这就是创建vite-plugin-federation的原因。示例示例位于以下位置，欢迎获取gitee:https://gitee.com/originjs/vi...github:https://github.com/originjs/v...underprojectpackages/example/是插件的demo，可以使用pnpmbuild&pnpmserve启动查看效果。快速入门在使用之前，建议大家先了解以下几个概念，与webpack中的remote相同：服务提供者host：服务消费者shared：共享依赖库，可以让host和remote使用相同，而不是引入多个底层依赖同时，比如一个简单的项目（配置文件省略）demo├──host│├──index.html│└──src│└──index.js└──remote└──src├──button.vue└──index.js1.安装vite-plugin-federationpnpmpnpminstall@originjs/vite-plugin-federation-Dyarnyarnadd@originjs/vite-plugin-federation--devnpmnpminstall@originjs/vite-plugin-federation-D2。远程暴露组件在remote/vite.config.js中配置如下但是remoteEntry是习惯用的名字filename:'remoteEntry.js',//配置暴露的组件exposes:{'./button':'./src/components/button.vue'},//sharevueshared:['vue']})],...})2.host端定义remote，在host/vite.config.js中配置如下内容exportdefaultdefineConfig({...plugins:[federation({//nameofremote应用程序name:'demo-host',remotes:{//remoteEntry地址demo-remote:'http://localhost:5001/assets/remoteEntry.js'},//sharevueshared:['vue']})]...})3.宿主端使用远程组件constapp=createApp();//定义组件，注意这是vue的写法，不同的框架定义远程组件的方式不同constremoteButton=defineAsyncComponent(()=>import("demo-remote/button"));app.component("button",remoteButton);//最后像使用本地组件一样使用定义好的组件，然后build&serve即可查看结果并考虑与webpack集成有些项目使用webpack和module-federation，逐渐迁移到vite，所以vite-plugin-federation在某些情况下可以使用webpackmodule-federation组件，但是有使用限制，限制如下.目前受限的开发模式目前只支持host，不支持remote。与webpack的集成只支持remote端使用webpackmodulefedertion，对打包格式有限制。详情如下。支持。待webpack的esm打包格式稳定后（目前为实验特性），将提供对webpack的esm打包格式的支持。远程开发模式支持。选择vite-plugin-federation还是module-federation我觉得你不应该陷入这个选择，你应该选择vite或者webpack。仓库地址gitee:https://gitee.com/originjs/vi...github:https://github.com/originjs/v...VueshenzhenMeetup终于又要来一波推广了，12月30日——Vue深圳Meetup一如既往，不负众望！本期请来了Vue.jsTeamMember、Vue3活跃贡献者戴伟（@edison1105）本期话题：Vue3VirtualDOM性能优化Vue3重构了VirtualDOM以优化运行时性能。本次分享将为您带来：亮点一：传统diff算法的性能瓶颈亮点二：Vue3VirtualDOM重构思路亮点三：diff算法的改进期没想到，惊喜还是惊喜~！与其激动不如行动，快来报名吧，静待12月30日的到来~报名链接：LINKhttps://webpack.js.org/plugin...?https://github.com/originjs/v..?
