Decentralized micro-front-end construction method and device

Abstract

The invention discloses a decentralized micro-front-end construction method and device, relates to the technical field of front-end application development and can also be used in the financial field, and the method comprises the steps: obtaining main application information and sub-application information through analysis according to project requirements; constructing an application container through a micro-front-end construction tool constructed by utilizing a preset framework according to the main application information, and performing registration identification on a plurality of sub-applications corresponding to the sub-application information through a preset sub-application registrar according to the sub-application information; dynamically loading and coordinating communication and interaction among the sub-applications according to the registration identification information of the application container and the sub-applications so as to form a micro-front-end architecture; wherein the sub-applications are distributed in a plurality of different servers, and calling parameters corresponding to the sub-applications are defined through the ESM; and the application container remotely and dynamically loads sub-applications in different servers to provide application services corresponding to project requirements by using preset remote entry information through a remote loading Vite plug-in and calling parameters constructed by an ESM module of the browser.

Description

Technical Field

[0001] The present invention relates to the field of front-end application development technology, and can also be used in the financial field, and in particular to a decentralized micro-front-end construction method and device. Background Art

[0002] In modern large-scale front-end application development, the traditional monolithic front-end architecture may face some challenges and limitations. As the project scales up, the complexity and maintenance cost of the monolithic application also increase. To solve these problems, more and more teams and organizations are turning to the micro front-end architecture. The structure of the traditional front-end application split into micro front-end applications is shown below: Figure 1 shown.

[0003] A micro-frontend solution is an architectural design that splits a frontend application into multiple independent modules, each of which can be independently developed, deployed, and upgraded. The following are some common micro-frontend solutions:

[0004] (1) Routing-based micro-frontend solution: This solution uses front-end routing to achieve the splitting of micro-frontends. Different modules can be accessed using different routing prefixes or subdomains. Each module can be developed and deployed independently, and integrated and combined through routing. Some popular routing-based micro-frontend solutions include Single-SPA and qiankun. (2) Web component-based micro-frontend solution: This solution uses Web components to achieve the splitting of micro-frontends. Each module is encapsulated as an independent Web component, which can be used and combined through custom elements or Shadow DOM. This solution can use existing Web component libraries or frameworks to build modules. Some Web component-based micro-frontend solutions include single-spa-vue, single-spa-react, etc. (3) Module federation-based micro-frontend solution: This solution uses module federation to achieve the splitting and integration of micro-frontends. Module federation allows different front-end applications to share modules and resources, and each application can be developed and deployed independently. This solution can be implemented using the ModuleFederation function of Webpack. Module federation provides a more flexible way to share and integrate modules, which is suitable for large and complex micro-frontend architectures.

[0005] The existing micro-frontend solution has the advantages of being able to split and solve complex application problems and enhancing the flexibility of team development, but it has the following disadvantages:

[0006] (1) It is difficult to share common modules well and flexibly solve common dependency problems to reduce the additional overhead caused by network loading. Splitting an application into micro-frontend applications will naturally bring more network requests and loading consumption. Therefore, if the common dependencies cannot be flexibly extracted and maintained, the application performance may be reduced. (2) Single-SPA has no built-in mechanism for state sharing between multiple applications. State management needs to be implemented through additional libraries or custom solutions, which may increase the complexity of development and maintenance. (3) Using module federation solutions to implement micro-frontends can solve problems such as module sharing and remote module loading. However, Webpack's module federation is a feature provided by Webpack5, which is used to implement module sharing and dynamic loading of front-end applications. However, this solution requires all applications to be organized and packaged based on Webpack5. For Vue3 and other applications that use Vite packaging solutions, using Webpack for packaging is a conflict.

[0007] To address the above problems, no effective solution has been proposed yet.

[0008] This section is intended to provide a background or context to the embodiments of the invention recited in the claims. No admission is made that the description herein is prior art by inclusion in this section. Summary of the invention

[0009] The embodiment of the present invention provides a decentralized micro-frontend construction method to achieve and solve some of the problems faced by the above frontend, and provides a flexible, scalable, manageable and efficient frontend architecture mode, so that the team can develop and deploy applications in a modular manner; thereby improving development efficiency, reducing risks, optimizing performance, and supporting team collaboration and independent development. The method includes: obtaining main application information and sub-application information according to project requirements; building an application container according to the main application information through a micro-frontend construction tool built by using a preset framework, registering and identifying multiple sub-applications corresponding to the sub-application information through a preset sub-application registrar according to the sub-application information; dynamically loading and coordinating the communication and interaction between the sub-applications according to the registration identification information of the application container and the sub-application to form a micro-frontend architecture; wherein the sub-applications are distributed on multiple different servers, and the call parameters corresponding to the sub-applications are defined by ESM (ECMAScript Modules); the application container remotely loads the Vite plug-in and the call parameters built by the ESM module of the browser, and uses the preset remote entry information to remotely and dynamically load the sub-applications in different servers to provide application services corresponding to the project requirements.

