【Micro Frontend】qiankun

column:

• [Micro Frontend] What is a Micro Frontend
• 【Micro Frontend】qiankun
• [Micro front end] qiankun + vite + vue3

1. What is qiankun

qiankunIt is a front-end microservice architecture designed to solve the problem of splitting and managing large and complex applications.

2. The design idea of ​​qiankun

qiankunThe design idea is based on the "micro-service" architecture and the "big front-end" idea. By splitting front-end applications, dynamic loading, state sharing, compatibility and stability and other features, it helps developers build complex front-end applications and realize fast , Stable, scalable deployment and management.

Its design ideas mainly include the following aspects:

2.1 From the perspective of the big front end

qiankunFrom 大前端the perspective of , the front-end application is divided into multiple sub-applications, and each sub-application is relatively independent and can be deployed and run independently.

This approach is similar to 微服务the architecture, splitting the front-end application into multiple small pieces, reducing the coupling and complexity of the entire application.

2.2 Routing-based dynamic loading

qiankunThe routing system can implement dynamic loading of sub-applications according to routing.

When a user visits a different page, qiankunthe corresponding sub-application will be dynamically loaded according to the routing information of the current page, so as to realize the integration of multiple sub-applications.

2.3 Unified state management

qiankunState sharing between multiple sub-applications is achieved by providing a global state manager.

Sub-applications can register their own state in the global state manager, and obtain the global state when needed, so as to realize data exchange and sharing between sub-applications.

2.4 Compatibility and Stability

qiankunThe "two-way communication" technology is used to realize the communication between sub-applications, and it also provides a variety of compatibility solutions, which can run in different browsers and environments, thus ensuring the stability and compatibility of the entire application.

3. qiankun’s sub-application switching principle

qiankunThe principle of application switching is realized through mechanisms such as 动态加载, 应用卸载, and 挂载, and . 全局状态共享These mechanisms ensure the isolation and independence between multiple sub-applications, and at the same time realize the sharing of data and state, thereby providing users with a seamless application switching experience.

qiankunThe principle of application switching can be summarized as the following steps:

1. qiankunMain application loaded

When the user accesses qiankunthe main application, qiankunthe main application is loaded and initialized.

During this process, qiankunthe main application will preload the code and resource files of the sub-applications according to the predefined list of sub-applications (including the name of the sub-application, the path of the entry file, routing and other information).

2. Lazy loading of sub-apps

When a user accesses a sub-application, qiankunthe main application will dynamically load the corresponding sub-application according to the routing information.

In this process, qiankunit will first check whether the sub-application has been loaded, and if not, the corresponding sub-application code and resource files will be lazily loaded.

3. app switching

When the user switches from one sub-application to another, qiankunthe current sub-application will be uninstalled first, and its corresponding DOM nodes and event listeners will be cleared. Then, qiankunthe new sub-application will be loaded and mounted on the DOM node, and at the same time, the life cycle function of the sub-application will be called to initialize the new application.

4. global state sharing

qiankunA global state manager is provided to enable state sharing between sub-applications.

When the user switches from one sub-application to another, qiankunthe state of the current sub-application will be automatically saved to the global state manager, and then the state of the new sub-application will be obtained from the global state manager and updated to the new in sub-applications.

4. Sandbox mechanism

In order to avoid code conflicts and security issues between different sub-applications, a sandbox mechanism is adopted to isolate the code execution environments of different sub-applications. Specifically, qiankunthe sandbox mechanism mainly has the following aspects:

• Application level sandbox

qiankunTreat each sub-application as an independent application, and each sub-application has its own independent sandbox environment, so each sub-application can run independently, debug independently, and deploy independently without affecting each other.

• Module level sandbox

In the sub-application, qiankuna custom module loader is used to load and execute the code of the sub-application. These codes all run in an independent module sandbox environment, which avoids code pollution and conflicts between sub-applications.

• style isolation

qiankunIt also provides a style isolation mechanism, which can isolate styles between different sub-applications, avoiding the problem of style conflicts.

• life cycle isolation

In qiankun, each sub-application has its own life cycle management mechanism, and these life cycle hook functions run in an independent sandbox environment, avoiding life cycle conflicts and influences between sub-applications.

qiankunThe unique sandbox mechanism can effectively isolate the code execution environment between different sub-applications, avoiding code conflicts and security issues. Developers can safely qiankundevelop and deploy multiple sub-applications under the architecture without worrying about code pollution and conflicts between sub-applications.

Five, advantages and disadvantages

• Advantage
  • Modular
  • dynamic loading
  • global state management
  • Compatibility and Stability
• disadvantage
  • Complexity: complex engineering, main application, sub-application.
  • Difficult to debug: Difficult to debug when there is state sharing between multiple sub-applications.
  • Performance issues: In poor network conditions, dynamic loading may cause users to wait too long.
  • Security: Cross-Site Scripting (XSS) and Cross-Site Request Forgery (CSRF), etc.