Front-end application preloading rule construction method and device, equipment and storage medium

Abstract

The invention discloses a front-end application preloading rule construction method and device, equipment and a storage medium, and belongs to the technical field of front-end application development.The method comprises the steps that an application agent portal page is constructed according to an obtained application access request, and the application agent portal page is returned to a Web client; when it is detected that the Web client loads the application agent portal page, a main application running container is established, in the main application running container, a target application address in the application agent portal page is loaded, a target application code corresponding to the target application address is detected, and the target application type of the target application is determined; according to the target application code, the target application type and the main application running container, constructing a target routing application list of the target application; and according to the target application type and the target routing application list, constructing a pre-loading rule of the target application.

Description

Technical Field

[0001] The present invention relates to the technical field of front - end application development, and in particular, to a method, device, equipment, and storage medium for constructing pre - loading rules for front - end applications. Background Art

[0002] With the continuous iteration and update of the development technology route, the software development mode has undergone a fundamental transformation, gradually transitioning from the traditional coupled architecture mode that once dominated to the front - end and back - end separated development mode.

[0003] However, in the front - end and back - end separated development mode, all pages are integrated into a whole, resulting in an increase in the volume of the front - end page. When users open the front - end application page, a white - screen problem often occurs, reducing the user's operation experience. Summary of the Invention

[0004] The present invention provides a method, device, equipment, and storage medium for constructing pre - loading rules for front - end applications to solve the white - screen problem when opening the front - end application page and improve the user's operation experience.

[0005] According to one aspect of the present invention, there is provided a method for constructing pre - loading rules for front - end applications, the method comprising:

[0006] Construct an application proxy portal page according to the obtained application access request, and return the application proxy portal page to the Web client;

[0007] When it is detected that the Web client loads the application proxy portal page, create a main application running container, and in the main application running container, load the target application address in the application proxy portal page, and detect the target application code corresponding to the target application address to determine the target application type of the target application;

[0008] Construct a target routing application list of the target application according to the target application code, target application type, and main application running container;

[0009] Construct a pre - loading rule of the target application according to the target application type and the target routing application list.

[0010] According to another aspect of the present invention, there is provided a device for constructing pre - loading rules for front - end applications, the device comprising:

[0011] A proxy portal page construction module, configured to construct an application proxy portal page according to the obtained application access request, and return the application proxy portal page to the Web client;

[0012] A target application type determination module, configured to create a main application running container when detecting that a Web client loads an application proxy portal page, and in the main application running container, load a target application address in the application proxy portal page, and detect a target application code corresponding to the target application address to determine a target application type of the target application;

[0013] A routing application list construction module, configured to construct a target routing application list of the target application according to the target application code, the target application type, and the main application running container;

[0014] An application preloading rule construction module, configured to construct a preloading rule of the target application according to the target application type and the target routing application list.

[0015] According to another aspect of the present invention, there is provided an electronic device, where the electronic device includes:

[0016] At least one processor;

[0017] And a memory communicatively connected to the at least one processor; wherein,

[0018] The memory stores a computer program executable by the at least one processor, and when the computer program is executed by the at least one processor, the at least one processor is enabled to execute the front-end application preloading rule construction method according to any embodiment of the present invention.

[0019] According to another aspect of the present invention, there is provided a computer-readable storage medium, where the computer-readable storage medium stores computer instructions, and when the computer instructions are executed by a processor, the front-end application preloading rule construction method according to any embodiment of the present invention is implemented.

[0020] According to another aspect of the present invention, there is provided a computer program product, including a computer program, and when the computer program is executed by a processor, the front-end application preloading rule construction method according to any embodiment of the present invention is implemented.

[0021] The technical solution of the embodiment of the present invention is as follows: according to the obtained application access request, an application proxy portal page is constructed and returned to the Web client; when it is detected that the Web client loads the application proxy portal page, a main application running container is created, and in the main application running container, the target application address in the application proxy portal page is loaded, and the target application code corresponding to the target application address is detected to determine the target application type of the target application; according to the target application code, the target application type and the main application running container, a target routing application list of the target application is constructed; according to the target application type and the target routing application list, a preloading rule of the target application is constructed. The above technical solution first constructs an application proxy portal page according to the access request of the front-end application; then, when it is detected that the Web client loads the application proxy portal page, the target application code corresponding to the target application address in the application proxy portal page is detected to determine the application type of the front-end application; furthermore, according to the application type of the front-end application, a preloading rule of the front-end application is constructed in a targeted manner, providing a more scientific, reasonable and accurate preloading rule for the front-end application, enabling the user to preload the sub-application resources of the front-end application in advance before triggering the sub-application of the front-end application, improving the loading efficiency of the resources required for the front-end application page, solving the white screen problem when the front-end application page is opened, and improving the user's operation experience.

