Micro-front-end system

Abstract

The invention discloses a micro-front-end system. The system comprises a life cycle module and a preloading module, the life cycle module is used for determining the stage of the sub-application in the micro-front-end system in the full life cycle and executing the target task according to the stage of the sub-application so as to manage the full life cycle of the sub-application; and the pre-loading module is used for pre-loading resources required for running the sub-application under the condition that the current page of the micro-front-end system is idle. The technical problem that the sub-application loading efficiency of the micro-front-end system is low in the related technology is solved.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a micro front-end system. Background Art

[0002] The micro-frontend framework is a method of breaking down front-end applications into smaller modular applications that can be developed and deployed independently. This method can improve the flexibility, maintainability, and scalability of front-end development. In large-scale enterprise-level applications, multiple teams are usually required to develop collaboratively, and the application's functions and business logic are very complex. The micro-frontend architecture can break down this complexity so that each team can independently develop and maintain their own modules, thereby improving development efficiency and reducing communication costs. However, the current micro-frontend system allows the code of each independent module to be loaded on demand, but when the application is loaded for the first time, multiple modules may still need to be loaded, resulting in a longer initial loading time. Summary of the invention

[0003] An embodiment of the present application provides a micro-frontend system to at least solve the technical problem of low sub-application loading efficiency of the micro-frontend system in the related art.

[0004] According to one aspect of an embodiment of the present application, a micro-frontend system is provided, including: a lifecycle module and a preloading module; the lifecycle module is used to determine the stage of a sub-application in the micro-frontend system in its entire lifecycle, and execute target tasks according to the stage of the sub-application to manage the entire lifecycle of the sub-application; the preloading module is used to preload resources required to run the sub-application when the current page of the micro-frontend system is idle.

[0005] Optionally, the lifecycle module includes: a triggering sub-module, which is used to determine that the stage of the sub-application is the sub-application creation stage when the sub-application is loaded, and to determine that the stage of the sub-application is the sub-application pre-rendering stage when the document object model structure of the sub-application is not generated, and to determine that the stage of the sub-application is the sub-application mounting stage when the sub-application is mounted to the current page, and to determine that the stage of the sub-application before being uninstalled is the sub-application unloading stage, and to determine that the stage of the sub-application is the error handling stage when an error is reported during the running of the sub-application; and an execution sub-module, which is used to execute the target task according to the stage of the sub-application.

[0006] Optionally, the execution submodule is further used to: when the stage of the sub-application is the sub-application creation stage, send a first instruction to the sub-application, the first instruction is at least used to instruct the sub-application to complete initialization; when the stage of the sub-application is the sub-application pre-rendering stage, send a second instruction to the sub-application, the second instruction is at least used to instruct the sub-application to complete data preprocessing; when the stage of the sub-application is the sub-application mounting stage, send a third instruction to the sub-application, the third instruction is at least used to instruct the sub-application to complete mounting; when the stage of the sub-application is the sub-application uninstallation stage, send a fourth instruction to the sub-application, the fourth instruction is at least used to instruct the sub-application to complete uninstallation; when the stage of the sub-application is the error handling stage, obtain error information, and complete error repair according to the error information.

[0007] Optionally, the preloading module includes: a loading sub-module, a caching sub-module and an optimization sub-module; the loading sub-module is used to divide the preset resources to be loaded into key resources and non-key resources, and is also used to complete the loading in sequence according to the loading priority of the key resources and the non-key resources, wherein the priority of the key resources is higher than that of the non-key resources; the caching sub-module is used to cache the pre-loaded resources into a preset cache; the optimization sub-module is used to complete the loading of the image resources when the image resources in the non-key resources enter the visible range of the current page.

[0008] Optionally, the system further includes: a sandbox module; the sandbox module is used to create an independent execution environment corresponding to the sub-application, and is also used to set access rights for the sub-application, wherein the access rights are used to characterize resources that the sub-application can access.

[0009] Optionally, the system also includes: a style isolation module; the style isolation module is used to add a preset prefix to each style of the sub-application, and the preset prefix is ​​determined based on the identifier of the sub-application to limit the scope of the style of the sub-application to the elements of the document object model structure in the sub-application.

[0010] Optionally, the system also includes: a data communication module; the data communication module is used to control the base application in the micro-front-end system to send data to the sub-application bound to the base application, and control the base application to receive data sent by the sub-application bound to the base application.

