[part7]webpack5新特性及实践 - 图1

Module federation

关键： 具备模块输出能力的中心应用， 在线动态分发runtime子模块。
扩展， 其他共享模块方式：

描述 问题
NPM方式共享模块 共享代码需要将依赖作为Lib安装到项目 需要本地编译
UMD方式共享模块 将模块webpack UMD模式打包，并输出到其他项目
1. 包体积无法达到本地编译时的优化效果
2. 库之间容易冲突
微前端方式共享模块 解决模块共享， 实现多项目并存
1. 子应用独立打包， 模块解耦， 但无法提取公共依赖
2. 整体打包， 但打包速度慢， 不具备水平扩展能力
 样式冲突
声明周期管理

参考：
https://www.webpackjs.com/concepts/
https://github.com/webpack/changelog-v5/blob/master/README.md
官方中文版 https://juejin.cn/post/6882663278712094727#heading-31

https://www.youtube.com/watch?v=J_sDa58UUQo
https://mp.weixin.qq.com/s/0aJmmmrQCwylpViRb09rQA
https://mp.weixin.qq.com/s/aC8mZZ8cwwY-mwhU0TL0JQ
https://mp.weixin.qq.com/s/b5Gl_1yX1enktU9oulO9zg
https://blog.logrocket.com/new-features-in-webpack-5-2559755adf5e/
https://indepth.dev/posts/1173/webpack-5-module-federation-a-game-changer-in-javascript-architecture

https://juejin.cn/post/6910120245734670349#heading-32

实践

参考：
字节 https://mp.weixin.qq.com/s/XhBgVGQOdsR-qeZmuB_B1g