Execution method of micro-front-end program, terminal equipment and storage medium

Abstract

The invention is suitable for the field of data processing, and discloses a micro-front-end program execution method, terminal equipment and a storage medium. The execution method of the micro-front-end program comprises the following steps: generating a main application and a sub-application through vitite; mapping a menu routing path of the main application to an entry component of the sub-application through Wujie to obtain a routing mapping relation; when it is detected that the sub-applications are loaded through the menu routing path, according to the routing mapping relation, a containerized aggregation view is rendered, and the containerized aggregation view comprises a main frame page corresponding to the main application and a sub-frame page corresponding to the sub-applications. By eliminating the complete analysis process of binle.js in the traditional packaging process, the first screen rendering delay of the sub-applications can be reduced, and the bottleneck problem of the first screen performance of the existing micro-front-end architecture is effectively solved.

Description

Technical Field

[0001] The present invention belongs to the field of data processing, and particularly relates to a method for executing a micro-frontend program, a terminal device, and a storage medium. Background Art

[0002] The micro-frontend architecture has become the core solution for complex projects by splitting large front-end applications into independent sub-modules and supporting parallel development and independent deployment of multiple teams.

[0003] Existing mainstream solutions (such as the Qiankun framework) implement sub-application integration based on Single-SPA, but they rely on traditional build tools such as Webpack and have limitations. When loading a sub-application, it is necessary to parse the complete packaged file (bundle.js), resulting in a significant delay in the first-screen rendering. A new technical means is needed to solve the above technical problems. Summary of the Invention

[0004] In view of this, embodiments of the present invention provide a method for executing a micro-frontend program, a terminal device, and a storage medium, which can solve the problem of high first-screen rendering delay in existing mainstream solutions in related technologies.

[0005] The first aspect of the present invention provides a method for executing a micro-frontend program, including:

[0006] Generating a main application and sub-applications through vite;

[0007] Mapping the menu routing path of the main application to the entry component of the sub-application through Wujie to obtain a routing mapping relationship;

[0008] When it is detected that the sub-application is loaded through the menu routing path, according to the routing mapping relationship, rendering a containerized aggregated view, where the containerized aggregated view includes a main framework page corresponding to the main application and a sub-framework page corresponding to the sub-application.

[0009] Optionally, in the first implementation manner of the first aspect of the present invention, the step of mapping the menu routing path of the main application to the entry component of the sub-application through Wujie to obtain a routing mapping relationship includes:

[0010] Assigning an independent routing namespace prefix to the sub-application through Wujie and the menu routing path of the main application to obtain the routing mapping relationship.

[0011] Optionally, in the second implementation manner of the first aspect of the present invention, after the step of assigning an independent routing namespace prefix to the sub-application through Wujie according to the menu routing path of the main application to obtain the routing mapping relationship, the method further includes:

[0012] Point the routing namespace prefix to the sandbox container component provided by Wujie, and the sandbox container component bears the entry resources of the sub-application.

[0013] Optionally, in the third implementation manner of the first aspect of the present invention, before the step of rendering the containerized aggregated view according to the routing mapping relationship when it is detected that the sub-application is loaded through the menu routing path, the method further includes:

[0014] Define lifecycle hook functions in the entry file of the sub-application, and the lifecycle hook functions include bootstrap, mount, and unmount;

[0015] When the sub-application is loaded, Wujie sequentially calls the lifecycle hook functions to control the initialization, rendering, and destruction of the sub-application.

[0016] Optionally, in the fourth implementation manner of the first aspect of the present invention, before the step of rendering the containerized aggregated view according to the routing mapping relationship when it is detected that the sub-application is loaded through the menu routing path, the method further includes:

[0017] Dynamically configure the Vite development server address of the sub-application to dynamically maintain the routing mapping relationship.

[0018] Optionally, in the fifth implementation manner of the first aspect of the present invention, before the step of rendering the containerized aggregated view according to the routing mapping relationship when it is detected that the sub-application is loaded through the menu routing path, the method further includes:

[0019] Bypass the browser cross-origin restriction through a proxy request so that the main application can load the local development resources of the sub-application.

[0020] Optionally, in the sixth implementation manner of the first aspect of the present invention, after the step of rendering the containerized aggregated view according to the routing mapping relationship when it is detected that the sub-application is loaded through the menu routing path, the method further includes:

[0021] The main application passes the initial data to the sub-application through the props attribute;

[0022] The sub-application sends a message to the main application by triggering an event through window.$wujie.parent.