[0022] It should be understood that the content described in this part is not intended to identify the key or important features of the embodiments of the present invention, nor is it used to limit the scope of the present invention. Other features of the present invention will become easily understood through the following description. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0024] Figure 1 is a flowchart of a method for constructing a preloading rule for a front-end application provided in Embodiment 1 of the present invention;

[0025] Figure 2 is a flowchart of a method for constructing a preloading rule for a front-end application provided in Embodiment 2 of the present invention;

[0026] Figure 3 is a schematic structural diagram of a device for constructing a preloading rule for a front-end application provided in Embodiment 3 of the present invention;

[0027] Figure 4It is a schematic structural diagram of an electronic device for implementing the method for constructing a preloading rule of a front-end application according to an embodiment of the present invention. Detailed implementation manners

[0028] In order to enable those skilled in the art to better understand the solution of the present invention, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the accompanying drawings in the embodiments of the present invention. Obviously, the described embodiments are only a part of the embodiments of the present invention, rather than all the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those of ordinary skill in the art without creative efforts shall fall within the protection scope of the present invention.

[0029] It should be noted that the terms "target" and the like in the description and claims of the present invention and the above-mentioned drawings are used to distinguish similar objects, and do not necessarily need to describe a specific order or sequence. It should be understood that such data can be interchanged under appropriate circumstances so that the embodiments of the present invention described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "comprising" and "having" and any variations thereof are intended to cover non-exclusive inclusion. For example, a process, method, system, product or device including a series of steps or units does not necessarily have to be limited to those steps or units clearly listed, but may include other steps or units not clearly listed or inherent to these processes, methods, products or devices.

[0030] Embodiment 1

[0031] Figure 1 It is a flowchart of a method for constructing a preloading rule of a front-end application provided in Embodiment 1 of the present invention. This embodiment is applicable to the situation of constructing a preloading rule of a front-end application. This method can be executed by a device for constructing a preloading rule of a front-end application, and this device can be implemented in the form of hardware and / or software and can be configured in an electronic device. As Figure 1 shown, this method includes:

[0032] S101. Construct an application proxy portal page according to the obtained application access request, and return the application proxy portal page to the Web client.

[0033] Among them, the application access request refers to a request to access a certain front-end application; optionally, the application access request includes but is not limited to a request address, a request protocol, and a request protocol version. It should be noted that the request address is essentially a URL (Uniform Resource Locator) address of a front-end application.

[0034] Specifically, an application access request can be obtained from a Web server through an application proxy portal; then, the request address is extracted from the obtained application access request; the application address in the proxy page template is replaced with the request address to obtain an application proxy portal page, and the application proxy portal page is returned to the Web client.

[0035] Among them, the application proxy portal is a proxy server system deployed at the application layer. As an intermediary between the client and the target server, it realizes the monitoring, control, and optimization of network communication by parsing specific application protocols (such as HTTP and FTP). Among them, HTTP (Hypertext Transfer Protocol) is a simple request-response protocol that usually runs on top of TCP (Transmission Control Protocol). FTP (File Transfer Protocol) is a widely used standard protocol for file transfer in the network.

[0036] Among them, a Web server generally refers to a website server, which is a program resident on a certain type of computer on the Internet. It can process requests from Web clients such as browsers and return corresponding responses. It can store website files and data files. Optionally, the Web server can be Nginx, Apache (Apache HTTP Server), or IIS (Internet Information Services). A Web client refers to a software program used by users to access and browse Web content provided on the Web server; optionally, the Web client can be a browser.

[0037] Among them, the proxy page template refers to a template used to construct an application proxy portal page, which can be preset according to actual business needs and the experience of those skilled in the art. The present invention does not make specific limitations on it.

[0038] It can be understood that forcing all application access requests in the Web server to the application proxy portal makes all application accesses pass through the application proxy portal, achieving traffic visibility. Secondly, in the form of combining the Web server and the application proxy portal, unified proxy of all front-end applications is realized, facilitating centralized management and control of all front-end applications.

[0039] S102. When it is detected that the Web client loads the application proxy portal page, create a main application running container, and in the main application running container, load the target application address in the application proxy portal page, and detect the target application code corresponding to the target application address to determine the target application type of the target application.