[0011] Optionally, the system further comprises: a plug-in management module, configured to scan the script language file to be loaded, determine error codes in the script language file to be loaded, repair the error codes, and compress the script language file to be loaded.

[0012] According to another aspect of an embodiment of the present application, a control method for a micro-front-end system is also provided, including: obtaining the current page status of the micro-front-end system, and pre-loading resources required by sub-applications in the micro-front-end system when the current page status is idle; after completing the pre-loading, obtaining the stage of the sub-application in the micro-front-end system in its entire life cycle; executing the target task according to the stage of the sub-application to manage the entire life cycle of the sub-application.

[0013] According to another aspect of the embodiment of the present application, a computer device is also provided, including: a memory and a processor, wherein the memory is used to store program instructions; the processor is connected to the memory and is used to execute the control method of the above-mentioned micro-front-end system.

[0014] According to another aspect of an embodiment of the present application, a non-volatile storage medium is also provided, which includes a stored computer program, wherein the device where the non-volatile storage medium is located executes the control method of the above-mentioned micro-front-end system by running the computer program.

[0015] According to another aspect of the embodiments of the present application, a computer program product is also provided, including computer instructions, which implement the control method of the above-mentioned micro-front-end system when executed by a processor.

[0016] In an embodiment of the present application, a life cycle module and a preloading module are provided; the life cycle module is used to determine the stage of a sub-application in a micro-front-end system in its entire life cycle, and execute target tasks according to the stage of the sub-application to manage the entire life cycle of the sub-application; the preloading module is used to preload the resources required to run the sub-application when the current page of the micro-front-end system is idle, thereby solving the technical problem of low sub-application loading efficiency in the micro-front-end system in related technologies. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] The drawings described herein are used to provide a further understanding of the present application and constitute a part of the present application. The illustrative embodiments of the present application and their descriptions are used to explain the present application and do not constitute an improper limitation on the present application. In the drawings:

[0018] Figure 1 It is a hardware structure block diagram of a computer terminal for implementing a control method of a micro front-end system according to an embodiment of the present application;

[0019] Figure 2 This is a schematic diagram of the structure of a micro front-end system according to an embodiment of the present application;

[0020] Figure 3 is a schematic diagram of another micro front-end system structure according to an embodiment of the present application;

[0021] Figure 4 It is a flowchart of a control method of a micro front-end system according to an embodiment of the present application. DETAILED DESCRIPTION

[0022] In order to enable those skilled in the art to better understand the solution of the present application, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work should fall within the scope of protection of the present application.

[0023] It should be noted that the terms "first", "second", etc. in the specification and claims of the present application and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchangeable where appropriate, so that the embodiments of the present application described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any of their variations are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device comprising a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0024] The information collected in the embodiments of the present application is information and data authorized by the user or fully authorized by all parties, and the collection, storage, use, processing, transmission, provision, disclosure and application of the relevant data comply with the relevant laws, regulations and standards of the relevant regions, take necessary confidentiality measures, do not violate public order and good morals, and provide corresponding operation entrances for users to choose to authorize or reject automated decision-making results; if the user chooses to reject, the expert decision-making process will be entered.

[0025] The control method embodiment of the micro-front-end system provided in the embodiment of the present application can be executed in a mobile terminal, a computer terminal or a similar computing device. Figure 1 FIG. 1 shows a hardware structure block diagram of a computer terminal for implementing a control method of a micro front-end system. Figure 1As shown, the computer terminal 10 may include one or more (102a, 102b, ..., 102n are used to illustrate) processors (the processor may include but is not limited to a processing device such as a microprocessor MCU or a programmable logic device FPGA), a memory 104 for storing data, and a transmission module 106 for communication functions connected via a wired and / or wireless network. In addition, it may also include: a display, a keyboard, a cursor control device, an input / output interface (I / O interface), a universal serial bus (USB) port (which may be included as one of the ports of the I / O interface), a network interface, and a BUS bus. Those skilled in the art can understand that Figure 1 The structure shown is only for illustration and does not limit the structure of the above electronic device. Figure 1 More or fewer components as shown, or with Figure 1 Different configurations shown.

