微前端解决方案初探 04 模块联邦（共享模块、手动挂载应用）

最新推荐文章于 2025-10-10 04:42:33 发布

原创

最新推荐文章于 2025-10-10 04:42:33 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #bootstrap #javascript

本文探讨了在微应用中如何通过模块联邦共享faker等库，避免重复加载，解决版本冲突，并实现微应用挂载的灵活性。作者介绍了配置共享模块的方法，以及如何在容器应用中管理和调用共享组件，以提高开发效率和资源优化。

共享模块

当前存在的问题

当前在 products 和 cart 微应用中都使用了 faker，当 container 加载这两个应用模块后，faker 被加载了两次：

在这里插入图片描述

通过模块联邦的共享模块可以实现相同模块只需加载一次。

实现共享模块

使用模块联邦共享模块，只需要在插件配置中添加 shared 配置项即可。

修改 products 和 cart 应用的 webpack 插件配置：

new ModuleFederationPlugin({
   
   
  filename: 'remoteEntry.js',
  name: 'cart',
  exposes: {
   
   
    './index': './src/index'
  },
  // 共享模块
  shared: ['faker']
})

注意：共享模块需要异步加载，以本文为例，使用 faker 的代码要放到 import 的 then 的回调函数中，即：

import('faker').then(m => {
   
   
    const faker = m.default
    // 之后才能使用 faker
})

同加载远程应用模块一样，为了避免嵌套一层回调函数，可以在微应用中添加 bootstrap.js 文件，在文件中同步加载 faker，在入口文件中异步加载 bootstrap.js。

修改 products 应用：

// products\src\bootstrap.js
import faker from 'faker'

let products = ''

for (let i = 0; i <= 5; i++) {
   
   
  // 随机生成产品名称
  products += `<div>${
     
     faker.commerce.productName()}</div>`
}

document.querySelector('#dev-products').innerHTML = products

// products\src\index.js
import('./bootstrap')

// 导出一个方法
export default function sayHello(name)

最低0.47元/天解锁文章