Micro-front-end sub-application loading method and device, electronic equipment and storage medium

Abstract

The invention discloses a micro-front-end sub-application loading method and device, electronic equipment and a storage medium, and relates to the technical field of computers, and the method comprises the following steps: obtaining network state information of current equipment; under the condition that the network state information represents that the network environment where the current equipment is located is a weak network environment, determining a to-be-loaded lightweight sub-application and a to-be-loaded lightweight component in the to-be-loaded lightweight sub-application; the method comprises the steps of registering a to-be-loaded lightweight sub-application in a main application of a micro front end, and declaring routing information of the to-be-loaded lightweight sub-application, so that when a user accesses the routing information, the to-be-loaded lightweight sub-application and a to-be-loaded lightweight component in the to-be-loaded lightweight sub-application are loaded, and a lightweight page is generated. According to the method and the device, the technical problems that the first screen loading speed of the website or the application is low and the waiting time of accessing the content by the user is long in the weak network environment in the related technology are solved, and the technical effects of improving the first screen loading speed and reducing the waiting time of the user in the weak network environment are achieved.

Description

Technical Field

[0001] This application relates to the field of computer technology, and particularly to a method, device, electronic device, and storage medium for loading sub-applications of micro frontends. Background Art

[0002] Micro frontend is a front-end architecture pattern that draws on the concept of microservices. It splits large front-end applications into multiple independent modules, which are developed and deployed by different teams, improving development efficiency and enhancing the flexibility and maintainability of the system. Responsive design enables front-end applications to automatically adapt to different screen sizes and resolutions on different devices to provide a good user experience.

[0003] However, the combination of the above micro frontend architecture and responsive design only considers automatically adapting to different screen sizes and resolutions on different devices, but does not consider the impact of the network environment. As a result, in a weak network environment, the first-screen loading speed of websites or applications is slow, and the waiting time for users to access content is relatively long. Summary of the Invention

[0004] This application provides a method, device, electronic device, and storage medium for loading sub-applications of micro frontends to at least solve the problem in related technologies that in a weak network environment, the first-screen loading speed of websites or applications is slow, and the waiting time for users to access content is relatively long.

[0005] This application provides a method for loading sub-applications of micro frontends, including:

[0006] Obtaining the network status information of the current device;

[0007] When the network status information indicates that the network environment where the current device is located is a weak network environment, determining the lightweight sub-application to be loaded and the lightweight components to be loaded in the lightweight sub-application to be loaded;

[0008] Registering the lightweight sub-application to be loaded in the main application of the micro frontend and declaring the routing information of the lightweight sub-application to be loaded, so that when the user accesses the routing information, the lightweight sub-application to be loaded and the lightweight components to be loaded in the lightweight sub-application to be loaded are loaded to generate a lightweight page.

[0009] This application also provides a device for loading sub-applications of micro frontends, including:

[0010] An obtaining module, configured to obtain the network status information of the current device;

[0011] A determining module, configured to determine the lightweight sub-application to be loaded and the lightweight components to be loaded in the lightweight sub-application to be loaded when the network status information indicates that the network environment where the current device is located is a weak network environment;

[0012] A loading module is used to register lightweight sub-applications to be loaded in the main application of the micro front-end, and declare the routing information of the lightweight sub-applications to be loaded, so that when the user accesses the routing information, the lightweight sub-applications to be loaded and the lightweight components to be loaded in the lightweight sub-applications to be loaded are loaded, and a lightweight page is generated.

[0013] The present application also provides an electronic device, including: a memory for storing a computer program; a processor for implementing the steps of any one of the above-mentioned sub-application loading methods of the micro front-end when executing the computer program.

[0014] The present application also provides a computer-readable storage medium, in which a computer program is stored, and when the computer program is executed by a processor, the steps of any one of the above-mentioned sub-application loading methods of the micro front-end are implemented.

[0015] The present application also provides a computer program product, including a computer program, and when the computer program is executed by a processor, the steps of any one of the above-mentioned sub-application loading methods of the micro front-end are implemented.

[0016] Through the present application, since the network status information of the current device is obtained; in the case that the network status information indicates that the network environment where the current device is located is a weak network environment, the lightweight sub-applications to be loaded and the lightweight components to be loaded in the lightweight sub-applications to be loaded are determined; the lightweight sub-applications to be loaded are registered in the main application of the micro front-end, and the routing information of the lightweight sub-applications to be loaded is declared, so that when the user accesses the routing information, the lightweight sub-applications to be loaded and the lightweight components to be loaded in the lightweight sub-applications to be loaded are loaded, and a lightweight page is generated. The technical problem that in the related art, the first-screen loading speed of a website or an application is slow and the waiting time for a user to access content is long in a weak network environment is solved, and the technical effect of improving the first-screen loading speed and reducing the user waiting time in a weak network environment is achieved. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] In order to more clearly illustrate the embodiments of the present application, the drawings required for the embodiments will be briefly introduced below. Obviously, the drawings in the following description are only some embodiments of the present application, and those of ordinary skill in the art can also obtain other drawings based on these drawings without creative efforts.

[0018] Figure 1 It is a schematic flowchart of a method for loading a sub-application of a micro front-end provided by an embodiment of the present application;

[0019] Figure 2 It is a schematic flowchart of another method for loading a sub-application of a micro front-end provided by an embodiment of the present application;

[0020] Figure 3Schematic diagram of the structure of a micro front-end system provided by an embodiment of the present application;

[0021] Figure 4 Schematic flow chart of another method for loading a sub-application of a micro front-end provided by an embodiment of the present application;

[0022] Figure 5 Block diagram of the structure of a sub-application loading device of a micro front-end provided by an embodiment of the present application;

[0023] Figure 6 Schematic diagram of the hardware structure of an electronic device provided by an embodiment of the present application. Detailed implementation manners

[0024] Next, the technical solutions in the embodiments of the present application will be clearly and completely described in conjunction with the accompanying drawings in the embodiments of the present application. Obviously, the described embodiments are only a part of the embodiments of the present application, rather than all the embodiments. Based on the embodiments in the present application, all other embodiments obtained by those of ordinary skill in the art without creative efforts belong to the scope of protection of the present application.

[0025] It should be noted that in the description of the present application, the terms "include", "comprise" or any other variation thereof are intended to cover a non-exclusive inclusion, so that a process, method, article or device including a series of elements not only includes those elements but also includes other elements not expressly listed, or further includes elements inherent to such process, method, article or device. The terms "first", "second", etc. in the present application are used to distinguish similar objects and are not used to describe a specific order or sequence.

[0026] In order to enable those skilled in the art of the present technology to better understand the solution of the present application, the present application will be further described in detail below in conjunction with the accompanying drawings and specific implementation manners.

[0027] Micro front-end is an architecture similar to microservices, which is a technical means and method strategy for multiple teams to jointly build modern web applications by independently releasing functions. It applies the concept of microservices to the field of front-end development. A micro front-end splits a large front-end application into smaller and more independent parts, and each part can be independently developed, deployed, and maintained by different teams using different technology stacks. This approach improves development efficiency, enhances the scalability and maintainability of the system, and solves the difficulties in maintenance and expansion of traditional monolithic architectures.