[0026] It should be noted that the one or more processors and / or other data processing circuits described above may generally be referred to herein as "data processing circuits". The data processing circuits may be embodied in whole or in part as software, hardware, firmware, or any other combination thereof. In addition, the data processing circuit may be a single independent processing module, or may be incorporated in whole or in part into any of the other components in the computer terminal 10. As described in the embodiments of the present application, the data processing circuit acts as a processor control (e.g., selection of a variable resistor terminal path connected to an interface).

[0027] The memory 104 can be used to store software programs and modules of application software, such as the program instructions / data storage device corresponding to the control method of the micro-front-end system in the embodiment of the present application. The processor executes various functional applications and data processing by running the software programs and modules stored in the memory 104, that is, realizing the control method of the above-mentioned micro-front-end system. The memory 104 may include a high-speed random access memory, and may also include a non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some instances, the memory 104 may further include a memory remotely arranged relative to the processor, and these remote memories may be connected to the computer terminal 10 via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0028] The transmission module 106 is used to receive or send data via a network. The specific example of the above network may include a wireless network provided by a communication provider of the computer terminal 10. In one example, the transmission module 106 includes a network adapter (Network Interface Controller, NIC), which can be connected to other network devices through a base station so as to communicate with the Internet. In one example, the transmission module 106 can be a radio frequency (RF) module, which is used to communicate with the Internet wirelessly.

[0029] The display may be, for example, a touch screen liquid crystal display (LCD) that enables a user to interact with a user interface of the computer terminal 10 .

[0030] It should be noted that, in some optional embodiments, the above Figure 1 The computer terminal shown may include hardware elements (including circuits), software elements (including computer code stored on a computer-readable medium), or a combination of hardware elements and software elements. It should be noted that Figure 1 This is merely one example of a particular embodiment and is intended to illustrate the types of components that may be present in the computer terminal described above.

[0031] Under the above-mentioned operating environment, an embodiment of the present application provides an embodiment of a control method for a micro-front-end system. It should be noted that the steps shown in the flowchart in the accompanying drawings can be executed in a computer system such as a set of computer executable instructions, and although the logical order is shown in the flowchart, in some cases, the steps shown or described can be executed in an order different from that shown here.

[0032] Figure 2 is a structural diagram of a micro front-end system according to an embodiment of the present application, such as Figure 2 As shown, the system includes:

[0033] Life cycle module 20 and preloading module 22;

[0034] The life cycle module 20 is used to determine the stage of the sub-application in the micro-frontend system in the full life cycle, and execute the target task according to the stage of the sub-application to manage the full life cycle of the sub-application;

[0035] The preloading module 22 is used to preload resources required to run the sub-application when the current page of the micro-frontend system is idle.

[0036] like Figure 3 As shown, the life cycle module 20 includes:

[0037] The triggering submodule 201 is used to determine that the stage of the sub-application is the sub-application creation stage when the sub-application is loaded, determine that the stage of the sub-application is the sub-application pre-rendering stage when the document object model structure of the sub-application is not generated, determine that the stage of the sub-application is the sub-application mounting stage when the sub-application is mounted to the current page, determine that the stage of the sub-application before being uninstalled is the sub-application unloading stage, and determine that the stage of the sub-application is the error handling stage when an error is reported during the operation of the sub-application; the executing submodule 202 is used to execute the target task according to the stage of the sub-application.

[0038] The execution submodule 202 is further used for:

[0039] When the sub-application is in the sub-application creation stage, a first instruction is sent to the sub-application, the first instruction is at least used to instruct the sub-application to complete initialization; when the sub-application is in the sub-application pre-rendering stage, a second instruction is sent to the sub-application, the second instruction is at least used to instruct the sub-application to complete data preprocessing; when the sub-application is in the sub-application mounting stage, a third instruction is sent to the sub-application, the third instruction is at least used to instruct the sub-application to complete mounting; when the sub-application is in the sub-application uninstallation stage, a fourth instruction is sent to the sub-application, the fourth instruction is at least used to instruct the sub-application to complete uninstallation; when the sub-application is in the error handling stage, error information is obtained, and error repair is completed according to the error information.

[0040] Specifically, multiple lifecycle hooks are proposed in the embodiments of the present application: created (sub-application creation stage), beforeMount (sub-application pre-rendering stage), mounted (sub-application mounting stage), unmount (sub-application unloading stage), and error (error handling stage).

[0041] It should be noted that when create is triggered, the sub-application can load the basic resources required by the sub-application, such as JavaScript files, style sheets, etc.; initialize the sub-application, including configuration settings, state management, etc.; register global components, instructions or plug-ins; initialize routing configuration; and perform user identity authentication or permission checks.

