Page loading method, device and equipment based on micro front end and storage medium

Abstract

The invention relates to a page loading method and device based on a micro front end, equipment and a storage medium, and the method comprises the steps: completing the initialization configuration and routing configuration required for loading a sub-application of a main application when the main application is started; when a user triggers an interaction option bound with the target routing information, determining a target sub-application to be loaded corresponding to the interaction option according to a routing prefix corresponding to the target routing information; creating an isolation sandbox environment for the target sub-application, obtaining resources of the target sub-application through the resource path, and loading the resources of the target sub-application in the isolation sandbox environment, the target sub-application renders the page content of the target sub-application in the isolated sandbox environment based on the resource and the initialization state of the target sub-application and outputs the page content to the mounting point of the target sub-application. The invention provides a micro-front-end life cycle management scheme irrelevant to the architecture, and the micro-front-end life cycle management scheme can be suitable for different micro-front-end architecture projects.

Description

Technical Field

[0001] This disclosure relates to the field of Web application technology, and specifically to a page loading method, apparatus, device, and storage medium based on a micro-frontend. Background Technology

[0002] Large-scale web applications are often composed of multiple functional modules, developed and maintained by different teams. Traditional monolithic front-end applications face problems such as technology stack lock-in, high code coupling, difficulty in independent deployment, and long build and loading times. Micro-front-end architecture breaks down the front-end application into multiple independent sub-applications, each of which can be developed, tested, deployed, and run independently.

[0003] While micro-frontend architecture can break down a frontend application into multiple independent sub-applications, enabling each sub-application to be developed, tested, deployed, and run independently, the current loading process for each sub-application largely relies on the fragmented design of a particular micro-frontend architecture. It lacks a dynamic loading solution that covers the entire lifecycle, making it difficult to form a unified overall process. Summary of the Invention

[0004] To solve the above-mentioned technical problems, or at least partially solve them, this disclosure provides a page loading method, apparatus, device, and storage medium based on a micro-frontend.

[0005] Firstly, this disclosure provides a page loading method based on a micro-frontend, including:

[0006] When the main application starts, the initialization configuration and routing configuration required for loading the sub-applications of the main application are completed. The initialization configuration includes specifying the mount point of the sub-application, specifying dynamic events for the sub-application to call the main application's functions, synchronizing the initialization state of the sub-application, setting the routing prefix of the sub-application, and specifying the resource path for accessing the resources of the sub-application. The routing configuration includes determining the correspondence between the routing information of the sub-application and the routing prefix and writing it into the main application.

[0007] When a user triggers an interaction option bound to target route information, the target sub-application to be loaded is determined based on the route prefix corresponding to the target route information.

[0008] An isolated sandbox environment is created for the target sub-application. The resources of the target sub-application are obtained through the resource path and loaded in the isolated sandbox environment, so that the target sub-application renders the page content of the target sub-application based on the resources and initialization state in the isolated sandbox environment and outputs it to the mount point of the target sub-application.

[0009] When the target sub-application switches to another page, the target sub-application is uninstalled.

[0010] Furthermore, the mount point of the specified sub-application includes:

[0011] In the container node created by the main application, a container node is allocated as the mount point for each sub-application.

[0012] Furthermore, setting dynamic events for sub-applications to invoke main application functions includes:

[0013] Create a global variable for the sub-application so that the main application and the sub-application can communicate by listening to the state of the global variable;

[0014] Specify a window event for a sub-application to invoke a function of the main application, so that when the user triggers an interactive option bound to the window event on the sub-application's page, the sub-application dispatches the window event to invoke the corresponding function of the main application.

[0015] Furthermore, the initialization state of the synchronization sub-application includes:

[0016] Obtain the initialization state of the sub-application;

[0017] The initialization state of the sub-application is passed to the sub-application through the global variable. The initialization state is the running state of the sub-application before it was last uninstalled.

[0018] Furthermore, determining the correspondence between the routing information of the sub-application and the routing prefix and writing it into the main application includes:

[0019] Obtain the routing information of the sub-application, combine the routing information of the sub-application with the routing prefix of the sub-application to form a routing term, write it into a ts file, and import it into the main application.

[0020] Furthermore, before creating an isolated sandbox environment for the target sub-application, the method further includes:

[0021] Based on the resource path of the target sub-application, obtain the basic style file in the resources of the target sub-application, configure style link tags for the basic style file and inject it into the main document of the main application. The style link tags include the relationship attribute, path attribute and the identification attribute associated with the target sub-application of the basic style file.

[0022] Furthermore, before uninstalling the target sub-application, the method further includes:

[0023] The running status of the target sub-application is synchronized to the main application for continuous storage.

[0024] Secondly, this disclosure provides a page loading device based on a micro-frontend, comprising:

[0025] The initialization module is used to complete the initialization configuration required for loading the sub-applications of the main application when the main application starts. The initialization configuration includes specifying the mount point of the sub-application, specifying dynamic events for the sub-application to call the main application's functions, synchronizing the initialization state of the sub-application, setting the routing prefix of the sub-application, and specifying the resource path for accessing the resources of the sub-application.

[0026] The routing configuration module is used to complete the routing configuration required for loading the sub-applications of the main application. The routing configuration includes determining the correspondence between the routing information and the routing prefix of the sub-application and writing it into the main application.

[0027] The routing module is used to determine the target sub-application to be loaded based on the routing prefix corresponding to the target routing information when a user triggers an interaction option bound to the target routing information.

[0028] The sub-application loading module is used to create an isolated sandbox environment for the target sub-application, obtain the resources of the target sub-application through the resource path, and load the resources of the target sub-application in the isolated sandbox environment, so that the target sub-application renders the page content of the target sub-application based on the resources and initialization state of the target sub-application in the isolated sandbox environment and outputs it to the mount point of the target sub-application.

[0029] The sub-application uninstallation module is used to uninstall the target sub-application when the target sub-application's page is switched to another page.

[0030] Furthermore, when specifying the mount point for a sub-application, the initialization module is specifically used to allocate a container node as the mount point for each sub-application within the container node created by the main application.

[0031] Furthermore, when the initialization module sets up dynamic events for the sub-application to call the main application's functions, it specifically creates global variables for the sub-application so that the main application and the sub-application can communicate by listening to the state of the global variables; it also specifies window events for the sub-application to call the main application's functions so that when the user triggers the interactive options bound to the window event on the sub-application's page, the sub-application dispatches the window event to call the corresponding function of the main application.

[0032] Furthermore, when synchronizing the initialization state of the sub-application, the initialization module is specifically used to obtain the initialization state of the sub-application; and to pass the initialization state of the sub-application to the sub-application through the global variable, wherein the initialization state is the running state of the sub-application before its last uninstallation.

[0033] Furthermore, when the routing configuration module determines the correspondence between the routing information and the routing prefix of the sub-application and writes it into the main application, it specifically obtains the routing information of the sub-application, combines the routing information of the sub-application with the routing prefix of the sub-application into a routing term, writes it into a ts file, and imports it into the main application.

[0034] Furthermore, the micro-frontend-based page loading device also includes a style loading module, which is used to obtain the basic style file in the resources of the target sub-application according to the resource path of the target sub-application before creating an isolated sandbox environment for the target sub-application, configure style link tags for the basic style file and inject it into the main document of the main application. The style link tags include the relationship attribute, path attribute and the identification attribute associated with the target sub-application of the basic style file.

[0035] Furthermore, the micro-frontend-based page loading device also includes a sub-application state saving module, which is used to synchronize the running state of the target sub-application to the main application for continuous storage before uninstalling the target sub-application.

[0036] Thirdly, this disclosure provides an electronic device including a memory and a processor, wherein the memory stores a computer program that, when executed by the processor, implements the method as described in any of the first aspects.

[0037] Fourthly, this disclosure provides a computer-readable storage medium having program instructions stored thereon, which, when executed, implement the method of any one of the first aspects.

[0038] Fifthly, this disclosure provides a computer program product stored in a storage medium, which can implement the method described in the first aspect when the program product is run.

[0039] The technical solution provided in this disclosure has the following advantages compared with the prior art:

[0040] This disclosure provides a micro-frontend-based page loading method, apparatus, device, and storage medium. It offers a unified method for loading sub-application pages, encompassing initialization configuration, route resolution, isolated loading, resource acquisition, and lifecycle management. Through unified initialization configuration and dynamic route matching, it enables on-demand loading of sub-applications, avoiding resource waste. An isolated sandbox environment ensures that sub-applications with different technology stacks do not interfere with each other during runtime, supporting multi-technology coexistence. Resource mounting and state binding allow for independent rendering of sub-applications while reusing the main application's infrastructure. Lazy loading-based unloading logic releases memory and persists state, improving secondary loading efficiency. Overall, it forms an architecture-independent micro-frontend lifecycle management solution, well-suited for projects with different micro-frontend architectures. It dynamically installs and loads different sub-applications, ensuring compatibility with existing projects while reserving space for new technology integration, significantly reducing system coupling and maintenance costs. Attached Figure Description

[0041] The accompanying drawings, which are incorporated in and form a part of this specification, illustrate embodiments consistent with this disclosure and, together with the description, serve to explain the principles of this disclosure.

[0042] To more clearly illustrate the technical solutions in the embodiments of this disclosure or the prior art, the accompanying drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, for those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0043] Figure 1 A flowchart of a page loading method based on a micro-frontend provided for embodiments of this disclosure;

[0044] Figure 2 A flowchart of another page loading method based on a micro-frontend provided in this disclosure embodiment;