[0023] Optionally, in the seventh implementation manner of the first aspect of the present invention, the step of rendering the containerized aggregated view according to the routing mapping relationship when it is detected that the sub-application is loaded through the menu routing path includes:

[0024] During the initialization phase of the main application, preload the static resources of the sub-application through Wujie;

[0025] When it is detected that the sub-application is loaded through the menu routing path, render the containerized aggregated view according to the routing mapping relationship and the static resources.

[0026] In a second aspect, an embodiment of the present invention provides a terminal device, including a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, the steps of the execution method of the above-mentioned micro front-end program are implemented.

[0027] In a third aspect, an embodiment of the present invention provides a computer-readable storage medium, which stores a computer program. When the computer program is executed by a processor, the steps of the execution method of the above-mentioned micro front-end program are implemented.

[0028] In a fourth aspect, an embodiment of the present invention provides a computer program product. When the computer program product runs on a terminal device, the terminal device is enabled to execute the execution method of the above-mentioned micro front-end program.

[0029] The beneficial effects of the embodiments of the present invention compared with the prior art are as follows: Generate the main application and sub-applications through Vite; map the menu routing path of the main application to the entry component of the sub-application through Wujie to obtain a routing mapping relationship; when it is detected that the sub-application is loaded through the menu routing path, render the containerized aggregated view according to the routing mapping relationship. The containerized aggregated view includes the main framework page corresponding to the main application and the sub-framework page corresponding to the sub-application. By using the Vite build tool to replace the traditional Webpack solution and leveraging the browser's native ES module loading mechanism, on-demand compilation and instant loading of sub-application resources are achieved. By eliminating the complete parsing process of bundle.js in the traditional packaging process, the first-screen rendering latency of the sub-application can be reduced, effectively solving the first-screen performance bottleneck problem of the existing micro front-end architecture. Description of the Drawings

[0030] In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the following will briefly introduce the drawings required for use in the embodiments or the description of the prior art. Obviously, the following drawings are only some embodiments of the present invention. For those of ordinary skill in the art, other drawings can be obtained based on these drawings without creative efforts.

[0031] Figure 1 It is a schematic diagram of an embodiment of the execution method of the micro front-end program in the embodiments of the present invention;

[0032] Figure 2 It is a schematic diagram of a specific embodiment before step S103 of the execution method of the micro front-end program in the embodiment of the present invention;

[0033] Figure 3 It is a schematic diagram of a specific embodiment after step S103 of the execution method of the micro front-end program in the embodiment of the present invention;

[0034] Figure 4 It is a schematic diagram of a specific embodiment after step S103 of the execution method of the micro front-end program in the embodiment of the present invention;

[0035] Figure 5 It is a schematic diagram of an embodiment of the terminal device in the embodiment of the present invention. Specific embodiments

[0036] In order to make the objectives, technical solutions and advantages of the present invention clearer, the present invention will be further described in detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present invention and are not used to limit the present invention. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative efforts fall within the protection scope of the present invention.

[0037] It should be noted that the terms "including", "comprising" and "having" and any variations thereof in the specification and claims of the present invention and the above-mentioned drawings are intended to cover non-exclusive inclusion. For example, a process, method, terminal, product or device that includes a series of steps or units is not limited to the listed steps or units, but optionally further includes steps or units not listed, or optionally further includes other steps or units inherent to these processes, methods, products or devices. In the terms in the claims, specification and specification drawings of the present invention, relational terms such as "first" and "second" are only used to distinguish one entity / operation / object from another entity / operation / object, and do not necessarily require or imply any such actual relationship or order between these entities / operations / objects.

[0038] Referring to "embodiments" herein means that specific features, structures or characteristics described in connection with the embodiments may be included in at least one embodiment of the present invention. The phrase appears in various places in the specification and does not necessarily refer to the same embodiment, nor is it an independent or alternative embodiment mutually exclusive with other embodiments. Those skilled in the art explicitly and implicitly understand that the embodiments described herein can be combined with other embodiments.

[0039] The micro-frontend architecture has become the core solution for complex projects by splitting large front-end applications into independent sub-modules, supporting parallel development and independent deployment by multiple teams.

[0040] Existing mainstream solutions (such as the Qiankun framework) implement sub-application integration based on Single-SPA. However, they rely on traditional build tools such as Webpack and have limitations. When loading sub-applications, the complete packaged file (bundle.js) needs to be parsed, resulting in a significant delay in the first-screen rendering. A new technical means is needed to solve the above technical problems.

