乐趣区

关于前端:让我看看哪块小饼干还不知道Vitepluginfederation

jiezi

多个独立的构建能够组成一个应用程序，这些独立的构建之间不应该存在依赖关系，因而能够独自开发和部署它们。

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

这是 webpack1 官网对 module-federation 的阐明，这同样是 vite-plugin-federation2 的阐明

为什么创立 vite-plugin-federation

webpack5 的 module-federation 让咱们看到了一些令人激动的性能，然而有个限度，你必须应用 webpack5 能力应用 module-federation 性能，然而你晓得的，vite 正在迅速倒退，咱们心愿能在 vite 上应用 module-federation，这就是创立 vite-plugin-federation 的起因。

示例

该示例位于以下地位，能够自在返回获取

  • gitee：https://gitee.com/originjs/vi…
  • github: https://github.com/originjs/v…

在我的项目 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 集成

思考到一些我的项目应用了 webpack 和 module-federation，并且逐渐向 vite 迁徙，所以 vite-plugin-federation 能够在某些状况下生产 webpack module-federation 的组件，然而存在应用限度，限度如下。

以后的限度

  • dev 模式以后仅反对 host，不反对 remote。
  • 与 webpack 集成只反对在 remote 侧应用 webpack module federtion，并且有打包格局的限度，具体如下
host remote
rollup/vite+esm webpack+var
rollup/vite+systemjs webpack+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… ↩
退出移动版