The webpack5 Module Federation is a popular webpack5 module federation. But what I’m going to focus on today is the micro module, which I think deserves more praise.

Advantages of the micro module are as follows:

  • Modularity compiles on demand
  • Modular deployment released, incremental updates
  • Sharing micromodules across projects (host and version configuration supported)

The difference between micro front-end and micro module, 👇 see the following figure.

Microfront-end architecture

The microfront-end architecture is more about solutions to coexistence between different applications or different technology stacks

Micromodule architecture

The micro module architecture is more a solution to compile, package, and share modules within the same application stack.



A micromodule is actually a project file organization specification, not a new technology, as shown below:



I don’t know if you noticed, but the main culprit for slow compilation performance is:
npm run serve 和
npm run build. When we’re executing
NPM run and serve
NPM run builds are fully compiled and fully packaged for release.
In the past, we thought it was best to optimize the WebPack configuration to solve the problem of slow compilation. In fact, we can think about doing micro modules. It is only by being clear about what we should compile and what we should not compile that we can really find the source of performance compilation slowness.

Modularity compiles on demand



Modular deployment released, incremental updates

It is actually a package delivered via Webpack UMD. This is a very common way to share modules



Sharing micromodules across projects (host and version configuration supported)



Finally, I would like to talk about webpack5 Module federation. At present, I think its scenario is more likely to solve the problem of sharing modules between applications. In fact, it is not as flexible as micro-modules. I think it’s very rare to share a single component across applications. Then I tried module Federation and found that it couldn’t do dynamic import (you can try it, as shown below). However, I think webpack5 Module Federation will be a big success in the future.

Webpack5-module-federation-for-vue project address, welcome to try:

Github.com/lisiyizu/we…

Webpack5 Module Federation

zhuanlan.zhihu.com/p/115403616

Mp.weixin.qq.com/s/WAYezuzMK…

Webpack5 Module Federation

Github.com/module-fede…


If you find it useful, please feel free to like and comment. Thank you 🙏