[0041] In view of this, the embodiments of the present invention provide a method for executing a micro-frontend program, a terminal device, and a storage medium. By replacing the traditional Webpack solution with the Vite build tool and utilizing the native ES module loading mechanism of the browser, on-demand compilation and instant loading of sub-application resources are achieved. By eliminating the complete parsing process of bundle.js in the traditional packaging process, the first-screen rendering delay of sub-applications can be reduced, effectively solving the problem of the first-screen performance bottleneck in the existing micro-frontend architecture.

[0042] To illustrate the technical solution of the present invention, specific embodiments are used for illustration below.

[0043] Figure 1 The figure shows a schematic flow chart of a method for executing a micro-frontend program provided by an embodiment of the present invention. This method can be applied to a terminal device. The terminal device can be a mobile phone, a tablet computer, a laptop computer, an ultra-mobile personal computer (UMPC), a netbook, etc.

[0044] Specifically, the method for executing the above micro-frontend program may include the following steps S101 to S103.

[0045] Step S101, generate the main application and sub-applications through Vite.

[0046] In the embodiment of the present invention, the main application and sub-applications respectively generate independent project structures through the Vite build tool. The build process adopts the native ES module loading mechanism of Vite to generate unpacked modular resource files.

[0047] Step S102, map the menu routing path of the main application to the entry component of the sub-application through Wujie to obtain a routing mapping relationship.

[0048] In an embodiment of the present invention, the main application defines a set of menu routing path in the routing configuration center. A routing mapping table is established through the Wujie framework, and each menu routing path is bound to the entry component of the corresponding sub-application in a key-value pair. A unique routing namespace identifier is assigned to each sub-application, and a master-sub application routing topology relationship graph is constructed.

[0049] Step S103, when it is detected that the sub-application is loaded through the menu routing path, according to the routing mapping relationship, a containerized aggregated view is rendered, and the containerized aggregated view includes the main framework page corresponding to the main application and the sub-framework page corresponding to the sub-application.

[0050] In an embodiment of the present invention, the main application routing guard module continuously listens for navigation events, and when it detects that the URL path matches the registered sub-application routing namespace, it triggers a sub-application loading instruction

[0051] Wujie creates an independent CSS sandbox container to generate an isolated Shadow DOM rendering context. An execution sandbox for sub-application JavaScript is established to reconstruct the global object access chain.

[0052] Parse the sub-application dependency tree according to the importmap generated by Vite's build. Dynamically load the sub-application entry component and its dependent modules through the browser's native ESM mechanism.

[0053] The main application framework page remains in a permanent rendering state, and the sub-application components are mounted in the form of Web Components to a preset DOM mounting point to achieve layout boundary isolation through the CSS Containment mechanism, completing the rendering of the aggregated view.

[0054] The main application listens for DOM changes in the sub-application through MutationObserver. When the sub-application is unloaded, the GC recycling mechanism is automatically triggered to clear residual event listeners and timers.

[0055] Vite's pre-compilation mechanism converts third-party dependencies into ES module caches, shortening the parsing time compared to Webpack bundle. During the routing matching stage, resource prefetching is executed in parallel, and the HTTP / 2 multiplexing feature is used to reduce the RTT latency. The sandbox environment reuse strategy improves the secondary loading speed.

[0056] In a specific example, the main application binds menu paths (such as / dashboard, / settings) to sub-application identifiers through a centralized routing management center to form a hierarchical routing tree.

[0057] Each sub-application is assigned an independent routing namespace (such as namespace:sub-app1) to prevent path conflicts.

[0058] During the initialization phase of the main application, the sandbox container component is loaded and the global isolation policy is configured:

[0059] CSS Sandbox: By rewriting rules in the dynamic style sheet, the style scope of the sub-application is restricted.

[0060] JS Sandbox: Create a virtual execution environment to intercept access to global objects such as window and document.

[0061] Register metadata such as the development / production environment entry address, resource fingerprint, and dependency graph of the sub-application in the configuration center. Dynamically synchronize the sub-application version information through the hot update mechanism. Solve the problem of route coupling between the main and sub-applications in the traditional solution and support dynamic path expansion.

[0062] The sub-application needs to declare a standardized lifecycle interface:

[0063] Initialization phase (bootstrap): Load dependent resources and establish a communication channel;

[0064] Mounting phase (mount): Render the component into the sandbox container and bind event listeners;

[0065] Unmounting phase (unmount): Destroy the DOM nodes and release the memory occupation.

[0066] The static resource path of the sub-application needs to be redirected according to the namespace allocated by the main application (e.g., map / static / to / sub-app1 / static / ).

[0067] In the development environment, path consistency is achieved through dynamic proxy, and in the production environment, it is achieved through CDN directory mapping.