[0045] Figure 3 A schematic diagram of the structure of a micro-frontend-based page loading device provided in an embodiment of this disclosure;

[0046] Figure 4 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this disclosure. Detailed Implementation

[0047] To better understand the above-mentioned objectives, features, and advantages of this disclosure, the solutions disclosed herein will be further described below. It should be noted that, unless otherwise specified, the embodiments and features described herein can be combined with each other.

[0048] Numerous specific details are set forth in the following description in order to provide a full understanding of this disclosure, but this disclosure may also be implemented in other ways different from those described herein; obviously, the embodiments in the specification are only some, and not all, of the embodiments of this disclosure.

[0049] Figure 1 This disclosure provides a flowchart of a micro-frontend-based page loading method, which can be executed by a micro-frontend-based page loading device configured in an electronic device. The specific steps of this method are as follows:

[0050] S101. When the main application starts, complete the initialization configuration and routing configuration required for loading the sub-applications of the main application. The initialization configuration includes specifying the mount point of the sub-application, specifying the dynamic event for the sub-application to call the main application's functions, synchronizing the initialization state of the sub-application, setting the routing prefix of the sub-application, and specifying the resource path for accessing the resources of the sub-application. The routing configuration includes determining the correspondence between the routing information of the sub-application and the routing prefix and writing it into the main application.

[0051] During the dynamic loading and initialization of sub-applications, the main application specifies the mount point for the sub-application, defining a unique rendering area for it within the main application. All page content and components of the sub-application after loading must be rendered within this area. The main application predefines global dynamic events, which serve as the interface contract for the sub-application to call functions. The sub-application interacts by calling these events, typically only allowing the sub-application to call fixed dynamic events specified by the main application. These events are used for communication between the sub-application and the main application. The initialization state of the sub-application is its state before its last termination. The main application passes the initialization state to the sub-application for state restoration during sub-application loading, ensuring application state persistence. The main application sets a fixed route prefix for each sub-application and passes it to the sub-application. This route prefix allows the sub-application's routes within the main application to be registered based on this prefix, preventing route interception by the main application. Resource paths (such as entry configuration items) are the access addresses of the sub-application's resources. The main application associates this path information with the sub-application as the basis for loading sub-application resources (such as JS, CSS, HTML, etc.).

[0052] Routing configuration associates the route prefix of each sub-application with its routing information. This information includes the mount point ID, resource path, and path matching logic that determines which sub-application to dispatch a request to. When a user accesses a route, the main application's routing system resolves the route prefix, triggering the loading logic of that sub-application.

[0053] In some embodiments, specifying the mount point for a sub-application includes: allocating a container node as a mount point for each sub-application within the container node created by the main application.

[0054] The main application reserves a container node for each sub-application. The id in the label of this container node is used as a unique identifier. The mounting position of the sub-application is matched by specifying the id attribute of the container node label for the sub-application.

[0055] This disclosure embodiment assigns a dedicated container node as a mount point to each sub-application, which facilitates the main application's management of the sub-application's lifecycle, avoids DOM conflicts and pollution, makes the structure clearer and compatible with multiple technology stacks, and facilitates flexible expansion.

[0056] In some embodiments, setting up dynamic events for a sub-application to invoke functions of the main application includes: creating a global variable for the sub-application so that the main application and the sub-application can communicate by listening to the state of the global variable; specifying a window event for the sub-application to invoke functions of the main application so that when the user triggers an interactive option bound to the window event in the sub-application's page, the sub-application dispatches the window event to invoke the corresponding function of the main application.

[0057] The main application creates global variables that share state with the child application. The main application and the child application communicate by listening to the state of the global variables, thereby achieving data synchronization.

[0058] Window events refer to events on the browser's global `window` object. During the initialization phase of sub-applications, the main application predefines specific custom events through the `window` object and binds the corresponding main application functions as event listeners. When the user triggers interactive options or operations associated with these events in the sub-application interface, the sub-application dispatches the corresponding events, and the main application captures and executes the relevant functional logic through the event listeners.

[0059] This disclosure provides a built-in, reliable communication specification for sub-applications and main applications by setting global variables and window events, avoiding the need for the application layer to implement complex and error-prone communication logic, and improving the completeness and ease of use of the solution.

[0060] In some embodiments, synchronizing the initialization state of a sub-application includes: obtaining the initialization state of the sub-application; and passing the initialization state of the sub-application to the sub-application through a global variable, wherein the initialization state is the running state of the sub-application before it was last uninstalled.

[0061] Each time a sub-application loads, it synchronizes its own state information to the main application for persistent storage. The main application can determine the initialization state of the sub-application during this load by using the state information synchronized to the main application during the last load. The running state of the sub-application includes route state (e.g., current URL path, route parameters, history stack, etc.), component state (e.g., data / props of Vue / React components, store data of Redux / Vuex, etc.), and user operation records (e.g., form input values, pop-up on / off states, scroll positions, and other interaction traces). The initialization state is passed to the sub-application through global variables. The main application does not need to deeply intervene in the internal logic of the sub-application, avoiding strong coupling between the main application and the sub-application, and ensuring the continuity of business scenarios after the sub-application resumes loading.

