Location>code7788 >text

What is a micro front-end? What are the benefits? What are some solutions?

Popularity：479 ℃/2025-04-08 23:01:19

Micro Frontends

Micro front-end is an architectural concept that draws on the idea of ​​microservices and splits a large front-end application into multiple independent and autonomous sub-applications. Each sub-application can be independently developed and deployed by different teams and using different technology stacks, and finally aggregated into a whole product.

🧱 Example of life-like analogy: Lego puzzle understanding micro front end

Imagine you are building a Lego castle. It turns out that everyone needs to squeeze together to make the same piece. Whoever shakes his hand and knocks down a piece of the castle and collapses. Now use the micro front-end, which is equivalent to:

  • You divide the castle into several independent parts: the gate, main building, and the city wall.
  • Xiao Ming's team used wood materials to match the city gate
  • Xiaohong's team used plastic building blocks to build the main building
  • You use 3D printing to make the city wall
  • Finally, it is combined like a puzzle, and each part can be upgraded and modified at any time.

This not only avoids interference between different teams, but also allows people who are good at different materials to show their strengths. The entire castle will not collapse completely because of a problem in a certain part.
This is the most down-to-earth way to understand the micro front end.

🧐 What is a micro front-end?

Micro front-end is an overall architecture of front-endModular, service-oriented, decouplingThe plan.

Core idea:

  • The main application is responsible for public frameworks and routing distribution;
  • Sub-applications are responsible for independent business modules (such as order management, user center);
  • Each sub-application can be independently deployed, run independently, and built independently;
  • The technology stack can be heterogeneous (such as Vue for the main application and React for the sub-application);

✅ Advantages of micro front-end

Advantages describe
No strong dependence on the technology stack Sub-apps can freely select technology stack (Vue/React/Angular)
Independent development deployment Each sub-application can be managed by an independent team and built and released independently by an independent CI/CD
Reduce complexity Disassemble complex monomers into multiple small modules with clear responsibilities
Incremental upgrade Gradually replace old systems, suitable for front-end reconstruction and technology stack upgrade
Large room for performance optimization Sub-application resources can be loaded on demand to achieve faster loading on the first screen

🎯 Applicable scenarios for micro front-end

  • Large-scale platform projects (such as enterprise management backend, e-commerce backend, SaaS system)
  • Large-scale front-end projects developed by multi-team collaboration
  • During the system reconstruction period, projects that require "gradual" upgrade
  • Multiple business lines coexist, each team maintains a functional module

For example:
Alibaba's "unified operation platform" uses micro front-end to integrate multiple B-end application modules;
Tencent Enterprise WeChat multiple business lines use micro front-end to access the main framework.

🛠️ Mainstream micro front-end solutions

plan Features
qiankun Based on single-spa, out of the box, active community, support Vue/React, suitable for enterprise projects
single-spa Flexible, highly scalable, suitable for underlying customization, supports multiple frameworks
Web Components Standard native solution, good isolation and poor compatibility, suitable for technology evolution scenarios
iframe Complete isolation, good compatibility of old projects, disadvantages are poor performance, poor interaction, and difficult communication

🔧 Example: qiankun Quick Access

Main application (Vue) access sub-application (React)

// Main application
 import { registerMicroApps, start } from 'qiankun';

 registerMicroApps([
   {
     name: 'reactApp',
     entry: '//localhost:3001', // Sub-application portal
     container: '#subapp-container',
     activeRule: '/react', // Routing rules
   }
 ]);

 start();
<!-- Main application container -->
 <div >/div>

Sub-app settings dynamic resource path (Webpack)

// Sub-app React -
 if (window.__POWERED_BY_QIANKUN__) {
   // Dynamically set resource paths
   __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
 }

⚠️ Challenges Facing

challenge describe
Sub-application communication The global event bus is required between the main application and the sub application (such as mitt, CustomEvent, postMessage)
Style Isolation Avoid sub-application styles contaminating the main application (CSS Module, Shadow DOM, scoped-css can be used)
Relying on duplicate loading Each sub-app may repeatedly load Vue/React, resulting in enlargement of the package
Routing conflict Multiple applications use different framework routing systems, and the main application needs unified coordination.
Performance optimization It is recommended to avoid reloading of sub-apps every time you switch them.

⚙️ Performance optimization suggestions

1. Avoid repeated packages of public dependencies

Set Vue/React, etc. to external, and the main application injects through CDN:

//  or 
 externals: {
   vue: 'Vue',
   react: 'React',
   'react-dom': 'reactDOM',
 }

2. Preload sub-application resources

start({
   prefetch: true, // Turn on resource preloading
 });

3. Cache sub-app

Caches child application instances in the main application to avoid remounting each entry.

4. Asynchronously load sub-application scripts

<script src="" defer></script>

5. Global event communication bus

// Main application communication tool
 import mitt from 'mitt';
 export const eventBus = mitt();

 // Example of communication in sub-application
 ('login-success', userInfo);
 ('set-theme', (theme) => { ... });

✅ Summary

The micro front-end brings great flexibility and scalability to large application systems, and is suitable for multi-team parallel development scenarios. But it also brings new challenges in communication, style, performance and other aspects. Through reasonable architectural design and technical selection, its advantages can be maximized and a modern front-end infrastructure can be built.

🧩 Further reading

  • Qiankun official documentation
  • Practice and Thinking of Micro Front-end Architecture (Ali Technology)
  • single-spa official website
<Previous Next>