Micro-front-end application operation method and device, equipment, storage medium and program product

Abstract

The invention provides a micro-front-end application operation method which can be applied to the technical field of distributed and software development. The micro-front-end application operation method comprises the steps that a micro-front-end application is divided into a main application and a plurality of sub-applications, the sub-applications are distributed in a plurality of different servers, and at least one sub-application comprises one or more sub-pages; routing rule configuration is carried out on the sub-application in the main application, and the routing rule configuration comprises the step of transforming a routing rule of the sub-application so as to obtain a transformed sub-application route; and in response to the route change request, the main application executes a route cooperation operation based on the transformed sub-application route, and the route cooperation operation is used for executing a sub-application loading or switching operation. The invention further provides a micro-front-end application operation device and equipment, a storage medium and a program product.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of distributed and software development, and more particularly to a micro-frontend application operation method, device, equipment, storage medium and program product. BACKGROUND

[0002] With the acceleration of the digital transformation of the financial industry, businesses such as high-frequency trading and real-time risk control have higher requirements for system agility and user experience. In this context, the limitations of traditional front-end architecture are increasingly evident: single-page applications, while enabling smooth interaction through asynchronous loading, often face high code coupling, low construction efficiency, and difficulties in multi-team collaboration when dealing with complex financial business logic; while multi-page applications support independent deployment of modules and coexistence of multiple technology stacks, but the resource duplication and communication isolation caused by page jumps make it difficult to meet the real-time needs of cross-business data linkage. These limitations in front-end dynamic loading capabilities, cross-technology stack collaboration, and development and operation efficiency make it difficult for existing front-end solutions to meet the business needs of the financial industry. Therefore, how to achieve efficient and accurate development of front-end applications has become a technical problem to be solved. SUMMARY

[0003] In view of the above problems, the present application provides a micro-frontend application operation method, device, equipment, storage medium and program product for improving the quality and efficiency of front-end development.

[0004] According to a first aspect of the present application, a micro-frontend application operation method is provided, comprising: dividing a micro-frontend application into a main application and a plurality of sub-applications, wherein the plurality of sub-applications are distributed on a plurality of different servers, and at least one sub-application includes one or more sub-pages; configuring routing rules for the sub-applications in the main application, wherein the routing rule configuration includes modifying the routing rules for the sub-applications to obtain modified sub-application routes; and in response to a routing change request, the main application performs a routing coordination operation based on the modified sub-application routes, wherein the routing coordination operation is used to perform sub-application loading or switching operations.

[0005] According to an embodiment of the present application, before dividing the micro-frontend application into a main application and at least one sub-application, the method further comprises: establishing a first isolation mechanism in the micro-frontend application, the first isolation mechanism creating an independent global variable environment for the micro-frontend application; and establishing a second isolation mechanism in the micro-frontend application, the second isolation mechanism being used to isolate style rules and static resource access between micro-frontend applications.

[0006] According to an embodiment of the present application, before the micro-frontend application is divided into the main application and the plurality of sub-applications, the method further comprises: in a development environment, building and packaging the micro-frontend application by using a first build tool, wherein the first build tool is used to realize fast compilation and real-time update during development; in a production environment, building and packaging the micro-frontend application by using a second build tool, wherein the second build tool is used to realize optimization processing and volume compression of the code; and identifying a current running environment, and switching the first build tool and the second build tool according to an identification result.

[0007] According to an embodiment of the present application, the route rule of the sub-application is modified to obtain a modified sub-application route, which comprises: obtaining an original route address of the sub-application; and setting route prefix information for the sub-application in the route configuration of the main application, and splicing and combining the route prefix information to the original route address to obtain the modified sub-application route, wherein the route prefix information is used to uniquely identify the sub-application in the main application.

[0008] According to an embodiment of the present application, in response to the route change request, the main application performs a route coordination operation based on the modified sub-application route, which comprises: in response to the route change request, the main application generates a route event notification, wherein the route event notification comprises route control data; the main application matches the changed route with the modified sub-application route to determine a target sub-application that needs to be notified; the main application sends the route event notification to the target sub-application through a cross-application communication channel; the sub-application captures the route event notification through a preset listening function; and the sub-application performs route change path judgment based on the route control data in the route event notification, wherein the route change path judgment is used to determine a page or a sub-application to be switched.

[0009] According to an embodiment of the present application, the sub-application performs route change path judgment based on the route control data in the route event notification, which comprises: the sub-application analyzes the route control data in the route event notification to obtain an analysis result; in response to the analysis result being a path change within the current sub-application, a switching operation of a page within the sub-application is performed; and in response to the analysis result being a path change across sub-applications, a switching operation of a page between applications is performed.

[0010] According to an embodiment of the present application, after the micro-frontend application is divided into the main application and the plurality of sub-applications, the method further comprises: maintaining a global dependency version control table in a configuration file of the main application, wherein the global dependency version control table is used to uniformly manage application dependency versions; declaring shared library version information required by the sub-application in a configuration file of the sub-application; in response to the main application loading the sub-application, the main application and the sub-application perform version negotiation through a preset version negotiation protocol; and based on a version negotiation result, performing a version selection operation to determine a final dependency version.

[0011] The second aspect of the present application provides a micro-frontend application operation device, comprising: an application division module, configured to divide a micro-frontend application into a main application and a plurality of sub-applications, wherein the plurality of sub-applications are distributed in a plurality of different servers, and at least one sub-application comprises one or more sub-pages; a routing configuration module, configured to configure routing rules for the sub-applications in the main application, wherein the routing rule configuration comprises modifying the routing rules of the sub-applications to obtain modified sub-application routes; and a routing coordination module, configured to perform a routing coordination operation based on the modified sub-application routes in response to a routing change request, wherein the routing coordination operation is used to perform a sub-application loading or switching operation.

[0012] The third aspect of the present application provides an electronic device, comprising: one or more processors; a memory for storing one or more computer programs, wherein the one or more processors execute the one or more computer programs to implement the steps of the method.

[0013] The fourth aspect of the present application further provides a computer-readable storage medium having a computer program or instructions stored thereon, wherein the computer program or instructions are executed by a processor to implement the steps of the method.

[0014] The fifth aspect of the present application further provides a computer program product comprising a computer program or instructions, wherein the computer program or instructions are executed by a processor to implement the steps of the method. BRIEF DESCRIPTION OF DRAWINGS

[0015] The above and other objects, features and advantages of the present application will become more apparent from the following description of embodiments of the present application, taken in conjunction with the accompanying drawings, in which:

[0016] Figure 1 An application scenario diagram of a micro-frontend application operation method, device, electronic device, storage medium and program product according to an embodiment of the present application is schematically shown;

[0017] Figure 2 A flowchart of a micro-frontend application operation method according to an embodiment of the present application is schematically shown;

[0018] Figure 3 An application division schematic diagram of a micro-frontend application operation method according to an embodiment of the present application is schematically shown;