[0062] This embodiment of the disclosure uses global variables to pass the initialization state of the sub-application to the sub-application so that the sub-application can restore the continuity of business scenarios after loading, optimize user experience, and avoid strong coupling between the main application and the sub-application.

[0063] In some embodiments, determining the correspondence between the routing information of a sub-application and the routing prefix and writing it into the main application includes: obtaining the routing information of the sub-application, combining the routing information of the sub-application and the routing prefix of the sub-application into a routing term, writing it into a ts file, and importing it into the main application.

[0064] The purpose of route configuration is to resolve route interception by the main application. Currently, the most suitable method is to preload the routes of all sub-applications into the main application without redirection. This embodiment obtains the route information of sub-applications through manual input, combines the sub-application's route information with its route prefix to form route terms, and writes them into a .ts file. This .ts file is then imported into the main application, which loads the routes of all sub-applications by loading this .ts file. Based on this .ts file, the main application can easily distinguish which sub-application a route belongs to by using the route prefix specified during initialization. The .ts file is a configuration file written in TypeScript, used to define and manage the application's routing rules, and has the ".ts" file extension.

[0065] For example, if the route prefix for the "Customer Management Sub-application" is / subapp-cs, then the route customerlist for this sub-application must be bound to the prefix as subapp-cs / customer list to ensure that the main application can identify the route ownership through the route prefix.

[0066] This embodiment of the disclosure combines the routing information of the sub-application with the routing prefix of the sub-application into a routing term, writes it into a .ts file, and imports it into the main application. This allows the main application to quickly identify the sub-application to which the route belongs, simplifies the route interception logic, and eliminates the need to synchronize routes through the sub-application, thereby reducing the amount of communication and configuration work between the main application and the sub-application, and ensuring accurate route matching and loading for the sub-application.

[0067] S102. When a user triggers an interaction option bound to the target routing information, the target sub-application to be loaded is determined based on the routing prefix corresponding to the target routing information.

[0068] For example, when a user clicks the "Customer Management" menu option in the side navigation bar of the main application, the menu is bound to the route / subapp-cs / customer list. Its redirection logic is "access the main application's / subapp-cs / customer list route". The main application listens for route changes, extracts the route prefixes of all sub-applications from the routing table, and compares them with the route prefix of the currently accessed route / subapp-cs / customer list. It finds that the route prefix / subapp-cs of this route is a perfect match with the route prefix of the "Customer Management Sub-application". Based on the matching result, the main application determines that the current user needs to load the "Customer Management Sub-application".

[0069] S103. Create an isolated sandbox environment for the target sub-application, obtain the resources of the target sub-application through the resource path, and load the resources of the target sub-application in the isolated sandbox environment, so that the target sub-application renders the page content of the target sub-application based on the resources and initialization state of the target sub-application in the isolated sandbox environment and outputs it to the mount point of the target sub-application.

[0070] Dynamically loading sub-applications can easily lead to style pollution. Creating an isolation sandbox can prevent this pollution. Essentially, the sandbox mechanism creates an independent runtime environment for each sub-application. The main application retrieves the target sub-application's JS / CSS resources based on its resource path (e.g., entry path) and loads these resources into the main application's global environment within the sandbox. This confines resource loading within the sandbox, preventing pollution of the main application or other sub-applications. The target sub-application then executes its framework rendering logic within the sandbox based on its JS / CSS resources and initialization state, generating its page content and mounting it to the container node specified by the main application, forming the final page view of the target sub-application.

[0071] S104. When the target sub-application switches to another page, uninstall the target sub-application.

[0072] After loading the target sub-application's page, if the user switches from the target sub-application's page to another page, it means that the user is no longer interacting with the target sub-application's page. Furthermore, when switching to another page, the main application will detect the route change and will unload the target sub-application instance, releasing the memory and computing resources it occupies.

[0073] This disclosure provides a unified method for loading sub-application pages, encompassing initialization configuration, route resolution, isolated loading, resource acquisition, and lifecycle management. Through unified initialization configuration and a dynamic route matching mechanism, it enables on-demand loading of sub-applications, avoiding resource waste. An isolated sandbox environment ensures that sub-applications with different technology stacks do not interfere with each other during runtime, supporting the coexistence of multiple technologies. Resource mounting and state binding allow sub-applications to render independently while reusing the main application's infrastructure. Lazy loading-based unloading logic releases memory and persists state, improving secondary loading efficiency. Overall, it forms an architecture-independent micro-frontend lifecycle management solution, well-suited for projects with different micro-frontend architectures. It dynamically installs and loads different sub-applications, ensuring compatibility with existing projects while reserving space for new technologies, significantly reducing system coupling and maintenance costs.

