JS `Module Federation` 高级：运行时代码共享与微前端架构

各位观众老爷，大家好！我是你们的老朋友，今天咱们来聊聊JS模块联邦（Module Federation）的高级玩法，保证让你听完之后，觉得自己又行了！

开场白：别再把微前端想得那么玄乎！

很多人一听到“微前端”就觉得高大上，好像只有BAT级别的公司才能玩得转。其实，微前端的核心思想很简单：把一个大型应用拆分成多个小型、自治的应用，然后让它们像乐高积木一样组合在一起。

而模块联邦，就是实现微前端的一种非常优雅的姿势。它允许不同的应用共享代码，减少重复，提高效率。

第一章：模块联邦的基础回顾（温故而知新）

在深入高级技巧之前，咱们先简单回顾一下模块联邦的基础概念。如果你已经很熟悉了，可以直接跳到下一章。

概念： 模块联邦本质上是一种JavaScript模块的共享机制，它允许一个应用（称为“Host”）动态地加载和使用来自其他应用（称为“Remote”）的模块。
核心配置： Webpack的ModuleFederationPlugin是模块联邦的核心。我们需要在Host和Remote应用中都配置这个插件。
Host应用： 负责加载和组合Remote应用提供的模块。
Remote应用： 负责暴露自己的一些模块供其他应用使用。

代码示例（基础配置）：

假设我们有两个应用：app1（Host）和app2（Remote）。

app1 (Host)的webpack.config.js:

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  // ...其他配置
  plugins: [
    new ModuleFederationPlugin({
      name: 'app1', // 必须，唯一标识
      remotes: {
        app2: 'app2@http://localhost:3002/remoteEntry.js', // 指定Remote应用的地址和名称
      },
      shared: { //共享依赖，避免重复加载
        react: { singleton: true, eager: true },
        'react-dom': { singleton: true, eager: true },
      },
    }),
  ],
};

app2 (Remote)的webpack.config.js:

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  // ...其他配置
  plugins: [
    new ModuleFederationPlugin({
      name: 'app2', // 必须，唯一标识
      exposes: {
        './Button': './src/Button', // 暴露模块
      },
      shared: { //共享依赖，避免重复加载
        react: { singleton: true, eager: true },
        'react-dom': { singleton: true, eager: true },
      },
    }),
  ],
};

解释：

name: 每个应用必须有一个唯一的name，用于标识自己。
remotes: 在Host应用中，remotes字段指定了需要加载的Remote应用的信息，包括Remote应用的name和remoteEntry.js的地址。remoteEntry.js是Remote应用暴露的入口文件，包含了Remote应用暴露的模块信息。
exposes: 在Remote应用中，exposes字段指定了需要暴露的模块，以及模块对应的文件路径。
shared: shared字段用于共享依赖。如果Host和Remote应用都使用了同一个依赖（例如react），那么可以通过shared字段来避免重复加载，节省带宽。singleton: true表示只加载一个实例，eager: true表示立即加载。

使用：

在app1中，你可以这样使用app2暴露的Button组件：

import React from 'react';
import Button from 'app2/Button'; // 注意这里的app2是remote的name

function App() {
  return (
    <div>
      <h1>App1</h1>
      <Button>Click me!</Button>
    </div>
  );
}

export default App;

第二章：运行时代码共享（共享的不仅仅是组件）

基础的模块联邦只是共享了组件，但实际上，我们还可以共享更多东西，比如：

工具函数： 一些通用的工具函数，例如日期格式化、字符串处理等。
状态管理： 共享Redux Store、Vuex Store等状态管理方案。
API客户端： 共享API客户端，避免重复编写请求逻辑。
类型定义： 共享TypeScript类型定义，提高代码的可维护性。

代码示例（共享工具函数）：

假设app2有一个工具函数formatDate，用于格式化日期。

app2 (Remote)的src/utils.js:

export function formatDate(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

app2 (Remote)的webpack.config.js:

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  // ...其他配置
  plugins: [
    new ModuleFederationPlugin({
      name: 'app2',
      exposes: {
        './Button': './src/Button',
        './utils': './src/utils', // 暴露工具函数
      },
      shared: {
        react: { singleton: true, eager: true },
        'react-dom': { singleton: true, eager: true },
      },
    }),
  ],
};

在app1中使用：

import React from 'react';
import Button from 'app2/Button';
import { formatDate } from 'app2/utils'; // 引入工具函数

function App() {
  const today = new Date();
  const formattedDate = formatDate(today);

  return (
    <div>
      <h1>App1</h1>
      <Button>Click me!</Button>
      <p>Today is: {formattedDate}</p>
    </div>
  );
}

export default App;

第三章：动态模块加载（让你的应用更灵活）

有时候，我们可能需要在运行时动态地加载模块，而不是在编译时就确定。模块联邦也支持这种方式。

代码示例：