[0019] Figure 4 A flowchart of configuring routing rules for sub-applications in a method according to an embodiment of the present application is schematically shown;

[0020] Figure 5 A flowchart of performing routing coordination by a main application and sub-applications in a method according to an embodiment of the present application is schematically shown;

[0021] Figure 6 A flowchart schematically illustrating a route change path determination in a method according to an embodiment of the present application is shown;

[0022] Figure 7 A flowchart schematically illustrating a dual isolation mechanism setting in a method according to an embodiment of the present application is shown;

[0023] Figure 8 A flowchart schematically illustrating a version negotiation in a method according to an embodiment of the present application is shown;

[0024] Figure 9 A flowchart schematically illustrating a dual build tool setting in a method according to an embodiment of the present application is shown;

[0025] Figure 10 A flowchart schematically illustrating an application build according to an embodiment of the present application is shown;

[0026] Figure 11 A flowchart schematically illustrating a workflow of a system corresponding to a micro-frontend application operation method according to an embodiment of the present application is shown;

[0027] Figure 12 A flowchart schematically illustrating an overall route coordination in a method according to an embodiment of the present application is shown;

[0028] Figure 13 A block diagram schematically illustrating a structure of a micro-frontend application operation apparatus according to an embodiment of the present application is shown; and

[0029] Figure 14 A block diagram schematically illustrating an electronic device suitable for implementing a micro-frontend application operation method according to an embodiment of the present application is shown. DETAILED DESCRIPTION

[0030] Hereinafter, embodiments of the present application will be described with reference to the accompanying drawings. It should be understood, however, that the description which follows is merely illustrative and is not intended to limit the scope of the present application. In the following detailed description of embodiments of the present application, numerous specific details are set forth in order to provide a thorough understanding of the present application. However, it will be apparent to one skilled in the art that one or more embodiments of the present application can be practiced without these specific details. In other instances, well-known structures and functions have not been described in detail in order to avoid obscuring aspects of the present application.

[0031] The terminology used herein is for the purpose of describing particular embodiments only and is not intended to be limiting of the present application. As used herein, the term "includes" and tautological expressions thereof, such as "including," "includes," "include," "contains," "containing," and so on, mean the presence of stated features, steps, operations, elements, and / or components but do not preclude the presence or addition of one or more other features, steps, operations, elements, components, and / or groups thereof.

[0032] All terms used herein, including technical and scientific terms, have the meanings as commonly understood by one of ordinary skill in the art unless otherwise defined. It should be noted that the terms used herein should be interpreted as having a meaning that is consistent with the context of the specification, and should not be interpreted in an idealized or overly formal way.

[0033] In the case of using expressions such as "at least one of A, B, and C, etc.", it should generally be interpreted that the meaning of the expression is at least one of A, B, and C, etc. (for example, "a system having at least one of A, B, and C" should include but not be limited to a system having A alone, a system having B alone, a system having C alone, a system having both A and B, a system having both A and C, a system having both B and C, and / or a system having A, B, and C, etc.).

[0034] It should be noted that the micro-frontend application operation method, device, equipment, storage medium and program product determined by the embodiments of the present application can be used in the field of distributed and software development, and can also be used in any field other than the field of distributed and software development, such as the field of financial technology. The application field of the micro-frontend application operation method, device, equipment, storage medium and program product of the present application is not limited.

[0035] The embodiments of the present application provide a micro-frontend application operation method, which comprises: dividing a micro-frontend application into a main application and a plurality of sub-applications, wherein the plurality of sub-applications are distributed in a plurality of different servers, and at least one of the sub-applications comprises one or more sub-pages; configuring a routing rule for the sub-application in the main application, wherein the routing rule configuration comprises modifying the routing rule of the sub-application to obtain a modified sub-application routing; and in response to a routing change request, the main application performs a routing coordination operation based on the modified sub-application routing, wherein the routing coordination operation is used to perform a sub-application loading or switching operation. Through the micro-frontend application operation method, first, at the application architecture level, by dividing the micro-frontend application into a main application and a sub-application, not only the decoupling between business modules is realized, but also each sub-application can maintain technology stack independence, support team parallel development, independent testing and flexible deployment. Secondly, in terms of routing management, by modifying the routing of the sub-application, the path conflict problem between the main application and the sub-application can be effectively avoided. At the same time, through the routing coordination mechanism, the target page can be accurately matched and rendered, realizing seamless switching between the main application and the sub-application. Therefore, the embodiments of the present application can realize efficient and accurate development of the front-end application, and improve the development efficiency and collaboration.

[0036] Figure 1 The application scenario diagram of the micro-frontend application operation method, device, electronic equipment, storage medium and program product according to the embodiments of the present application is schematically shown.

[0037] AsFigure 1 As shown, the application scenario 100 according to this embodiment can include terminal devices 101, 102, 103, a network 104, and a server 105. The network 104 is a medium for providing a communication link between the first terminal device 101, the second terminal device 102, the third terminal device 103, and the server 105. The network 104 can include various connection types, such as wired, wireless communication links, or fiber optic cables, and the like.

[0038] The user can use the first terminal device 101, the second terminal device 102, and the third terminal device 103 to interact with the server 105 through the network 104 to receive or send messages, and the like. Various communication client applications can be installed on the first terminal device 101, the second terminal device 102, and the third terminal device 103, such as shopping applications, web browser applications, search applications, instant messaging tools, email clients, social platform software, and the like (only as examples).

[0039] The first terminal device 101, the second terminal device 102, and the third terminal device 103 can be various electronic devices with display screens and support for web browsing, including but not limited to smartphones, tablet computers, laptop computers, desktop computers, and the like.

[0040] The server 105 can be a server that provides various services, such as a background management server that provides support for websites browsed by the user using the first terminal device 101, the second terminal device 102, and the third terminal device 103 (only as an example). The background management server can analyze and process received user requests and the like, and feed back the processing results (such as web pages, information, or data obtained or generated according to user requests) to the terminal devices.

[0041] It should be noted that the micro front-end application operation method provided in the embodiments of the present application can generally be executed by the first terminal device 101, the second terminal device 102, and the third terminal device 103. Correspondingly, the micro front-end application operation apparatus provided in the embodiments of the present application can be generally arranged in the first terminal device 101, the second terminal device 102, and the third terminal device 103. The micro front-end application operation method provided in the embodiments of the present application can also be executed by a display-enabled apparatus different from the first terminal device 101, the second terminal device 102, and the third terminal device 103 and capable of communicating with the first terminal device 101, the second terminal device 102, the third terminal device 103, and / or the server 105. Correspondingly, the micro front-end application operation apparatus provided in the embodiments of the present application can also be arranged in a display-enabled apparatus different from the first terminal device 101, the second terminal device 102, and the third terminal device 103 and capable of communicating with the first terminal device 101, the second terminal device 102, the third terminal device 103, and / or the server 105.