[0028] Among them, the micro front-end consists of a main application and sub-applications. The main application is the basic project among many applications in the micro front-end architecture. The rest of the applications are registered in this main application. In this main application, it is possible to determine which project to activate based on the link address, that is, the main application can provide overall control functions. The rest of the applications except the main application are called sub-applications. Sub-applications can be activated or destroyed according to the logic of the main application and can provide specific business functions. Each sub-application is a small front-end application developed and deployed independently, focusing on specific functional modules or business areas. Sub-applications can be built using different technology stacks and can evolve independently without affecting other parts.

[0029] Responsive design is a design method that enables websites or applications to adapt to the screen sizes and resolutions of different devices (such as desktops, laptops, tablets, and smartphones). It makes the website or application look consistent on different devices and can automatically adapt to different screen sizes and resolutions, ensuring that users can obtain a good user experience regardless of the device they use to access the website or application, thereby improving the usability and accessibility of the website or application. Among them, responsive design usually uses techniques such as fluid layouts, flexible images, and media queries to achieve.

[0030] However, the combination of the above micro front-end architecture and responsive design enables large front-end applications to automatically adapt to different screen sizes and resolutions for display on different devices, but it does not consider the impact of the network environment. As a result, in a weak network environment, the first-screen loading speed of the front-end application is slow. In severe cases, the entire front-end application may freeze or show a white screen because resources cannot be loaded in time. The waiting time for users to access the content of the front-end application is long, and some sub-applications that rely on the network environment may be completely unusable, seriously affecting the user's work process and operation efficiency. How to significantly improve the first-screen loading speed, reduce the resource volume, optimize the user-perceived performance, and enhance the user experience in a weak network environment has become an issue that deserves more and more attention.

[0031] In view of the above problems, an embodiment of the present application provides a method, device, electronic device, and storage medium for loading sub-applications of a micro-frontend. The method includes: obtaining network status information of the current device; in the case where the network status information indicates that the network environment where the current device is located is a weak network environment, determining the lightweight sub-applications to be loaded and the lightweight components to be loaded in the lightweight sub-applications to be loaded; registering the lightweight sub-applications to be loaded in the main application of the micro-frontend, and declaring the routing information of the lightweight sub-applications to be loaded, so that when a user accesses the routing information, the lightweight sub-applications to be loaded and the lightweight components to be loaded in the lightweight sub-applications to be loaded are loaded, and a lightweight page is generated. The method provided by the above solution, by loading the lightweight sub-applications to be loaded and the lightweight components to be loaded in the lightweight sub-applications to be loaded in the case where the network status information of the current device indicates that the network environment where the current device is located is a weak network environment, and generating a lightweight page, solves the technical problem in the related art that in a weak network environment, the first-screen loading speed of a website or application is slow, and the waiting time for a user to access content is long, and achieves the technical effect of improving the first-screen loading speed, reducing the user waiting time, avoiding the whole front-end application from being stuck or showing a white screen due to the failure to load resources in time in a weak network environment, the user needs to wait for a long time to access content, and some sub-applications that rely on the network may not be available at all, seriously affecting the user's work process and operation efficiency.

[0032] The following specific embodiments can be combined with each other, and the same or similar concepts or processes may not be described in some embodiments.

[0033] An embodiment of the present application provides a method for loading sub-applications of a micro-frontend, which can be used in a micro-frontend system. Figure 1 The flowchart of the method for loading sub-applications of a micro-frontend provided by an embodiment of the present application is shown in Figure 1 As shown, the process includes the following steps:

[0034] Step S101, obtaining network status information of the current device.

[0035] Wherein, the current device is a device running the micro-frontend system. This device can be a mobile phone, a tablet computer, a laptop computer, etc.

[0036] The micro-frontend system includes a network status monitoring module, which is used to obtain the network status information of the current device in real time.

[0037] The network status information includes bandwidth information, network type, online information, network mode information, round-trip time information, etc.

[0038] Step S102, when the network status information indicates that the network environment where the current device is located is a weak network environment, determine the lightweight sub-application to be loaded and the lightweight components to be loaded in the lightweight sub-application to be loaded.

[0039] Among them, the micro-frontend system includes a policy decision module, which is used to dynamically adjust the sub-applications to be loaded and the components in the sub-applications to be loaded according to the network status information of the current device.

[0040] Determine the network environment where the current device is located according to the bandwidth information, online information, network type, and network mode information in the network status information. Specifically, when the bandwidth information indicates that the bandwidth of the current device is less than the preset bandwidth threshold, the online information indicates that the current device is in an online state and the network type is a wireless network type, determine that the network environment where the current device is located is a weak network environment; or when the bandwidth information indicates that the bandwidth of the current device is less than the preset bandwidth threshold, the online information indicates that the current device is in an online state and the network type is a cellular data type, determine that the network environment where the current device is located is a weak network environment; or when the bandwidth information indicates that the bandwidth of the current device is not less than the preset bandwidth threshold, the online information indicates that the current device is in an online state, the network type is a cellular data type, and the network mode information is a data-saving mode, determine that the network environment where the current device is located is a weak network environment.

[0041] When the network environment where the current device is located is a weak network environment, determine the lightweight sub-application with not very rich content to be loaded currently and the lightweight components in the loaded lightweight sub-application.

[0042] Step S103, register the lightweight sub-application to be loaded in the main application of the micro-frontend, and declare the routing information of the lightweight sub-application to be loaded, so that when the user accesses the routing information, the lightweight sub-application to be loaded and the lightweight components to be loaded in the lightweight sub-application to be loaded are loaded to generate a lightweight page.

[0043] Among them, the micro-frontend system includes a resource management module, which is used to create a service in the main application of the micro-frontend. This service is used to manage and update the network status information of the entire micro-frontend system. By obtaining the network status information of the current device continuously monitored in the network status monitoring module, when the main application obtains that the network status information has changed, it timely sends the changed network status information to each sub-application and stores the latest network status information.

[0044] The resource management module is also used to create a state management library (Vuex) module for storing the current latest network status information, and is responsible for the communication between sub-applications after the network status information changes and the storage of the latest network status information.

[0045] The resource management module is also used to register corresponding sub-applications in the main application of the micro front-end according to different network status information. For example, when accessing sub-application A in the Wi-Fi (Wireless Fidelity) state, that is, registering sub-application A in the main application of the micro front-end; when accessing sub-application B in the cellular data state, that is, registering sub-application B in the main application of the micro front-end; when accessing sub-application C in a high-bandwidth environment, that is, registering sub-application C in the main application of the micro front-end; when accessing sub-application D in a low-bandwidth environment, that is, registering sub-application D in the main application of the micro front-end, and so on for similar logic.

[0046] After registering the corresponding sub-applications, dynamically adjust the route to access the sub-applications, so as to jump to the corresponding sub-application page.

