Vite-进阶篇

Module Federation

简单说就是提出一个模块作为“远程模块”，”本地模块“可以导入这个模块使用，同时”本地模块“也可以作为其他模块的”远程模块“

优点

1. 只是作为引用， 不会参与本地模块打包，减小产物体积
2. 可以做到按需加载
3. 每个模块单独存在，可以单独进行开发、测试等

实践

首先说一下大概的流程：

1. 新建 remote host 项目（官方是同vue，我们也是用vue）
2. remote 作为远程模块，我们通过打包，预览打包后的产物来模拟上线
3. host 作为本地模块，引入远程模块使用

使用 vite-plugin-federation 插件

remote 和 host 分别安装

pnpm install @originjs/vite-plugin-federation -D

处理 remote

// vite.config.js
export default defineConfig({
    plugins: [
        vue(),
        federation({
            name: 'remote-app',
            filename: 'remoteEntry.js',
            // 需要暴露的模块
            exposes: {
                './App': './src/App.vue',
            },
            shared: ['vue']
        })
    ],
    build: {
        target: "esnext",
    },
})

执行打包

pnpm run build

预览,执行前先将 package.json 的 preview 设置为 “vite preview –port=3030 –strictPort”

pnpm run preview

处理 host

export default defineConfig({
    plugins: [
        vue(),
        federation({
            // 远程模块声明
            remotes: {
                remote_app: "http://localhost:3030/assets/remoteEntry.js",
            },
            // 共享依赖声明
            shared: ["vue"],
        }),
    ],
    build: {
        target: "esnext",
    },
})

使用远程模块

<script setup>
  import RemoteApp from "remote_app/App";
</script>

<template>
  <div>
    <h1>Host App</h1>
    <RemoteApp />
  </div>
</template>

启动后效果