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

Abstract

The present invention discloses a method, apparatus, device and storage medium for constructing front-end application preloading rules, belonging to the technical field of front-end application development. The method comprises: constructing an application proxy portal page according to an acquired application access request, and returning the application proxy portal page to a Web client; when detecting that the Web client has loaded the application proxy portal page, creating a main application running container, and in the main application running container, loading a target application address in the application proxy portal page, and detecting a target application code corresponding to the target application address to determine a target application type of the target application; constructing 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; and constructing a preloading rule for the target application according to the target application type and the target routing application list.

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 front-end application preloading rules. Background Art

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

[0003] However, in the development model with front-end and back-end separation, all pages are integrated into a whole, which increases the size of the front-end page. When users open the front-end application page, a white screen problem often occurs, which reduces the user's operating experience. Summary of the Invention

[0004] The present invention provides a front-end application preloading rule construction method, device, equipment and storage medium to solve the white screen problem when the front-end application page is opened and improve the user's operating experience.

[0005] According to one aspect of the present invention, a method for constructing a front-end application preloading rule is provided, the method comprising:

[0006] Build an application proxy portal page based on the obtained application access request and return the application proxy portal page to the web client;

[0007] When detecting that the web client loads the application proxy portal page, creating a main application running container, loading the target application address in the application proxy portal page in the main application running container, and detecting the target application code corresponding to the target application address to determine the target application type of the target application;

[0008] Build a target routing application list for the target application based on the target application code, target application type, and main application running container;

[0009] Build preloading rules for the target application based on the target application type and target routing application list.

[0010] According to another aspect of the present invention, a device for constructing a front-end application preloading rule is provided, the device comprising:

[0011] The proxy portal page construction module is used to construct the 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 is configured to, upon detecting that a web client loads an application proxy portal page, create a main application running container, load the target application address in the application proxy portal page in the main application running container, and detect the target application code corresponding to the target application address to determine the target application type of the target application;

[0013] A routing application list building module is used to build a target routing application list for a target application based on the target application code, target application type, and main application running container;

[0014] The application preloading rule building module is used to build preloading rules for the target application according to the target application type and the target routing application list.

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

[0016] at least one processor;

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

[0018] The memory stores a computer program that can be executed by at least one processor. The computer program is executed by at least one processor so that the at least one processor can execute the front-end application preloading rule construction method of any embodiment of the present invention.

[0019] According to another aspect of the present invention, a computer-readable storage medium is provided, wherein the computer-readable storage medium stores computer instructions, which are used to enable a processor to implement the front-end application preloading rule construction method of any embodiment of the present invention when executed.

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

[0021] The technical solution of the embodiment of the present invention is to construct an application proxy portal page based on 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, 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; based on the target application code, target application type and main application running container, a target routing application list of the target application is constructed; based on the target application type and target routing application list, a preloading rule for the target application is constructed. The above technical solution first constructs the application proxy portal page based on 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. Determine the application type of the front-end application; then, based on the application type of the front-end application, construct targeted preloading rules for the front-end application, providing more scientific, reasonable and accurate preloading rules for the front-end application, so that users can load the sub-application resources of the front-end application in advance before triggering the sub-application of the front-end application, thereby 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 operating experience.

[0022] It should be understood that the content described in this section is not intended to identify the key or important features of the embodiments of the present invention, nor is it intended to limit the scope of the present invention. Other features of the present invention will become readily 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 briefly introduces the drawings required for use in the description of the embodiments. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work.

[0024] Figure 1 This is a flowchart of a method for constructing front-end application preloading rules according to the first embodiment of the present invention;

[0025] Figure 2 This is a flowchart of a method for constructing front-end application preloading rules according to the second embodiment of the present invention;

[0026] Figure 3 This is a schematic diagram of the structure of a front-end application preloading rule construction device provided according to the third embodiment of the present invention;

[0027] Figure 4It is a structural diagram of an electronic device that implements the front-end application preloading rule construction method according to an embodiment of the present invention. DETAILED DESCRIPTION

[0028] In order to enable those skilled in the art to better understand the solutions 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 drawings in the embodiments of the present invention. Obviously, the embodiments described are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative efforts should fall within the scope of protection of the present invention.