[0074] Figure 2 A flowchart of another page loading method based on a micro-frontend provided in this disclosure includes the following steps:

[0075] S201. When the main application starts, complete the initialization configuration and routing configuration required for loading the sub-applications of the main application. The initialization configuration includes specifying the mount point of the sub-application, specifying the dynamic events for the sub-application to call the main application's functions, synchronizing the initialization state of the sub-application, setting the routing prefix of the sub-application, and specifying the resource path for accessing the resources of the sub-application. The routing configuration includes determining the correspondence between the routing information of the sub-application and the routing prefix and writing it into the main application.

[0076] Please refer to S101 for the implementation principle of S201.

[0077] S202. When a user triggers an interaction option bound to the target routing information, the target sub-application to be loaded is determined based on the routing prefix corresponding to the target routing information.

[0078] Please refer to S102 for the implementation principle of S202.

[0079] S203. Obtain the basic style file from the resources of the target sub-application based on the resource path of the target sub-application, configure style link tags in the basic style file and inject them into the main document of the main application. The style link tags include the relationship attribute, path attribute and the identification attribute of the associated target sub-application of the basic style file.

[0080] Setting up a sandbox for isolation can prevent style pollution when loading sub-applications. However, the presence of a sandbox can lead to the loss of styles in sub-applications. This embodiment avoids the problem of style loss during sub-application loading due to sandbox isolation by pre-loading the fixed CSS files of the sub-applications into the main application. The fixed CSS files are the basic style files that the sub-application must load at startup, typically including global reset styles (such as reset.css), UI component library styles (such as element-ui.css), and the core layout styles of the sub-application.

[0081] Specifically, styled link tags can be dynamically created for a fixed CSS file using the `document` property in the main application. <link> The `<stylesheet>` tag is configured with the following attributes: `rel="stylesheet"` to specify the associated external stylesheet file, `href="CSS file URL"` to determine the resource path, and `data-app` to identify the sub-application to which the stylesheet belongs. <link> The tag is appended to the main document (HTML document object) of the main application. This declares the reference relationship between the main document (HTML document object) of the main application and the fixed CSS file, so as to inject the fixed CSS file into the main document of the main application and ensure that the basic styles are applied globally.

[0082] S204. Create an isolated sandbox environment for the target sub-application, obtain the resources of the target sub-application through the resource path, and load the resources of the target sub-application in the isolated sandbox environment, so that the target sub-application renders the page content of the target sub-application based on the resources and initialization state of the target sub-application in the isolated sandbox environment and outputs it to the mount point of the target sub-application.

[0083] Please refer to S103 for the implementation principle of S204.

[0084] S205. Synchronize the running status of the target sub-application to the main application for continuous storage.

[0085] Sub-applications synchronize their running state to the main application through global variables for continuous storage, serving as the initial state for the next load of the sub-application and ensuring the continuity of business scenarios after the sub-application resumes loading.

[0086] S206. When the target sub-application switches to another page, uninstall the target sub-application.

[0087] Please refer to S104 for the implementation principle of S206.

[0088] This embodiment of the disclosure obtains the basic style file of the sub-application before loading the sub-application, configures style link tags in the basic style file and injects them into the main document of the main application, and loads the basic style file of the sub-application into the main application in advance to ensure that the basic style is globally effective. This avoids the style loss problem that occurs when the sub-application is loaded due to sandbox isolation. Furthermore, before the sub-application is uninstalled, the running state of the sub-application is synchronized to the main application for continuous storage in order to determine the initialization state when the sub-application is loaded next time, and to ensure the continuity of business scenarios after the sub-application is restored.

[0089] Figure 3 This is a schematic diagram of the structure of a micro-frontend-based page loading device provided in an embodiment of this disclosure. The micro-frontend-based page loading device can be a component or part in the terminal as described in the above embodiments. The micro-frontend-based page loading device provided in this disclosure can execute the processing flow provided in the micro-frontend-based page loading method embodiments, such as... Figure 3 As shown, the micro-frontend-based page loading device 300 includes:

[0090] The initialization module 301 is used to complete the initialization configuration required for loading the sub-applications of the main application when the main application starts. The initialization configuration includes specifying the mount point of the sub-application, specifying dynamic events for the sub-application to call the functions of the main application, synchronizing the initialization state of the sub-application, setting the routing prefix of the sub-application, and specifying the resource path for accessing the resources of the sub-application.

[0091] The routing configuration module 302 is used to complete the routing configuration required for loading the sub-applications of the main application. The routing configuration includes determining the correspondence between the routing information of the sub-applications and the routing prefixes and writing it into the main application.

[0092] The routing module 303 is used to determine the target sub-application to be loaded based on the routing prefix corresponding to the target routing information when the user triggers the interaction option bound to the target routing information.