[0040] Among them, the main application running container is used to dynamically load the sub-application code of the main application, cache the sub-application resources of the main application, monitor the sub-application performance of the main application, and limit the access to the sub-application API (Application Programming Interface) of the main application. The target application address refers to the URL address of the front-end application to be accessed. The target application code refers to the page code of the front-end application pointed to by the target application address, that is, the page code of the front-end application to be accessed. The target application refers to the front-end application pointed to by the target application address, that is, the front-end application to be accessed. The target application type refers to the application type of the target application; optionally, the target application type can be a micro front-end application, a monolithic application or a multi-application. Among them, the characteristics of a micro front-end application are: the sub-applications can be developed independently, but are dynamically loaded through the main application container, and the routing is jointly managed by the main application and the sub-applications; the characteristics of a monolithic application are: all functional modules share the same code library and routing system, and the routing is centrally managed by the main application; the characteristics of a multi-application are: each sub-application is independently deployed and has an independent routing system, and the main application is only responsible for the entry jump.

[0041] Specifically, when it is detected that the Web client loads the application proxy portal page, the main application running container can be created in the following way:

[0042] const worker = new Worker('worker.js');

[0043] Among them, worker represents the main application running container; worker.js represents the script file executed by the Worker thread; the Worker function is a built-in API of the browser for creating a new Web Worker instance.

[0044] After that, in the created main application running container, load the target application address in the application proxy portal page through a cross-network resource acquisition method, that is, the fetch method; and detect the target application code corresponding to the target application address through a pre-trained application code recognition model to determine the target application type of the target application. Among them, the application code recognition model refers to a deep learning model or a machine learning model used to detect the page code of the front-end application to identify the application type of the front-end application.

[0045] S103. Build a target routing application list of the target application according to the target application code, the target application type, and the main application running container.

[0046] Among them, the target routing application list is used to store the routing configurations of the target application and its sub-applications; optionally, the target routing application list includes the target application type, the running container, the mounting element, and the sub-application routing address. Among them, the running container refers to the container that runs the sub-application of the target application; the mounting element refers to the DOM (Document Object Model) container in the front-end framework that is used to carry the routing component or the root instance. It is the entry point for the application to interact with the page and is usually an HTML element with a unique identifier (for example, ); The sub-application routing address refers to the routing address that triggers the loading of the sub-application.

[0047] Specifically, the list of sub-applications of the target application can be obtained from the target application code; according to the target application type, the main application running container, and the application data of each sub-application in the sub-application list, a target routing application list of the target application is constructed.

[0048] It should be noted that if the target application is a micro-frontend application, for each sub-application in the sub-application list of the micro-frontend application, the application data of the sub-application includes, but is not limited to, the application identifier, the entry address, the activation rule, and the mounting container; among them, the application identifier is used to uniquely identify the sub-application; the entry address refers to the resource loading address of the sub-application; the activation rule refers to the routing address that triggers the loading of the sub-application; the mounting container refers to the DOM container to which the sub-application is mounted in the target application. If the target application is a monolithic application, for each sub-application in the sub-application list of the monolithic application, the application data of the sub-application includes, but is not limited to, the routing address, the application identifier, and the root DOM container; among them, the root DOM container refers to the DOM container of the target application. If the target application is a multi-application, for each sub-application in the sub-application list of the multi-application, the application data of the sub-application includes, but is not limited to, the application identifier, the entry address, the mounting container, and the browser window address.

[0049] More specifically, if the target application is a micro-frontend application, obtain the list of sub-applications of the micro-frontend application from the registerMicroApps function in the target application code; create an empty routing application list for the micro-frontend application; for each sub-application in the sub-application list of the micro-frontend application, according to the target application type, the main application running container, and the application data of the sub-application, create a record for the sub-application in the empty routing application list, and the target application type in the record is a micro-frontend application, the running container is the main application running container, the sub-application name is the application identifier of the sub-application, the sub-application routing address is obtained by converting the activation rule of the sub-application, and the mounting element is the mounting container of the sub-application, so as to obtain the target routing application list of the micro-frontend application.

[0050] If the target application is a monolithic application, obtain the list of sub-applications of the monolithic application from the routing configuration code block in the target application code; create an empty routing application list for the monolithic application; for each sub-application in the sub-application list of the monolithic application, according to the target application type, the main application running container, and the application data of the sub-application, create a record for the sub-application in the empty routing application list, and the target application type in the record is a monolithic application, the running container is the main application running container, the sub-application name is the application identifier of the sub-application, the sub-application routing address is the routing address of the sub-application, and the mounting element is the root DOM container of the sub-application, so as to obtain the target routing application list of the monolithic application.

[0051] If the target application is a multi-application, obtain the list of sub-applications of the multi-application from the target application code; create an empty routing application manifest for the multi-application; for each sub-application in the list of sub-applications of the multi-application, according to the target application type, the main application running container, and the application data of the sub-application, create a record for the sub-application in the empty routing application manifest, and the target application type in the record is multi-application, the running container is the browser window address of the sub-application, the sub-application name is the application identifier of the sub-application, the sub-application routing address is the entry address of the sub-application, and the mounting element is the mounting container of the sub-application, so that the target routing application manifest of the multi-application can be obtained.