[0029] It should be noted that the terms "object" and "target" in the description and claims of the present invention and the above-mentioned drawings are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that the numbers used in this way can be interchanged where appropriate 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 "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions. For example, a process, method, system, product or device that includes a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0030] Example 1

[0031] Figure 1 This is a flow chart of a method for constructing preloading rules for front-end applications provided in the first embodiment of the present invention. This embodiment is applicable to the case of constructing preloading rules for front-end applications. The method can be executed by a front-end application preloading rule construction device, which can be implemented in the form of hardware and / or software and can be configured in an electronic device. Figure 1 As shown, the method includes:

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

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

[0034] Specifically, the application access request can be obtained from the Web server through the 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 the application proxy portal page, and the application proxy portal page is returned to the Web client.

[0035] An application proxy portal is a proxy server system deployed at the application layer. It acts as an intermediary between clients and target servers, monitoring, controlling, and optimizing network communications by parsing specific application protocols (such as HTTP and FTP). HTTP (Hypertext Transfer Protocol) is a simple request-response protocol that typically runs on top of TCP (Transmission Control Protocol). FTP (File Transfer Protocol) is a widely used standard protocol for transferring files over the Internet.

[0036] A web server generally refers to a website server, a program residing on a certain type of computer on the Internet that processes requests from web clients such as browsers and returns responses. It can also host website files and data files. Alternatively, a web server can be Nginx, Apache (Apache HTTP Server), or IIS (Internet Information Services). A web client is a software program used by users to access and browse web content provided by a web server; alternatively, a web client can be a browser.

[0037] 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, and is not specifically limited in the present invention.

[0038] As you can see, forcing all application access requests from the web server to the application proxy portal ensures traffic visibility, ensuring that all application access must pass through the application proxy portal. Secondly, the combination of the web server and the application proxy portal provides a unified proxy for all front-end applications, 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, 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.

[0040] The main application runtime container is used to dynamically load the main application's sub-application code, cache its resources, monitor its performance, and restrict API (Application Programming Interface) access. The target application address refers to the URL 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, i.e., 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, i.e., the front-end application to be accessed. The target application type refers to the application type of the target application; the target application type can be a micro-front-end application, a monolithic application, or a multi-application. Micro-front-end applications are characterized by independently developed sub-applications but dynamically loaded through the main application container, with routing managed collaboratively by the main and sub-applications. Monolithic applications are characterized by all functional modules sharing the same code base and routing system, with routing centrally managed by the main application. Multi-applications are characterized by each sub-application being independently deployed and having its own routing system, with the main application only responsible for entry point redirection.

[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] In this file, worker represents the container where the main application runs; worker.js represents the script file executed by the Worker thread; and the Worker function is a browser's built-in API used to create a new Web Worker instance.

[0044] Then, within the created main application running container, the target application address in the application proxy portal page is loaded using a cross-network resource acquisition method, namely the fetch method. The target application code corresponding to the target application address is then detected using a pre-trained application code recognition model to determine the target application type. The application code recognition model refers to a deep learning model or machine learning model that detects 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, target application type, and main application running container.

[0046] The target routing application list is used to store the routing configuration of the target application and its sub-applications. Optionally, the target routing application list includes the target application type, running container, mounting element, and sub-application routing address. 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 used to carry routing components or root instances in the front-end framework. 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 sub-application list of the target application can be obtained from the target application code; and the target routing application list of the target application can be constructed according to the target application type, the main application running container and the application data of each sub-application in the sub-application list.

[0048] It should be noted that if the target application is a micro-frontend application, then 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, entry address, activation rule and mounting container; wherein, 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 of the sub-application mounted to the target application. If the target application is a monolithic application, then 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, application identifier and root DOM container; wherein, the root DOM container refers to the DOM container of the target application. If the target application is a multi-application, then 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, entry address, mounting container and browser window address.

[0049] More specifically, if the target application is a micro-frontend application, the sub-application list of the micro-frontend application is obtained from the registerMicroApps function of the target application code; an empty routing application list is created for the micro-frontend application; for each sub-application in the sub-application list of the micro-frontend application, a record is created for the sub-application in the empty routing application list according to the target application type, the main application running container and the application data of the sub-application, 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 that the target routing application list of the micro-frontend application can be obtained.

