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

#Background

Micro-frontend architectures have searched for the right path for years. Many solutions simulate an ideal world through layered wrappers and manual isolation, adding overhead, complicating development, and obscuring standard processes.

#Limitations of Traditional Approaches

• Performance overhead from runtime injection and JS sandbox proxies
• Fragile isolation compared to native browser capabilities
• Build complexity from tool customization to handle dependencies
• Custom deployment and runtime rules diverging from modern standards
• Ecosystem constraints from framework coupling and bespoke APIs

In a 2019 enterprise project, a large product was split into 10+ subsystems sharing base and business components. Npm-based sharing caused maintenance inefficiency: when shared components updated, every dependent subsystem needed full rebuild and redeploy.

#Technical Evolution

#v1.0: Remote Components

Introduced HTTP-based RemoteView for on-demand assembly of service code. It reduced long build chains but lacked standardized runtime communication, leaving state sync and event passing as bottlenecks.

#v2.0: Module Federation

Adopted Webpack 5 Module Federation. Unified module loading and runtime containers improved collaboration, but closed implementation made precise version management difficult in large scale, causing conflicts and runtime errors.

#Embracing the ESM Era

#Standardized Module System

With broad browser support for ES Modules and the maturity of Import Maps, front-end development entered true modularization. Current support (Chrome >= 89, Edge >= 89, Firefox >= 108, Safari >= 16.4) covers ~93.5%. Advantages:

• Standardized dependency management via Import Maps without runtime injection
• Optimized resource loading through native module caching
• Simplified build flows aligned across dev and prod

With compatibility support (Chrome >= 64, Edge >= 79, Firefox >= 67, Safari >= 11.1), coverage reaches ~95.59% while keeping performance high.

#Performance and Isolation

• Zero runtime overhead compared to sandboxed micro-frontends
• Reliable isolation from strict ESM scopes
• Precise dependency management through static import analysis

#Build Tooling Choices

After research and practice:

1. Vite exploration

   • Pros: ESM-based dev server with excellent DX
   • Challenges: differences between dev and prod builds

2. Rspack adoption

   • Performance: Rust-based high-performance compiler
   • Ecosystem: strong compatibility with Webpack
   • ESM: proven reliability through Rslib practices

ESM + Rspack delivered a high-performance, low-intrusion micro-frontend solution.

#Outlook

#Import Maps Optimization

• Dynamic dependency management across apps
• Route-aware smart preloading
• Auto-generated optimal Import Maps

#Framework-agnostic Routing

• Unified routing interfaces for Vue, React, etc.
• Micro-app routing linkage keeping URL and state consistent
• Extensible middleware for permissions and transitions

#Cross-framework Communication

• Complete examples across Vue, React, Preact

• Lightweight state sharing via ESM

• Standardized event bus for decoupled communication

Esmx aims to provide a more complete and efficient micro-frontend solution with better developer experience.