[0010] The embodiment of the present invention also provides a decentralized micro-frontend construction device to implement and solve some of the problems faced by the above frontend, and provides a flexible, scalable, manageable and efficient frontend architecture mode, so that the team can develop and deploy applications in a modular manner; thereby improving development efficiency, reducing risks, optimizing performance, and supporting team collaboration and independent development. The device includes: a parsing module, a definition module and a calling module; the parsing module is used to parse and obtain main application information and sub-application information according to project requirements; the definition module is used to build an application container according to the main application information through a micro-frontend construction tool built using a preset framework, and register multiple sub-applications corresponding to the sub-application information through a preset sub-application registrar according to the sub-application information; the calling module is used to dynamically load and coordinate the communication and interaction between the sub-applications according to the registration identification information of the application container and the sub-application to form a micro-frontend architecture; wherein the sub-applications are distributed on multiple different servers, and the calling parameters corresponding to the sub-applications are defined by ESM; the application container uses the remote loading Vite plug-in and the calling parameters built by the ESM module of the browser, and uses the preset remote entry information to remotely and dynamically load the sub-applications in different servers to provide application services corresponding to the project requirements.

[0011] An embodiment of the present invention also provides a computer device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the above-mentioned decentralized micro-frontend construction method when executing the computer program.

[0012] An embodiment of the present invention also provides a computer-readable storage medium, which stores a computer program. When the computer program is executed by a processor, it implements the above-mentioned decentralized micro-frontend construction method.

[0013] An embodiment of the present invention also provides a computer program product, which includes a computer program, and when the computer program is executed by a processor, it implements the above-mentioned decentralized micro-front-end construction method.

[0014] The decentralized micro-frontend construction method and device provided by the embodiment of the present invention enable the team to develop and deploy applications in a modular manner, thereby improving development efficiency, reducing risks, optimizing performance, and supporting team collaboration and independent development; and at the same time, it has the following advantages: (1) Modular development: allows the front-end application to be split into independent modules, each of which can be independently developed, tested and deployed. This modular development method improves the team's collaborative efficiency, enables the team to better divide the work and cooperate, and also reduces the complexity of code conflicts and merges. (2) Decentralization: The front-end application is decentralized. Different modules can be distributed in different code bases and developed and maintained by different teams. In this way, each team can focus on the module they are responsible for without having to worry about other parts of the entire application. This decentralized architecture can improve development efficiency and flexibility. (3) Dynamic loading: supports dynamic loading of modules, which means that modules can be loaded through the network at runtime instead of being statically packaged together at build time. This dynamic loading feature can optimize the loading performance of the application, so that users only need to load necessary modules when accessing the application, without having to load the entire application. (4) Shared dependencies: allows different modules to share dependencies. This means that the same dependency library only needs to be loaded once and shared between different modules. This can reduce the overall size of the application and improve runtime performance and efficiency. (5) Independent deployment and updates: Since each module is independent, the team can independently deploy and update its own modules without affecting the entire application. This independent deployment and update method provides a more flexible release strategy and reduces the overall risk of the application. (6) Scalability: The modular architecture makes the application more scalable. Modules can be added, replaced, or deleted as needed without having to refactor the entire application. This allows the application to be quickly iterated and evolved according to demand. BRIEF DESCRIPTION OF THE DRAWINGS

[0015] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the prior art descriptions. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work. In the drawings:

[0016] Figure 1 It is a schematic diagram of the principle of micro front-end architecture in the prior art;

[0017] Figure 2 It is a flowchart of a decentralized micro-frontend construction method in an embodiment of the present invention;

[0018] Figure 3 This is a schematic diagram of the decentralized micro-frontend architecture principle in an embodiment of the present invention;

[0019] Figure 4 This is a schematic diagram of the sub-application registration process in an embodiment of the present invention;

[0020] Figure 5 A schematic diagram of the physical structure of an electronic device provided by an embodiment of the present invention;

[0021] Figure 6 A schematic diagram of the structure of a decentralized micro-frontend construction device provided in an embodiment of the present invention. DETAILED DESCRIPTION