[0068] The sub-application needs to expose a standardized data input interface (e.g., receive parameters from the main application through props).

[0069] Define an event publish-subscribe channel for cross-application state synchronization.

[0070] The main application route guard detects that the target path matches the sub-application namespace (e.g., / sub-app1 / home).

[0071] Parallelly load the sub-application entry file and core dependency libraries.

[0072] Create an isolated JS execution environment and redirect the access paths to local storage (localStorage) and Cookies.

[0073] Generate a dynamic style isolation container and add a namespace prefix selector to all DOM nodes of the sub-application.

[0074] With the on-demand compilation feature of Vite, only the ES module resources matching the current route are loaded.

[0075] The main application synchronizes basic data by publishing a global state snapshot.

[0076] The sub-application reports local state changes through the event bus.

[0077] The beneficial effects of the embodiments of the present invention compared with the prior art are as follows: The main application and the sub-application are generated by Vite; the menu route path of the main application is mapped to the entry component of the sub-application through Wujie to obtain a route mapping relationship; when it is detected that the sub-application is loaded through the menu route path, according to the route mapping relationship, a containerized aggregated view is rendered, and the containerized aggregated view includes the main framework page corresponding to the main application and the sub-framework page corresponding to the sub-application. By using the Vite build tool to replace the traditional Webpack solution and leveraging the native ES module loading mechanism of the browser, on-demand compilation and instant loading of sub-application resources are achieved. By eliminating the complete parsing process of bundle.js in the traditional packaging process, the first-screen rendering delay of the sub-application can be reduced, effectively solving the problem of the first-screen performance bottleneck in the existing micro-frontend architecture.

[0078] In the traditional technology, the sub-application routes are not isolated, and the same path for multiple sub-applications will cause incorrect route matching in the main application. It is necessary to achieve sub-application integration through additional route hijacking or dynamic route injection, increasing the development and maintenance costs. The route levels of the main application and the sub-application need to be strictly aligned, making it difficult to support the independent deployment and dynamic expansion of sub-applications. Based on this, an alternative embodiment of the present invention is proposed.

[0079] Step S102 also includes the following specific implementation manners.

[0080] Step 1021, through Wujie and the menu route path of the main application, assign an independent route namespace prefix to the sub-application to obtain the route mapping relationship.

[0081] In the embodiment of the present invention, in the initialization stage of the main application, the menu route path is defined through the Wujie plugin, and an independent route namespace prefix (such as / sub-app1 / *) is assigned to each sub-application.

[0082] In the route configuration of the sub-application, set the base path (such as base: ' / sub-app1') consistent with the route namespace prefix assigned by the main application, so that the internal route logic of the sub-application is aligned with the route level of the main application.

[0083] Bind the routing namespace prefix of the main application to the entry component of the sub-application through the Wujie framework to form a routing mapping table, and achieve the precise matching of the main application routing to the sub-application resources.

[0084] In the embodiments of the present invention, through an independent routing namespace prefix, the routing path conflicts between the main and sub-applications and among multiple sub-applications are avoided, and the routing logics of each sub-application do not affect each other when running in the sandbox environment. The main application can complete the sub-application routing integration only through declarative routing prefix allocation, without manually handling complex routing interception or redirection logics. When adding a new sub-application, only the routing namespace prefix configuration needs to be extended, without modifying the core routing structure of the main application, improving the maintainability.

[0085] In the traditional technology, no clear destruction interface is provided when unloading the sub-application, which easily leads to problems such as unremoved global event listeners and uncleared timers. Relying on manual configuration of shadow DOM to achieve style isolation, without automatically creating a sandbox environment at the framework layer, increases the development complexity. The loading / unloading of sub-applications lacks a standardized process, and the main application is difficult to accurately control the state of the sub-application, and conflicts are likely to occur when multiple instances coexist. Based on this, an optional embodiment of the present invention is proposed.

[0086] Step S1021 also includes the following specific embodiments.

[0087] Step S10211, point the routing namespace prefix to the sandbox container component provided by Wujie, and the sandbox container component carries the entry resources of the sub-application.

[0088] In the embodiments of the present invention, declare and implement the life cycle hook functions (bootstrap to initialize resources, mount to render components, unmount to destroy instances) required by the Wujie framework in the entry file of the sub-application.

[0089] When the main application registers the sub-application through the Wujie plugin, it automatically associates the life cycle hook functions of the sub-application to form a sub-application control link.

[0090] When the main application routing matches the sub-application, Wujie triggers bootstrap (create a sandbox environment), mount (mount the sub-application DOM), and unmount (clean up the sub-application instance when switching routes) in sequence.

