掌握模块联邦，让 Vite 绽放光芒

前端

2023-10-08 10:47:12

什么是模块联邦？

模块联邦是一种将应用程序分解成多个独立模块的技术，这些模块可以在不同的应用程序或环境中共享和复用。这与传统的前端开发方式截然不同，传统方式是将所有代码打包成一个巨大的应用程序，然后部署到服务器上。这种方式存在很多弊端，比如：

应用程序体积庞大，加载缓慢。
应用程序难以维护和更新。
应用程序无法与其他应用程序共享代码。

模块联邦则可以很好地解决这些问题。通过将应用程序分解成多个独立模块，我们可以：

减少应用程序的体积，提高加载速度。
提高应用程序的可维护性和可更新性。
方便应用程序与其他应用程序共享代码。

Vite 如何支持模块联邦？

Vite 在 2.9 版本中引入了对模块联邦的支持，这使得 Vite 成为继 webpack 之后第二个支持模块联邦的前端构建工具。Vite 的模块联邦功能非常强大，它提供了以下特性：

支持将模块打包成独立的 JavaScript 文件。
支持在不同的应用程序或环境中加载和共享这些 JavaScript 文件。
支持在不同的应用程序或环境中更新这些 JavaScript 文件。

如何使用 Vite 的模块联邦功能？

要使用 Vite 的模块联邦功能，需要在项目中安装 @vitejs/plugin-federation 插件。然后，在 Vite 配置文件中启用该插件并配置相关选项。

{
  plugins: [
    '@vitejs/plugin-federation'
  ],
  build: {
    federation: {
      // 暴露的模块
      remotes: {
        "remote-app": "http://localhost:3000/remoteEntry.js"
      },
      // 共享的模块
      shared: ["react", "react-dom"]
    }
  }
}

上面的配置将把 remote-app 模块暴露给其他应用程序使用，并将在应用程序中共享 react 和 react-dom 模块。