[0022] To make the purpose, technical solution and advantages of the embodiments of the present invention more clear, the embodiments of the present invention are further described in detail below in conjunction with the accompanying drawings. Here, the exemplary embodiments of the present invention and their descriptions are used to explain the present invention, but are not intended to limit the present invention.

[0023] The information collected in the technical solution of this application is information and data authorized by the user or fully authorized by all parties, and the collection, storage, use, processing, transmission, provision, disclosure and application of relevant data comply with the relevant laws, regulations and standards of relevant countries and regions, take necessary confidentiality measures, do not violate public order and good morals, and provide corresponding operation entrances for users to choose to authorize or refuse.

[0024] The acquisition, transmission, storage, use, and processing of data in the technical solution of this application comply with the relevant provisions of national laws and regulations.

[0025] It should be noted that in the embodiments of the present application, certain software, components, models and other existing solutions in the industry may be mentioned, and they should be regarded as exemplary. Their purpose is only to illustrate the feasibility of implementing the technical solution of the present application, but it does not mean that the applicant has or will necessarily use the solution.

[0026] Please refer to Figure 2 As shown, an embodiment of the present application provides a decentralized micro-frontend construction method, the method comprising:

[0027] S201 obtains main application information and sub-application information according to project requirements analysis;

[0028] S202 builds an application container according to the main application information by using a micro-frontend building tool built by using a preset framework, and registers and identifies multiple sub-applications corresponding to the sub-application information by using a preset sub-application registrar according to the sub-application information;

[0029] S203 dynamically loads and coordinates the communication and interaction between the sub-applications according to the registration identification information of the application container and the sub-application to form a micro-frontend architecture;

[0030] Among them, the sub-applications are distributed on multiple different servers, and the calling parameters corresponding to the sub-applications are defined through ESM; the application container remotely loads the Vite plug-in and the calling parameters built by the ESM module of the browser, and uses the preset remote entry information to remotely and dynamically load the sub-applications in different servers to provide application services corresponding to the project requirements.

[0031] In the above embodiments, micro-frontend is an architectural design that splits the front-end application into multiple independent modules, each of which can be independently developed, deployed and upgraded; ESM is a modular specification natively supported in the browser. The decentralized micro-frontend construction method provided by this application solves the problems of module remote loading efficiency, shared modules and public dependency management that exist in the current mainstream micro-frontend solutions through the above embodiments; and, based on the modern browser standard ESM module management standard solution, it does not force reliance on the Webpack5 framework, and the problem of inability to achieve unified state management between sub-applications.

[0032] like Figure 3 As shown, the decentralized micro-frontend construction method provided in this application mainly relies on four core modules:

[0033] 1. Micro front-end construction tool (MicroBuilder): mainly realizes the generation and operation of the main application and sub-application of the project, development and compilation, management and packaging, production and maintenance, etc.

[0034] 2. MicroAppRegister: mainly implements the sub-application register: registers the routing of the micro-front-end sub-application, the modules that need to be exported, the modules that need to be imported, and the modules that need to be shared;

[0035] 3. Application module sharing and loading (MicroAppLoader): mainly implements the sharing and remote loading of modules based on the ESM mode natively supported by modern browsers; and implements the Vite remote application module loading plug-in based on the virtual module function of the Rollup tool;

[0036] 4. Status communication between application modules, MicroEventEmitter: By implementing the event bus and publish-subscribe mechanism, event communication and status synchronization between module applications are realized.

[0037] The specific implementation principle of each module will be described in detail in subsequent embodiments and will not be described in detail here.

[0038] In an embodiment of the present application, building an application container according to the main application information by using a micro-frontend building tool built using a preset framework includes:

[0039] An application container is built according to the main application information through a micro-frontend building tool compiled by React, Vue or Angular.

[0040] Specifically, in the above embodiments, the main purpose is to build a container, and use the container to carry the functional modules corresponding to each sub-application. This step is the dynamic container and main application construction link; its specific implementation method in actual work can be as follows: Build a main application as a container to load and manage modules of other applications. The main application can be built using frameworks such as React, Vue or Angular, and integrate the relevant functions of module ESM loading; it should be noted that the main application needs to have the ability to dynamically load and coordinate the communication and interaction between different applications; its implementation method will be supplemented in subsequent embodiments. Of course, relevant technical personnel in this field can also use other existing methods to implement the communication and interaction capabilities, and this application does not impose further restrictions on this.