[0091] In the embodiments of the present invention, a complete closed-loop for the initialization, rendering, and destruction of sub-applications is achieved through standardized hook functions, enabling the running state of sub-applications to be strictly synchronized with the main application's routing, and avoiding memory leaks caused by residual resources. An independent JS / CSS sandbox is created in the bootstrap phase to isolate the running environment of sub-applications, preventing global variable pollution and style conflicts. By clearly defining the division of the life cycle stages, the loading / unloading behavior of sub-applications can be controlled, improving the overall stability of the main application.

[0092] In traditional technologies, it relies on developers to manually configure shadow DOM to achieve style isolation, and the JS sandbox needs to hijack global objects through proxy, resulting in performance loss and compatibility risks. The resources of sub-applications need to be declared in advance during the construction of the main application, and it is impossible to dynamically adapt to the changes in the entry resources of sub-applications deployed independently, resulting in a strong binding between the versions of the main application and sub-applications. The same sub-application cannot run simultaneously under multiple routing branches, limiting the flexibility of complex business scenarios. Based on this, the present invention proposes an optional embodiment.

[0093] After step S102, the following specific implementation manners are further included.

[0094] Step S201: Point the routing namespace prefix to the sandbox container component provided by Wujie, and the sandbox container component carries the entry resources of the sub-application.

[0095] In the embodiment of the present invention, after the main application assigns an independent routing namespace prefix to the sub-application, the routing rule corresponding to the prefix is associated with the sandbox container component provided by Wujie (for example, path: ' / sub-app / *' is mapped to <wujiecontainer>Component).

[0096] When the main application route matches this prefix, Wujie automatically creates a sandbox container instance, dynamically generates isolated DOM nodes and a JS / CSS sandbox environment.

[0097] The sandbox container automatically loads the entry file (such as index.html) and static resources of the sub-application according to the sub-application registration information (entry URL, list of dependent resources), and completes the construction of the sub-application running environment.

[0098] In the embodiments of the present invention, the sandbox container is used to isolate the JS execution environment of the sub-application (such as global variables and event listeners are independent) and CSS style isolation (the style scope is limited within the sandbox container), completely avoiding the pollution problem between multiple sub-applications.

[0099] Automated resource loading: The sandbox container automatically parses the entry resources of the sub-application, eliminating the need for the main application to manually manage the resource loading order or dependency injection logic of the sub-application, reducing the integration complexity. Each route namespace prefix corresponds to an independent sandbox container instance, supporting parallel operation of multiple instances of the same sub-application (such as multiple / sub-app / * branch routes being activated simultaneously).

[0100] In traditional technologies, no clear destruction interface is provided when unloading the sub-application, which easily leads to problems such as global event listeners not being removed and timers not being cleared. Relying on manual configuration of shadow DOM to achieve style isolation, without automatically creating a sandbox environment at the framework level, increases the development complexity. The loading / unloading of sub-applications lacks a standardized process, making it difficult for the main application to precisely control the state of the sub-application, and conflicts are likely to occur when multiple instances coexist. Based on this, an optional embodiment of the present invention is proposed.

[0101] Refer to Figure 2 , Figure 2 which is a schematic diagram of a specific embodiment before step S103 of the execution method of the micro-frontend program in the embodiments of the present invention. The following specific implementation manners are also included before step S103.

[0102] Step S202, define life cycle hook functions in the entry file of the sub-application, and the life cycle hook functions include bootstrap, mount, and unmount.

[0103] Step S203, when the sub-application is loaded, sequentially call the life cycle hook functions through Wujie to control the initialization, rendering, and destruction of the sub-application.

[0104] In an embodiment of the present invention, lifecycle hook functions (bootstrap for initializing resources, mount for rendering components, unmount for destroying instances) required by the Wujie framework are declared and implemented in the entry file of the sub-application.

[0105] When the main application registers the sub-application through the Wujie plugin, the lifecycle hook functions of the sub-application are automatically associated to form a sub-application control link.

[0106] When the main application's route matches the sub-application, Wujie triggers bootstrap (creating a sandbox environment), mount (mounting the sub-application's DOM), and unmount (cleaning up the sub-application instance when switching routes) in sequence.

[0107] In the embodiment of the present invention, a complete closed-loop for sub-application initialization, rendering, and destruction is achieved through standardized hook functions, which can make the running state of the sub-application strictly synchronized with the main application's route, avoiding memory leaks caused by residual resources. An independent JS / CSS sandbox is created in the bootstrap stage to isolate the sub-application's running environment, preventing global variable pollution and style conflicts. Clearly defining the lifecycle stage division can make the loading / unloading behavior of the sub-application controllable, improving the overall stability of the main application.