[0052] S104. Construct a preloading rule for the target application according to the target application type and the target routing application manifest.

[0053] Among them, the preloading rule refers to the rule for preloading the sub-applications in the target application. Specifically, according to the target application type and the target routing application manifest of the target application, combined with the actual business requirements, construct the preloading rule of the target application.

[0054] In the technical solution of the embodiment of the present invention, according to the obtained application access request, construct an application proxy portal page and return the application proxy portal page to the Web client; in the case of detecting that the Web client loads the application proxy portal page, create a main application running container, and in the main application running container, load the target application address in the application proxy portal page, and detect the target application code corresponding to the target application address to determine the target application type of the target application; according to the target application code, the target application type, and the main application running container, construct the target routing application manifest of the target application; according to the target application type and the target routing application manifest, construct the preloading rule of the target application. The above technical solution first constructs an application proxy portal page according to the access request of the front-end application; then, in the case of detecting that the Web client loads the application proxy portal page, detect the target application code corresponding to the target application address in the application proxy portal page to determine the application type of the front-end application; furthermore, according to the application type of the front-end application, construct a more scientific, reasonable, and accurate preloading rule for the front-end application, so that before the user triggers the sub-application of the front-end application, the sub-application resources of the front-end application can be pre-loaded in advance, improving the loading efficiency of the resources required for the front-end application page, solving the white screen problem when the front-end application page is opened, and improving the user's operation experience.

[0055] Embodiment 2

[0056] Figure 2 The flowchart of a method for constructing a preloading rule for a front-end application provided in the second embodiment of the present invention. Based on the above embodiment, this embodiment further optimizes "detecting the target application code corresponding to the target application address to determine the target application type of the target application", and provides an optional implementation scheme. It should be noted that for the parts not detailed in the embodiments of the present invention, reference may be made to the relevant descriptions of other embodiments. As Figure 2 shown, the method includes:

[0057] S201. According to the obtained application access request, construct an application proxy portal page and return the application proxy portal page to the Web client.

[0058] S202. When it is detected that the Web client loads the application proxy portal page, create a main application running container, and in the main application running container, load the target application address in the application proxy portal page.

[0059] S203. If it is detected that the target application code corresponding to the target application address contains a micro front-end framework, determine that the target application type of the target application is a micro front-end application.

[0060] Among them, the micro front-end framework refers to a collection of tools or libraries that support the implementation of a micro front-end architecture. Among them, the micro front-end architecture is a popular design pattern used to decompose a large application into multiple small and independent front-end applications or components, and these front-end applications or components can be independently deployed and run.

[0061] Specifically, if it is detected that the target application code corresponding to the target application address contains at least one of the following micro front-end frameworks: Qiankun, Single SPA, Module Federation, Piral, Micro Frontends with React, Luigi, and Mosaic, determine that the target application type of the target application is a micro front-end application.

[0062] S204. Otherwise, when it is determined that the home page type of the target application is a login page, intercept the route loading event through a route object proxy and detect the route loading source corresponding to the route loading event.

[0063] Among them, the route object proxy refers to a component used to listen for and intercept route operations and determine the source of the route operations. The route loading event refers to the event of loading the sub-application route of the target application. The route loading source refers to the source of the route loading operation; optionally, the route loading source can be the main application running container or the route positioning container. Among them, the route positioning container refers to a component used to dynamically load sub-applications according to the URL and manage the route status of the sub-applications.

[0064] Specifically, if it is detected that the target application code corresponding to the target application address does not contain a micro front-end framework, and when it is determined that the home page type of the target application is a login page, the routing loading event is intercepted through a routing object proxy, and the routing loading source corresponding to the routing loading event is detected.

[0065] S205. When the routing object proxy detects that the routing loading source is a routing location container, extract at least one to-be-processed routing address from the routing loading content corresponding to the routing loading event in the routing location container, and detect whether all the to-be-processed routing addresses exist in the routing object list of the target application.

[0066] Among them, the routing object list is essentially a routing configuration file used to configure the routing of the front-end application. Specifically, when the routing object proxy detects that the routing loading source is a routing location container, start scanning from the start position of the routing loading content corresponding to the routing loading event in the routing location container. When an a tag is scanned, extract the content of the href field in the a tag as the to-be-processed routing address until the end position of the routing loading content is scanned, so as to obtain at least one to-be-processed routing address; detect whether all these to-be-processed routing addresses exist in the routing object list of the target application.

[0067] S206. If so, determine that the target application type is a single application.

[0068] Specifically, if it is detected that all these to-be-processed routing addresses exist in the routing object list of the target application, determine that the target application type is a single application. It should be noted that the routes of all sub-applications of a single application exist in the same routing object list and share the same routing system.