[0047] That is to say, after determining the lightweight sub-application to be loaded and the lightweight components to be loaded in the lightweight sub-application to be loaded, the resource management module is used to register the lightweight sub-application to be loaded in the main application of the micro front-end, and declare the routing information of the lightweight sub-application to be loaded, so that when the user accesses the routing information of the lightweight sub-application to be loaded, load the lightweight sub-application to be loaded and the lightweight components to be loaded in the lightweight sub-application to be loaded, generate a lightweight page, and display the lightweight page.

[0048] The method for loading sub-applications of the micro front-end provided by the embodiments of the present application obtains the network status information of the current device; when the network status information indicates that the network environment where the current device is located is a weak network environment, determines the lightweight sub-application to be loaded and the lightweight components to be loaded in the lightweight sub-application to be loaded; registers the lightweight sub-application to be loaded in the main application of the micro front-end, and declares the routing information of the lightweight sub-application to be loaded, so as to load the lightweight sub-application to be loaded and the lightweight components to be loaded in the lightweight sub-application to be loaded when the user accesses the routing information, and generate a lightweight page. It solves the technical problem in the related art that the first-screen loading speed of a website or application is slow and the waiting time for users to access content is long in a weak network environment, and achieves the technical effect of improving the first-screen loading speed and reducing the user waiting time in a weak network environment.

[0049] The embodiments of the present application provide a method for loading sub-applications of a micro front-end, which can be used in a micro front-end system. Figure 2 For the flowchart of the method for loading sub-applications of the micro front-end provided by the embodiments of the present application, as Figure 2 shown, this process includes the following steps:

[0050] Step S201, obtain the network status information of the current device.

[0051] Specifically, the above step S201 includes:

[0052] Step S2011: Determine whether the browser of the current device supports obtaining network status information using the standard network status information obtaining method.

[0053] Among them, the network status monitoring module is used to monitor network status information based on navigator.connection. The navigator.connection is an interface provided in the web application programming interface (Application Programming Interface, abbreviated as: API) for obtaining information related to network connections. The interface returns a NetworkInformation object, which contains multiple attributes regarding the network connection status of the user device, such as network type, bandwidth, round-trip time, etc.

[0054] Specifically, define a class for monitoring and processing changes in network status information. In the constructor of the monitoring class, obtain the navigator.connection object and initialize the current network status object, that is, give a default value for the network status information.

[0055] Define a function named init(). The main purpose is to obtain network status information for initialization, and different processing methods will be adopted according to the support of the browser for obtaining network status information.

[0056] First, call the this.isSupported() method to check whether the browser of the current device supports obtaining the network status information of the current device using the this.getConnectionInfo() method. That is to say, the standard network status information obtaining method is the this.getConnectionInfo() method.

[0057] Step S2012: If the browser of the current device supports obtaining network status information using the standard network status information obtaining method, then obtain the network status information of the current device using the standard network status information obtaining method.

[0058] If supported, call the this.getConnectionInfo() method to obtain the network status information of the current device.

[0059] Step S2013: If the browser of the current device does not support obtaining network status information using the standard network status information obtaining method, then determine the target network status information obtaining method supported by the browser type of the current device based on the browser type of the current device.

[0060] When the browser of the current device does not support obtaining the network status information of the current device by using the this.getConnectionInfo() method, the this.fallbackNetworkState() method will be called to obtain the network status in other ways (methods supported by these browsers) in the case where some browsers do not support it.

[0061] That is to say, in the case where the browser of the current device does not support obtaining the network status information by using the standard network status information obtaining method, determine the target network status information obtaining method supported by the browser type of the current device.

[0062] Step S2014, based on the target network status information obtaining method, obtain the network status information of the current device.

[0063] It should be noted that the network status monitoring module also sets a listener for changes in network status information. By defining a function named listenToChanges, after initializing the network status information, continuously monitor changes in the obtained network status information for use by other modules. That is, the network status monitoring module is used to obtain the network status information of the current device in real time, and when the network status information changes, notify other modules of the information about the change in the network status information.

[0064] Step S202, in the case where the network status information indicates that the network environment where the current device is located is a weak network environment, determine the lightweight sub-application to be loaded and the lightweight components to be loaded in the lightweight sub-application to be loaded. For details, please refer to Figure 1 Step S102 of the embodiment shown, which will not be elaborated here.

[0065] Step S203, register the lightweight sub-application to be loaded in the main application of the micro front-end, and declare the routing information of the lightweight sub-application to be loaded, so that when the user accesses the routing information, load the lightweight sub-application to be loaded and the lightweight components to be loaded in the lightweight sub-application to be loaded to generate a lightweight page. For details, please refer to Figure 1 Step S103 of the embodiment shown, which will not be elaborated here.

[0066] The method for loading sub-applications of the micro front-end provided by the embodiments of the present application can adapt to the characteristics of different browsers by determining whether the browser of the current device supports the standard network status information obtaining method, and when not supported, selecting an adapted target network status information obtaining method based on the browser type to obtain the network status information of the current device. This way can ensure wide compatibility in obtaining network status information.

[0067] In some optional implementation manners, the above method for loading sub-applications of the micro front-end further includes:

[0068] Step a1, when the network status information indicates that the network environment where the current device is located is a strong network environment, determine the complete sub-application to be loaded and the complete components to be loaded in the complete sub-application to be loaded.

[0069] Among them, based on the bandwidth information, online information, network type, and network mode information in the network status information, determine the network environment where the current device is located. Specifically, when the bandwidth information indicates that the bandwidth of the current device is not less than the preset bandwidth threshold, the online information indicates that the current device is in an online state and the network type is a wireless network type, determine that the network environment where the current device is located is a strong network environment; or when the bandwidth information indicates that the bandwidth of the current device is not less than the preset bandwidth threshold, the online information indicates that the current device is in an online state, the network type is a cellular data type, and the network mode information is a normal traffic mode, determine that the network environment where the current device is located is a strong network environment.

[0070] When the network environment where the current device is located is a strong network environment, determine the complete sub-application with rich content to be loaded currently and the complete components in the complete sub-application to be loaded.

[0071] It should be noted that for any functional module in the front-end application, there can be two sub-applications. Both of these two sub-applications can implement this functional module, but one of the sub-applications is a lightweight sub-application with few pictures, few dynamic effects, and little content. The other sub-application is a complete sub-application with many pictures, many dynamic effects, and much content.

[0072] Then in a weak network environment, load the lightweight sub-application of each functional module and the lightweight components in the lightweight sub-application. In a strong network environment, load the complete sub-application of each functional module and the complete sub-components of the complete sub-application.

[0073] Step a2, register the complete sub-application to be loaded in the main application of the micro-frontend, and declare the routing information of the complete sub-application to be loaded, so that when the user accesses the routing information, load the complete sub-application to be loaded and the complete components to be loaded in the complete sub-application to be loaded, and generate a complete page.

[0074] Among them, after determining the complete sub-application to be loaded and the complete components to be loaded in the complete sub-application to be loaded, the resource management module is used to register the complete sub-application to be loaded in the main application of the micro-frontend, and declare the routing information of the complete sub-application to be loaded, so that when the user accesses the routing information of the complete sub-application to be loaded, load the complete sub-application to be loaded and the complete components to be loaded in the complete sub-application to be loaded, generate a complete page, and display the complete page.

