1. 背景
本文将介绍“模块联邦”相关的内容。
1.1 什么是模块联邦
联邦模块是 webpack5 提供的一个新特性，它是通过 webpack 原生提供的 ModuleFederationPlugin 插件来实现的。
联邦模块主要是用来解决多个应用之间代码共享的问题，可以让我们的更加方便的实现跨应用的代码共享。
1.2 为什么要有模块联邦
组件复用
- 复制/粘贴
- 发布独立的 UI 库
-
微前端：
- 基于 single-spa 的微前端方案 qiankun
- 基于 webcomponent qiankun sandbox 的微前端方案 micro-app
- 基于 webcomponent 容器 iframe 沙箱的微前端方案 wujie
- 基于 webpack5 的微前端方案 module federation
2. 使用过程分析
配置项
2.1 示例
2.1.1 主项目(以 vue.config.js 为例)
const { defineConfig } = require('@vue/cli-service')
const { ModuleFederationPlugin } = require('webpack').container
const path = require('path')
module.exports = defineConfig({
transpileDependencies: true,
publicPath: 'http://localhost:8081/',
configureWebpack: {
plugins: [
new ModuleFederationPlugin({
name: 'main_app',
remotes: {
'sub-app': 'sub_app@http://localhost:8082/remoteEntry.js',
},
}),
],
optimization: { splitChunks: false },
devServer: {
static: {
directory: path.join(__dirname, 'public'),
},
compress: true,
port: 8081,
},
},
})
2.1.2 子项目(以 vue.config.js 为例)
const { defineConfig } = require('@vue/cli-service')
const { ModuleFederationPlugin } = require('webpack').container
const path = require('path')
module.exports = defineConfig({
transpileDependencies: true,
publicPath: 'http://localhost:8082/',
configureWebpack: {
plugins: [
new ModuleFederationPlugin({
name: 'sub_app',
filename: 'remoteEntry.js',
exposes: {
'./button': './src/components/button.vue',
},
}),
],
optimization: { splitChunks: false },
devServer: {
static: {
directory: path.join(__dirname, 'public'),
},
compress: true,
port: 8081,
},
},
})
2.1.3 bootstrap.js
- 新建
bootstrap.js - 修改
main.js
// src/bootstrap.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
// src/main.js文章来源：https://www.toymoban.com/news/detail-615492.html
import('./bootstrap')
3. 副作用
- 运行时加载远程模块等逻辑，可能导致一定的性能问题
- 本地开发需要开启多个端口的服务
- 按需加载第三方依赖比较难实现
- 比起传统 spa 项目结构上有些复杂
- 迭代时的版本控制需要更多关注
4. 扩展
- vue + react
- vue2 + vue3
- vite
参考资料
中文官方资料文章来源地址https://www.toymoban.com/news/detail-615492.html
到了这里，关于webpack5之模块联邦的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