[0042] It should be understood that Figure 1 the number of terminal devices, networks, and servers in the above description is merely illustrative. Any number of terminal devices, networks, and servers can be provided according to implementation needs.

[0043] The micro front-end application operation method according to the embodiments of the present application will be described in detail below based on the scenario described above. Figure 1 Figures 2-12 The micro front-end application operation method according to the embodiments of the present application will be described in detail below based on the scenario described above.

[0044] Figure 2 A flowchart of the micro front-end application operation method according to the embodiments of the present application is schematically shown.

[0045] As shown in Figure 2 , the method 200 according to the embodiments includes operations S210-S230.

[0046] In operation S210, the micro front-end application is divided into a main application and a plurality of sub-applications.

[0047] Exemplarily, the micro front-end framework can represent a core tool for implementing a micro front-end architecture, aiming to split a large and complex Web application into a plurality of small and independent sub-applications, and help the main application manage the plurality of sub-applications. Each sub-application can use different technology stacks and can be independently developed, tested, deployed, and maintained by different developers. Through the micro front-end framework, development efficiency can be improved and dependence between different developers can be reduced.

[0048] In the embodiments of the present application, the micro front-end application is divided into a main application and a plurality of sub-applications according to the micro front-end framework based on the front-end description file, and at least one sub-application includes one or more sub-pages.​Figure 3 An application division schematic diagram of a micro-frontend application operation method according to an embodiment of the present application is shown schematically, for example, an application can be divided into application A, application B, and application C. Application A can be taken as an example of a main application, and the remaining applications can be taken as examples of sub-applications. The main application and the sub-applications can share applications, pages, components, and shared libraries. The main application and / or the plurality of sub-applications can be distributed on a plurality of different servers, that is, application A, application B, and application C can be deployed on different servers. It should be noted that the number and deployment locations of the sub-applications can be determined according to actual needs, and the present application does not limit this.

[0049] In operation S220, a routing rule configuration is performed on the sub-application in the main application.

[0050] The main application and the sub-application each have an independent configuration file, which is used to define and describe key information of the application. The configuration file can include, but is not limited to, the following important information: application name, exposed module, shared dependency, remote entry address, runtime configuration, and key parameters. These configurations not only ensure that the main application can correctly load and integrate the sub-application, but also enable efficient sharing of resources and dependency management, thereby providing a flexible modular solution for the micro-frontend architecture.

[0051] In an embodiment of the present application, the main application dynamically registers and manages a plurality of sub-applications by parsing the configuration file. The key information of each sub-application can be explicitly declared in the configuration file of the main application, including but not limited to: a unique identification name of the sub-application, and a path of an entry file of a remote module. According to the registration information, a routing rule configuration can be performed on the sub-application in the main application, wherein the routing rule configuration includes modifying the routing rule of the sub-application to obtain a modified sub-application route, which will be described below in conjunction with the accompanying drawings. Figure 4 The operation S220 is described in detail. Through this declarative configuration mode of the configuration file, the main application can intelligently load, initialize, and coordinate a plurality of sub-applications at runtime, thereby achieving flexible deployment and efficient operation of the micro-frontend architecture.

[0052] In operation S230, in response to a routing change request, the main application performs a routing coordination operation based on the modified sub-application route.

[0053] In an embodiment of the present application, when a routing change is requested, the main application can perform a routing coordination operation based on the modified sub-application route, and the routing coordination operation is used to perform a sub-application loading or switching operation, which will be described below in conjunction with the accompanying drawings. Figure 5 The operation S230 is described in detail.

[0054] In an embodiment of the present application, in one aspect, by dividing the micro-frontend application into a main application and a sub-application, firstly, not only is the decoupling between business modules achieved, but the flexibility and maintainability of the system are also significantly improved, so that the main application can load the sub-application on demand; secondly, fine-grained splitting has significant performance advantages, as the code amount of a single sub-application is smaller, its construction and packaging speed is faster, the output volume is smaller, and the time consumed for publishing production is shorter. In another aspect, by modifying the routing of the sub-application, the path conflict problem between the main application and the sub-application can be effectively avoided, and at the same time, through the routing coordination mechanism, the target page can be accurately matched and rendered, realizing seamless switching between the main application and the sub-application.

[0055] Figure 4 A flowchart of configuring a routing rule for a sub-application in a method according to an embodiment of the present application is schematically shown.

[0056] As Figure 4 shown, this embodiment is one of the embodiments of operation S220, and includes operation S221 to operation S224.

[0057] In operation S221, the original routing address of the sub-application is obtained.

[0058] In an embodiment of the present application, the sub-application can explicitly expose its routing information through a configuration file, and these routing information can be dynamically obtained by the main application and integrated into the overall front-end routing system, ensuring that the routing of the sub-application can be seamlessly embedded into the routing architecture of the main application. Therefore, the main application can obtain the original routing address of the sub-application according to the configuration file of the sub-application.

[0059] In operation S222, routing prefix information is set for the sub-application.

[0060] In an embodiment of the present application, in the routing configuration of the main application, routing prefix information can be set for the sub-application, and the routing prefix information is used to uniquely identify the sub-application in the main application.

[0061] For example, the application identification name of the sub-application can be used as the unique identification, such as the application identification name subApp1 of sub-application 1 and the application identification name subApp2 of sub-application 2.

[0062] In operation S223, the routing prefix information is spliced and combined to the original routing address.

[0063] In operation S224, the modified sub-application routing is obtained.

[0064] In an embodiment of the present application, after the main application obtains the original routing address of the sub-application, the routing prefix information is added in front of the original routing address of the sub-application, and the modified sub-application routing is obtained after splicing and combination.

[0065] In the embodiments of the present application, the main application generates sub-application routing rules through URL (Uniform Resource Locator) prefix by routing modification of the sub-application, so that the routing of the sub-application is distinguished from the routing of the main application, avoiding routing conflicts and ensuring that the routing of the sub-application is compatible and synchronized with the routing of the main application.

[0066] Figure 5 A flowchart of the routing cooperation of the main application and the sub-application in the method according to the embodiments of the present application is schematically shown.

[0067] As Figure 5 shown, the embodiment is one of the embodiments of operation S230, including operation S231 to operation S235.

[0068] In operation S231, the main application generates a routing event notification in response to the routing change request.

[0069] In the embodiments of the present application, the main application takes over the browser routing, and when the browser routing address changes, the main application can capture the routing change information. Exemplarily, the target path, query parameters, hash fragments and other key information can be parsed from the routing change information. The routing event notification generated by the main application includes routing control data, and the main application can construct the routing control data in the routing event notification based on the routing change information. Exemplarily, the routing control data can be encapsulated into a routing event notification object.

[0070] In operation S232, the main application matches the changed routing with the modified sub-application routing to determine the target sub-application that needs to be notified.

[0071] In the embodiments of the present application, the main application can compare the current changed routing with the modified sub-application routing configuration, and through matching, the target sub-application that needs to respond to the routing change can be accurately identified.

