From Component Sharing to Native Modularization: The Evolution Path of Esmx Micro-Frontend Framework#

Project Background#

Over the past few years, micro-frontend architecture has been searching for the right path. However, what we've witnessed are various complex technical solutions that simulate an ideal micro-frontend world through layers of wrapping and artificial isolation. These solutions bring heavy performance burdens, complicate simple development, and obscure standard processes.

Limitations of Traditional Solutions#

In practicing micro-frontend architecture, we've deeply experienced the many constraints of traditional approaches:

• Performance Overhead: Runtime dependency injection, JS sandbox proxies - every operation consumes precious performance
• Fragile Isolation: Manually created sandbox environments can never match browser-native isolation capabilities
• Build Complexity: To handle dependencies, build tools must be heavily modified, making simple projects difficult to maintain
• Custom Rules: Special deployment strategies and runtime processing deviate from standard modern development workflows
• Ecosystem Lock-in: Framework coupling and custom APIs force technology choices to be bound to specific ecosystems

These issues were particularly evident in a 2019 enterprise project we worked on. A large product was split into over a dozen independent business subsystems that needed to share a set of base components and business components. The initial npm-based component sharing solution revealed serious maintenance efficiency problems: when shared components were updated, all dependent subsystems required full rebuilds and redeployments.

Technical Evolution#

v1.0: Exploring Remote Components#

To solve component sharing efficiency issues, Esmx v1.0 introduced the RemoteView component mechanism based on HTTP protocol. This solution achieved on-demand code assembly between services through runtime dynamic requests, successfully addressing long build dependency chains. However, due to the lack of standardized runtime communication mechanisms, state synchronization and event passing between services still suffered from efficiency bottlenecks.

v2.0: Module Federation Experiment#

In v2.0, we adopted Webpack 5.0's Module Federation technology. This technology significantly improved service collaboration efficiency through unified module loading mechanisms and runtime containers. But in large-scale practice, Module Federation's closed implementation introduced new challenges: precise dependency version management became difficult, especially when unifying shared dependencies across multiple services, often leading to version conflicts and runtime exceptions.

Embracing the ESM Era#

When planning v3.0, we closely observed frontend ecosystem trends and found that advancements in browser-native capabilities opened new possibilities for micro-frontend architecture:

Standardized Module System#

With mainstream browsers fully supporting ES Modules and the maturation of Import Maps specification, frontend development has entered a true modular era. According to Can I Use statistics, native ESM support in major browsers (Chrome >= 89, Edge >= 89, Firefox >= 108, Safari >= 16.4) has reached 93.5%, providing these advantages:

• Standardized Dependency Management: Import Maps provide browser-level module dependency resolution without complex runtime injection
• Resource Loading Optimization: Browser-native module caching significantly improves resource loading efficiency
• Simplified Build Process: ESM-based development makes build processes more consistent between development and production environments

With compatibility mode support (Chrome >= 87, Edge >= 88, Firefox >= 78, Safari >= 14), browser coverage can be further increased to 96.81%, allowing us to maintain high performance without sacrificing support for older browsers.

Breakthroughs in Performance and Isolation#

The native module system brings not just standardization, but qualitative improvements in performance and isolation:

• Zero Runtime Overhead: Eliminates JavaScript sandbox proxies and runtime injection from traditional micro-frontend solutions
• Reliable Isolation: ESM's strict module scope naturally provides the most reliable isolation
• Precise Dependency Management: Static import analysis makes dependencies clearer and version control more precise

Build Tool Selection#

Choosing the right build tool was a critical decision in implementing this technical solution. After nearly a year of research and practice, our selection evolved as follows:

1. Vite Exploration

   • Advantage: ESM-based development server provides excellent developer experience
   • Challenge: Differences between development and production builds introduced some uncertainty

2. Rspack Adoption

   • Performance Advantage: Rust-based high-performance compilation significantly improves build speed
   • Ecosystem Support: High compatibility with Webpack ecosystem reduces migration costs
   • ESM Support: Verified reliability in ESM builds through Rslib project practice

This decision allowed us to maintain development experience while gaining more stable production environment support. The combination of ESM and Rspack ultimately enabled us to build a high-performance, low-intrusion micro-frontend solution.

Future Outlook#

In future development, Esmx framework will focus on three key directions:

Deep Optimization of Import Maps#

• Dynamic Dependency Management: Implement intelligent runtime dependency version scheduling to resolve conflicts between multiple applications
• Preloading Strategy: Intelligent preloading based on route analysis to improve resource loading efficiency
• Build Optimization: Automatically generate optimal Import Maps configurations to reduce manual configuration effort

Framework-Agnostic Routing Solution#

• Unified Routing Abstraction: Design framework-agnostic routing interfaces supporting Vue, React and other mainstream frameworks
• Micro-App Routing: Implement coordinated routing between applications to maintain URL and application state consistency
• Routing Middleware: Provide extensible middleware mechanisms supporting features like permission control and page transitions

Cross-Framework Communication Best Practices#

• Example Applications: Provide complete cross-framework communication examples covering Vue, React, Preact and other mainstream frameworks
• State Synchronization: Lightweight state sharing solution based on ESM
• Event Bus: Standardized event communication mechanism supporting decoupled communication between applications

Through these optimizations and extensions, we aim to make Esmx a more complete and user-friendly micro-frontend solution, providing developers with better experience and higher efficiency.