[0108] In the traditional technology, the sub-application address needs to be hard-coded into the main application configuration during the construction stage, and it is impossible to dynamically adapt to the address differences between the development environment and the production environment, resulting in frequent configuration modifications for local debugging. Multiple sets of sub-application address configurations need to be maintained in the development, testing, and production environments, increasing the probability of human operation errors (such as misusing the production environment address for local debugging). Based on this, an alternative embodiment of the present invention is proposed.

[0109] Before step S103, the following specific implementation manners are further included.

[0110] Step S204, dynamically configure the Vite development server address of the sub-application to dynamically maintain the route mapping relationship.

[0111] In an embodiment of the present invention, when the main application starts, it identifies the current running environment (development / production). If it is the development environment, the dynamic address configuration mode is enabled. By reading the Vite development server configuration of the sub-application, the local development service address of the sub-application is obtained in real time.

[0112] The obtained sub-application development address is dynamically bound to the sub-application entry address registered in the main application to ensure that the main application route mapping relationship always points to the correct sub-application resource path.

[0113] In the embodiments of the present invention, the local service address of the sub-application is automatically adapted in the development environment and seamlessly switched to the static resource address after construction in the production environment, avoiding version confusion caused by manual configuration modification. Developers do not need to repeatedly adjust the address mapping relationship between the main application and the sub-application during local debugging, shortening the debugging cycle.

[0114] In the traditional technology, when developing the sub-application locally, it is necessary to manually configure server.headers to add cross-origin headers, and some scenarios still cannot bypass the restrictions. Based on this, an alternative embodiment of the present invention is proposed.

[0115] Before step S103, the following specific implementation manners are further included.

[0116] Step S205, bypass the browser cross-origin restriction through a proxy request, so that the main application can load the local development resources of the sub-application.

[0117] In the embodiments of the present invention, when the main application loads the local development resources of the sub-application, it recognizes the cross-origin restriction triggered by the browser (such as CORS error) and automatically enables the proxy module.

[0118] In the embodiments of the present invention, request forwarding and response header rewriting are implemented through the proxy layer, eliminating the cross-origin restriction in the local development environment and avoiding problems such as cookie loss or localStorage isolation caused by the iframe solution.

[0119] In the traditional technology, it is necessary to rely on the globalState global state object or a custom communication library. The main and sub-applications need to agree on complex data formats and event naming rules, increasing the maintenance cost. The sub-application can directly modify the reference type data (such as objects, arrays) passed by the main application, resulting in abnormal states of the main application. The communication interface needs to implement an adaptation layer for different front-end frameworks (Vue / React), restricting the flexibility of technology selection. Based on this, an alternative embodiment of the present invention is proposed.

[0120] Refer to Figure 3 , Figure 3 For a schematic diagram of a specific embodiment after step S103 of the execution method of the micro-frontend program in the embodiments of the present invention, the following specific implementation manners are further included after step S103.

[0121] Step S206, the main application passes the initial data to the sub-application through the props attribute.

[0122] Step S207, the sub-application sends a message to the main application by triggering an event through window.$wujie.parent.

[0123] In an embodiment of the present invention, when the main application loads a sub-application, initial data is injected into the running environment of the sub-application through the props property of the Wujie framework, and the sub-application receives the data through a predefined interface (such as window.$wujie.props).

[0124] During the initialization phase of the sub-application, custom events are registered through window.$wujie.parent, and the callback logic when the event is triggered is defined.

[0125] In the business logic of the sub-application, event messages are actively sent to the main application through window.$wujie.parent.emit(eventName, payload); the main application listens for sub-application events and performs corresponding global state updates or business processing.

[0126] In the embodiments of the present invention, based on the one-way data flow of props and the event-driven message mechanism, the introduction of a third-party state management library (such as Redux) is avoided, and the coupling degree between the main and sub-applications is reduced. Props data is only injected when the sub-application is loaded and is protected by the Wujie sandbox isolation to prevent the sub-application from tampering with the core data of the main application. The event communication mechanism is independent of the front-end framework, ensuring communication consistency for sub-applications with multiple technology stacks.

[0127] In the traditional technology, the resources of the sub-application start to be loaded only after the route is matched, resulting in a white screen or a loading animation during the first access, which affects the user experience. Based on this, an optional embodiment of the present invention is proposed.

[0128] Refer to Figure 4 , Figure 4 It is a schematic diagram of a specific embodiment of step S103 of the execution method of the micro-front-end program in the embodiments of the present invention. Step S103 further includes the following specific embodiments.