[0093] The sub-application loading module 304 is used to create an isolated sandbox environment for the target sub-application, obtain the resources of the target sub-application through the resource path, and load the resources of the target sub-application in the isolated sandbox environment, so that the target sub-application renders the page content of the target sub-application based on the resources and initialization state of the target sub-application in the isolated sandbox environment and outputs it to the mount point of the target sub-application.

[0094] The sub-application uninstallation module 305 is used to uninstall the target sub-application when the target sub-application's page is switched to another page.

[0095] Furthermore, when specifying the mount point of a sub-application, the initialization module 301 is specifically used to allocate a container node as a mount point for each sub-application in the container node created by the main application.

[0096] Furthermore, when initialization module 301 sets dynamic events for sub-applications to call functions of the main application, it specifically creates global variables for sub-applications so that the main application and sub-applications can communicate by listening to the state of the global variables; it specifies window events for sub-applications to call functions of the main application so that when the user triggers the interactive options bound to the window event in the sub-application's page, the sub-application dispatches the window event to call the corresponding function of the main application.

[0097] Furthermore, when synchronizing the initialization state of the sub-application, the initialization module 301 is specifically used to obtain the initialization state of the sub-application; and to pass the initialization state of the sub-application to the sub-application through a global variable. The initialization state is the running state of the sub-application before it was last uninstalled.

[0098] Furthermore, when determining the correspondence between the routing information and the routing prefix of the sub-application and writing it into the main application, the routing configuration module 302 is specifically used to obtain the routing information of the sub-application, combine the routing information of the sub-application with the routing prefix of the sub-application into a routing term, write it into a ts file, and import it into the main application.

[0099] Furthermore, the micro-frontend-based page loading device also includes a style loading module 306, which is used to obtain the basic style file in the resources of the target sub-application according to the resource path of the target sub-application before creating an isolated sandbox environment for the target sub-application, configure style link tags in the basic style file and inject them into the main document of the main application. The style link tags contain the relationship attribute, path attribute and the identification attribute associated with the target sub-application of the basic style file.

[0100] Furthermore, the micro-frontend-based page loading device also includes a sub-application state saving module 307, which is used to synchronize the running state of the target sub-application to the main application for continuous storage before uninstalling the target sub-application.

[0101] Figure 3 The micro-frontend-based page loading device shown in the embodiment can be used to execute the technical solutions of the above method embodiments. Its implementation principle and technical effects are similar, and will not be repeated here.

[0102] Figure 4 This is a schematic diagram of the structure of an electronic device according to an embodiment of this disclosure. See below for details. Figure 4 It shows a schematic diagram of a structure suitable for implementing the electronic device 400 in the embodiments of this disclosure. Figure 4 The electronic device shown is merely an example and should not be construed as limiting the functionality and scope of the embodiments disclosed herein.

[0103] like Figure 4As shown, electronic device 400 may include a processing device (e.g., a central processing unit, a graphics processing unit, etc.) 401, which can perform various appropriate actions and processes according to a program stored in read-only memory (ROM) 402 or a program loaded from storage device 408 into random access memory (RAM) 403 to implement the micro-frontend-based page loading method as described in the embodiments of this disclosure. Various programs and data required for the operation of electronic device 400 are also stored in RAM 403. The processing device 401, ROM 402, and RAM 403 are interconnected via bus 404. Input / output (I / O) interface 405 is also connected to bus 404.

[0104] Typically, the following devices can be connected to I / O interface 405: input devices 406 including, for example, touchscreens, touchpads, keyboards, mice, cameras, microphones, accelerometers, gyroscopes, etc.; output devices 407 including, for example, liquid crystal displays (LCDs), speakers, vibrators, etc.; storage devices 408 including, for example, magnetic tapes, hard disks, etc.; and communication devices 409. Communication device 409 allows electronic device 400 to communicate wirelessly or wiredly with other devices to exchange data. Although Figure 4 An electronic device 400 with various devices is shown; however, it should be understood that it is not required to implement or possess all of the devices shown. More or fewer devices may be implemented or possessed alternatively.

[0105] In particular, according to embodiments of this disclosure, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments of this disclosure include a computer program product comprising a computer program carried on a non-transitory computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts, thereby implementing the micro-frontend-based page loading method described above. In such embodiments, the computer program can be downloaded and installed from a network via communication device 409, or installed from storage device 408, or installed from ROM 402. When the computer program is executed by processing device 401, it performs the functions defined above in the methods of embodiments of this disclosure.

[0106] It should be noted that the computer-readable medium described in this disclosure can be a computer-readable signal medium or a computer-readable storage medium, or any combination thereof. A computer-readable storage medium can be, for example,—but not limited to—an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of a computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof. In this disclosure, a computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. In this disclosure, a computer-readable signal medium can include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such propagated data signals can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. A computer-readable signal medium can be any computer-readable medium other than a computer-readable storage medium, which can send, propagate, or transmit a program for use by or in connection with an instruction execution system, apparatus, or device. The program code contained on the computer-readable medium can be transmitted using any suitable medium, including but not limited to: wires, optical fibers, RF (radio frequency), etc., or any suitable combination thereof.