[0041] In one embodiment of the present application, defining the call parameters corresponding to the sub-application through ESM also includes: building a maintenance tool through Rollup, and assisting the server to complete the export and import processing of the sub-application through the maintenance tool.

[0042] Specifically, in actual work, the ES module (ESM) syntax can be used to allow each sub-application, i.e., functional module, to define its own interface and export functions. In this process, the Rollup build tool can be used to support and ensure that the export and import of the module work properly.

[0043] Different from the Module Federation method of Webpack, in one embodiment of the present application, the remote loading Vite plug-in and the calling parameters constructed by the ESM module of the browser, and the remote dynamic loading of sub-applications in different servers using the preset remote entry information include: remote dynamic loading of sub-applications in different servers through the virtual module of the Rollup tool according to the remote loading Vite plug-in and the calling parameters constructed by the ESM module of the browser. Furthermore, remote dynamic loading of sub-applications in different servers using the preset remote entry information includes: identifying the calling parameters of the sub-application through the remote loading Vite plug-in, when the calling parameters contain a preset identifier, replacing the actual calling address in the calling parameters through the remote entry information; remote dynamic loading of sub-applications in different servers through the virtual module of the Rollup tool according to the replaced calling parameters.

[0044] Specifically, in the above embodiment, a Vite plug-in with a remote module loading function is implemented mainly based on the ESM module loading solution of modern browser standards. Remote loading is achieved by configuring the remote address and entry point of the module, so that different applications can dynamically load modules from remote servers. In the remote dynamic loading process, the resolveId method can be used to resolve the ID of the function module; when the Vite plug-in detects that the function module ID starts with a specific identifier, such as remote-module:, it will replace the ID with the actual remote module address; in this way, the sub-applications in different servers can be remotely and dynamically loaded through the virtual module of the Rollup tool according to the replaced call parameters.

[0045] Please refer to Figure 4 As shown, in one embodiment of the present application, registering and identifying multiple sub-applications corresponding to the sub-application information through a preset sub-application register according to the sub-application information includes:

[0046] S401 obtains application relationships of multiple sub-applications according to the sub-application information analysis;

[0047] S402 registers and identifies multiple sub-applications through a preset sub-application register according to the application relationship;

[0048] The application relationship includes the export information, import information and sharing information of the sub-application; the registration identifier includes the routing information of the sub-application registration.

[0049] Furthermore, the sub-application registrar includes a registration table, and the registration table is used to register the routing path of each sub-application, the export module information of the sub-application, the import module information of the sub-application and the shared module information of the sub-application.

[0050] Specifically, in actual work, MicroAppRegister is the main component of the registrar, and its function is to maintain the application apps array for storing registered sub-application information and register through the register method.

[0051] The registration method accepts four parameters: route represents the routing path of the sub-application, exports represents the modules exported by the sub-application, imports represents the modules that the sub-application needs to import, and shared represents the modules that the sub-application needs to share. When the register method is called to register an application, the corresponding information is stored in the apps array.

[0052] In an embodiment of the present application, the method further includes: isolating application conflicts between the sub-applications through sandboxes.

[0053] Specifically, in actual work, when considering communication between sub-applications, it is necessary to consider the cross-impact issues between sub-applications; for this purpose, this application can implement the communication mechanism between functional modules through message passing, event system or shared state management library; at the same time, ensure the sandbox isolation between modules to prevent conflicts and impacts between modules. Since sandbox isolation technology is a common technology in the industry, it will not be explained one by one here.

[0054] In the above embodiment, the communication mechanism of the functional module may adopt an event publishing and subscription mechanism. In one embodiment of the present application, the method may also include: the main application and the sub-application use an event manager to execute event publishing and subscription events between the main application and multiple sub-applications to complete the communication between the main application and multiple sub-applications.

[0055] Specifically, the micro-event publisher MicroEventEmitter in this application is used as an event manager to implement the functions of publishing and subscribing. MicroAppRegister is the main part of the register, which maintains an apps array for storing registered sub-application information and registers through the register method. Whenever a new application is registered, the app registered (appRegistered) event is published through the event publisher (eventEmitter), and the registration information is passed to the subscriber as a parameter. When in use, an application can be registered by calling the registration method, and the registration events of the application can be subscribed by calling the registration subscription method. Furthermore, the sub-application and the main application can communicate using the event bus, where the event bus is a central event manager that allows different applications to publish and subscribe to events; when certain events occur in the sub-application, it can publish events, and the main application can subscribe and respond accordingly.

[0056] In an embodiment of the present application, the method further includes: the main application and the sub-application complete state sharing and synchronization through a shared global state management library.