// 动态加载模块
const loadComponent = (scope, module) => {
  return async () => {
    // Initializes the shared scope. Fills it with known provided modules from this build and all remotes
    await __webpack_init_sharing__('default');
    const container = window[scope]; // or get the container somewhere else
    // Initialize the container, it may provide shared modules
    await container.init(__webpack_share_scopes__.default);
    const factory = await window[scope].get(module);
    const Module = factory();
    return Module;
  };
};

const useDynamicScript = (url) => {
  const [ready, setReady] = React.useState(false);
  const [error, setError] = React.useState(false);

  React.useEffect(() => {
    if (!url) return;

    const element = document.createElement('script');

    element.src = url;
    element.type = 'text/javascript';
    element.async = true;

    element.onload = () => {
      console.log(`Dynamic Script Loaded: ${url}`);
      setReady(true);
    };

    element.onerror = () => {
      console.error(`Dynamic Script Error: ${url}`);
      setError(true);
    };

    document.head.appendChild(element);

    return () => {
      document.head.removeChild(element);
    };
  }, [url]);

  return {
    ready,
    error,
  };
};

function DynamicComponent({ scope, module }) {
  const [Component, setComponent] = React.useState(null);

  React.useEffect(() => {
    const load = async () => {
      try {
        const Comp = await loadComponent(scope, module);
        setComponent(Comp.default);
      } catch (error) {
        console.error('Failed to load dynamic module', error);
      }
    };

    load();
  }, [scope, module]);

  if (!Component) {
    return <div>Loading...</div>;
  }

  return <Component />;
}

function App() {
  const { ready, error } = useDynamicScript('http://localhost:3002/remoteEntry.js'); //app2的地址

  if (!ready) {
    return <div>Loading remote script...</div>;
  }

  if (error) {
    return <div>Error loading remote script.</div>;
  }

  return (
    <div>
      <h1>App1</h1>
      <DynamicComponent scope="app2" module="./Button" />
    </div>
  );
}

export default App;

解释：

loadComponent: 这个函数负责动态地加载模块。它首先初始化共享作用域，然后从window对象中获取Remote应用暴露的模块。
useDynamicScript: 这是一个自定义的Hook，用于动态地加载JavaScript文件。它会创建一个<script>标签，并将其添加到document.head中。
DynamicComponent: 这是一个组件，它使用loadComponent函数动态地加载模块，并将其渲染到页面上。

第四章：版本管理与兼容性（踩坑指南）

模块联邦虽然强大，但也需要注意版本管理和兼容性问题。如果Host和Remote应用使用了不同版本的依赖，可能会导致运行时错误。

解决方案：

共享依赖： 使用shared字段共享依赖，确保Host和Remote应用使用相同的版本。
版本锁定： 使用package-lock.json或yarn.lock文件锁定依赖版本，避免自动升级导致不兼容。
Semantic Versioning： 遵循Semantic Versioning规范，明确依赖的版本号，方便排查问题。
测试： 编写充分的测试用例，确保在不同版本的依赖下，应用都能正常运行。

第五章：高级技巧与最佳实践（进阶之路）

自定义共享作用域： 除了默认的default共享作用域，你还可以创建自定义的共享作用域，用于隔离不同应用的依赖。
异步模块加载： 使用import()函数异步加载模块，提高应用的性能。
错误处理： 完善错误处理机制，当加载模块失败时，能够优雅地降级，避免应用崩溃。
监控与日志： 收集模块联邦的运行数据，例如加载时间、错误率等，方便分析和优化。
CI/CD集成： 将模块联邦集成到CI/CD流程中，实现自动化部署和测试。

第六章：模块联邦的适用场景（用对了才香）

模块联邦并不是万能的，它更适合以下场景：

大型应用拆分： 将一个大型应用拆分成多个小型、自治的应用，提高开发效率和可维护性。
团队协作： 允许多个团队独立开发和部署应用，降低团队之间的耦合度。
第三方组件集成： 集成来自不同来源的第三方组件，扩展应用的功能。
渐进式迁移： 将一个旧的单体应用逐步迁移到微前端架构。

第七章：模块联邦的局限性（别盲目乐观）

复杂性： 模块联邦会增加应用的复杂性，需要更多的配置和管理。
性能： 动态加载模块可能会影响应用的性能，需要进行优化。
安全： 需要注意安全性问题，例如防止恶意代码注入。
学习成本： 模块联邦的学习曲线较陡峭，需要一定的学习成本。

第八章：总结与展望（未来可期）

模块联邦是一种强大的技术，它可以帮助我们构建更加灵活、可维护的微前端应用。但是，它也需要我们深入理解其原理和局限性，才能真正发挥其价值。

未来，随着Web技术的不断发展，模块联邦将会变得更加成熟和易用，成为微前端架构的重要组成部分。

结束语：

希望今天的分享对你有所帮助。记住，技术只是工具，关键在于如何运用它来解决实际问题。祝大家编码愉快！如果有什么问题，欢迎随时提问。下次再见！

发表回复 取消回复

发表回复取消回复