[0042] When beforeMount is triggered, the sub-application can prepare data, obtain data from the backend or other services; pre-process or format data; prepare view templates based on data; and perform some preparatory work for DOM (Document Object Model) operations.

[0043] When mounted is triggered, the sub-application can mount the root component of the sub-application into a specific container of the main application; bind data to the view to ensure that the page content is displayed correctly; start scheduled tasks or listeners, such as polling for data updates, event monitoring, etc.; register event handlers to handle user interactions or route navigation; perform some operations that require DOM elements, such as chart rendering, animation effects, etc.

[0044] When unmount is triggered, the sub-application can clear scheduled tasks or listeners to avoid memory leaks; cancel event handler registration to avoid unexpected behavior; clean up DOM elements mounted by the sub-application; cancel subscriptions or release resources, such as freeing memory and closing connections.

[0045] When an error is triggered, the sub-application can capture and handle the error in the sub-application to prevent the error from causing the entire application to crash; provide friendly error prompts or log records to facilitate problem troubleshooting; try to restore the normal operation of the application, or perform downgrade processing.

[0046] It should also be noted that an error will be triggered when a sub-application rendering error occurs.

[0047] like Figure 3 As shown, the preloading module 22 includes: a loading submodule 221, a caching submodule 222 and an optimizing submodule 223; the loading submodule 221 is used to divide the preset resources to be loaded into key resources and non-key resources, and is also used to complete the loading in sequence according to the loading priority of the key resources and the non-key resources, wherein the priority of the key resources is higher than that of the non-key resources; the caching submodule 222 is used to cache the preloaded resources into the preset cache; the optimizing submodule 223 is used to complete the loading of the image resources when the image resources in the non-key resources enter the visible range of the current page.

[0048] It should be noted that the preloaded resources include at least: JavaScript files (JS); style sheet files (CSS); font files (Fonts); image files (Images); audio and video files (Audio / Video); and data files (Data).

[0049] When the page of the micro-frontend system is idle, the static resources of each sub-application are loaded in sequence according to the pre-set order to ensure that the performance of the base application is not affected.

[0050] The specific loading steps are as follows:

[0051] Step 1, analyze and identify key resources:

[0052] Identify the key resources of each micro-frontend application, including JavaScript, CSS, image files, etc., to ensure that the resources required for the first screen load are loaded first.

[0053] It can be understood that the first screen load (First Screen Load or First Paint) refers to the content that is first rendered and displayed to the user when the user visits a website or application. Non-critical resources are resources other than critical resources.

[0054] Step 2: Preload key resources: When the micro-frontend system page is idle, preload key resources. You can use <link rel＝"preload"> (An HTML tag attribute used to instruct the browser to load specific resources in advance) or JavaScript dynamic loading and other technologies.

[0055] Lazy loading of non-critical resources: Lazy loading of non-critical resources to avoid blocking loading during first-screen rendering.

[0056] After loading is complete, some static resources or data can be cached to local storage to reduce network requests.

[0057] In other embodiments of the present application, a version number may be added to each resource to ensure that a new version is loaded when a resource is updated, thereby avoiding problems caused by using an old version of the resource.

[0058] It is also important to note that when loading the resources required by the sub-application, the code can be loaded on demand: using code splitting technology, the code required for different pages or functions can be loaded on demand to reduce the amount of first screen loading.

[0059] In the process of loading images, lazy loading is used to complete the loading of images: delay loading of images outside the screen to increase the loading speed of the first screen, and compress and optimize the images before loading to reduce the image size and speed up the loading speed.

[0060] In other embodiments of the present application, a performance monitoring tool may also be used: the tool is used to monitor application performance, to promptly identify and resolve performance bottlenecks, and to regularly evaluate and optimize preloading strategies and caching strategies.

[0061] like Figure 3As shown, the system further includes: a sandbox module 30;

[0062] The sandbox module 30 is used to create an independent execution environment corresponding to the sub-application, and is also used to set access rights for the sub-application, where the access rights are used to represent the resources that the sub-application can access.