[0075] The sub-application loading method of the micro front-end provided by the embodiment of the present application dynamically loads sub-applications and components in sub-applications on demand according to the network environment. In a strong network environment, the application can load all necessary functional modules at once to provide a complete and smooth user experience. In a weak network environment, key modules can be selectively loaded, and the loading order of resources can be optimized to reduce waiting time and improve response speed. This method can not only improve the page loading speed but also reduce unnecessary network transmissions, further optimizing the user experience.

[0076] Ordinary single-page applications often lack this flexibility. Once there is a network problem, users may encounter problems such as loading failures or slow responses. The micro front-end application that does not use the sub-application loading method of the micro front-end provided by the embodiment of the present application performs poorly in a weak network environment. The micro front-end application based only on resolution response, although adapted to different devices, fails to optimize for network conditions, resulting in low resource loading efficiency. The sub-application loading method of the micro front-end provided by the embodiment of the present application, through its highly flexible and intelligent resource loading strategy, provides users with a smooth, reliable, and efficient usage experience when dealing with different network conditions.

[0077] In some alternative embodiments, the network status information includes bandwidth information, network type, online information, and network mode information. The above step a1 includes:

[0078] Step a11, when the bandwidth information indicates that the bandwidth of the current device is not less than the preset bandwidth threshold, the online information indicates that the current device is in an online state, and the network type is a wireless network type, it is determined that the network environment where the current device is located is a strong network environment. Or, when the bandwidth information indicates that the bandwidth of the current device is not less than the preset bandwidth threshold, the online information indicates that the current device is in an online state, the network type is a cellular data type, and the network mode information is a normal traffic mode, it is determined that the network environment where the current device is located is a strong network environment.

[0079] Among them, the wireless network type is the WiFi type. The policy decision module is used to define the processing policies under different network status information. Specifically, the policy decision module is used to use the executeActionsBasedOnNetwork() method to decide to take corresponding measures according to the current network status information.

[0080] It should be noted that the preset bandwidth threshold is set by technical personnel and is not specifically limited here. The bandwidth of the current device is not less than the preset bandwidth threshold, indicating that the current device is in a high-bandwidth environment.

[0081] Step a12, when the network environment where the current device is located is a strong network environment, determine the complete sub-application among the multiple sub-applications for implementing the same functional module as the sub-application to be fully loaded.

[0082] Step a13, determine that all components in the to-be-loaded complete sub-application are to-be-loaded complete components.

[0083] It can be understood that in a strong network environment, determine to load the high-quality version of the pictures loaded by the picture components in the to-be-loaded complete sub-application, load all dynamic effect components in the to-be-loaded complete sub-application, and start the real-time update mechanism, etc.

[0084] The sub-application loading method of the micro front-end provided by the embodiments of the present application can accurately determine whether the network environment where the current device is located is a strong network environment by comprehensively analyzing multi-dimensional indicators such as bandwidth information, online information, network type, and network mode information. This way of combining multiple conditions improves the accuracy of network environment evaluation and avoids misjudgment that may be caused by a single indicator.

[0085] In some alternative embodiments, the network status information includes bandwidth information, network type, online information, and network mode information. The above step S202 includes:

[0086] Step b1, when the bandwidth information indicates that the bandwidth of the current device is less than the preset bandwidth threshold, the online information indicates that the current device is in an online state and the network type is a wireless network type, determine that the network environment where the current device is located is a weak network environment; or when the bandwidth information indicates that the bandwidth of the current device is less than the preset bandwidth threshold, the online information indicates that the current device is in an online state and the network type is a cellular data type, determine that the network environment where the current device is located is a weak network environment; or when the bandwidth information indicates that the bandwidth of the current device is not less than the preset bandwidth threshold, the online information indicates that the current device is in an online state, the network type is a cellular data type, and the network mode information is the data-saving mode, determine that the network environment where the current device is located is a weak network environment.

[0087] Step b2, when the network environment where the current device is located is a weak network environment, determine the lightweight sub-application among multiple sub-applications for implementing the same functional module as the to-be-loaded lightweight sub-application.

[0088] Step b3, perform compression processing on the pictures loaded by the picture components in the to-be-loaded lightweight sub-application, and shield the dynamic effect components in the lightweight sub-application whose bandwidth resource occupation amount exceeds the preset bandwidth occupation threshold, to obtain the to-be-loaded lightweight components in the to-be-loaded lightweight sub-application.

[0089] Among them, the preset bandwidth occupation threshold is set by technicians and is not specifically limited here. If the bandwidth resource occupation amount exceeds the preset bandwidth occupation threshold, it means that too much bandwidth resource is occupied. Then, in a weak network environment, these dynamic effect components are not displayed.

[0090] It can be understood that in a weak network environment, determine to load the low-quality version of the pictures loaded by the picture components in the to-be-loaded lightweight sub-application, and block some dynamic effect components that occupy more bandwidth resources, etc., so as to reduce network transmission and interaction with the server, optimize data transmission, optimize the loading speed, etc. In this embodiment, the effect of loading the low-quality version of the pictures is achieved by compressing the pictures loaded by the picture components in the to-be-loaded lightweight sub-application.

[0091] Specifically, the microservice system includes a user interface adaptation module, which ensures the best experience for users in various network environments and is used for dynamically adjusting the layout, compressing pictures, etc.

[0092] The user interface adaptation module is used to listen for changes in network status information inside the components of the interface, and dynamically adjust the page layout and content according to the network environment corresponding to the monitored network status information. For example, through the style file, set the size of the picture display, control the number of page display elements, etc.

[0093] The user interface adaptation module is also used to first compress the pictures that need to be displayed on the page according to the network environment corresponding to the monitored network status information, and then display them, optimizing the data request of the page.

[0094] That is to say, the user interface adaptation module is used to, in a weak network environment, compress the pictures loaded by the picture components in the to-be-loaded lightweight sub-application, block the dynamic effect components in the lightweight sub-application whose bandwidth resource occupancy exceeds the preset bandwidth occupancy threshold, and obtain the to-be-loaded lightweight components in the to-be-loaded lightweight sub-application. It is also used to, when the user accesses the routing information of the to-be-loaded lightweight sub-application, load the to-be-loaded lightweight sub-application and the to-be-loaded lightweight components in the to-be-loaded lightweight sub-application, and generate a lightweight page.

[0095] It should be noted that the effect of displaying the low-quality version of the pictures can also be achieved by adjusting the size of the pictures loaded by the picture components in the to-be-loaded lightweight sub-application.

[0096] It can be understood that the user interface adaptation module is also used to, in a strong network environment, when the user accesses the routing information, load the to-be-loaded complete sub-application and the to-be-loaded complete components in the to-be-loaded complete sub-application, and generate a complete page.

[0097] The sub-application loading method of the micro front-end provided by the embodiment of the present application can accurately judge whether the network environment where the current device is located is a weak network environment by comprehensively analyzing multi-dimensional indicators such as bandwidth information, online information, network type, and network mode information. This way of combining multiple conditions improves the accuracy of network environment evaluation and avoids misjudgment that may be caused by a single indicator.