[0129] Step S1031, during the initialization phase of the main application, the static resources of the sub-application are pre-loaded through the Wujie.

[0130] Step S1032, when it is detected that the sub-application is loaded through the menu route path, the containerized aggregated view is rendered according to the route mapping relationship and the static resources.

[0131] In an embodiment of the present invention, during the initialization of the main application, the static resources of all registered sub-applications (including JS / CSS files, basic component libraries, etc.) are asynchronously loaded through the pre-loading interface of the Wujie framework and cached in memory or local storage.

[0132] Analyze the entry file dependency graph of the Wujie sub-application, preload key resources (such as the first-screen components and common dependency libraries) according to the priority, and load non-critical resources (such as lazy-loaded modules) on demand.

[0133] When the user triggers the menu routing path, the main application matches the target sub-application according to the routing mapping relationship, and directly uses the pre-loaded static resources to instantiate the sandbox container and render the sub-frame page.

[0134] In the embodiments of the present invention, the network request delay of the sub-application resources is eliminated by preloading, and the sub-application switching can achieve the effect of instant opening.

[0135] As Figure 5 shown, it is a schematic diagram of a terminal device provided by an embodiment of the present invention. The terminal device 5 may include: a processor 501, a memory 502, and a computer program 503 stored in the memory 502 and executable on the processor 501, such as an execution program of a micro-frontend program. When the processor 501 executes the computer program 503, the steps in the execution embodiments of the above-mentioned various micro-frontend programs are implemented.

[0136] The computer program may be divided into one or more modules / units, and one or more modules / units are stored in the memory 502 and executed by the processor 501 to complete the present invention. One or more modules / units may be a series of computer program instruction segments capable of performing specific functions, and the instruction segments are used to describe the execution process of the computer program in the terminal device.

[0137] The terminal device may include, but is not limited to, a processor 501 and a memory 502. Those skilled in the art can understand that Figure 5 merely examples of the terminal device do not constitute a limitation on the terminal device, and may include more or fewer components than shown in the figure, or combine certain components, or different components. For example, the terminal device may further include input / output devices, network access devices, buses, etc.

[0138] The so-called processor 501 may be a central processing unit (CPU), or may also be other general-purpose processors, digital signal processors (DSPs), application specific integrated circuits (ASICs), off-the-shelf programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. The general-purpose processor may be a microprocessor or the processor may also be any conventional processor, etc.

[0139] The memory 502 can be an internal storage unit of the terminal device, such as the hard disk or memory of the terminal device. The memory 502 can also be an external storage device of the terminal device, such as a plug-in hard disk equipped on the terminal device, a Smart Media Card (SMC), a Secure Digital (SD) card, a Flash Card, etc. Further, the memory 502 can also include both the internal storage unit and the external storage device of the terminal device. The memory 502 is used to store computer programs and other programs and data required by the terminal device. The memory 502 can also be used to temporarily store the data that has been output or will be output.

[0140] It should be noted that for the convenience and conciseness of description, the structure of the above terminal device can also refer to the specific description of the structure in the method embodiment, which will not be elaborated here.

[0141] The embodiment of the present invention also provides a computer-readable storage medium. The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps in the execution method of the above micro-frontend program can be implemented.

[0142] The embodiment of the present invention provides a computer program product. When the computer program product runs on a mobile terminal, the mobile terminal can execute the steps in the execution method of the above micro-frontend program.

[0143] In the above embodiments, the descriptions of the respective embodiments have their own emphases. For the parts not detailed or recorded in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0144] Those of ordinary skill in the art can realize that the units and algorithm steps of the examples described in combination with the embodiments disclosed herein can be implemented by electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are executed in a hardware or software manner depends on the specific application and design constraints of the technical solution. Professional technicians can use different methods to implement the described functions for each specific application, but such implementation should not be considered to exceed the scope of the present invention.

[0145] In the embodiments provided by the present invention, it should be understood that the disclosed terminal device and method can be implemented in other ways. For example, the terminal device embodiments described above are merely illustrative. Another point is that the displayed or discussed couplings or direct couplings or communication connections to each other can be indirect couplings or communication connections through some interfaces, devices or units, and can be in electrical, mechanical or other forms.

[0146] The unit described as a separate component may or may not be physically separated. The component shown as a unit may or may not be a physical unit, that is, it may be located in one place or may be distributed across multiple network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0147] In addition, each functional unit in various embodiments of the present invention may be integrated in a processing unit, may exist separately as individual physical units, or two or more units may be integrated in one unit. The above integrated units can be implemented in the form of hardware or in the form of software functional units.