[0050] If the target application is a monolithic application, the sub-application list of the monolithic application is obtained from the routing configuration code block in the target application code; an empty routing application list is created for the monolithic application; for each sub-application in the sub-application list of the monolithic application, a record is created for the sub-application in the empty routing application list according to the target application type, the main application running container and the application data of the sub-application, 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 sub-application list of the multi-application from the target application code; create an empty routing application list for the multi-application; for each sub-application in the sub-application list of the multi-application, create a record for the sub-application in the empty routing application list according to the target application type, the main application running container and the application data of the sub-application, and the target application type in the record is a 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 list 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 list.

[0053] Preloading rules refer to rules for preloading sub-applications within a target application. Specifically, preloading rules for a target application are constructed based on the target application type and target routing application list, combined with actual business needs.

[0054] The technical solution of the embodiment of the present invention is to construct an application proxy portal page based on 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, 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; based on the target application code, target application type and main application running container, a target routing application list of the target application is constructed; based on the target application type and target routing application list, a preloading rule for the target application is constructed. The above technical solution first constructs the application proxy portal page based on 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. Determine the application type of the front-end application; then, based on the application type of the front-end application, construct targeted preloading rules for the front-end application, providing more scientific, reasonable and accurate preloading rules for the front-end application, so that users can load the sub-application resources of the front-end application in advance before triggering the sub-application of the front-end application, thereby 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 operating experience.

[0055] Example 2

[0056] Figure 2 This is a flowchart of a method for constructing front-end application preloading rules 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 and determining the target application type of the target application" and provides an optional implementation plan. It should be noted that for the parts not described in detail in the embodiment of the present invention, please refer to the relevant descriptions of other embodiments. Figure 2 As shown, the method includes:

[0057] S201: Build an application proxy portal page according to the obtained application access request, 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, a main application running container is created, and the target application address in the application proxy portal page is loaded in the main application running container.

[0059] S203: If it is detected that the target application code corresponding to the target application address includes a micro-frontend framework, the target application type of the target application is determined to be a micro-frontend application.

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

