Use Dynamic Imports in Your SharedComponents MicroFrontend App

The SharedComponent in a MicroFrontend plays a crucial role as it manages and provides common or reusable components across different applications. Therefore, having a well-defined strategy for building, exporting, and importing these components is essential. Without proper management, the bundle size can gradually increase over time, leading to performance issues and slower application load times. By optimizing how shared components are handled, you can ensure efficient resource usage and maintain a fast, scalable application.

Let’s say we have an application called AdminApp, and we want to use a shared component named CustomButton. As we know can simply import it using:

The problem is not here, but in the SharedComponents it self, how are we exporting that CustomButton?

It would include the entire code of the component inside the final bundle, and if you export more component like that, this leads to unnecessary bloat and increased load times.

Instead, a better approach is to split the shared components and load them only when required. This way, we optimize performance, reduce the initial bundle size, and ensure that each microfrontend loads only the dependencies it truly needs.

Again and very important: by dynamically loading only the required components, we keep the bundle size optimized, improving application performance load times.

In upcoming articles, I will dive deeper into this topic and explore advanced optimization techniques for handling larger components that can be deferred for even greater performance improvements.