[0069] S207. Otherwise, determine that the target application type is a multi-application.

[0070] Specifically, if it is detected that all these to-be-processed routing addresses do not exist in the routing object list of the target application, determine that the target application type is a multi-application.

[0071] S208. According to the target application code, the target application type, and the main application running container, construct the target routing application list of the target application.

[0072] S209. According to the target application type and the target routing application list, construct the preloading rule of the target application.

[0073] Specifically, if the target application type is a micro front-end application, obtain the current mounted element of the main application running container; if it is detected that the child elements of the current mounted element are empty, for each sub-application in the target routing application list, create a transition element for the sub-application, and add a shadow application of the sub-application to the micro application object list in the target application code; construct a preloading rule for the sub-application based on the transition element and shadow application of the sub-application; if it is detected that the child elements of the current mounted element are not empty, obtain the running object of the current mounted element and mount the running object to the running container in the target routing application list.

[0074] Among them, the current mounted element refers to the mounted element to be run in the main application running container. The transition element refers to a temporary placeholder visible to the user, usually in the form of a loading animation or placeholder text, etc., which is used to provide visual feedback to the user during the loading of the sub-application and avoid the abruptness caused by a blank interface. The shadow application refers to an application used to preload resources related to the sub-application and exists as the "shadow" of the sub-application.

[0075] Among them, for each sub-application in the target routing application list, creating a transition element for the sub-application and adding a shadow application of the sub-application to the micro application object list in the target application code can specifically be: for each sub-application in the target routing application list, create a transition element for the sub-application in the current mounted element, and add a shadow application of the sub-application to the micro application object list in the target application code through the registerMicroApps function in the target application code.

[0076] Among them, constructing a preloading rule for the sub-application based on the transition element and shadow application of the sub-application can specifically be: start the loading process of the shadow application of the sub-application, and after detecting that the shadow application of the sub-application has been loaded, hide the transition element of the sub-application, and render the content of the shadow application of the sub-application to the current mounted element to replace the transition element of the sub-application in the current mounted element, so that the shadow application of the sub-application becomes effective.

[0077] Optionally, if the target application type is a multi-application, create a corresponding preloading container for each sub-application of the target application according to the index number of each sub-application of the target application in the target routing application list; for each sub-application of the target application, extract the routing address of the sub-application from the target routing application list according to the index number of the sub-application; construct a preloading rule for the sub-application in the preloading container corresponding to the sub-application according to the routing address of the sub-application.

[0078] It should be noted that the initial state of the preloading container corresponding to each sub-application of the target application is a hidden state.

[0079] Specifically, if the target application type is a multi-application, a corresponding preloading container is created for each sub-application of the target application according to the index number of each sub-application of the target application in the target routing application list; for each sub-application of the target application, the routing address of the sub-application is extracted from the target routing application list with the index number of the sub-application as the retrieval condition; according to the routing address of the sub-application, an iframe object is created in the preloading container corresponding to the sub-application, and the src attribute of the iframe object is set to the routing address of the sub-application; the loading program of the iframe object is configured; the loading program of the iframe object is started, and after detecting that the iframe object is loaded, a click event handler for the sub-application is added to the iframe object.

[0080] The technical solution of the embodiment of the present invention constructs an application proxy portal page according to the obtained application access request and returns the application proxy portal page to the Web client; when detecting that the Web client loads the application proxy portal page, a main application running container is created, and in the main application running container, the target application address in the application proxy portal page is loaded; if it is detected that the target application code corresponding to the target application address contains a micro front-end framework, it is determined that the target application type of the target application is a micro front-end application; otherwise, when it is determined that the home page type of the target application is a login page, the routing loading event is intercepted by the routing object proxy, and the routing loading source corresponding to the routing loading event is detected; when the routing object proxy detects that the routing loading source is a routing positioning container, at least one pending routing address is extracted from the routing loading content corresponding to the routing loading event in the routing positioning container, and it is detected whether all the pending routing addresses exist in the routing object list of the target application; if so, it is determined that the target application type is a monomer application; otherwise, it is determined that the target application type is a multi-application; a target routing application list of the target application is constructed according to the target application code, the target application type and the main application running container; a preloading rule of the target application is constructed according to the target application type and the target routing application list. The above technical solution provides a more scientific, reasonable and accurate preloading rule for the front-end application, enabling the user to preload the sub-application resources of the front-end application in advance before triggering the sub-application of the front-end application, improving the loading efficiency of the resources required by the front-end application page, solving the white screen problem when the front-end application page is opened, and improving the user's operation experience.

[0081] Embodiment III