[0072] In operation S233, the main application sends the routing event notification to the target sub-application through a cross-application communication channel.

[0073] In the embodiments of the present application, the main application can send the routing event notification to the target sub-application through a cross-application communication channel. In order to realize data transmission between the main application and the sub-application, a reliable cross-application communication channel can be established. Exemplarily, an event notification mechanism can be used as the communication channel, and a loose-coupling interaction mode based on the publish-subscribe mode is realized. This directional communication mechanism not only ensures the efficiency of event transmission, but also avoids unnecessary event notification received by irrelevant sub-applications.

[0074] It should be noted that the cross-application communication channel can be replaced by other manners, and the specific manner can be determined according to actual needs, and the application does not make any limitation here. Alternatively, the cross-application communication channel can be in the form of attribute injection, the main application injects the required data into the mounting container of the sub-application in the form of attribute injection through a configuration object, and the sub-application receives these attributes in the mounting stage, so as to realize the communication between the main application and the sub-application. In addition, the cross-application communication channel can also be in the form of global state sharing.

[0075] In operation S234, the sub-application captures the route event notification through a preset listening function.

[0076] In operation S235, the sub-application performs route change path determination based on the route control data in the route event notification.

[0077] In the embodiment of the application, when the main application mounts the sub-application, the main application passes the route control parameters to the sub-application through a sub-application registration function, the sub-application creates a history route object according to the route type parameter, and calls a route configuration function to create an application route. After the route is successfully created, the sub-application monitors the route change through a listening function.

[0078] The sub-application responds to the route event notification of the main application through a pre-registered listening function. When the sub-application listens to a valid route event, the sub-application can extract the route control data in the route event notification object, perform route change path determination, and determine the page or sub-application to be switched.

[0079] In the embodiment of the application, through the event notification mechanism, the route jump of the main application and the sub-application can be coordinated, and the main application and the sub-application are completely decoupled. The main application only needs to publish a general route event, and does not need to care about which sub-application handles it; the sub-application can manage the internal route by listening to the event, and can handle the internal route logic independently, so that sub-applications with different technology stacks can seamlessly cooperate. In addition, the main application can trigger the cooperative jump of multiple sub-applications through a single event publishing, and has strong flexibility.

[0080] Figure 6 A flowchart of route change path determination in the method according to the embodiment of the application is schematically shown.

[0081] As Figure 6 shown, this embodiment is one of the embodiments of operation S235, and includes operation S2351 to operation S2353.

[0082] In operation S2351, the sub-application parses the route control data in the route event notification to obtain a parsing result.

[0083] In the embodiments of the present application, after the sub-application extracts the route control data in the route event notification object, the data can be deeply parsed according to the predefined rules, and converted into a parsed result in a format recognizable by the internal route system of the sub-application, to ensure that the sub-application can seamlessly collaborate with the main application based on the unified route event.

[0084] In operation S2352, in response to the parsed result being a path change within the current sub-application, a switching operation of the internal page of the sub-application is performed.

[0085] In operation S2353, in response to the parsed result being a path change across sub-applications, a switching operation of the inter-application page is performed.

[0086] In the embodiments of the present application, the sub-application can use a route decision mechanism to handle different route change scenarios. After the route control data is parsed, the sub-application can perform route change path judgment according to the parsed result. If it is judged that the current route change is triggered by the sub-application, the route switching function of the sub-application itself is directly called to perform page jumping and view rendering. If it is judged that the current route change is passed by the main application, the route switching function passed by the main application is executed to perform inter-application page switching.

[0087] In the embodiments of the present application, by modifying the route of the sub-application, a dedicated route address is allocated to each sub-application. The modified route configuration establishes an explicit path mapping relationship. When a user accesses a specific address, the route system can accurately identify and load the corresponding application module. This design realizes route isolation between different applications. The sub-application uses a route decision mechanism to handle different route change scenarios, to ensure that the system can accurately match and load the target page according to different route paths.

[0088] In the embodiments of the present application, before the micro-frontend application is divided into a main application and at least one sub-application, the method can further include setting a double isolation mechanism.

[0089] Figure 7 A flowchart of setting a double isolation mechanism in the method according to the embodiments of the present application is schematically shown.

[0090] As Figure 7 It is shown that the method 700 of the embodiments includes operation S710~operation S720.

[0091] In operation S710, a first isolation mechanism is set, and the first isolation mechanism creates an independent global variable environment for the micro-frontend application.

[0092] In operation S720, a second isolation mechanism is set, and the second isolation mechanism isolates the style rules and static resource access between the micro-frontend applications.

[0093] In the embodiments of the present application, in order to avoid mutual pollution between applications, a double isolation mechanism is set to isolate the style rules and static resource access between micro-frontend applications.

[0094] The first isolation mechanism is a front-end scripting language (JavaScript, abbreviated as JS) sandbox isolation, which isolates global variables through a pseudo-window copy. The pseudo-window is an independent virtual window object used to provide an independent global variable environment for each micro-application. When a child application searches for a variable, it first searches in the local pseudo-window and then searches in the window of the main application. Any change (addition, modification, deletion, etc.) operation is only for the local pseudo-window and does not affect other applications. In this way, the operation on the window object is completely isolated and does not affect the global environment of other micro-applications or the main application, thereby avoiding global variable pollution and JS side effects. The second isolation mechanism is a Cascading Style Sheets (CSS) sandbox isolation, which combines a namespace prefix and a Shadow Document Object Model (Shadow DOM). The namespace prefix can avoid style conflicts by adding a unique prefix to the CSS of the child application. The Shadow DOM can limit the style of the child application to its Shadow DOM, thereby achieving style isolation and avoiding style conflicts with the main application or other child applications. In the embodiments of the present application, the combination of the namespace prefix and the Shadow DOM can achieve more strict CSS isolation. For example, the style of the child application is encapsulated using the Shadow DOM, and the namespace prefix is used in the CSS to further avoid conflicts.

[0095] It should be noted that the isolation method used by the JS sandbox and the CSS sandbox can be determined according to actual needs, which is not limited in the present application.

[0096] In the embodiments of the present application, by setting a double isolation, it is ensured that the execution environment and style of each application in the micro-frontend architecture do not interfere with each other. Each application can independently load and manage its own resources, avoiding resource conflicts. First, the pseudo-window can make each child application have its own independent execution context scope, avoiding global variable pollution. Second, the combination of the namespace prefix and the Shadow DOM ensures the independence of the styles of each child application and the correctness of static resource access.

[0097] In the embodiments of the present application, after dividing the micro-frontend application into a main application and at least one child application, the method can further include version negotiation.

[0098] Figure 8A flowchart of version negotiation in a method according to an embodiment of the application is shown schematically.

[0099] As Figure 8 The method 800 according to this embodiment includes operations S810-S840.

[0100] In operation S810, a global dependency version control table is maintained in a configuration file of the main application.