[0063] Specifically, the sandbox module can be used to intercept the user's global operation behavior, prevent access to and modification of the window, and avoid global variable pollution. Each sub-application runs in a sandbox environment to obtain a relatively pure operating space. For example: a separate execution environment is created for each sub-application through the sandbox module 30, so that they are isolated from each other during operation; the sandbox module 30 limits the sub-application's access rights to specific global objects, only exposing preset APIs and functions, to prevent the sub-application from abusing or modifying objects that should not be operated.

[0064] Use the Proxy object (a built-in object in JavaScript that can be set to intercept operations), including reading, setting, and deleting properties, to ensure the security and controllability of the sub-application's operations in the sandbox.

[0065] It is understandable that sub-applications usually involve network requests. The network request logic can be encapsulated in the sandbox to ensure that the sub-application can only access specific backend services and limit cross-domain requests. Capture and handle sub-application errors in the sandbox to prevent error information from leaking to the global environment, and record logs to facilitate troubleshooting. Ensure that when a sub-application runs in a sandbox, it can only access its own resources and cannot directly operate the resources of other sub-applications or the host application, thereby ensuring resource isolation. Use the sandbox to implement permission control for sub-applications and limit their access to sensitive operations and data to ensure that sub-applications do not perform unauthorized operations at runtime.

[0066] like Figure 3 As shown, the system also includes: a style isolation module 40; the style isolation module 40 is used to add a preset prefix to each style of the sub-application, and the preset prefix is ​​determined according to the identifier of the sub-application to limit the scope of the style of the sub-application to the elements of the document object model structure in the sub-application.

[0067] Style isolation using CSS-in-JS (a development mode). This allows the code to have an independent scope, preventing the code from leaking outside the component and preventing style conflicts; making components more portable, ready to use, and easily creating loosely coupled applications; making components more reusable, only needing to be written once and run anywhere. Components can be reused not only in the same application, but also in other applications built with the same framework.

[0068] After completing style isolation, element isolation also needs to be completed. In the process of completing element isolation, each sub-application uses Shadow DOM (an element isolation technology): Each sub-application should use Shadow DOM technology to encapsulate and isolate its elements to ensure that the elements exist independently in their respective scopes.

[0069] Specifically, use unique naming conventions: ensure that elements, class names, IDs, etc. are named uniquely in different sub-applications to avoid conflicts.

[0070] Use scoped CSS in each sub-app to ensure that styles only apply to elements in the current sub-app and do not affect elements in other sub-apps.

[0071] like Figure 3 As shown, the system further includes: a data communication module 50; the data communication module 50 is used to control the base application in the micro front-end system to send data to the sub-application bound to the base application, and control the base application to receive data sent by the sub-application bound to the base application. In the case of cross-application communication, a message bus or other cross-application communication mechanism can be used to achieve communication between sub-applications to avoid directly operating elements of other sub-applications.

[0072] like Figure 3 As shown, the system further includes: a plug-in management module 60, which is used to scan the script language file to be loaded to determine the error code in the script language file to be loaded, repair the error code, and compress the script language file to be loaded.

[0073] Specifically, the script language files are modified through the plug-in management module 60. Each script language file will pass through the plug-in system. We can intercept and process these script language files, which are usually used to repair errors in script language files or inject some global variables into sub-applications.

[0074] In another way, sub-applications can be embedded in other sub-applications, but in order to prevent tag name conflicts, the tag corresponding to each sub-application is unique.

[0075] In some other embodiments of the present application, the system further includes: a state preservation module, which is used to retain the state of the application when switching between applications, so as to restore the user's operating behavior and improve the performance of repeated rendering.

[0076] The base application and sub-application each have a set of routing systems. To prevent conflicts, a route is assigned to the sub-application, called the base route. The sub-application can be rendered under this route, but cannot exceed the scope of this route.

[0077] Among them, the routing instance of each application is different. The routing instance of an application can only control itself and cannot affect other applications, including the base application cannot affect the sub-application by controlling its own routing.

[0078] When uncaught exceptions occur in sub-applications, these errors can be automatically or manually reported to the main application or a centralized error management system. This makes it easy to monitor and analyze errors and improve the maintainability of the system.

[0079] Figure 4 A control method of a micro front-end system is shown, such as Figure 4 As shown, including:

[0080] Step S402, obtaining the current page state of the micro-frontend system, and in the case where the current page state is idle, pre-loading resources required by the sub-application in the micro-frontend system;

[0081] Step S404, after the pre-loading is completed, the stage of the sub-application in the micro-frontend system in the whole life cycle is obtained;