[0098] In some alternative embodiments, the method for loading sub - applications of the above - mentioned micro - front - end further includes:

[0099] Step c1, when the network status information indicates that the network environment where the current device is located is an offline environment, obtain the static resource sub - application to be loaded from the buffer.

[0100] Among them, when the online information indicates that the current device is in an offline state, it is determined that the network environment where the current device is located is an offline environment, and the static resource sub - application to be loaded is obtained from the buffer of the server. The cache mentioned below refers to this buffer.

[0101] It can be understood that the components in the static resource sub - application are static resource components, that is, the components in the static resource sub - application cached in the buffer.

[0102] Step c2, register the static resource sub - application to be loaded in the main application of the micro - front - end, and declare the routing information of the static resource sub - application to be loaded, so that when the user accesses the routing information, the static resource sub - application to be loaded is loaded, a static page is generated, and offline information is displayed on the static page.

[0103] Among them, offline information is displayed on the static page to provide a friendly prompt page for the user.

[0104] The method for loading sub - applications of the micro - front - end provided by the embodiments of the present application, when the current device is in an offline environment, loads the static resource sub - application from the buffer to generate a static page and displays offline information. Ensure that even when the network is unavailable, users can still see the page content and understand the current network status, thus improving the user experience.

[0105] In some alternative embodiments, the method for loading sub - applications of the above - mentioned micro - front - end further includes:

[0106] Step d1, during the process of loading the lightweight sub - application to be loaded and the lightweight components to be loaded in the lightweight sub - application to be loaded, determine whether there is an image resource required for the lightweight component to be loaded in the buffer.

[0107] Step d2, if it exists, obtain the image resource required for the lightweight component to be loaded from the buffer, and based on the image resource, load the lightweight sub - application to be loaded and the lightweight components to be loaded in the lightweight sub - application to be loaded.

[0108] Step d3, if it does not exist, download the original image resource from the server, perform compression processing on the original image resource to obtain the image resource required for the lightweight component to be loaded, load the lightweight sub - application to be loaded and the lightweight components to be loaded in the lightweight sub - application to be loaded based on the image resource, and cache the image resource required for the lightweight sub - application to be loaded in the buffer.

[0109] Among them, the original picture resources are high-quality version picture resources.

[0110] The micro front-end system includes a cache management module. The cache management module is used to implement a cache policy based on the fetch event, register Service Worker, and store resources using the cache API. The resources can be pictures, web pages implemented in HyperText Markup Language (HTML for short), the appearance and style of web pages implemented in Cascading Style Sheets (CSS for short), dynamic effects implemented in a scripting language (JavaScript), etc. When the browser initiates a resource request, the caches.match method is called to try to find a response in the cache that matches the current request. If a matching cached response is found, the matching cached response, that is, the matching resources such as pictures and text, is obtained from the cache. If no matching cached response is found, the resource matching the current request is obtained from the server. After the resource is obtained, the resource such as the picture resource and the text resource is stored in the cache for preferentially using the resources in the cache when accessing again.

[0111] Among them, Service Worker is a script that runs in the background of the browser. It is independent of the current web page and can intercept and process network requests, providing functions such as offline caching, message push, and background processing. The emergence of Service Worker is to enable web applications to have functions similar to native applications, such as offline use, message push, and background automatic update.

[0112] Exemplarily, after obtaining the picture resource matching the current request from the server, the picture resource is converted into the form of a Data URL (Data Uniform Resource Locator) of Joint Photographic Experts Group (JPEG for short) format data of a specified quality according to the current network environment, and the converted picture resource is stored in the cache.

[0113] It can be understood that if the current network environment is a weak network environment, after obtaining the picture resources matching the current request from the server, the obtained picture resources are compressed using the compress method. This compression method can specify the compression quality by receiving an optional quality parameter, and then convert the picture resources into the form of a Data URL in JPEG format with the specified quality, and return the compressed picture resources, so as to realize the compression processing of the picture resources. Based on the compressed picture resources, the lightweight sub-application to be loaded and the lightweight components to be loaded in the lightweight sub-application to be loaded are loaded, and the picture resources required for the lightweight sub-application to be loaded, that is, the compressed picture resources, are cached in the buffer area.

[0114] It should be noted that in the case where the current network environment is a weak network environment, the size of the picture resources matching the current request obtained from the server can also be adjusted by using the resize method, so as to realize the modification of the size of the picture resources, and then obtain a low-quality version of the picture resources. Based on the picture resources with adjusted size, the lightweight sub-application to be loaded and the lightweight components to be loaded in the lightweight sub-application to be loaded are loaded, and the picture resources required for the lightweight sub-application to be loaded, that is, the picture resources with adjusted size, are cached in the buffer area.

[0115] Furthermore, it should be noted that during the process of loading the complete sub-application to be loaded and the complete components to be loaded in the complete sub-application to be loaded, it is judged whether there are picture resources required for the complete components to be loaded in the buffer area. If so, the picture resources required for the complete components to be loaded are obtained from the buffer area, and based on the picture resources, the complete sub-application to be loaded and the complete components to be loaded in the complete sub-application to be loaded are loaded. If not, the original picture resources are downloaded from the server, and based on the original picture resources, the complete sub-application to be loaded and the complete components to be loaded in the complete sub-application to be loaded are loaded, and the original picture resources are cached in the buffer area.

[0116] It can be understood that if the current network environment is a strong network environment, after obtaining the picture resources matching the current request from the server, directly based on the obtained picture resources, the complete sub-application to be loaded and the complete components to be loaded in the complete sub-application to be loaded are loaded, and the obtained picture resources are cached in the buffer area.

[0117] The method for loading sub-applications of the micro front-end provided by the embodiments of the present application can significantly reduce the number of network requests and shorten the resource loading time by preferentially obtaining the required picture resources from the buffer area during the process of loading the lightweight sub-application to be loaded and its components, thereby improving the response speed of the page and the user experience.

[0118] In some optional embodiments, the above method for loading sub-applications of the micro front-end further includes:

[0119] Step e1: During the process of loading the lightweight sub - application to be loaded and the lightweight components in the lightweight sub - application to be loaded to generate a lightweight page, the loading status is obtained in real - time.

[0120] Step e2: If the loading status is loading failure, record the loading failure information and display the corresponding error prompt message on the page, so that the user can understand the loading status of the lightweight sub - application to be loaded and the lightweight components.

[0121] It can be understood that during the process of loading the complete sub - application to be loaded and the complete components in the complete sub - application to be loaded to generate a complete page, the loading status is also obtained in real - time. If the loading status is loading failure, record the loading failure information and display the corresponding error prompt message on the page, so that the user can understand the loading status of the complete sub - application to be loaded and the complete components.

[0122] The sub - application loading method of the micro - front - end provided by the embodiments of the present application can timely discover and locate problems by obtaining the loading status in real - time and recording the loading failure information, ensuring that the loading process of the sub - application and components has higher reliability.