[0082] Figure 3 The following is a schematic structural diagram of a front - end application pre - loading rule construction device provided in Embodiment 3 of the present invention. This embodiment is applicable to the situation of constructing pre - loading rules for front - end applications. The device can be implemented in the form of hardware and / or software and can be configured in an electronic device. As Figure 3 shown, the device includes:

[0083] A proxy portal page construction module 301, configured to construct an application proxy portal page according to the obtained application access request and return the application proxy portal page to the Web client;

[0084] A target application type determination module 302, configured to create a main application running container when detecting that the Web client loads the application proxy portal page, and in the main application running container, load the target application address in the application proxy portal page and detect the target application code corresponding to the target application address to determine the target application type of the target application;

[0085] A routing application list construction module 303, configured to construct a target routing application list of the target application according to the target application code, the target application type, and the main application running container;

[0086] An application pre - loading rule construction module 304, configured to construct a pre - loading rule of the target application according to the target application type and the target routing application list.

[0087] The technical solution of the embodiment of the present invention constructs an application proxy portal page according to the obtained application access request and returns the application proxy portal page to the Web client; when detecting that the Web client loads the application proxy portal page, creates a main application running container, and in the main application running container, loads the target application address in the application proxy portal page and detects the target application code corresponding to the target application address to determine the target application type of the target application; constructs a target routing application list of the target application according to the target application code, the target application type, and the main application running container; constructs a pre - loading rule of the target application according to the target application type and the target routing application list. The above - mentioned technical solution first constructs an application proxy portal page according to the access request of the front - end application; then, when detecting that the Web client loads the application proxy portal page, detects the target application code corresponding to the target application address in the application proxy portal page to determine the application type of the front - end application; and then constructs a pre - loading rule of the front - end application according to the application type of the front - end application, providing a more scientific, reasonable, and accurate pre - loading rule for the front - end application, enabling the user to pre - load the sub - application resources of the front - end application in advance before triggering the sub - application of the front - end application, improving the loading efficiency of the resources required for the front - end application page, solving the white - screen problem when the front - end application page is opened, and improving the user's operation experience.

[0088] Optionally, the target application type determination module 302 is specifically configured to:

[0089] If it is detected that the target application code corresponding to the target application address contains a micro front-end framework, determine that the target application type of the target application is a micro front-end application;

[0090] Otherwise, if it is determined that the home page page type of the target application is a login page, intercept the route loading event through the route object proxy and detect the route loading source corresponding to the route loading event;

[0091] When the route object proxy detects that the route loading source is a route positioning container, extract at least one to-be-processed route address from the route loading content corresponding to the route loading event in the route positioning container, and detect whether all the to-be-processed route addresses exist in the route object list of the target application;

[0092] If so, determine that the target application type is a monolithic application;

[0093] Otherwise, determine that the target application type is a multi-application.

[0094] Optionally, the route application list construction module 303 is specifically configured to:

[0095] Obtain the list of sub-applications of the target application from the target application code;

[0096] Construct the target route application list of the target application according to the target application type, the main application running container, and the application data of each sub-application in the sub-application list.

[0097] Optionally, the application preloading rule construction module 304 is specifically configured to:

[0098] If the target application type is a micro front-end application, obtain the current mounted element of the main application running container;

[0099] If it is detected that the sub-elements of the current mounted element are empty, for each sub-application in the target route application list, create a transition element for the sub-application and add a shadow application of the sub-application to the micro-application object list of the target application code;

[0100] Construct the preloading rule for the sub-application according to the transition element and the shadow application of the sub-application;

[0101] If it is detected that the sub-elements of the current mounted element are not empty, obtain the running object of the current mounted element and mount the running object into the running container of the target route application list.

[0102] Optionally, the application preloading rule construction module 304 is further specifically configured to:

[0103] If the target application type is a multi-application, create corresponding preloading containers for each sub-application of the target application according to the index number of each sub-application of the target application in the target routing application list;

[0104] For each sub-application of the target application, extract the routing address of the sub-application from the target routing application list according to the index number of the sub-application;

[0105] According to the routing address of the sub-application, construct the preloading rule of the sub-application in the preloading container corresponding to the sub-application.

[0106] Optionally, the target routing application list includes the target application type, running container, mounting element, and sub-application routing address.

[0107] Optionally, the device further includes:

[0108] An application access request acquisition module, configured to acquire an application access request from a Web server through an application proxy portal.

[0109] The front-end application preloading rule construction device provided by the embodiments of the present invention can execute the front-end application preloading rule construction method provided by any embodiment of the present invention, and has the corresponding function modules and beneficial effects for executing each front-end application preloading rule construction method.

[0110] According to an embodiment of the present invention, the present invention also provides an electronic device, a readable storage medium, and a computer program product.

[0111] Embodiment 4

