0

I'm in the process of breaking down my monolithic frontend code into multiple micro frontends using React. All of these micro frontends utilize the MUI Library for their UI components. However, I've also developed some custom UI components that are shared among these micro frontends. I'm seeking advice on the best approach to share these components efficiently.

Considering that these shared components also depend on MUI, I want to ensure that the MUI library is loaded only once when the host micro frontend is loaded. Should I create a new micro frontend specifically for these shared components, or would it be better to package them into an npm package and use it as a dependency? Alternatively, are there any other solutions recommended for this scenario?

It's important to note that these shared components also rely on MUI, so optimizing the loading of MUI is a key consideration for me.

Any insights into the best practices for handling this situation would be greatly appreciated!

Note: I am using Webpack 5 and Module Federation

pesehr
  • 787
  • 2
  • 9
  • 23
  • 1
    Check out https://piral.io/ for what you are trying to do. I think it might solve a lot of this stuff you are trying to solve for. Used it before and am a big fan. – jimmykurian Aug 24 '23 at 19:28
  • Thanks @jimmykurian. There are many tools like piral.io and bit.dev. However, I am trying to use Webpack 5 and Module Federation. – pesehr Aug 24 '23 at 20:42
  • Check out the shared deps section of this answer: https://stackoverflow.com/questions/73391616/how-do-i-share-a-mui-5-theme-across-multiple-micro-front-ends-using-module-feder?rq=2 – Steve Aug 25 '23 at 05:17

0 Answers0