[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-frontend frameworks: Qiankun, Single SPA, Module Federation, Piral, Micro Frontends with React, Luigi and Mosaic, then the target application type of the target application is determined to be a micro-frontend application.

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

[0063] The route object proxy is a component used to monitor and intercept route operations and determine their source. A route load event is an event that loads a sub-application route of the target application. The route load source is the source of the route load operation; optionally, the route load source can be the main application runtime container or the route location container. The route location container is a component used to dynamically load sub-applications based on URLs and manage the sub-application route status.

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

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

[0066] 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 agent detects that the routing loading source is a routing location container, it starts scanning from the beginning of the routing loading content corresponding to the routing loading event in the routing location container. When the "a" tag is scanned, the content of the "href" field in the "a" tag is extracted as the routing address to be processed. The scanning stops at the end of the routing loading content, thereby obtaining at least one routing address to be processed. The agent then checks whether these routing addresses to be processed are all present in the routing object list of the target application.

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

[0068] Specifically, if it is detected that all of the pending routing addresses exist in the routing object list of the target application, the target application type is determined to be 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 multi-application.

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

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

[0072] S209: Construct a preloading rule for the target application according to the target application type and the target routing application list.

[0073] Specifically, if the target application type is a micro-frontend application, the current mounted element of the main application running container is obtained; if it is detected that the child element of the current mounted element is empty, for each sub-application in the target routing application list, a transition element of the sub-application is created, and the shadow application of the sub-application is added to the micro-application object list of the target application code; based on the transition element and shadow application of the sub-application, the preloading rules of the sub-application are constructed; if it is detected that the child element of the current mounted element is not empty, the running object of the current mounted element is obtained, and the running object is mounted to the running container of the target routing application list.

[0074] The currently mounted element refers to the mounted element that will be run in the main application's container. A transition element is a temporary placeholder visible to the user, typically in the form of a loading animation or placeholder text. It provides visual feedback to the user while the sub-application is loading, avoiding the awkwardness of a blank interface. A shadow application is an application used to pre-load resources related to a sub-application, acting as a "shadow" of the sub-application.

[0075] Among them, for each sub-application in the target routing application list, a transition element of the sub-application is created, and the shadow application of the sub-application is added to the micro-application object list of the target application code. Specifically, it can be: for each sub-application in the target routing application list, a transition element of the sub-application is created in the current mounting element, and through the registerMicroApps function in the target application code, the shadow application of the sub-application is added to the micro-application object list of the target application code.

[0076] Among them, based on the transition element and shadow application of the sub-application, the preloading rules of the sub-application are constructed, which can be specifically: starting the loading process of the shadow application of the sub-application, and after detecting that the loading of the shadow application of the sub-application is completed, hiding the transition element of the sub-application, and rendering the content of the shadow application of the sub-application to the current mounting element to replace the transition element of the sub-application in the current mounting element, so that the shadow application of the sub-application takes effect.

[0077] Optionally, if the target application type is 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 according to the index number of the sub-application; and based on the routing address of the sub-application, the preloading rules of the sub-application are constructed in the preloading container corresponding to the sub-application.

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

[0079] Specifically, if the target application type is multi-application, a corresponding preload 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 using the index number of the sub-application as the retrieval condition; based on the routing address of the sub-application, an iframe object is created in the preload 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 loader of the iframe object is configured; the loader of the iframe object is started, and after detecting that the loading of the iframe object is completed, a click event handler of the sub-application is added to the iframe object.

[0080] The technical solution of the embodiment of the present invention is to construct an application proxy portal page based on 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, a main application running container is created, and the target application address in the application proxy portal page is loaded in the main application running container; if it is detected that the target application code corresponding to the target application address contains a micro-frontend framework, the target application type of the target application is determined to be a micro-frontend application; otherwise, when it is determined that the home page type of the target application is a login page, a route loading event is intercepted by a route object proxy, and the route loading source corresponding to the route loading event is detected; when the route object proxy detects that the route loading source is a route positioning container, at least one pending route address is extracted from the route loading content corresponding to the route loading event in the route positioning container, and it is detected whether all the pending route addresses exist in the route object list of the target application; if so, the target application type is determined to be a single application; otherwise, the target application type is determined to be a multi-application; a target route application list of the target application is constructed based on the target application code, the target application type and the main application running container; and a preloading rule for the target application is constructed based on the target application type and the target route application list. The above technical solution provides more scientific, reasonable and accurate preloading rules for front-end applications, allowing users to load the sub-application resources of the front-end application in advance before triggering the sub-application of the front-end application, thereby 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 operating experience.

[0081] Example 3

[0082] Figure 3 This is a schematic diagram of the structure of a front-end application preloading rule construction device provided by the third embodiment of the present invention. This embodiment is applicable to the case of constructing preloading 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. Figure 3 As shown, the device includes:

[0083] The proxy portal page construction module 301 is used 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] The target application type determination module 302 is configured to, upon detecting that the web client loads the application proxy portal page, create a main application execution container, load the target application address in the application proxy portal page in the main application execution container, and detect the target application code corresponding to the target application address to determine the target application type of the target application;

[0085] The routing application list building module 303 is used to build a target routing application list of the target application according to the target application code, target application type and main application running container;

[0086] The application preloading rule building module 304 is used to build a preloading rule for 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 is to construct an application proxy portal page based on 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, 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; based on the target application code, target application type and main application running container, a target routing application list of the target application is constructed; based on the target application type and target routing application list, a preloading rule for the target application is constructed. The above technical solution first constructs the application proxy portal page based on 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. Determine the application type of the front-end application; then, based on the application type of the front-end application, construct targeted preloading rules for the front-end application, providing more scientific, reasonable and accurate preloading rules for the front-end application, so that users can load the sub-application resources of the front-end application in advance before triggering the sub-application of the front-end application, thereby 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 operating 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-frontend framework, the target application type is determined to be a micro-frontend application;

[0090] Otherwise, when it is determined that the home page type of the target application is a login page, the route loading event is intercepted by the route object proxy, and the route loading source corresponding to the route loading event is detected;

[0091] When the route object proxy detects that the route loading source is a route location container, it extracts at least one pending route address from the route loading content corresponding to the route loading event in the route location container, and checks whether all the pending route addresses exist in the route object list of the target application;

[0092] If so, the target application type is determined to be a monolithic application;

[0093] Otherwise, the target application type is determined to be a multi-application.