[0112] Figure 4 FIG. shows a schematic structural diagram of an electronic device 10 that can be used to implement the embodiments of the present invention. The electronic device is intended to represent various forms of digital computers, such as, a laptop computer, a desktop computer, a workbench, a personal digital assistant, a server, a blade server, a mainframe computer, and other suitable computers. The electronic device can also represent various forms of mobile devices, such as, a personal digital processing, a cellular phone, a smart phone, a wearable device (such as a helmet, glasses, a watch, etc.) and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely illustrative and are not intended to limit the implementation of the present invention described and / or claimed herein.

[0113] As Figure 4 As shown, the electronic device 10 includes at least one processor 11 and a memory communicatively connected to the at least one processor 11, such as a read-only memory (ROM) 12, a random access memory (RAM) 13, etc. Among them, the memory stores a computer program executable by the at least one processor. The processor 11 can perform various appropriate actions and processes according to the computer program stored in the read-only memory (ROM) 12 or the computer program loaded from the storage unit 18 into the random access memory (RAM) 13. In the RAM 13, various programs and data required for the operation of the electronic device 10 can also be stored. The processor 11, the ROM 12, and the RAM 13 are connected to each other through a bus 14. An input / output (I / O) interface 15 is also connected to the bus 14.

[0114] Multiple components in the electronic device 10 are connected to the I / O interface 15, including: an input unit 16, such as a keyboard, a mouse, etc.; an output unit 17, such as various types of displays, speakers, etc.; a storage unit 18, such as a disk, an optical disc, etc.; and a communication unit 19, such as a network card, a modem, a wireless communication transceiver, etc. The communication unit 19 allows the electronic device 10 to exchange information / data with other devices through a computer network such as the Internet and / or various telecommunication networks.

[0115] The processor 11 can be various general and / or special processing components with processing and computing capabilities. Some examples of the processor 11 include but are not limited to a central processing unit (CPU), a graphics processing unit (GPU), various dedicated artificial intelligence (AI) computing chips, various processors running machine learning model algorithms, a digital signal processor (DSP), and any appropriate processor, controller, microcontroller, etc. The processor 11 executes the various methods and processes described above, such as the front-end application preloading rule construction method.

[0116] In some embodiments, the front-end application preloading rule construction method can be implemented as a computer program, which is tangibly contained in a computer-readable storage medium, such as the storage unit 18. In some embodiments, part or all of the computer program can be loaded and / or installed onto the electronic device 10 via the ROM 12 and / or the communication unit 19. When the computer program is loaded into the RAM 13 and executed by the processor 11, one or more steps of the front-end application preloading rule construction method described above can be executed. Alternatively, in other embodiments, the processor 11 can be configured to execute the front-end application preloading rule construction method in any other appropriate way (for example, by means of firmware).

[0117] The various embodiments of the systems and techniques described above in this specification can be implemented in digital electronic circuitry, integrated circuit systems, field programmable gate arrays (FPGA), application specific integrated circuits (ASIC), application specific standard products (ASSP), systems-on-chip (SOC), complex programmable logic devices (CPLD), computer hardware, firmware, software, and / or combinations thereof. These various embodiments can include: being implemented in one or more computer programs that are executable and / or interpretable on a programmable system including at least one programmable processor, which may be a special-purpose or general-purpose programmable processor that receives data and instructions from, and transmits data and instructions to, a storage system, at least one input device, and at least one output device.

[0118] The computer programs for implementing the methods of the present invention can be written in any combination of one or more programming languages. These computer programs can be provided to a processor of a general purpose computer, special purpose computer, or other programmable data processing apparatus, such that the computer programs, when executed by the processor, cause the functions / operations specified in the flowchart and / or block diagram to be implemented. The computer programs may execute entirely on the machine, partly on the machine, as a stand-alone software package partly on the machine and partly on a remote machine or entirely on the remote machine or server.

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

[0120] To provide interaction with a user, the systems and techniques described herein can be implemented on an electronic device having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to the user; and a keyboard and a pointing device (e.g., a mouse or a trackball) by which the user can provide input to the electronic device. Other kinds of devices can also be used to provide interaction with the user; for example, the feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form (including acoustic input, voice input, or tactile input).

[0121] The systems and techniques described herein can be implemented in a computing system including backend components (e.g., as a data server), or a computing system including middleware components (e.g., an application server), or a computing system including frontend components (e.g., a user computer having a graphical user interface or a web browser through which the user can interact with an implementation of the systems and techniques described herein), or a computing system including any combination of such backend components, middleware components, or frontend components. The components of the system can be interconnected to each other by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include: local area network (LAN), wide area network (WAN), blockchain network, and the Internet.