[0057] Specifically, shared modules can be configured in the micro-frontend building tool, and the shared modules can be used to reduce duplicate code and provide consistent functions and behaviors. At the same time, version management needs to be implemented to ensure that different applications use compatible module versions. Among them, the sub-application and the main application can share a global state management library (such as Redux, Vuex, etc.) to achieve state sharing and synchronization. The sub-application can notify the main application by updating the global state, and the main application can listen to the changes in the state and respond accordingly. This approach needs to ensure the consistency and correctness of global state management.

[0058] Furthermore, in an embodiment of the present application, the method further comprises: identifying the registration identifiers of multiple sub-applications through a package management tool, and managing the versions and dependencies of each sub-application according to the registration identifiers and the version information of each sub-application. Specifically, in this embodiment, rollup or similar package management tools can be used to manage the versions and dependencies of shared modules.

[0059] Please refer to Figure 6 As shown, in one embodiment of the present application, a decentralized micro-frontend construction device is also provided. As described in the following embodiment, the device includes a parsing module 601, a definition module 602 and a calling module 603;

[0060] The parsing module 601 is used to parse and obtain the main application information and sub-application information according to project requirements; the definition module 602 is used to build an application container according to the main application information through a micro-frontend construction tool built using a preset framework, and register and identify multiple sub-applications corresponding to the sub-application information through a preset sub-application registrar according to the sub-application information; the calling module 603 is used to dynamically load and coordinate the communication and interaction between the sub-applications according to the registration identification information of the application container and the sub-application to form a micro-frontend architecture; wherein the sub-applications are distributed on multiple different servers, and the calling parameters corresponding to the sub-applications are defined through ESM; the application container remotely loads the Vite plug-in and the calling parameters built by the ESM module of the browser, and uses the preset remote entry information to remotely and dynamically load sub-applications in different servers to provide application services corresponding to the project requirements.

[0061] Since the principle of solving the problem by the device is similar to the decentralized micro-frontend construction method, the implementation of the device can refer to the implementation of the decentralized micro-frontend construction method, and the repeated parts will not be repeated.

[0062] It should be noted that the decentralized micro-frontend construction method provided in the embodiment of the present invention can be used in the financial field, and can also be used in any technical field other than the financial field. The embodiment of the present invention does not limit the application field of the virtual reality-based bank training system and its training method.

[0063] Figure 5 A schematic diagram of the physical structure of an electronic device provided by an embodiment of the present invention, such as Figure 5 As shown, the electronic device includes: a processor (processor) 501, a memory (memory) 502 and a bus 503.

[0064] The processor 501 and the memory 502 communicate with each other via a bus 503 .

[0065] The processor 501 is used to call the program instructions in the memory 502 to execute the methods provided by the above method embodiments.

[0066] An embodiment of the present invention also provides a computer-readable storage medium, which stores a computer program. When the computer program is executed by a processor, it implements the above-mentioned decentralized micro-frontend construction method.

[0067] An embodiment of the present invention also provides a computer program product, which includes a computer program, and when the computer program is executed by a processor, it implements the above-mentioned decentralized micro-front-end construction method.

[0068] Those skilled in the art will appreciate that embodiments of the present invention may be provided as methods, systems, or computer program products. Therefore, the present invention may take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Moreover, the present invention may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0069] The present invention is described with reference to flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to embodiments of the present invention. It should be understood that each process and / or block in the flowchart and / or block diagram, as well as the combination of processes and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0070] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0071] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process. Figure 1 A process or multiple processes and / or boxes Figure 1 A step that specifies a function in one or more boxes.

[0072] The specific embodiments described above further illustrate the objectives, technical solutions and beneficial effects of the present invention in detail. It should be understood that the above description is only a specific embodiment of the present invention and is not intended to limit the scope of protection of the present invention. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the present invention should be included in the scope of protection of the present invention.

Claims

1. A decentralized micro-frontend construction method, It is characterized in that The method comprises: Obtain main application information and sub-application information based on project requirements analysis; Building an application container according to the main application information by using a micro-frontend building tool built by using a preset framework, and registering and identifying multiple sub-applications corresponding to the sub-application information by using a preset sub-application registrar according to the sub-application information; Dynamically load and coordinate the communication and interaction between the sub-applications according to the registration identification information of the application container and the sub-application to form a micro-frontend architecture; Among them, the sub-applications are distributed on multiple different servers, and the calling parameters corresponding to the sub-applications are defined through ESM; the application container remotely loads the Vite plug-in and the calling parameters built by the ESM module of the browser, and uses the preset remote entry information to remotely and dynamically load the sub-applications in different servers to provide application services corresponding to the project requirements.