[0082] Step S406, executing the target task according to the stage of the sub-application to manage the entire life cycle of the sub-application.

[0083] Through the control method of the above-mentioned micro-front-end system, through the life cycle module and the preloading module; the life cycle module is used to determine the stage of the sub-application in the micro-front-end system in the whole life cycle, and execute the target task according to the stage of the sub-application to manage the whole life cycle of the sub-application; the preloading module is used to preload the resources required to run the sub-application when the current page of the micro-front-end system is idle, thereby solving the technical problem of low sub-application loading efficiency of the micro-front-end system in the related technology.

[0084] It should be noted that Figure 4 The control method of the micro front-end system shown is used to control Figure 2 The control method of the micro-front-end system shown in the figure, therefore the relevant explanations in the above micro-front-end system are also applicable to the control method of the micro-front-end system, and will not be repeated here.

[0085] The embodiment of the present application also provides a computer device, including: a memory and a processor, wherein the memory is used to store program instructions; the processor is connected to the memory and is used to execute the control method of the above-mentioned micro-frontend system. For example, the current page state of the micro-frontend system is obtained, and when the current page state is idle, the resources required by the sub-application in the micro-frontend system are pre-loaded; after the pre-loading is completed, the stage of the sub-application in the micro-frontend system in the whole life cycle is obtained; according to the stage of the sub-application, the target task is executed to manage the whole life cycle of the sub-application.

[0086] The embodiment of the present application also provides a non-volatile storage medium, which includes a stored computer program, wherein the device where the non-volatile storage medium is located executes the control method of the above-mentioned micro-frontend system by running the computer program. For example, the current page state of the micro-frontend system is obtained, and when the current page state is idle, the resources required by the sub-application in the micro-frontend system are pre-loaded; after the pre-loading is completed, the stage of the sub-application in the micro-frontend system in the whole life cycle is obtained; according to the stage of the sub-application, the target task is executed to manage the whole life cycle of the sub-application.

[0087] The embodiment of the present application also provides a computer program product, including a non-volatile computer-readable storage medium, the non-volatile computer-readable storage medium stores a computer program, and the computer program, when executed by a processor, implements the steps of the control method of the micro-frontend system in the present application. For example, the current page state of the micro-frontend system is obtained, and when the current page state is idle, the resources required by the sub-application in the micro-frontend system are pre-loaded; after the pre-loading is completed, the stage of the sub-application in the micro-frontend system in the whole life cycle is obtained; according to the stage of the sub-application, the target task is executed to manage the whole life cycle of the sub-application.

[0088] The embodiment of the present application also provides a computer program product, including computer instructions, which, when executed by a processor, implement the steps of the control method of the micro-frontend system in the present application. For example, the current page state of the micro-frontend system is obtained, and when the current page state is idle, the resources required by the sub-application in the micro-frontend system are pre-loaded; after the pre-loading is completed, the stage of the sub-application in the micro-frontend system in the full life cycle is obtained; according to the stage of the sub-application, the target task is executed to manage the full life cycle of the sub-application.

[0089] The embodiment of the present application also provides a computer program, which, when executed by a processor, implements the steps of the control method of the micro-frontend system in the present application. For example, the current page state of the micro-frontend system is obtained, and when the current page state is idle, the resources required by the sub-application in the micro-frontend system are preloaded; after the preloading is completed, the stage of the sub-application in the micro-frontend system in the full life cycle is obtained; according to the stage of the sub-application, the target task is executed to manage the full life cycle of the sub-application.

[0090] The serial numbers of the above-mentioned embodiments of the present application are for description only and do not represent the advantages or disadvantages of the embodiments.

[0091] In the above embodiments of the present application, the description of each embodiment has its own emphasis. For parts that are not described in detail in a certain embodiment, please refer to the relevant description of other embodiments.

[0092] In the several embodiments provided in this application, it should be understood that the disclosed technical content can be implemented in other ways. Among them, the device embodiments described above are only schematic. For example, the division of the units can be a logical function division. There may be other division methods in actual implementation. For example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of units or modules, which can be electrical or other forms.

[0093] The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed on multiple units. Some or all of the units may be selected according to actual needs to achieve the purpose of the present embodiment.

[0094] In addition, each functional unit in each embodiment of the present application may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit. The above-mentioned integrated unit may be implemented in the form of hardware or in the form of software functional units.