[0123] The embodiments of the present application provide a micro - front - end system for executing the method in the above - mentioned embodiments. Figure 3 For the structural schematic diagram of the micro - front - end system provided by the embodiments of the present application, as Figure 3 shown, the micro - front - end system includes a network status monitoring module, a policy decision - making module, a resource management module, a user interface adaptation module, and a cache management module.

[0124] Among them, the network status monitoring module is used to detect the network status based on navigator.connection, initialize the current network status information, and set a listener for changes in network status information. For details, refer to the relevant descriptions in the foregoing steps S2011 to S2014, and will not be elaborated here.

[0125] The policy decision - making module is used to determine the network environment where the current device is located according to the network status information monitored by the network status monitoring module, and determine the operations to be performed according to the network environment where the current device is located, such as operations in a weak - network environment, operations in a strong - network environment, operations in an offline environment, etc.

[0126] The resource management module is used to create a Vuex module specifically for managing network status information, register the corresponding sub - applications in the main application according to different network status information, and dynamically adjust the routes of the sub - applications. It is integrated with the micro - front - end framework to load and hot - update sub - applications on demand. For details, refer to the description of the resource management module in the foregoing method embodiments, and will not be elaborated here.

[0127] The user interface adaptation module is used to dynamically adjust the layout, compress images, etc. Specifically, the user interface adaptation module is used to dynamically adjust the user interface (UI for short), and optimize the resource loading order. For a detailed description of the user interface adaptation module, please refer to the foregoing method embodiments, and details are not described herein again.

[0128] The cache management module is used to register Service Workers and store resources using the Cache API. It is also used to design a reasonable caching strategy to ensure data consistency and timeliness. For a detailed description of the cache management module, please refer to the foregoing method embodiments, and details are not described herein again.

[0129] The micro front-end system provided by the embodiments of the present application applies the development concepts of modularization and componentization, responsive design, and lazy loading. It uses technologies such as caching technology and micro front-end frameworks. The network status monitoring module collects the network status of the device in real time, including bandwidth, latency, network connection speed, etc. The policy decision module formulates response policies based on the network status information, such as which sub-applications or components to load, optimize the UI layout, etc. The resource management module dynamically loads / unloads sub-applications, components, or other resources according to the decision results. The user interface adaptation module ensures the best user experience under various network conditions, adjusts the layout, compresses images, and the cache management module improves performance, reduces the number of server requests and data transfer volume. Through the cooperation of the above-mentioned modules, it is possible to optimize resource loading and UI display according to the real-time network status, reduce latency and data transfer volume through caching and communication optimization, adapt to different network environments, and ensure efficient and high-quality user experience in a dynamic network environment.

[0130] The embodiments of the present application provide a method for loading sub-applications of a micro front-end, which can be used in the above-mentioned micro front-end system. Figure 4 It is a schematic flowchart of the method for loading sub-applications of the micro front-end provided by the embodiments of the present application. As Figure 4 shown, the process includes the following steps:

[0131] First, obtain the network status information of the current device through the network status monitoring module. For a detailed description, please refer to the relevant descriptions in the foregoing steps S2011 to S2014, and details are not described herein again.

[0132] Second, through the policy decision module, dynamically adjust the sub-applications to be loaded and the components in the sub-applications to be loaded according to the network status information of the current device.

[0133] Third, determine whether the network status is good. That is, determine whether the network environment where the current device is located is a strong network environment.

[0134] If the network status is good, that is, the network environment where the current device is located is a strong network environment, the resource management module loads the sub-application resources, that is, loads the to-be-loaded complete sub-application and the to-be-loaded complete components in the to-be-loaded complete sub-application.

[0135] If the network status is not good, that is, the network environment where the current device is located is a weak network environment, the resource management module attempts to load lightweight resources, that is, attempts to load the to-be-loaded lightweight sub-application and the to-be-loaded lightweight components in the to-be-loaded lightweight sub-application.

[0136] In the fourth step, when the network status is not good, it is judged whether the lightweight resources can be loaded successfully. That is, it is judged whether the to-be-loaded lightweight sub-application and the to-be-loaded lightweight components in the to-be-loaded lightweight sub-application can be loaded.

[0137] If the loading is successful, the resource management module loads the core functions of the sub-application, that is, loads the to-be-loaded lightweight sub-application and the to-be-loaded lightweight components in the to-be-loaded lightweight sub-application.

[0138] If the loading is not successful, the resource management module displays a loading failure prompt.

[0139] In the fifth step, the user interface adaptation module adaptively displays the page. That is, in a weak network environment, when the user accesses the routing information of the to-be-loaded lightweight sub-application, the user interface adaptation module loads the to-be-loaded lightweight sub-application and the to-be-loaded lightweight components in the to-be-loaded lightweight sub-application to generate a lightweight page. In a strong network environment, when the user accesses the routing information of the to-be-loaded complete sub-application, the user interface adaptation module loads the to-be-loaded complete sub-application and the to-be-loaded complete components in the to-be-loaded complete sub-application to generate a complete page.

[0140] In the sixth step, the cache management module caches files such as pictures and styles. The cache management module is used to cache the picture resources and style resources that do not exist in the cache area during the process of loading the to-be-loaded lightweight sub-application and the to-be-loaded lightweight components in the to-be-loaded lightweight sub-application. It is also used to cache the picture resources and style resources that do not exist in the cache area during the process of loading the to-be-loaded complete sub-application and the to-be-loaded complete components in the to-be-loaded complete sub-application.

[0141] The sub-application loading method of the micro front-end provided by the embodiments of the present application allows sub-applications to be dynamically loaded according to the network conditions. The main application can decide whether to load resource-intensive sub-applications or preferentially load key functional modules based on the current network conditions. This ensures that users can access necessary functions in a timely manner without wasting time waiting for unnecessary resources. Combining technologies such as Service Worker, offline caching of sub-applications is achieved. When the network is disconnected, users can still access the cached content to maintain the availability of basic functions. This feature is particularly beneficial for mobile applications or situations where they are frequently used in different network environments. Using Vuex for state management can restore the previous state after a network interruption, providing a smoother user experience.

[0142] Moreover, in the sub-application loading method of the micro front-end provided by the embodiments of the present application, even after reconnecting after a disconnection, users will not lose operation data and can continue to work without having to start over. Dynamically adjusting the loading strategy according to the network conditions, in a weak network environment, the application can compress or reduce unnecessary data transmission, optimize pictures and other static resources, thereby improving the overall performance. This not only speeds up the page loading speed but also reduces the user's traffic consumption. Real-time monitoring of the network status and corresponding adjustment of the application behavior significantly improve the user experience. In a strong network situation, a loading animation can also be shown in advance, or the content that may be needed can be pre-cached to reduce the waiting time and improve user satisfaction.

[0143] Through the description of the above embodiments, those skilled in the art can clearly understand that the method according to the above embodiments can be implemented by means of software plus a necessary general hardware platform. Of course, it can also be implemented by hardware, but in many cases, the former is a better implementation method.

[0144] The embodiments of the present application also provide a sub-application loading device for a micro front-end, as Figure 5 shown, including:

[0145] An acquisition module 501, configured to acquire network status information of the current device.

[0146] A determination module 502, configured to determine a lightweight sub-application to be loaded and lightweight components to be loaded in the lightweight sub-application to be loaded when the network status information indicates that the network environment where the current device is located is a weak network environment.

[0147] A loading module 503, configured to register the lightweight sub-application to be loaded in the main application of the micro front-end and declare the routing information of the lightweight sub-application to be loaded, so as to load the lightweight sub-application to be loaded and the lightweight components to be loaded in the lightweight sub-application to be loaded when the user accesses the routing information, and generate a lightweight page.

[0148] In some alternative embodiments, the obtaining module 501 includes:

[0149] A first determination unit, configured to determine whether the browser of the current device supports obtaining network status information by using a standard network status information obtaining method.

[0150] A first obtaining unit, configured to, if the browser of the current device supports obtaining network status information by using a standard network status information obtaining method, obtain the network status information of the current device by using the standard network status information obtaining method.

[0151] A first determination unit, configured to, if the browser of the current device does not support obtaining network status information by using a standard network status information obtaining method, determine a target network status information obtaining method supported by the browser type of the current device based on the browser type of the current device.

[0152] A second obtaining unit, configured to obtain the network status information of the current device based on the target network status information obtaining method.

[0153] In some alternative embodiments, the above-mentioned sub-application loading device of the micro front-end further includes:

[0154] A second determination unit, configured to determine a complete sub-application to be loaded and complete components to be loaded in the complete sub-application to be loaded when the network status information indicates that the network environment where the current device is located is a strong network environment.

[0155] A first generation unit, configured to register the complete sub-application to be loaded in the main application of the micro front-end and declare the routing information of the complete sub-application to be loaded, so that when a user accesses the routing information, the complete sub-application to be loaded and the complete components to be loaded in the complete sub-application to be loaded are loaded to generate a complete page.

[0156] In some alternative embodiments, the second determination unit includes:

[0157] A third determination unit, configured to determine that the network environment where the current device is located is a strong network environment when the bandwidth information indicates that the bandwidth of the current device is not less than a preset bandwidth threshold, the online information indicates that the current device is in an online state and the network type is a wireless network type, or, when the bandwidth information indicates that the bandwidth of the current device is not less than a preset bandwidth threshold, the online information indicates that the current device is in an online state, the network type is a cellular data type, and the network mode information is a normal traffic mode, determine that the network environment where the current device is located is a strong network environment.

[0158] A fourth determination unit, configured to determine the complete sub-application in multiple sub-applications for implementing the same functional module as the complete sub-application to be loaded when the network environment where the current device is located is a strong network environment.

[0159] A fifth determination unit, configured to determine that all components in the to-be-loaded complete sub-application are to-be-loaded complete components.

[0160] In some optional implementation manners, the determination module 502 includes:

[0161] A sixth determination unit, configured to determine that the network environment where the current device is located is a weak network environment when the bandwidth information indicates that the bandwidth of the current device is less than a preset bandwidth threshold, the online information indicates that the current device is in an online state and the network type is a wireless network type, or to determine that the network environment where the current device is located is a weak network environment when the bandwidth information indicates that the bandwidth of the current device is less than a preset bandwidth threshold, the online information indicates that the current device is in an online state and the network type is a cellular data type, or to determine that the network environment where the current device is located is a weak network environment when the bandwidth information indicates that the bandwidth of the current device is not less than a preset bandwidth threshold, the online information indicates that the current device is in an online state, the network type is a cellular data type, and the network mode information is a traffic-saving mode.

[0162] A seventh determination unit, configured to determine that the lightweight sub-application among multiple sub-applications for implementing the same function module is the to-be-loaded lightweight sub-application when the network environment where the current device is located is a weak network environment.

[0163] A third acquisition unit, configured to perform compression processing on the pictures loaded by the picture components in the to-be-loaded lightweight sub-application, and mask the dynamic effect components in the lightweight sub-application whose occupied bandwidth resource amount exceeds a preset bandwidth occupancy threshold, to obtain the to-be-loaded lightweight components in the to-be-loaded lightweight sub-application.

[0164] In some optional implementation manners, the above-mentioned sub-application loading device of the micro front-end further includes:

[0165] A fourth acquisition unit, configured to acquire the to-be-loaded static resource sub-application from the buffer area when the network status information indicates that the network environment where the current device is located is an offline environment.

[0166] A second generation unit, configured to register the to-be-loaded static resource sub-application in the main application of the micro front-end, and declare the routing information of the to-be-loaded static resource sub-application, so as to load the to-be-loaded static resource sub-application, generate a static page, and display offline information on the static page when the user accesses the routing information.

[0167] In some optional implementation manners, the above-mentioned sub-application loading device of the micro front-end further includes:

[0168] A second judgment unit, configured to judge whether there is a picture resource required by the to-be-loaded lightweight components in the buffer area during the process of loading the to-be-loaded lightweight sub-application and the to-be-loaded lightweight components in the to-be-loaded lightweight sub-application.

[0169] The first loading unit is configured to, if available, obtain the picture resources required for the lightweight component to be loaded from the buffer area, and based on the picture resources, load the lightweight sub-application to be loaded and the lightweight component to be loaded in the lightweight sub-application to be loaded.

[0170] The second loading unit is configured to, if not available, download the original picture resources from the server, perform compression processing on the original picture resources to obtain the picture resources required for the lightweight component to be loaded, load the lightweight sub-application to be loaded and the lightweight component to be loaded in the lightweight sub-application to be loaded based on the picture resources, and cache the picture resources required for the lightweight to be loaded into the buffer area.

[0171] For the description of the features in the corresponding embodiments of the sub-application loading device of the micro front-end, reference can be made to the relevant descriptions in the corresponding embodiments of the sub-application loading method of the micro front-end, which will not be elaborated here one by one.

[0172] An embodiment of the present application also provides an electronic device, as Figure 6 shown, including a processor 601 and a memory 602. The memory 602 stores a computer program, and the processor 601 is configured to run the computer program to execute the steps in any of the above-mentioned embodiments of the sub-application loading method of the micro front-end.

[0173] An embodiment of the present application also provides a computer-readable storage medium, which stores a computer program, wherein the computer program is configured to execute the steps in any of the above-mentioned embodiments of the sub-application loading method of the micro front-end when running.

[0174] In an exemplary embodiment, the above-mentioned computer-readable storage medium may include, but is not limited to: USB flash drive, read-only memory (ROM for short), random access memory (RAM for short), mobile hard disk, magnetic disk or optical disc, etc., various media that can store computer programs.

[0175] An embodiment of the present application also provides a computer program product, the above-mentioned computer program product includes a computer program, and when the computer program is executed by a processor, it implements the steps in any of the above-mentioned embodiments of the sub-application loading method of the micro front-end.

[0176] An embodiment of the present application also provides another computer program product, including a non-volatile computer-readable storage medium, the non-volatile computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, it implements the steps in any of the above-mentioned embodiments of the sub-application loading method of the micro front-end.