[0094] Optionally, the routing application list building module 303 is specifically configured to:

[0095] Get the target application's sub-application list from the target application code;

[0096] Build a target routing application list for the target application based on 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-frontend application, obtain the current mount element of the main application running container;

[0099] If it is detected that the child element of the current mounted element is empty, for each sub-application in the target routing application list, a transition element of the sub-application is created, and a shadow application of the sub-application is added to the micro-application object list of the target application code;

[0100] Construct preloading rules for the sub-application based on the transition elements and shadow applications of the sub-application;

[0101] If it is detected that the child element of the current mounting element is not empty, the running object of the current mounting element is obtained and the running object is mounted to the running container of the target routing application list.

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

[0103] If the target application type is multi-application, a corresponding preload 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;

[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, a preloading rule for the sub-application is constructed in the preloading container corresponding to the sub-application.

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

[0107] Optionally, the device further includes:

[0108] The application access request acquisition module is used to obtain the application access request from the Web server through the application proxy portal.

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

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

[0111] Example 4

[0112] Figure 4 A schematic diagram of an electronic device 10 that can be used to implement an embodiment of the present invention is shown. The electronic device is intended to represent various forms of digital computers, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device can also represent various forms of mobile devices, such as personal digital assistants, cellular phones, smartphones, wearable devices (such as helmets, glasses, watches, etc.), and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely examples and are not intended to limit the implementation of the present invention described and / or claimed herein.

[0113] like Figure 4 As shown, electronic device 10 includes at least one processor 11 and memory, such as read-only memory (ROM) 12 and random access memory (RAM) 13, communicatively connected to at least one processor 11. The memory stores computer programs executable by the at least one processor. Processor 11 can perform various appropriate actions and processes based on the computer programs stored in ROM 12 or loaded from storage unit 18 into RAM 13. RAM 13 can also store various programs and data required for the operation of electronic device 10. Processor 11, ROM 12, and RAM 13 are interconnected via bus 14. An input / output (I / O) interface 15 is also connected to 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 magnetic disk, an optical disk, 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 via a computer network such as the Internet and / or various telecommunication networks.

[0115] Processor 11 can be any general-purpose and / or specialized processing component with processing and computing capabilities. Some examples of processor 11 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various specialized artificial intelligence (AI) computing chips, various processors that run machine learning model algorithms, a digital signal processor (DSP), and any other suitable processor, controller, microcontroller, etc. Processor 11 executes the various methods and processes described above, such as the method for constructing front-end application preloading rules.

[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 a storage unit 18. In some embodiments, part or all of the computer program can be loaded and / or installed on 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 performed. Alternatively, in other embodiments, the processor 11 can be configured to execute the front-end application preloading rule construction method in any other appropriate manner (for example, by means of firmware).

[0117] Various embodiments of the systems and techniques described above can be implemented in digital electronic circuit systems, integrated circuit systems, field programmable gate arrays (FPGAs), application specific integrated circuits (ASICs), application specific standard products (ASSPs), system-on-chip systems (SOCs), programmable logic devices (CPLDs), 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 interpreted on a programmable system that includes at least one programmable processor, which can be a special purpose or general purpose programmable processor that can receive data and instructions from a storage system, at least one input device, and at least one output device, and transmit data and instructions to the storage system, the at least one input device, and the at least one output device.

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

[0119] In the context of the present invention, a computer-readable storage medium may be a tangible medium that may contain or store a computer program for use by or in conjunction with an instruction execution system, device, or apparatus. A computer-readable storage medium may include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, device, or apparatus, or any suitable combination of the foregoing. Alternatively, a computer-readable storage medium may be a machine-readable signal medium. More specific examples of machine-readable storage media may include an electrical connection based on one or more wires, a portable computer disk, 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 disk 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 that has: 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 pointing device (e.g., a mouse or trackball) through which the user can provide input to the electronic device. Other types 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 that includes back-end components (e.g., as a data server), or a computing system that includes middleware components (e.g., an application server), or a computing system that includes front-end components (e.g., a user computer with a graphical user interface or web browser through which a user can interact with implementations of the systems and techniques described herein), or a computing system that includes any combination of such back-end components, middleware components, or front-end components. The components of the system can be interconnected by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include: a local area network (LAN), a wide area network (WAN), a blockchain network, and the Internet.

[0122] A computing system may include clients and servers. The clients and servers are typically remote from each other and typically interact via a communication network. This client-server relationship arises through computer programs running on the respective computers, creating a client-server relationship. The server may be a cloud server, also known as a cloud computing server or cloud host. This server is a hosting product within the cloud computing service ecosystem that addresses the management difficulties and limited scalability of traditional physical hosting and VPS services.

[0123] It should be understood that the various forms of the processes shown above can be used to reorder, add, or delete steps. For example, the steps described in the present invention can be performed 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. This is not limited herein.

[0124] The above specific embodiments do not limit the scope of protection of the present invention. Those skilled in the art will appreciate that various modifications, combinations, sub-combinations, and substitutions may be made based on design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of the present invention are intended to be included within the scope of protection of the present invention.

Claims

1. A method for constructing front-end application preloading rules, characterized in that: include: Building an application proxy portal page based on the obtained application access request, and returning the application proxy portal page to the Web client; When detecting that the Web client loads the application proxy portal page, creating a main application running container, loading the target application address in the application proxy portal page in the main application running container, and detecting the target application code corresponding to the target application address to determine the target application type of the target application; Constructing a target routing application list for the target application according to the target application code, the target application type, and the main application running container; If the target application type is a micro-frontend application, obtain the current mount element of the main application running container; If it is detected that the child element of the current mounted element is empty, for each sub-application in the target routing application list, a transition element of the sub-application is created, and a shadow application of the sub-application is added to the micro-application object list of the target application code; Construct preloading rules for the sub-application based on the transition elements and shadow applications of the sub-application; If it is detected that the child element of the current mounting element is not empty, obtaining the running object of the current mounting element, and mounting the running object to the running container of the target routing application list; If the target application type is a multi-application, creating a corresponding preload 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, extracting the routing address of the sub-application 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 for the sub-application is constructed in the preloading container corresponding to the sub-application.

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-frontend framework, determining that the target application type is a micro-frontend application; Otherwise, when it is determined that the home page type of the target application is a login page, the route loading event is intercepted by the route object proxy, and the route loading source corresponding to the route loading event is detected; When the route object agent detects that the route loading source is a route location container, extracting at least one pending route address from the route loading content corresponding to the route loading event in the route location container, and detecting whether all pending route addresses exist in the route object list of the target application; If so, determining that the target application type is a single application; Otherwise, it is determined that the target application type is a multi-application.

3. The method according to claim 1, characterized in that The step of constructing a target routing application list for the target application according to the target application code, the target application type, and the main application running container includes: Obtain a sub-application list of the target application from the target application code; A target routing application list of the target application is constructed 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 target routing application list includes the target application type, running container, mounting element and sub-application routing address.

5. The method according to claim 1, wherein The method further comprises: Obtain application access requests from the web server through the application proxy portal.

6. A front-end application preloading rule construction device, characterized in that: include: The proxy portal page construction module is used 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; a target application type determination module, configured to, upon detecting that the Web client loads the application proxy portal page, create a main application running container, load the target application address in the application proxy portal page in the main application running container, 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 building module is used to 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; An application preloading rule construction module is used to obtain the current mounting element of the main application running container if the target application type is a micro-frontend application; If it is detected that the child element of the current mount element is empty, then for each sub-application in the target routing application list, create a transition element of the sub-application, and add the shadow application of the sub-application to the micro-application object list of the target application code; according to the transition element and shadow application of the sub-application, build the preloading rule of the sub-application; if it is detected that the child element of the current mount element is not empty, obtain the running object of the current mount element, and mount the running object to the running container of the target routing application list; If the target application type is multiple applications, 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 according to the index number of the sub-application; and according to the routing address of the sub-application, a preloading rule for the sub-application is constructed in the preloading container corresponding to the sub-application.

7. An electronic device, characterized in that: The electronic device comprises: at least one processor; and a memory communicatively connected to the at least one processor; wherein, The memory stores a computer program that can be executed 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 to 5.

8. A computer-readable storage medium, characterized in that The computer-readable storage medium stores computer instructions, and the computer instructions are used to enable a processor to implement the front-end application preloading rule construction method according to any one of claims 1 to 5 when executed.

Images