[0101] In the configuration file of the main application, the global dependency version control table is used to uniformly manage the application dependency versions. Optionally, the global dependency version control table can be implemented by a shared configuration item in the configuration file, which can use object syntax to specify the version range and loading strategy of the dependent shared library, and can implement unified management and compatibility processing of the dependency version. For example, a singleton mode configuration item in the shared configuration item can set the loading times of the dependency in all applications, and when the singleton mode is set to true, the dependency is loaded only once, which can avoid redundant loading of the dependency.

[0102] In operation S820, shared library version information required by the sub-application is declared in a configuration file of the sub-application.

[0103] In the configuration file of the sub-application, the version range of the shared library required by the sub-application can be explicitly declared, which can be explicitly declared by the same configuration item as the main application, i.e., the shared configuration item.

[0104] In operation S830, in response to loading of the sub-application by the main application, the main application and the sub-application perform version negotiation through a preset version negotiation protocol.

[0105] In operation S840, based on the version negotiation result, a version selection operation is performed to determine the final dependency version.

[0106] When the main application loads the sub-application, the two applications perform version negotiation through a preset version negotiation protocol, and then based on the version negotiation result, a version selection operation is performed to determine the final dependency version. Illustratively, if one application specifies the version of dependency A as version 1, and the other application does not specify the version, version 1 is used. If there is a version conflict, a suitable version is selected according to certain rules, such as selecting the highest version among all possible versions.

[0107] In the embodiments of the application, version consistency of the shared dependency is ensured through version negotiation, runtime errors caused by version conflicts are avoided, and redundant loading is avoided, thereby improving performance.

[0108] In the embodiments of the application, before the micro-frontend application is divided into the main application and the at least one sub-application, the method can further include setting a double build tool.

[0109] Figure 9 A flowchart schematically showing setting of a double construction tool in a method according to an embodiment of the present application is shown.

[0110] As Figure 9 It is shown that the method 900 according to the embodiment includes operations S910-S930.

[0111] In operation S910, in a development environment, a first construction tool is used to construct and package the micro-frontend application.

[0112] In the development environment, the code frequently changes and the debugging requirement is high, and therefore a construction tool with a short construction cycle is required. Optionally, the first construction tool is used to realize fast compilation and real-time update during development. Firstly, fast compilation can significantly shorten the construction time, so that the developer can see the result almost immediately after changing the code, greatly shortening the construction waiting time and improving the development efficiency. Secondly, through the real-time update function, only the changed module can be replaced without refreshing the entire page on the premise of maintaining the current state of the application, greatly improving the debugging experience.

[0113] In operation S920, in a production environment, a second construction tool is used to construct and package the micro-frontend application.

[0114] In the production environment, the core goal of the construction tool is to deliver high-performance, high-stability and minimum-size code to meet the running efficiency of the online environment. Optionally, the second construction tool can be a static module packaging tool, which is used to realize optimization processing and size compression of the code. The second construction tool can determine which code is actually used through static analysis, and then delete the unused code from the final generated file, so as to reduce the code size and effectively reduce the final packaging size, avoiding the influence of redundant code on the loading performance; at the same time, the second construction tool can support persistent caching, ensuring that the user only needs to load the changed resources, greatly improving the secondary access speed.

[0115] In operation S930, the current running environment is identified, and the first construction tool and the second construction tool are switched according to the identification result.

[0116] In the embodiments of the present application, the first construction tool and the second construction tool are adapted through an entry file in a double path, and a hook is used to unify the module specification, so as to realize mixed construction compatibility of the first construction tool and the second construction tool. During construction, the current running environment is identified to distinguish between the development and production environments, so as to dynamically select the most suitable construction tool. It should be noted that the first construction tool and the second construction tool can be determined according to actual needs, which are not limited in the present application.

[0117] Figure 10A flowchart of an application build is schematically shown according to an embodiment of the present application.

[0118] As shown, the method 1000 according to the embodiment can include operations S1001-S1012. Figure 10

[0119] At operation S1001, code review is performed. Code review is an important means to improve code quality. Through the cooperation of team members, potential defects and errors can be found and code style can be ensured to be uniform.

[0120] At operation S1002, a code review result judgment is performed. If the code review fails, the build process is stopped. If the code review passes, operation S1003 is performed.

[0121] At operation S1003, dependency analysis is performed. By using a build tool to analyze the dependencies of the application, redundant or conflicting dependency versions are identified and removed, and a structured resource dependency table is finally generated. This dependency processing method not only solves the version conflict problem, but also ensures the simplicity and efficiency of the final product.

[0122] At operation S1004, it is determined whether to perform packaging. If packaging is performed, operation 1006 is performed. Otherwise, operation S1005 is performed.

[0123] At operation S1005, a resource dependency table is output when packaging is not performed. The use of resources can be analyzed and optimized based on the resource dependency table.

[0124] At operation S1006, resource compression is performed. Resource compression can further reduce the file size. Resource compression is an important means to optimize front-end performance. By compressing code and static resources, the file size can be significantly reduced, and the page loading speed can be improved.

[0125] At operation S1007, a hash fingerprint is added. In order to deal with the browser cache problem, the build system usually adds a hash fingerprint to the static resource. After adding the hash fingerprint, when the resource is updated, the browser will automatically load the new resource without using the cached old version.

[0126] At operation S1008, application publishing is performed. The publishing operation is to output the built files to a specified directory. Usually, the built files are placed in the directory specified by the server. After passing the local test, they can be pushed to the online server. At the same time, the resource location table is output during the publishing operation stage, which can be used in template building and secondary building.

[0127] At operation S1009, a resource location table is output. The resource location table can record the packaged resource files and their paths. The resource location table can be used in resource tracking and debugging scenarios. ​

[0128] In operation S1010, it is determined whether secondary build is needed. If yes, operation S1011 is performed, otherwise operation S1012 is performed.

[0129] In operation S1011, secondary build is performed. Secondary build refers to performing the build process again to generate new output files after the first build is completed. This build mode can occur when code or configuration changes or when there is a third-party library.

[0130] In operation S1012, template build is performed. According to the current configuration and file dependency relationship, the final build result is generated. Template build is part of the front-end and back-end collaborative build, which involves embedding the built static resources into the template. For example, using a template engine to embed the built HTML (HyperText Markup Language) file into the template to dynamically generate the final HTML page on the server side.

[0131] In embodiments of the present application, different packaging tools are used for different environment characteristics, which not only enables efficient iteration in the development stage, but also guarantees the stability and high performance of the production environment, thereby comprehensively improving the quality and efficiency of front-end engineering.

[0132] Figure 11 A workflow diagram of a system corresponding to the micro-frontend application operation method according to an embodiment of the present application is schematically shown.

[0133] As shown in Figure 11 The method 1100 according to the embodiment can include operations S1101-S1107.

[0134] In operation S1101, the sub-application exposes the routing configuration file. For example, the sub-application can expose or reference the module through an independent configuration file.

