模块联邦实践

早期

早期业务,线进行开发的时候,我复杂的业务,和在一个主应用中,发布,测试部署,严重耦合,多个业务线复杂人,迭代,一旦有bug 就会立刻回滚,最终导致上线失败率很低并且只是改变其中的子页面,模块,导致整个应用,全部都进行拆分而且业务形态,非常集中以报表,图表为主

所有结合当时的业务形态,我们这里,主要是用模块联邦来处理,进行拆分

首先,划分主子应用边界左侧栏,以及顶部栏,以及图表,下拉框,表格,都是划到主应用作为子应用,主要去负责

最后结合具体实践,和坑的整理

模块联邦

作为webpack 承担的功能,解决的是单体复杂应用,如难以单独部署,协作问题,以及

拆分一个巨型应用

先去配置一个最基本的模块联邦微应用: 以下以一些

js 复制代码

// 主应用
plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
    new ModuleFederationPlugin({
      name: 'hostApp',
      filename: 'remoteEntry.js',
      exposes: {
        './RouteGuard': './src/components/RouteGuard',
        './GlobalConfigContext': './src/context/GlobalConfigContext',
        './ThemeContext': './src/context/ThemeContext',
        './ActionToolbar': './src/components/ActionToolbar',
        './SmartTable': './src/components/SmartTable/SmartTable',
        './BaseChart': './src/components/BaseChart/BaseChart',
        './DateProcessor': './src/components/DateProcessor',
        './useBusinessData': './src/hooks/useBusinessData',
        './biz-utils': './src/utils/biz-utils',
        ...
      },
      remotes: {
        remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js',
      },
      shared: {
        react: { singleton: true, requiredVersion: false, eager: true },
        'react-dom': { singleton: true, requiredVersion: false, eager: true },
        antd: { singleton: true, eager: true },
        axios: { singleton: true },
        'react-router-dom': { singleton: true },
        'react-redux': { singleton: true },
      },
    }),
    //

//子应用
plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
    new ModuleFederationPlugin({
      name: 'remoteApp',
      // 这里的也必须用这个remoteEntr.js吗
      filename: 'remoteEntry.js',
      // 这里暴露的是业务模块,不是共用的组件
      exposes: {
        './ReportModule': './src/modules/ReportModule/ReportModule',
        './OptionChainModule': './src/modules/OptionChainModule/OptionChainModule'
      },
      remotes: {
        hostApp: 'hostApp@http://localhost:3000/remoteEntry.js',
      }
    })

实践中常见坑

初期的useTheme context 上下文,共享缺失的问题
主应用,有context的访问,子应用也有类似的访问
主子应用和主应用,最好是共用一套,全局状态管理

css 隔离

非常常见的css 污染,对于模块联邦,没有内置的隔离

一种方案为,我自己通过建立xxx.module.css 文件,来进行模块化处理

js 复制代码

<div className="report-module-container>
    <div className={styles.reportModuleContainer}

由于本公司技术栈,以及金融报表业务,不允许,有太多的自定义样式, 因此没有采用更灵活的 css-in-js模式.

js 复制代码

const Button = styled.button`
  background: blue;
  color: white;
`;

通过这种模式来进行处理,那么其他模块,主应用自然样式是不会干扰的.

模块联邦为何不自己提供呢?