[0122] A computing system can include a client and a server. The client and the server are generally remote from each other and typically interact through a communication network. The client-server relationship is generated by computer programs running on the respective computers and having a client-server relationship with each other. The server can be a cloud server, also known as a cloud computing server or a cloud host, which is a host product in the cloud computing service system, solving the defects of difficult management and weak business scalability existing in traditional physical hosts and VPS services.

[0123] It should be understood that the various forms of processes shown above can be used, with steps reordered, added, or deleted. For example, the steps recited in the present invention can be executed in parallel, sequentially, or in a different order, as long as the desired results of the technical solution of the present invention can be achieved, and no limitation is made herein.

[0124] [[ID=,12]]The above specific embodiments do not constitute a limitation on the protection scope of the present invention. Those skilled in the art should understand that various modifications, combinations, sub-combinations, and substitutions can be made according to design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of the present invention shall be included within the protection scope of the present invention.

Claims

1. A method for constructing a preloading rule for a front-end application, characterized in that, Including: Construct an application proxy portal page according to the obtained application access request, and return the application proxy portal page to the Web client; When it is detected that the Web client loads the application proxy portal page, create a main application running container, and in the main application running container, load the target application address in the application proxy portal page, and detect the target application code corresponding to the target application address to determine the target application type of the target application; Construct a target routing application list of the target application according to the target application code, the target application type, and the main application running container; Construct a preloading rule of the target application according to the target application type and the target routing application list.

2. The method according to claim 1, characterized in that, Detecting the target application code corresponding to the target application address to determine the target application type of the target application includes: If it is detected that the target application code corresponding to the target application address contains a micro front-end framework, determine that the target application type of the target application is a micro front-end application; Otherwise, when it is determined that the home page type of the target application is a login page, intercept the route loading event through a route object proxy and detect the route loading source corresponding to the route loading event; When the route object proxy detects that the route loading source is a route positioning container, extract at least one to-be-processed route address from the route loading content corresponding to the route loading event in the route positioning container, and detect whether all the to-be-processed route addresses exist in the route object list of the target application; If so, determine that the target application type is a monolithic application; Otherwise, determine that the target application type is a multi-application.

3. The method according to claim 1, characterized in that, The constructing the target routing application list of the target application according to the target application code, the target application type, and the main application running container includes: Obtain the sub-application list of the target application from the target application code; Construct a target routing application list of the target application according to the target application type, the main application running container, and the application data of each sub-application in the sub-application list.

4. The method according to claim 1, wherein The constructing the preloading rule of the target application according to the target application type and the target routing application list includes: If the target application type is a micro front-end application, obtain the current mounted element of the main application running container; If it is detected that the sub-elements of the current mounted element are empty, for each sub-application in the target routing application list, create a transition element for the sub-application, and add a shadow application of the sub-application to the micro-application object list of the target application code; Construct a preloading rule for the sub-application according to the transition element and the shadow application of the sub-application; If it is detected that the sub-elements of the current mounted element are not empty, obtain the running object of the current mounted element and mount the running object into the running container of the target routing application list.

5. The method according to claim 1, characterized in that, The constructing the preloading rule of the target application according to the target application type and the target routing application list includes: If the target application type is a multi-application, preloading containers corresponding to each sub-application of the target application are created according to the index number of each sub-application of the target application in the target routing application list; For each sub-application of the target application, the routing address of the sub-application is extracted from the target routing application list according to the index number of the sub-application; According to the routing address of the sub-application, a preloading rule of the sub-application is constructed in the preloading container corresponding to the sub-application.

6. The method according to claim 1, wherein The target routing application list includes a target application type, a running container, a mounting element, and a sub-application routing address.

7. The method according to claim 1, characterized in that, The method further includes: Obtaining an application access request from a Web server through an application proxy portal.

8. A front-end application preloading rule construction device, characterized in that Including: A proxy portal page construction module, configured to construct an application proxy portal page according to the obtained application access request, and return the application proxy portal page to a Web client; A target application type determination module, configured to create a main application running container when detecting that the Web client loads the application proxy portal page, and in the main application running container, load the target application address in the application proxy portal page, and detect the target application code corresponding to the target application address to determine the target application type of the target application; A routing application list construction module, configured to construct a target routing application list of the target application according to the target application code, the target application type, and the main application running container; An application preloading rule construction module, configured to construct a preloading rule of the target application according to the target application type and the target routing application list.

9. An electronic device, characterized in that, The electronic device includes: At least one processor; And a memory communicatively connected to the at least one processor; wherein, The memory stores a computer program executable by the at least one processor, and the computer program is executed by the at least one processor so that the at least one processor can execute the front-end application preloading rule construction method according to any one of claims 1-7.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer instructions for causing a processor to implement the front-end application preloading rule construction method according to any one of claims 1-7 when executed.

Images