[0107] In some implementations, clients and servers can communicate using any currently known or future-developed network protocol such as HTTP (Hypertext Transfer Protocol) and can interconnect with digital data communication (e.g., communication networks) of any form or medium. Examples of communication networks include local area networks (“LANs”), wide area networks (“WANs”), the Internet (e.g., the Internet of Things), and peer-to-peer networks (e.g., ad hoc peer-to-peer networks), as well as any currently known or future-developed networks.

[0108] The aforementioned computer-readable medium may be included in the aforementioned electronic device; or it may exist independently and not assembled into the electronic device.

[0109] The aforementioned computer-readable medium carries one or more programs, which, when executed by the electronic device, cause the electronic device to:

[0110] When the main application starts, it completes the initialization configuration and routing configuration required for loading the sub-applications of the main application. The initialization configuration includes specifying the mount point of the sub-application, specifying the dynamic events for the sub-application to call the main application's functions, synchronizing the initialization state of the sub-application, setting the routing prefix of the sub-application, and specifying the resource path for accessing the resources of the sub-application. The routing configuration includes determining the correspondence between the routing information of the sub-application and the routing prefix and writing it into the main application.

[0111] When a user triggers an interaction option bound to the target route information, the target sub-application to be loaded is determined based on the route prefix corresponding to the target route information.

[0112] Create an isolated sandbox environment for the target sub-application, obtain the resources of the target sub-application through the resource path, and load the resources of the target sub-application in the isolated sandbox environment, so that the target sub-application renders the page content of the target sub-application based on the resources and initialization state of the target sub-application in the isolated sandbox environment and outputs it to the mount point of the target sub-application.

[0113] Uninstall the target sub-application when the target sub-application switches to another page.

[0114] Optionally, when one or more of the above-described procedures are executed by the electronic device, the electronic device may also perform other steps described in the above embodiments.

[0115] Computer program code for performing the operations of this disclosure can be written in one or more programming languages ​​or a combination thereof, including but not limited to object-oriented programming languages ​​such as Java, Smalltalk, and C++, as well as conventional procedural programming languages ​​such as the "C" language or similar programming languages. The program code can be executed entirely on the user's computer, partially on the user's computer, as a standalone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving remote computers, the remote computer can be connected to the user's computer via any type of network—including a local area network (LAN) or a wide area network (WAN)—or can be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0116] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of this disclosure. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in the block diagrams and / or flowcharts, and combinations of blocks in the block diagrams and / or flowcharts, can be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.

[0117] The units described in the embodiments of this disclosure can be implemented in software or hardware. The names of the units are not, in some cases, intended to limit the specific unit.

[0118] The functions described above in this document can be performed at least in part by one or more hardware logic components. For example, exemplary types of hardware logic components that can be used, without limitation, include: field-programmable gate arrays (FPGAs), application-specific integrated circuits (ASICs), application-specific standard products (ASSPs), system-on-a-chip (SoCs), complex programmable logic devices (CPLDs), and so on.

[0119] In the context of this disclosure, a machine-readable medium can be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution system, apparatus, or device. A machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can be, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination of the foregoing. More specific examples of machine-readable storage media include electrical connections based on one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination of the foregoing.

[0120] This disclosure also provides a computer-readable storage medium storing a computer program. When the computer program is executed by a processor, it can implement the methods of any of the above embodiments. The execution method and beneficial effects are similar, and will not be described again here.

[0121] This disclosure also provides a computer program product stored in a storage medium. When the program product is run, it can implement the methods of any of the above embodiments, and its execution mode and beneficial effects are similar, so they will not be described again here.

[0122] The above description is merely a preferred embodiment of this disclosure and an explanation of the technical principles employed. Those skilled in the art should understand that the scope of this disclosure is not limited to technical solutions formed by specific combinations of the above-described technical features, but should also cover other technical solutions formed by arbitrary combinations of the above-described technical features or their equivalents without departing from the above-described concept. For example, technical solutions formed by substituting the above features with (but not limited to) technical features disclosed in this disclosure that have similar functions.

[0123] Furthermore, while the operations are described in a specific order, this should not be construed as requiring these operations to be performed in the specific order shown or in a sequential order. In certain environments, multitasking and parallel processing may be advantageous. Similarly, while several specific implementation details are included in the above discussion, these should not be construed as limiting the scope of this disclosure. Certain features described in the context of individual embodiments may also be implemented in combination in a single embodiment. Conversely, various features described in the context of a single embodiment may also be implemented individually or in any suitable sub-combination in multiple embodiments.

