Sharing Is Caring – Boosting Micro-frontends Performance With Dependency Sharing

Micro-frontends are a front-end architectural pattern where a single-page application is split into smaller, independently maintained and deployed applications, allowing for better team independence, system scoping, and isolation.

Monday.com addresses the bundle size issue by sharing dependencies between micro-frontends, ensuring that only one instance of a dependency is loaded per major version, and managing these shared dependencies through a spec and metadata files.

The 'hot swap solution' involves excluding dependencies from micro-frontend bundles and creating a dedicated bundle per dependency. When a micro-frontend loads, dependencies are checked and loaded if needed, with the possibility to 'hot swap' versions to meet specific requirements.

Monday.com ensures compatibility by providing each micro-frontend with the exact version of a dependency it requires, and when multiple micro-frontends use the same major version, using compound names to manage sub-dependencies and avoid conflicts.

The global dependencies solution involves maintaining a global metadata file that records which micro-frontend has the highest version of each dependency, simplifying the runtime process by loading shared dependencies from this global reference.

Monday.com handles implicit dependencies by using the 'require.resolve' function instead of relying solely on the project's package.json, ensuring all necessary dependencies are included and shared effectively.

Implementing shared dependencies at monday.com saved around 10 megabytes of overall bundle size per page, significantly boosting performance metrics.

Monday.com implemented kill switches and safety mechanisms, rolled out the solution experimentally and gradually over six months, and ensured compatibility with Sanver to prevent production breakage.

Yes, the effort was worth it as it resulted in significant performance improvements and reduction in bundle size, enhancing overall user experience.

The main challenge of using micro-frontends is managing bundle size, as each micro-frontend may bundle shared dependencies like React, leading to increased load times and memory usage, negatively affecting performance.