[0135] In operation S1102, the project is running, and the main application obtains the routing configuration file of each sub-application. The main application can obtain the original routing address of each sub-application from the routing configuration file of each sub-application.

[0136] In operation S1103, the main application adds a prefix to each routing configuration file. The prefix can be used to uniquely identify the sub-application and to distinguish different sub-applications.

[0137] In operation S1104, the routing information is combined. The main application combines the routing information by prefixing to generate the routing of the sub-application, i.e., the modified routing.

[0138] In operation S1105, the user clicks to change the routing. For example, the user can click to trigger the change of the routing.

[0139] In operation S1106, the corresponding sub-application entry file is found for routing distribution. Illustratively, the main application matches the corresponding sub-application, and loads its entry file, loads it into the specified container, and performs the mounting operation, enabling the sub-application to normally run and respond to route changes.

[0140] In operation S1107, the new sub-application is loaded or the atomic application is activated. The main application monitors the route changes, and loads the corresponding sub-application for rendering according to the route. Illustratively, the main application loads the new sub-application or activates the loaded sub-application according to the route changes.

[0141] Figure 12 A flowchart of the overall route coordination in the method according to the embodiment of the application is schematically shown.

[0142] As shown in Figure 12 The method 1200 according to the embodiment can include operations S1201-S1215.

[0143] In operation S1201, the type of application is input, where the type of application includes the main application and the sub-application.

[0144] In operation S1202, it is determined whether it is the main application. If it is the main application, operation S1203 is performed, and if it is not the main application, operation S1206 is performed.

[0145] In operation S1203, the main application calls the function of creating route to create a browser route object, takes over the browser route, and responds when the browser route changes.

[0146] In operation S1204, the main application performs inter-application page switching when the browser route changes.

[0147] In operation S1205, when the inter-application page switching is performed and the main application mounts the sub-application, the main application can pass the route control parameters to the sub-application through the sub-application registration function, including the parent switching function. Illustratively, the main application can pass the parent switching function to the sub-application as an attribute, and the sub-application can read the passed value when it is initialized.

[0148] In operation S1206, the sub-application can create a memory route object, i.e., the sub-application can use the memory route, where the created memory route includes the history route object.

[0149] In operation S1207, the sub-application can call the route configuration function to create a route, which is the application route of the sub-application itself.

[0150] In operation S1208, after the route object is established, the sub-application can call the route listening function to listen to the route changes, and when the route event notification is received, operation S1209 is performed.

[0151] In operation S1209, the current routing path changes, that is, the sub-application can determine whether the current path is the next path after receiving the routing event notification, wherein the next path can be transmitted to the sub-application as the routing control data in the routing event notification. If the current path is the next path, operation S1310 is performed, and if the current path is not the next path, operation S1208 is performed to continue listening.

[0152] In operation S1210, the sub-application determines whether there is a parent switching function, that is, whether the path change is generated inside the sub-application. If the path change is not generated inside the sub-application, operation S1213 is performed, and if the path change is generated inside the sub-application, operation S1211 is performed.

[0153] In operation S1211, the switching function of the sub-application is executed to switch the page inside the sub-application.

[0154] In operation S1212, the switching function of the sub-application is executed to switch the page inside the sub-application.

[0155] In operation S1213, the parent switching function is executed to switch the page between applications.

[0156] In operation S1214, the current application is switched in response to the parent switching function, and the application page after switching is determined.

[0157] In operation S1215, the routing switching is ended, and the page after switching is rendered.

[0158] In this embodiment, the main application takes over the browser routing, and the sub-application uses the memory routing. The routing listening and event notification can be synchronized across applications to eliminate path conflicts. The main application generates the sub-application routing rule through the URL prefix, and can dynamically trigger the component-level rendering.

[0159] Based on the above micro-front-end application operation method, an embodiment of the present application further provides a micro-front-end application operation device. The following will be described in detail. Figure 13 The device is described in detail.

[0160] Figure 13 The structure block diagram of the micro-front-end application operation device according to the embodiment of the present application is schematically shown.

[0161] As shown in Figure 13 , the micro-front-end application operation device 1300 of this embodiment can include an application division module 1310, a routing configuration module 1320, a routing coordination module 1330, an isolation module 1340, a dependency version control module 1350, and a build module 1360.

[0162] The application division module 1310 is configured to divide the micro-frontend application into a main application and at least one sub-application, wherein the sub-application is distributed in multiple different servers, and the sub-application includes one or more sub-pages. In an embodiment, the application division module 1310 can be configured to perform the operation S210 described above, and details are not repeated here.

[0163] The route configuration module 1320 is configured to configure a routing rule for the sub-application in the main application, wherein the routing rule configuration includes modification of the routing rule of the sub-application. In an embodiment, the route configuration module 1320 can be configured to perform the operation S220 described above, and details are not repeated here.

[0164] According to an embodiment of the present disclosure, the route configuration module 1320 can include an original route acquisition submodule and a route configuration submodule.

[0165] The original route acquisition submodule is configured to acquire an original route address of the sub-application.

[0166] The route configuration submodule is configured to set route prefix information for the sub-application in the route configuration of the main application, splice the route prefix information to the original route address to obtain a modified sub-application route, wherein the route prefix information is used to uniquely identify the sub-application in the main application.

[0167] The route cooperation module 1330 is configured to, in response to a route change request, perform a route cooperation operation based on the changed route by the main application, wherein the route cooperation operation is used to perform a sub-application loading or switching operation. In an embodiment, the route cooperation module 1330 can be configured to perform the operation S230 described above, and details are not repeated here.

[0168] According to an embodiment of the present disclosure, the route cooperation module 1330 can include a route event notification generation submodule, a sub-application matching submodule, a route event notification sending submodule, and a route change path judgment submodule.

[0169] The route event notification generation submodule is configured to, in response to a route change request, generate a route event notification by the main application, wherein the route event notification includes route control data.

[0170] The sub-application matching submodule is configured to match the changed route with the modified sub-application route by the main application to determine a target sub-application that needs to be notified.

[0171] The route event notification sending submodule is configured to direct the route event notification to the target sub-application by the main application through a cross-application communication channel.

[0172] The route change path judgment submodule is configured to capture a route event notification through a preset listening function by the sub-application, and perform route change path judgment based on route control data in the route event notification by the sub-application, where the route change path judgment is configured to determine a page or a sub-application to be switched.

[0173] According to an embodiment of the present disclosure, the route change path judgment submodule can include an analysis submodule and a switching submodule.

[0174] The analysis submodule is configured to analyze route control data in the route event notification by the sub-application to obtain an analysis result.

[0175] The switching submodule is configured to perform a switching operation of a page in the sub-application in response to the analysis result being a change of a path in the sub-application, and perform a switching operation of a page between applications in response to the analysis result being a change of a path between sub-applications.

[0176] The isolation module 1340 is configured to isolate the main application and the sub-application. According to an embodiment of the present disclosure, the isolation module 1340 can include a first isolation submodule and a second isolation submodule.