[0177] Those skilled in the art may further realize that the units and algorithm steps of each example described in connection with the embodiments disclosed herein can be implemented by electronic hardware, computer software, or a combination of the two. To clearly illustrate the interchangeability of hardware and software, the components and steps of each example have been generally described according to functions in the above description. Whether these functions are executed in a hardware or software manner depends on the specific application and design constraints of the technical solution. Those skilled in the art 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 this application.

[0178] The above has introduced in detail a method, device, electronic device, and storage medium for loading a sub-application of a micro front-end provided by this application. Specific examples are used herein to elaborate on the principle and implementation manner of this application. The description of the above embodiments is only used to help understand the method and its core idea of this application. It should be noted that for those of ordinary skill in the art, without departing from the principle of this application, several improvements and modifications can be made to this application, and these improvements and modifications also fall within the protection scope of the claims of this application.

Claims

1. A method for loading sub - applications of a micro - front - end, characterized in that, Including: Obtain the network status information of the current device; When the network status information indicates that the network environment where the current device is located is a weak network environment, determine the lightweight sub-application to be loaded and the lightweight components to be loaded in the lightweight sub-application to be loaded; Register the lightweight sub-application to be loaded in the main application of the micro-frontend, and declare the routing information of the lightweight sub-application to be loaded, so that when the user accesses the routing information, load the lightweight sub-application to be loaded and the lightweight components to be loaded in the lightweight sub-application to be loaded, and generate a lightweight page.

2. The method according to claim 1, wherein The obtaining of the network status information of the current device includes: Determine whether the browser of the current device supports obtaining network status information by using the standard network status information obtaining method; If the browser of the current device supports obtaining network status information by using the standard network status information obtaining method, then obtain the network status information of the current device by using the standard network status information obtaining method; If the browser of the current device does not support obtaining network status information by using the standard network status information obtaining method, then determine the target network status information obtaining method supported by the browser type of the current device based on the browser type of the current device; Based on the target network status information obtaining method, obtain the network status information of the current device.

3. The method according to claim 1, characterized in that, The method further includes: When the network status information indicates that the network environment where the current device is located is a strong network environment, determine the complete sub-application to be loaded and the complete components to be loaded in the complete sub-application to be loaded; Register the complete sub-application to be loaded in the main application of the micro-frontend, and declare the routing information of the complete sub-application to be loaded, so that when the user accesses the routing information, load the complete sub-application to be loaded and the complete components to be loaded in the complete sub-application to be loaded, and generate a complete page.

4. The method according to claim 3, characterized in that The network status information includes bandwidth information, network type, online information, and network mode information. When the network status information indicates that the network environment where the current device is located is a strong network environment, determining the complete sub-application to be loaded and the complete components to be loaded in the complete sub-application to be loaded includes: When the bandwidth information indicates that the bandwidth of the current device is not less than the preset bandwidth threshold, the online information indicates that the current device is in an online state, and the network type is a wireless network type, determine that the network environment where the current device is located is a strong network environment, or when the bandwidth information indicates that the bandwidth of the current device is not less than the preset bandwidth threshold, the online information indicates that the current device is in an online state, the network type is a cellular data type, and the network mode information is a normal traffic mode, determine that the network environment where the current device is located is a strong network environment; When the network environment where the current device is located is a strong network environment, determine the complete sub-application among multiple sub-applications that implement the same functional module as the complete sub-application to be loaded; Determine all components in the complete sub-application to be loaded as the complete components to be loaded.

5. The method according to claim 1, characterized in that, The network status information includes bandwidth information, network type, online information, and network mode information. When the network status information indicates that the network environment where the current device is located is a weak network environment, determining the lightweight sub-application to be loaded and the lightweight components to be loaded in the lightweight sub-application to be loaded includes: When the bandwidth information indicates that the bandwidth of the current device is less than a preset bandwidth threshold, the online information indicates that the current device is in an online state, and the network type is a wireless network type, determining that the network environment where the current device is located is a weak network environment; or when the bandwidth information indicates that the bandwidth of the current device is less than a preset bandwidth threshold, the online information indicates that the current device is in an online state, and the network type is a cellular data type, determining that the network environment where the current device is located is a weak network environment; or when the bandwidth information indicates that the bandwidth of the current device is not less than a preset bandwidth threshold, the online information indicates that the current device is in an online state, the network type is a cellular data type, and the network mode information is a data-saving mode, determining that the network environment where the current device is located is a weak network environment; When the network environment where the current device is located is a weak network environment, determining the lightweight sub-application in multiple sub-applications that implement the same function module as the lightweight sub-application to be loaded; Compressing the pictures loaded by the picture components in the lightweight sub-application to be loaded, and shielding the dynamic effect components in the lightweight sub-application that exceed the preset bandwidth occupancy threshold, to obtain the lightweight components to be loaded in the lightweight sub-application to be loaded.

6. The method according to claim 1, characterized in that, The method further includes: When the network status information indicates that the network environment where the current device is located is an offline environment, obtaining the static resource sub-application to be loaded from the buffer; Registering the static resource sub-application to be loaded in the main application of the micro front-end, and declaring the routing information of the static resource sub-application to be loaded, so that when the user accesses the routing information, the static resource sub-application to be loaded is loaded, a static page is generated, and offline information is displayed on the static page.

7. The method according to claim 1, characterized in that, The method further includes: During the process of loading the lightweight sub-application to be loaded and the lightweight components to be loaded in the lightweight sub-application to be loaded, determining whether there is a picture resource required by the lightweight component to be loaded in the buffer; If it exists, obtaining the picture resource required by the lightweight component to be loaded from the buffer, and based on the picture resource, loading the lightweight sub-application to be loaded and the lightweight components to be loaded in the lightweight sub-application to be loaded; If it does not exist, downloading the original picture resource from the server, compressing the original picture resource to obtain the picture resource required by the lightweight component to be loaded, based on the picture resource, loading the lightweight sub-application to be loaded and the lightweight components to be loaded in the lightweight sub-application to be loaded, and caching the picture resource required by the lightweight sub-application to be loaded into the buffer.

8. A sub-application loading device for a micro front-end, characterized in that, including: An acquisition module, configured to acquire the network status information of the current device; A determination module, configured to determine a lightweight sub-application to be loaded and lightweight components to be loaded in the lightweight sub-application to be loaded when the network status information indicates that the network environment where the current device is located is a weak network environment; A loading module, configured to register the lightweight sub-application to be loaded in the main application of the micro front-end and declare the routing information of the lightweight sub-application to be loaded, so as to load the lightweight sub-application to be loaded and the lightweight components to be loaded in the lightweight sub-application to be loaded when the user accesses the routing information, and generate a lightweight page.

9. An electronic device, characterized in that, Comprising: A memory, configured to store a computer program; A processor, configured to implement the steps of the sub-application loading method of the micro front-end according to any one of claims 1 to 7 when executing the computer program.

10. A computer-readable storage medium, characterized in that, A computer program is stored in the computer-readable storage medium, wherein the computer program implements the steps of the sub-application loading method of the micro front-end according to any one of claims 1 to 7 when executed by a processor.

Images