[0124] Although the subject matter has been described using language specific to structural features and / or methodological logic, it should be understood that the subject matter defined in the appended claims is not necessarily limited to the specific features or actions described above. Rather, the specific features and actions described above are merely illustrative examples of implementing the claims.

[0125] It should be noted that, in this document, relational terms such as "first" and "second" are used merely to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

[0126] The above description is merely a specific embodiment of this disclosure, enabling those skilled in the art to understand or implement it. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of this disclosure. Therefore, this disclosure is not to be limited to the embodiments described herein, but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A page loading method based on micro-frontends, characterized in that, include: When the main application starts, the initialization configuration and routing configuration required for loading the sub-applications of the main application are completed. The initialization configuration includes specifying the mount point of the sub-application, specifying dynamic events for the sub-application to call the main application's functions, synchronizing the initialization state of the sub-application, setting the routing prefix of the sub-application, and specifying the resource path for accessing the resources of the sub-application. The routing configuration includes determining the correspondence between the routing information of the sub-application and the routing prefix and writing it into the main application. When a user triggers an interaction option bound to target route information, the target sub-application to be loaded is determined based on the route prefix corresponding to the target route information. An isolated sandbox environment is created for the target sub-application. The resources of the target sub-application are obtained through the resource path and loaded in the isolated sandbox environment, so that the target sub-application renders the page content of the target sub-application based on the resources and initialization state in the isolated sandbox environment and outputs it to the mount point of the target sub-application. When the target sub-application switches to another page, the target sub-application is uninstalled.

2. The page loading method based on micro-frontend as described in claim 1, characterized in that, The mount points for the specified sub-applications include: In the container node created by the main application, a container node is allocated as the mount point for each sub-application.

3. The page loading method based on micro-frontend as described in claim 1, characterized in that, The dynamic events set for sub-applications to invoke main application functions include: Create a global variable for the sub-application so that the main application and the sub-application can communicate by listening to the state of the global variable; Specify a window event for a sub-application to invoke a function of the main application, so that when the user triggers an interactive option bound to the window event on the sub-application's page, the sub-application dispatches the window event to invoke the corresponding function of the main application.

4. The page loading method based on micro-frontend as described in claim 3, characterized in that, The initialization state of the synchronization sub-application includes: Obtain the initialization state of the sub-application; The initialization state of the sub-application is passed to the sub-application through the global variable. The initialization state is the running state of the sub-application before it was last uninstalled.

5. The page loading method based on micro-frontend as described in claim 1, characterized in that, The step of determining the correspondence between the routing information of the sub-application and the routing prefix and writing it into the main application includes: Obtain the routing information of the sub-application, combine the routing information of the sub-application with the routing prefix of the sub-application to form a routing term, write it into a ts file, and import it into the main application.

6. The page loading method based on micro-frontend as described in claim 1, characterized in that, Before creating an isolated sandbox environment for the target sub-application, the method further includes: Based on the resource path of the target sub-application, obtain the basic style file in the resources of the target sub-application, configure style link tags for the basic style file and inject it into the main document of the main application. The style link tags include the relationship attribute, path attribute and the identification attribute associated with the target sub-application of the basic style file.

7. The page loading method based on micro-frontend as described in claim 1, characterized in that, Before uninstalling the target sub-application, the method further includes: The running status of the target sub-application is synchronized to the main application for continuous storage.

8. A page loading device based on a micro-frontend, characterized in that, include: The initialization module is used to complete the initialization configuration required for loading the sub-applications of the main application when the main application starts. The initialization configuration includes specifying the mount point of the sub-application, specifying dynamic events for the sub-application to call the main application's functions, synchronizing the initialization state of the sub-application, setting the routing prefix of the sub-application, and specifying the resource path for accessing the resources of the sub-application. The routing configuration module is used to complete the routing configuration required for loading the sub-applications of the main application. The routing configuration includes determining the correspondence between the routing information and the routing prefix of the sub-application and writing it into the main application. The routing module is used to determine the target sub-application to be loaded based on the routing prefix corresponding to the target routing information when a user triggers an interaction option bound to the target routing information. The sub-application loading module is used to create an isolated sandbox environment for the target sub-application, obtain the resources of the target sub-application through the resource path, and load the resources of the target sub-application in the isolated sandbox environment, so that the target sub-application renders the page content of the target sub-application based on the resources and initialization state of the target sub-application in the isolated sandbox environment and outputs it to the mount point of the target sub-application. The sub-application uninstallation module is used to uninstall the target sub-application when the target sub-application's page is switched to another page.

9. An electronic device, characterized in that, It includes a memory and a processor, wherein the memory stores a computer program that, when executed by the processor, implements the method as described in any one of claims 1-7.

10. A computer-readable storage medium, characterized in that, It stores program instructions that, when executed, implement the method as described in any one of claims 1-7.

Images