让我看看哪块小饼干还不知道Vite-plugin-federation

多个独立的构建可以组成一个应用程序,这些独立的构建之间不应该存在依赖关系,因此可以单独开发和部署它们。

这通常被称作微前端,但并不仅限于此。

这是 webpack1 官方对 module-federation 的说明,这同样是 vite-plugin-federation2 的说明

为什么创建 vite-plugin-federation

webpack5module-federation 让我们看到了一些令人激动的功能,但是有个限制,你必须使用 webpack5 才能使用 module-federation 功能,但是你知道的,vite 正在迅速发展,我们希望能在 vite 上使用 module-federation,这就是创建 vite-plugin-federation 的原因。

示例

image-20211213185747861

该示例位于以下位置,可以自由前往获取

在项目packages/example/下是插件的使用demo,均可以使用 pnpm build & pnpm serve 来启动查看效果。

快速开始

在使用之前,我建议首先了解下以下几个概念,这些概念和 webpack 中是相同的

  • remote:服务提供方
  • host:服务消费方
  • shared:可以共享的依赖库,这可以使 host 和 remote 使用相同的底层依赖而不是同时引入多个底层依赖

例如一个简单的项目(省略配置文件)

demo
├── host
│   ├── index.html
│   └── src
│       └── index.js
└── remote
    └── src
        ├── button.vue
        └── index.js

1. 安装 vite-plugin-federation

  • pnpm
pnpm install @originjs/vite-plugin-federation -D
  • yarn
yarn add @originjs/vite-plugin-federation --dev
  • npm
 npm install @originjs/vite-plugin-federation -D

2. remote 方暴露组件

在 remote/vite.config.js 中配置如下内容

export default defineConfig ({
  ...
  plugins: [
    federation ({
      //name of your app
      name: 'demo-remote',
      // 可以自定义,不过 remoteEntry 是约定俗成的名称
      filename: 'remoteEntry.js',
      // 配置对外暴露的组件
      exposes: {
        './button': './src/components/button.vue'
      },
      //share vue
      shared: ['vue']
    })
  ],
  ...
})

2. host 方定义 remote

在 host/vite.config.js 中配置如下内容

export default defineConfig ({
  ...
  plugins: [
    federation ({
      //name of remote app
      name: 'demo-host',
      remotes: {
        //the address of remoteEntry
        demo-remote: 'http://localhost:5001/assets/remoteEntry.js'
      },
      //share vue
      shared: ['vue']
    })
  ]
  ...
})

3. host 方使用远程组件

const app = createApp ();
// 定义组件,注意这是 vue 的写法,不同的框架定义远程组件的方式不同
const remoteButton = defineAsyncComponent (() => import ("demo-remote/button"));
app.component ("button", remoteButton);

// 最后就像使用本地组件一样使用定义的组件就可以了

然后 build & serve 查看结果。

与 webpack 集成

考虑到一些项目使用了 webpackmodule-federation,并且逐步向 vite 迁移,所以 vite-plugin-federation 可以在某些情况下消费 webpack module-federation 的组件,但是存在使用限制,限制如下

当前的限制

  • dev 模式当前仅支持 host ,不支持 remote。
  • webpack 集成只支持在 remote 侧使用 webpack module federtion,并且有打包格式的限制,具体如下
hostremote
rollup/vite+esmwebpack+var
rollup/vite+systemjswebpack+systemjs

后续计划

  • 提供 host:webpack + remote: vite-plugin-federation 的支持。
  • webpack 的 esm 打包格式稳定后(当前是实验性特性),提供对webpack esm 打包格式的支持。
  • remote dev 模式的支持。

选择 vite-plugin-federation 还是 module-federation

我认为你不应该陷入这个选择中,你应该选择的是 vite 或者 webpack

仓库地址

gitee : https://gitee.com/originjs/vi...

github : https://github.com/originjs/v...

Vueshenzhen Meetup

最后再来宣传一波,12月30日--Vue Shenzhen Meetup如故,不负相约!本期我们邀请到了Vue.js Team Member,Vue3活跃贡献者戴威(@edison1105)

本期议题:Vue3 Virtual DOM性能优化

Vue3为了优化运行时性能,对Virtual DOM 进行了重构,本次分享将带你了解:

亮点1:传统diff 算法的性能瓶颈

亮点2:Vue3 Virtual DOM 的重构思路

亮点3:diff 算法的改进

期不期待,惊不惊喜~!心动不如行动,快来报名吧,一起等待12月30日的到来~

报名链接:LINK


  1. https://webpack.js.org/plugin...
  2. https://github.com/originjs/v...

VUEShenzhen
Vue Shenzhen由一群Vue.js开发爱好者自发成立的位于深圳的本地组织。旨在将热情的Vue.js开发人员联系起...

Vue Shenzhen由一群Vue.js开发爱好者自发成立的位于深圳的本地组织。旨在将热情的Vue.js开发人员联系起...

23 声望
4 粉丝
0 条评论
推荐阅读
crypto-js-wasm: 当crypto-js遇上WebAssembly
当提到WebAssembly(简称Wasm)技术的时候,大家回想到什么?“新技术”、“新闻里看到过”、“需要用非JS语言写”,或者“压根就没听说过”?那么,我们今天就给大家介绍一次Wasm技术实践: crypto-js-wasm。

Vueshenzhen阅读 574

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青57阅读 8.6k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy49阅读 7.3k评论 12

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 7k评论 12

封面图
CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(>^ω^&lt...

XboxYan48阅读 3.3k评论 14

封面图
「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...

wuwhs32阅读 3.5k评论 5

封面图
还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan35阅读 2.7k评论 2

封面图

Vue Shenzhen由一群Vue.js开发爱好者自发成立的位于深圳的本地组织。旨在将热情的Vue.js开发人员联系起...

23 声望
4 粉丝
宣传栏