2. According to the decentralized micro-frontend construction method of claim 1, It is characterized in that Building an application container according to the main application information by using a micro-frontend building tool built with a preset framework includes: An application container is built according to the main application information through a micro-frontend building tool compiled by React, Vue or Angular.

3. According to the decentralized micro-frontend construction method of claim 1, It is characterized in that The calling parameters corresponding to the sub-application defined by ESM also include: A maintenance tool is constructed through Rollup, and the maintenance tool assists the server in completing the export and import processing of the sub-application.

4. According to the decentralized micro-frontend construction method of claim 1, It is characterized in that The remote loading Vite plug-in and the calling parameters built by the browser's ESM module, and the remote dynamic loading of sub-applications in different servers using preset remote entry information include: According to the remote loading Vite plug-in built by the ESM module of the browser and the calling parameters, the sub-applications in different servers are remotely and dynamically loaded through the virtual module of the Rollup tool.

5. According to the decentralized micro-frontend construction method of claim 4, It is characterized in that Using the preset remote entry information to dynamically load sub-applications in different servers remotely includes: Identify the calling parameters of the sub-application by remotely loading the Vite plug-in, and when the calling parameters contain a preset identifier, replace the actual calling address in the calling parameters with the remote entry information; According to the replaced calling parameters, the sub-applications in different servers are dynamically loaded remotely through the virtual module of the Rollup tool.

6. The decentralized micro-frontend construction method according to claim 1, It is characterized in that Registering and identifying multiple sub-applications corresponding to the sub-application information through a preset sub-application register according to the sub-application information includes: Obtaining application relationships among the plurality of sub-applications according to the sub-application information analysis; Registering and identifying the multiple sub-applications through a preset sub-application register according to the application relationship; The application relationship includes the export information, import information and sharing information of the sub-application; the registration identifier includes the routing information of the sub-application registration.

7. The decentralized micro-frontend construction method according to claim 6, It is characterized in that The sub-application register includes a registration table, and the registration table is used to register the routing path of each sub-application, the export module information of the sub-application, the import module information of the sub-application and the shared module information of the sub-application.

8. The decentralized micro-frontend construction method according to claim 6, It is characterized in that The method further comprises: The sub-applications are isolated from each other through sandboxes to avoid application conflicts.

9. The decentralized micro-frontend construction method according to claim 1, It is characterized in that The method further comprises: The main application and the sub-application utilize an event manager to execute event publishing and event subscription between the main application and the plurality of sub-applications, so as to complete the communication between the main application and the plurality of sub-applications.

10. The decentralized micro-frontend construction method according to claim 1, It is characterized in that The method further comprises: The main application and the sub-application complete state sharing and synchronization through a shared global state management library.

11. The decentralized micro-frontend construction method according to claim 1, It is characterized in that The method further comprises: The registration identifiers of the plurality of sub-applications are identified by a package management tool, and the versions and dependencies of the sub-applications are managed according to the registration identifiers and the version information of the sub-applications.

12. A decentralized micro-frontend construction device, It is characterized in that Includes parsing module, definition module and calling module; The parsing module is used to parse and obtain the main application information and sub-application information according to project requirements; The definition module is used to build an application container according to the main application information by using a micro-frontend building tool built by using a preset framework, and to register and identify multiple sub-applications corresponding to the sub-application information by using a preset sub-application registrar according to the sub-application information; The calling module is used to dynamically load and coordinate the communication and interaction between the sub-applications according to the registration identification information of the application container and the sub-application to form a micro-frontend architecture; Among them, the sub-applications are distributed on multiple different servers, and the calling parameters corresponding to the sub-applications are defined through ESM; the application container remotely loads the Vite plug-in and the calling parameters built by the ESM module of the browser, and uses the preset remote entry information to remotely and dynamically load the sub-applications in different servers to provide application services corresponding to the project requirements.

13. A computer device comprising a memory, a processor and a computer program stored in the memory and executable on the processor, It is characterized in that When the processor executes the computer program, the method according to any one of claims 1 to 11 is implemented.

14. A computer-readable storage medium, It is characterized in that The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the method according to any one of claims 1 to 11 is implemented.

15. A computer program product, It is characterized in that The computer program product comprises a computer program, and when the computer program is executed by a processor, the method according to any one of claims 1 to 11 is implemented.

Images