[0095] If the integrated 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, the technical solution of the present application, in essence, or the part that contributes to the prior art or all or part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including a number of instructions to enable a computer device (which can be a personal computer, a server or a network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present application. The aforementioned storage medium includes: U disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), mobile hard disk, disk or optical disk and other media that can store program codes.

[0096] The above is only a preferred embodiment of the present application. It should be pointed out that for ordinary technicians in this technical field, several improvements and modifications can be made without departing from the principles of the present application. These improvements and modifications should also be regarded as the scope of protection of the present application.

Claims

1. A micro front-end system, characterized in that: include: Lifecycle modules and preload modules; The life cycle module is used to determine the stage of the sub-application in the micro-frontend system in the full life cycle, and execute the target task according to the stage of the sub-application to manage the full life cycle of the sub-application; The preloading module is used to preload resources required to run the sub-application when the current page of the micro-frontend system is idle.

2. The system according to claim 1, characterized in that The life cycle module includes: a triggering submodule, for determining, when the sub-application is loaded, that the stage of the sub-application is the sub-application creation stage; when the document object model structure of the sub-application is not generated, that the stage of the sub-application is the sub-application pre-rendering stage; when the sub-application is mounted to the current page, that the stage of the sub-application is the sub-application mounting stage; and when the sub-application is uninstalled, that the stage of the sub-application is the sub-application uninstallation stage; and when an error is reported during the operation of the sub-application, that the stage of the sub-application is the error handling stage; The execution submodule is used to execute the target task according to the stage of the sub-application.

3. The system according to claim 2, characterized in that The execution submodule is also used for: When the sub-application is in the sub-application creation stage, a first instruction is sent to the sub-application, the first instruction is at least used to instruct the sub-application to complete initialization; when the sub-application is in the sub-application pre-rendering stage, a second instruction is sent to the sub-application, the second instruction is at least used to instruct the sub-application to complete data preprocessing; when the sub-application is in the sub-application mounting stage, a third instruction is sent to the sub-application, the third instruction is at least used to instruct the sub-application to complete mounting; when the sub-application is in the sub-application uninstallation stage, a fourth instruction is sent to the sub-application, the fourth instruction is at least used to instruct the sub-application to complete uninstallation; when the sub-application is in the error handling stage, error information is obtained, and error repair is completed according to the error information.

4. The system according to claim 3, characterized in that The preloading module comprises: Load submodules, cache submodules, and optimize submodules; The loading submodule is used to divide the preset resources to be loaded into key resources and non-key resources, and is also used to complete the loading in sequence according to the loading priorities of the key resources and the non-key resources, wherein the priority of the key resources is higher than that of the non-key resources; The cache submodule is used to cache the pre-loaded resources into a preset cache; The optimization submodule is used to complete the loading of the image resource when the image resource in the non-critical resource enters the visible range of the current page.

5. The system according to claim 1, characterized in that The system further comprises: Sandbox module; The sandbox module is used to create an independent execution environment corresponding to the sub-application, and is also used to set access rights for the sub-application, where the access rights are used to represent the resources that the sub-application can access.

6. The system according to claim 1, characterized in that The system further comprises: Style isolation module; The style isolation module is used to add a preset prefix to each style of the sub-application, and the preset prefix is ​​determined according to the identifier of the sub-application to limit the scope of application of the sub-application style to the elements of the document object model structure of the sub-application.

7. The system according to claim 1, characterized in that The system further comprises: Data communication module; The data communication module is used to control the base application in the micro front-end system to send data to the sub-application bound to the base application, and control the base application to receive data sent by the sub-application bound to the base application.

8. The system according to claim 1, characterized in that The system further comprises: The plug-in management module is used to scan the script language file to be loaded to determine the error code in the script language file to be loaded, repair the error code, and compress the script language file to be loaded.

9. A control method for a micro front-end system, characterized in that: include: Obtain the current page state of the micro-frontend system, and if the current page state is idle, preload the resources required by the sub-application in the micro-frontend system; After preloading is completed, obtain the stage of the sub-application in the micro-frontend system in the entire life cycle; Target tasks are executed according to the stage of the sub-application to manage the entire life cycle of the sub-application.

10. A computer program product comprising computer instructions, characterized in that: When the computer instructions are executed by the processor, the control method of the micro-front-end system according to claim 9 is implemented.

Images