[0177] The first isolation submodule is configured to establish a first isolation mechanism, and the first isolation mechanism is configured to create an independent global variable environment for the micro-frontend application.

[0178] The second isolation submodule is configured to establish a second isolation mechanism, and the second isolation mechanism is configured to isolate style rules and static resource access between micro-frontend applications.

[0179] The dependency version control module 1350 is configured to maintain a global dependency version control table in a configuration file of the main application, where the global dependency version control table is configured to uniformly manage application dependency versions, declare shared library version information required by the sub-application in a configuration file of the sub-application, perform version negotiation between the main application and the sub-application through a preset version negotiation protocol in response to the main application loading the sub-application, and perform a version selection operation to determine a final dependency version based on a version negotiation result.

[0180] The build module 1360 is configured to build and package the micro-frontend application. According to an embodiment of the present disclosure, the build module 1360 can include a first build submodule, a second build submodule, and an environment identification submodule.

[0181] The first build submodule is configured to build and package the micro-frontend application by using a first build tool in a development environment, where the first build tool is configured to realize fast compilation and real-time update during development.

[0182] The second build submodule is configured to build and package the micro-frontend application by using a second build tool in a production environment, where the second build tool is configured to realize optimization processing and volume compression of code.

[0183] The environment identification sub-module is configured to identify a current running environment, and switch the first build tool and the second build tool according to an identification result.

[0184] According to the embodiments of the present application, the micro-frontend application operation device is used. First, at the application architecture level, by dividing the micro-frontend application into a main application and a sub-application, not only the decoupling between business modules is realized, but also each sub-application can maintain technology stack independence, support team parallel development, independent testing and flexible deployment. Second, in terms of route management, by modifying the route of the sub-application, the path conflict problem between the main application and the sub-application can be effectively avoided. At the same time, through the route coordination mechanism, the target page can be accurately matched and rendered, and seamless switching between the main application and the sub-application is realized. Therefore, the embodiments of the present application can realize efficient and accurate development of the front-end application, and improve the development efficiency and collaboration.

[0185] According to the embodiments of the present application, any multiple modules of the application division module 1310, the route configuration module 1320, the route coordination module 1330, the isolation module 1340, the dependency version control module 1350 and the build module 1360 can be combined in one module for implementation, or any one of the modules can be split into multiple modules. Alternatively, at least part of the functions of one or more of the modules can be combined with at least part of the functions of other modules, and implemented in one module. According to the embodiments of the present application, at least one of the application division module 1310, the route configuration module 1320, the route coordination module 1330, the isolation module 1340, the dependency version control module 1350 and the build module 1360 can be at least partially implemented as a hardware circuit, such as a field programmable gate array (FPGA), a programmable logic array (PLA), a system on chip, a system on board, a system on package, an application specific integrated circuit (ASIC), or any other reasonable way of hardware or firmware that can be integrated or packaged, or implemented in any one of software, hardware and firmware or in a proper combination of any of them. Alternatively, at least one of the application division module 1310, the route configuration module 1320, the route coordination module 1330, the isolation module 1340, the dependency version control module 1350 and the build module 1360 can be at least partially implemented as a computer program module that can perform corresponding functions when the computer program module is run.

[0186] Figure 14 A block diagram of an electronic device suitable for implementing the micro-frontend application operation method according to the embodiments of the present application is schematically shown.

[0187] As Figure 14As shown, the electronic device 1400 according to an embodiment of the present application includes a processor 1401 which can perform various appropriate actions and processes according to a program stored in a read only memory (ROM) 1402 or a program loaded into a random access memory (RAM) 1403 from a storage section 1408. The processor 1401 can include, for example, a general purpose microprocessor (e.g., a CPU), an instruction set processor, and / or a related chip set, and / or a dedicated microprocessor (e.g., an application specific integrated circuit (ASIC)), and so on. The processor 1401 can also include an on-board memory for cache use. The processor 1401 can include a single processing unit or multiple processing units to perform the various actions of the method processes according to embodiments of the present application.

[0188] In the RAM 1403, various programs and data required for the operation of the electronic device 1400 are stored. The processor 1401, the ROM 1402, and the RAM 1403 are connected to each other via a bus 1404. The processor 1401 performs various operations of the method processes according to embodiments of the present application by executing the programs in the ROM 1402 and / or the RAM 1403. Note that the programs can also be stored in one or more memories other than the ROM 1402 and the RAM 1403. The processor 1401 can also perform various operations of the method processes according to embodiments of the present application by executing the programs stored in the one or more memories.

[0189] According to embodiments of the present application, the electronic device 1400 can also include an input / output (I / O) interface 1405 which is also connected to the bus 1404. The electronic device 1400 can also include one or more of the following components connected to the input / output (I / O) interface 1405: an input section 1406 including a keyboard, a mouse, etc.; an output section 1407 including a display such as a cathode ray tube (CRT), a liquid crystal display (LCD), etc., and a speaker, etc.; a storage section 1408 including a hard disk, etc.; and a communication section 1409 including a network interface card such as a LAN card, a modem, etc. The communication section 1409 performs communication processing via a network such as the Internet. A drive 1410 is also connected to the input / output (I / O) interface 1405 as necessary. A removable recording medium 1411 such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, etc. is attached to the drive 1410 as necessary, so that a computer program read therefrom is installed into the storage section 1408 as necessary.

[0190] The application further provides a computer readable storage medium, which can be included in the device / apparatus / system described in the above embodiments, or can exist independently without being assembled into the device / apparatus / system. The computer readable storage medium carries one or more programs, which, when executed, implement the method according to the embodiments of the application.

[0191] According to the embodiments of the application, the computer readable storage medium can be a non-volatile computer readable storage medium, which can include, but is not limited to, a portable computer diskette, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any appropriate combination thereof. In this application, a computer readable storage medium can be any tangible medium that contains or stores a program for use by or in connection with an instruction execution system, apparatus, or device. For example, according to the embodiments of the application, the computer readable storage medium can include the ROM 1402 and / or the RAM 1403 described above, and / or one or more memories other than the ROM 1402 and the RAM 1403.

[0192] The embodiments of the application also include a computer program product, which includes a computer program containing program codes for executing the methods shown in the flowcharts. When the computer program product is run in a computer system, the program codes are used to make the computer system implement the micro-front-end application operation method provided by the embodiments of the application.

[0193] The above functions defined in the system / apparatus of the embodiments of the application are performed when the computer program is executed by the processor 1401. According to the embodiments of the application, the system, apparatus, module, unit, etc. described above can be implemented by computer program modules.

[0194] In one embodiment, the computer program can rely on a tangible storage medium such as an optical storage device, a magnetic storage device, etc. In another embodiment, the computer program can also be transmitted, distributed, and downloaded in the form of a signal on a network medium, and be downloaded and installed through the communication part 1409, and / or installed from the detachable medium 1411. The program codes contained in the computer program can be transmitted by any appropriate network medium, including but not limited to wireless, wired, etc., or any appropriate combination thereof.