[0148] If the integrated module / unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, to implement all or part of the processes in the above embodiment methods of the present invention, it can also be completed by a computer program instructing relevant hardware. The computer program can be stored in a computer-readable storage medium. When the computer program is executed by a processor, the steps of the above various method embodiments can be implemented. Among them, the computer program includes computer program code, and the computer program code can be in the form of source code, object code, executable file or some intermediate form, etc. The computer-readable medium can include: any entity or device capable of carrying the computer program code, recording medium, USB flash drive, mobile hard disk, magnetic disk, optical disc, computer memory, read-only memory (ROM), random access memory (RAM), electrical carrier signal, telecommunication signal, and software distribution medium, etc. It should be noted that the content included in the computer-readable medium can be appropriately increased or decreased according to the requirements of legislation and patent practice in the jurisdiction. For example, in some jurisdictions, according to legislation and patent practice, the computer-readable medium does not include electrical carrier signals and telecommunication signals.

[0149] The above-described embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit it. Although the present invention has been described in detail with reference to the foregoing embodiments, those of ordinary skill in the art should understand that: they can still modify the technical solutions recorded in the foregoing embodiments, or perform equivalent replacements for some of the technical features. These modifications or replacements do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the various embodiments of the present invention, and should all be included in the protection scope of the present invention.< / wujiecontainer>

Claims

1. A method for executing a micro-frontend program, characterized in that, Including: Generate the main application and sub-applications through Vite; Map the menu routing path of the main application to the entry component of the sub-application through Wujie to obtain a routing mapping relationship; When it is detected that the sub-application is loaded through the menu routing path, render a containerized aggregated view according to the routing mapping relationship, where the containerized aggregated view includes the main framework page corresponding to the main application and the sub-framework page corresponding to the sub-application.

2. The execution method of the micro-frontend program according to claim 1, characterized in that The step of mapping the menu routing path of the main application to the entry component of the sub-application through Wujie to obtain a routing mapping relationship includes: Assign an independent routing namespace prefix to the sub-application through Wujie and the menu routing path of the main application to obtain the routing mapping relationship.

3. The method for executing a micro-frontend program according to claim 2, wherein, After the step of assigning an independent routing namespace prefix to the sub-application through Wujie according to the menu routing path of the main application to obtain the routing mapping relationship, the method further includes: Point the routing namespace prefix to the sandbox container component provided by Wujie, and the sandbox container component carries the entry resources of the sub-application.

4. The execution method of the micro-frontend program according to claim 1, wherein Before the step of rendering a containerized aggregated view according to the routing mapping relationship when it is detected that the sub-application is loaded through the menu routing path, the method further includes: Define lifecycle hook functions in the entry file of the sub-application, and the lifecycle hook functions include bootstrap, mount, and unmount; When the sub-application is loaded, sequentially call the lifecycle hook functions through Wujie to control the initialization, rendering, and destruction of the sub-application.

5. The execution method of the micro-frontend program according to claim 1, characterized in that, Before the step of rendering a containerized aggregated view according to the routing mapping relationship when it is detected that the sub-application is loaded through the menu routing path, the method further includes: Dynamically configure the Vite development server address of the sub-application to dynamically maintain the routing mapping relationship.

6. The method for executing a micro-frontend program according to claim 1, characterized in that Before the step of rendering a containerized aggregated view according to the routing mapping relationship when it is detected that the sub-application is loaded through the menu routing path, the method further includes: Bypass the browser cross-origin restriction through a proxy request so that the main application can load the local development resources of the sub-application.

7. The method for executing a micro-frontend program according to claim 1, wherein After the step of rendering a containerized aggregated view according to the routing mapping relationship when it is detected that the sub-application is loaded through the menu routing path, the method further includes: The main application passes initial data to the sub-application through the props attribute; The sub-application sends a message to the main application by triggering an event through window.$wujie.parent.

8. The execution method of the micro-frontend program according to claim 1, characterized in that, The step of rendering a containerized aggregated view according to the routing mapping relationship when it is detected that the sub-application is loaded through the menu routing path includes: In the initialization stage of the main application, preload the static resources of the sub-application through Wujie; When it is detected that the sub-application is loaded through the menu routing path, render the containerized aggregated view according to the routing mapping relationship and the static resources.

9. A terminal device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the computer program, the steps of the execution method of the micro-frontend program according to any one of claims 1 to 8 are implemented.

10. A computer-readable storage medium storing a computer program, characterized in that, When the computer program is executed by the processor, the steps of the execution method of the micro-frontend program according to any one of claims 1 to 8 are implemented.

Images