[0195] In such embodiments, the computer program can be downloaded and installed from the network through the communication section 1409, and / or installed from the removable medium 1411. When the computer program is executed by the processor 1401, the above-described functions defined in the system of the embodiments of the present application are performed. According to the embodiments of the present application, the system, device, apparatus, module, unit, and the like described above can be implemented by the computer program module.

[0196] According to the embodiments of the present application, the program code for executing the computer program provided by the embodiments of the present application can be written in any combination of one or more programming languages, and specifically, these computer programs can be implemented using high-level procedural and / or object-oriented programming language, and / or assembly / machine language. The programming language includes, but is not limited to, such as Java, C++, python, "C" language, or similar programming language. The program code can be executed entirely on the user computing device, partially on the user device, partially on a remote computing device, or entirely on a remote computing device or server. In the case involving a remote computing device, the remote computing device can be connected to the user computing device through any kind of network, including a local area network (LAN) or a wide area network (WAN), or can be connected to an external computing device (for example, connected to the Internet through an Internet service provider).

[0197] The flowcharts and block diagrams in the drawings illustrate the possible architectural, functional, and operational scenarios of systems, methods, and computer program products according to various embodiments of the present application. In this regard, each block in the flowcharts or block diagrams can represent a module, a program segment, or a portion of code that contains one or more executable instructions for implementing the specified logical functions. It should also be noted that in some alternative implementations, the functions noted in the blocks can occur in a different order than that shown in the figures. For example, two blocks that are shown in succession can actually be executed substantially concurrently, or they can sometimes be executed in reverse order, depending on the functionality involved. It should also be noted that each block in the flowcharts or block diagrams, and combinations of blocks in the flowcharts or block diagrams, can be implemented by dedicated hardware-based systems that perform the specified functions or operations, or can be implemented by a combination of dedicated hardware and computer instructions.

[0198] Those skilled in the art can understand that the features described in various embodiments of the present application can be combined and / or integrated in various combinations and / or integrations, even if such combinations or integrations are not explicitly described in the present application. In particular, the features described in various embodiments of the present application can be combined and / or integrated in various combinations and / or integrations without departing from the spirit and teachings of the present application. All such combinations and / or integrations fall within the scope of the present application.

Claims

1. A method for operating a micro-frontend application, characterized in that, The method comprises: dividing the micro-frontend application into a main application and a plurality of sub-applications, wherein the plurality of sub-applications are distributed in a plurality of different servers, at least one of the sub-applications comprises one or more sub-pages; configuring routing rules for the sub-applications in the main application, wherein the routing rule configuration comprises modifying the routing rules for the sub-applications to obtain modified sub-application routes; and in response to a routing change request, the main application performs a routing coordination operation based on the modified sub-application routes, wherein the routing coordination operation is used to perform a sub-application loading or switching operation.

2. The method of claim 1, wherein, Before the micro-frontend application is divided into a main application and a plurality of sub-applications, the method further comprises: establishing a first isolation mechanism in the micro-frontend application, the first isolation mechanism creates an independent global variable environment for the micro-frontend application; and establishing a second isolation mechanism in the micro-frontend application, the second isolation mechanism is used to isolate style rules and static resource access between micro-frontend applications.

3. The method of claim 1, wherein, Before the micro-frontend application is divided into a main application and a plurality of sub-applications, the method further comprises: in a development environment, using a first build tool to build and package the micro-frontend application, wherein the first build tool is used to realize fast compilation and real-time update during development; in a production environment, using a second build tool to build and package the micro-frontend application, wherein the second build tool is used to realize optimization processing and volume compression of the code; and identifying the current running environment, and switching the first build tool and the second build tool according to the identification result.

4. The method of claim 1, wherein, The modification of the routing rules for the sub-applications to obtain the modified sub-application routes comprises: obtaining the original routing address of the sub-application; and setting routing prefix information for the sub-application in the routing configuration of the main application, combining the routing prefix information to the original routing address to obtain the modified sub-application route, wherein the routing prefix information is used to uniquely identify the sub-application in the main application.

5. The method according to any one of claims 1 to 4, characterized in that, The main application performs a routing coordination operation based on the modified sub-application routes in response to a routing change request, which comprises: in response to a routing change request, the main application generates a routing event notification, wherein the routing event notification comprises routing control data; the main application matches the changed route with the modified sub-application route to determine the target sub-application that needs to be notified; the main application sends the routing event notification to the target sub-application through a cross-application communication channel; the sub-application captures the routing event notification through a preset listening function; and the sub-application performs routing change path judgment based on the routing control data in the routing event notification, wherein the routing change path judgment is used to determine the page or sub-application to be switched.

6. The method of claim 5, wherein, The sub-application performs routing change path judgment based on the routing control data in the routing event notification, which comprises: the sub-application parses the routing control data in the routing event notification to obtain a parsing result; and the sub-application determines the page or sub-application to be switched based on the parsing result. In response to the parsing result being a path change within the current sub-application, a switching operation of a page within the sub-application is performed; and In response to the parsing result being a path change across sub-applications, a switching operation of a page between applications is performed.

7. The method of claim 1, wherein, After the micro-frontend application is divided into the main application and the plurality of sub-applications, the method further includes: maintaining a global dependency version control table in a configuration file of the main application, wherein the global dependency version control table is used to uniformly manage application dependency versions; declaring, in a configuration file of the sub-application, shared library version information required by the sub-application; in response to the main application loading the sub-application, the main application and the sub-application perform version negotiation through a preset version negotiation protocol; and based on a version negotiation result, performing a version selection operation to determine a final dependency version.

8. A micro-front-end application operation apparatus, characterized by comprising: The apparatus includes: an application division module configured to divide a micro-frontend application into a main application and a plurality of sub-applications, wherein the plurality of sub-applications are distributed on a plurality of different servers, and at least one of the sub-applications includes one or more sub-pages; a routing configuration module configured to perform routing rule configuration on the sub-applications in the main application, wherein the routing rule configuration includes modifying routing rules of the sub-applications to obtain modified sub-application routes; and a routing coordination module configured to, in response to a routing change request, perform a routing coordination operation based on the modified sub-application routes by the main application, wherein the routing coordination operation is used to perform a sub-application loading or switching operation. 9.An electronic device, comprising: one or more processors; a memory for storing one or more computer programs, characterized in that the one or more processors execute the one or more computer programs to implement the steps of the method according to any one of claims 1-7.

10. A computer readable storage medium having stored thereon a computer program or instructions, characterized in that, The computer program or instructions are executed by the processor to implement the steps of the method according to any one of claims 1-7.

11. A computer program product comprising computer programs or instructions, characterized in that, The computer program or instructions are executed by the processor to implement the steps of the method according to any one of claims 1-7. The computer program or instructions are executed by the processor to implement the steps of the method according to any one of claims 1-7.

Images