Multi-version front-end resource loading method and system and storage medium

Abstract

The invention provides a multi-version front-end resource loading method and system and a storage medium, and relates to the technical field of page front-end development, and the method comprises the following steps: obtaining a version number of a version corresponding to a current environment from a page rear-end interface; determining a folder corresponding to the version number from a preset fixed path in the multi-version resource packet, and loading a front-end entry template file corresponding to the version number from the folder; analyzing the front-end entry template file to obtain a resource tag file of the front-end entry template file; and loading according to the resource label file to obtain the front-end resource of the version. According to the method, the deployment process is simplified through automatic version management and the multi-version resource packet, and the agility of loading and switching of the multi-version front-end resources by the front end is improved.

Description

Technical Field

[0001] The present invention relates to the technical field of page front-end development, and in particular to a multi-version front-end resource loading method, system and storage medium. Background Art

[0002] At present, the loading of page front-end resources is mainly based on a single version, that is, a page can only load one version of the front-end resources at the same time. However, with the rapid development of network services, changes in the operating environment have led to a high demand for loading multiple versions of front-end resources for pages. Generally, different versions of front-end resources are deployed in different operating environments or dynamic template libraries are introduced in the back end to cope with the loading of multiple versions of resources.

[0003] In the prior art, for solutions that deploy different versions of front-end resources in different operating environments, each operating environment must be configured with a single front-end resource, and a single operating environment cannot quickly switch the front-end resource version. If the version needs to be switched, the front-end resource must be redeployed; for solutions that introduce a dynamic template library into the back-end, it is necessary to rely on the back-end architecture, which has a negative impact on the startup and running performance of the back-end. Therefore, the above two solutions will reduce the flexibility of loading multiple versions of front-end resources. Summary of the invention

[0004] The problem solved by the present invention is how to improve the agility of the front end in loading and switching multi-version front end resources.

[0005] To solve the above problems, the present invention provides a multi-version front-end resource loading method, system and storage medium.

[0006] In a first aspect, the present invention provides a multi-version front-end resource loading method, comprising:

[0007] Get the version number of the current environment from the backend interface of the page;

[0008] Determine the folder corresponding to the version number from the preset fixed path in the multi-version resource package, and load the front-end entry template file corresponding to the version number from the folder; wherein the preset fixed path of the multi-version resource package includes a plurality of folders, and one of the folders stores a front-end resource of the version and the front-end entry template file corresponding to the version;

[0009] Parsing the front-end entry template file to obtain a resource tag file of the front-end entry template file;

[0010] Loading is performed according to the resource tag file to obtain the front-end resource of the version.

[0011] Optionally, obtaining the version number of the version corresponding to the current environment from the page backend interface includes:

[0012] Initiate a GET request to the page backend interface through the front end, wherein the page backend interface is used to receive the GET request and send a standard string to the front end;

[0013] The standard character string is parsed to obtain the version number of the version corresponding to the current environment.

[0014] Optionally, determining a folder corresponding to the version number from a preset fixed path in the multi-version resource package, and loading a front-end entry template file corresponding to the version number from the folder, includes:

[0015] Concatenate the path name of the preset fixed path with the version number to obtain concatenation information;

[0016] Add the naming suffix of the front-end entry template file to the splicing information to obtain the request address;

[0017] Determine the folder corresponding to the version number according to the request address;

[0018] Obtain the front-end entry template file corresponding to the version number from the folder.

[0019] Optionally, the parsing of the front-end entry template file to obtain a resource tag file of the front-end entry template file includes:

[0020] Create an empty initial array;

[0021] According to the preset content type, the string of the front-end entry template file is converted into a DOM object;

[0022] Traversing the DOM object to obtain multiple web page elements corresponding to the returned version;

[0023] The tag attribute of each of the web page elements is judged, and the required web page elements are added to the initial array as resource records to obtain the resource tag file of the front-end entry template file.

[0024] Optionally, judging the tag attribute of each of the web page elements and appending the required web page elements as resource records to the initial array includes:

[0025] According to the tag attribute of the web page element, determining whether the web page element is a js resource or a css style resource;

[0026] If yes, determining that the web page element is the required web page element, and appending the web page element to the initial array;

[0027] If not, the web page element is determined to be an unnecessary web page element, and the web page element is skipped.

[0028] Optionally, the loading according to the resource tag file to obtain the front-end resource of the version includes:

[0029] According to the tag attribute of each of the web page elements in the resource tag file, an initial tag element corresponding to the web page element is established, and a value is assigned to the initial tag element;

[0030] The assigned initial tag element is appended to the end of the head element of the page to complete the loading of the web page element and obtain the front-end resource of the web page element.

[0031] Optionally, the step of establishing an initial tag element corresponding to each of the web page elements according to the tag attribute of each of the web page elements in the resource tag file includes:

[0032] When determining that the web page element is the js resource according to the tag attribute, taking the script tag element as the initial tag element corresponding to the js resource;

[0033] When determining that the web page element is the CSS style resource according to the tag attribute, if the CSS style resource is an external link resource, the link tag element is used as the initial tag element of the CSS style resource; if the CSS style resource is an internal link resource, the style tag element is used as the initial tag element of the CSS style resource.

[0034] Optionally, it also includes: constructing the multi-version resource package;

[0035] The constructing of the multi-version resource package specifically includes:

[0036] According to the version required by the webpage, a configuration file is created, wherein the configuration file includes the npm package version information of each version;

[0037] According to the npm package version information of the version, obtain the tar package path address corresponding to the version;

[0038] Download the tarball resource according to the tarball path address;

[0039] Decompress the tarball resource to obtain the front-end resource of the version, and store each version of the front-end resource separately in the folder under the preset fixed path;

[0040] After all the versions of the front-end resources are stored in the corresponding folders, the folders in the preset fixed path are merged to obtain the multi-version resource package.

[0041] In a second aspect, the present invention provides a multi-version front-end resource loading system, comprising:

[0042] A version number acquisition unit is used to obtain the version number of the current environment from the page backend interface;

[0043] A resource extraction unit, used to determine a folder corresponding to the version number from a preset fixed path in a multi-version resource package, and load a front-end entry template file corresponding to the version number from the folder; wherein the preset fixed path of the multi-version resource package includes a plurality of folders, and one folder stores a front-end resource of the version and the front-end entry template file corresponding to the version;

[0044] A resource parsing unit, used to parse the front-end entry template file to obtain a resource tag file of the front-end entry template file;

[0045] The resource loading unit is used to load the resource tag file to obtain the front-end resource of the version.

[0046] In a third aspect, the present invention provides a computer-readable storage medium having a computer program stored thereon. When the computer program is executed by a processor, the oil moving method as described in any one of the above items is implemented.

[0047] The multi-version front-end resource loading method, system and storage medium of the present invention dynamically obtain the version number from the page back-end interface by the front-end, and the acquisition process is run by the front-end alone, so as to realize the decoupling of the front-end and the back-end, make the management and deployment of the front-end resources more independent, and reduce the complexity of the back-end architecture. Secondly, by finding the folder with independent version from the multi-version resource package, and obtaining the corresponding front-end resources and entry template files therefrom, the front-end resources of different versions are managed separately through multiple different folders, so as to support the coexistence and isolation of multi-version resources, and optimize the storage and retrieval process of resources, and improve the efficiency of resource loading. By parsing the front-end entry template file and loading resources on demand, the scheme optimizes the resource loading process, and ensures the correct loading and execution of resources by parsing and loading the front-end entry template text, while reducing unnecessary network requests and data transmission, improving the page loading speed, realizing that resources can be quickly switched according to the version number without redeploying the entire application, and enhancing the flexibility and response speed of the system. The present invention simplifies the deployment process through automated version management and multi-version resource packages, improves the agility of the front-end for loading and switching multi-version front-end resources, makes version updates and maintenance easier, and thus improves the maintainability and scalability of the entire system. BRIEF DESCRIPTION OF THE DRAWINGS

[0048] Figure 1 A schematic diagram of a flow chart of a method for loading multi-version front-end resources in one embodiment of the present invention;

[0049] Figure 2 A schematic diagram of a process of parsing a front-end entry template file in another embodiment of the present invention;

[0050] Figure 3 A schematic diagram of a process of loading a front-end entry template file in another embodiment of the present invention;

[0051] Figure 4 This is one of the structural diagrams of a multi-version front-end resource loading system in another embodiment of the present invention;

[0052] Figure 5 This is a second structural diagram of a multi-version front-end resource loading system in another embodiment of the present invention;

[0053] Figure 6 The figure is a schematic structural diagram of an electronic device in another embodiment of the present invention. DETAILED DESCRIPTION

[0054] In order to make the above-mentioned objects, features and advantages of the present invention more obvious and easy to understand, the specific embodiments of the present invention are described in detail below in conjunction with the accompanying drawings. Although certain embodiments of the present invention are shown in the accompanying drawings, it should be understood that the present invention can be implemented in various forms and should not be interpreted as being limited to the embodiments described herein. On the contrary, these embodiments are provided to provide a more thorough and complete understanding of the present invention. It should be understood that the drawings and embodiments of the present invention are only for exemplary purposes and are not intended to limit the scope of protection of the present invention.

[0055] It should be understood that the various steps described in the method embodiments of the present invention may be performed in different orders and / or in parallel. In addition, the method embodiments may include additional steps and / or omit the steps shown. The scope of the present invention is not limited in this respect.

[0056] The term "including" and its variations used in this document are open inclusions, that is, "including but not limited to"; the term "based on" means "based at least in part on"; the term "one embodiment" means "at least one embodiment"; the term "another embodiment" means "at least one other embodiment"; the term "some embodiments" means "at least some embodiments"; the term "optionally" means "optional embodiments". The relevant definitions of other terms will be given in the following description. It should be noted that the concepts of "first", "second", etc. mentioned in the present invention are only used to distinguish different devices, modules or units, and are not used to limit the order or interdependence of the functions performed by these devices, modules or units.

[0057] It should be noted that the modifications of "one" and "plurality" mentioned in the present invention are illustrative rather than restrictive, and those skilled in the art should understand that, unless otherwise clearly indicated in the context, it should be understood as "one or more".

[0058] The names of the messages or information exchanged between multiple devices in the embodiments of the present invention are only used for illustrative purposes, and are not used to limit the scope of these messages or information.

[0059] In the related art, the existing web page front-end resource loading is mainly based on a single version. The same page can only load front-end resource files under one version at the same time. These files are mainly js and css.

[0060] With the rapid development of Web business, new challenges have been brought to the front-end multi-version resource loading. Currently, there are two main methods for the front-end multi-version resource loading solution: the first is a conventional practice, deploying different versions of front-end resources in different operating environments. The advantage of this solution is that it is a full replacement and simple to operate. The disadvantage is that each environment must be configured with a single resource, and a single environment cannot quickly switch versions. If you need to switch versions, you must redeploy the front-end resources. The second method is to rely on the back-end template to achieve it. It mainly introduces a dynamic template library through the back-end, injects the version number through the template generated by the front-end in advance, and the version number is obtained by the back-end from the environment variable. When the front-end page is loaded, the corresponding resource is obtained according to the version. The advantage of this solution is that it can quickly update different versions of the front-end. The disadvantage is that it depends on the back-end architecture. The back-end must introduce an additional template library, which will have a little impact on the startup and running performance of the back-end. In addition, the front-end and back-end are also tightly coupled. Once the front-end template needs to be adjusted, the back-end project also needs to be adjusted synchronously, otherwise it may cause the front-end project to fail to run normally.

[0061] In view of the problems existing in the above-mentioned related technologies, this embodiment provides a multi-version front-end resource loading method, system and storage medium.

[0062] Combination Figure 1 As shown, a multi-version front-end resource loading method provided by an embodiment of the present invention includes:

[0063] Get the version number of the current environment from the backend interface of the page.

[0064] Specifically, in a preferred embodiment of the present invention, the front end queries the server for the front-end resource version number that should be used in the current environment through an HTTP request, which is usually a GET request. This version number is used as a key identifier for the subsequent resource loading process, making it easier for the system to load corresponding front-end resources according to different deployment environments or requirements.

[0065] Determine the folder corresponding to the version number from the preset fixed path in the multi-version resource package, and load the front-end entry template file corresponding to the version number from the folder; wherein the preset fixed path of the multi-version resource package includes multiple folders, and one folder stores a front-end resource of the version and the front-end entry template file corresponding to the version.

[0066] Specifically, the front-end determines the corresponding folder path in the resource package according to the version number obtained from the back-end interface. This folder path is preset and usually includes the version number as part of the path. In a preferred embodiment of the present invention, all front-end resources of a specific version are stored in a folder under a fixed combine-static file path, including HTML, CSS, JavaScript files, etc. The front-end system will load the front-end entry template file in the folder. The front-end entry template file is usually index.html. This file serves as the starting point of the resource of this version. The front-end entry template file is an html string, which mainly includes resources such as js scripts and css style files. These resources generally start with the corresponding resource tags. For example, the script tag represents the js script, and the link and style tags represent the css style files.

[0067] The front-end entry template file is parsed to obtain a resource tag file of the front-end entry template file.

[0068] Specifically, once the front-end has loaded the front-end entry template file, the next step is to parse the front-end entry template file and extract all resource tags defined therein, including the above-mentioned script, link and style tags. These tags contain links or inline codes of resources, which are key information for loading specific resources. In a preferred embodiment of the present invention, the parsing process can use DOM operations, use APIs to convert the strings (such as HTML strings) of the front-end entry template file into operable DOM objects, and then traverse the DOM objects to obtain all web page elements corresponding to the version, thereby collecting the web page elements to obtain relevant resource tag files.

[0069] Loading is performed according to the resource tag file to obtain the front-end resource of the version.

[0070] Specifically, after parsing the entry template file and obtaining all resource tags, the front end will load these resources in a certain order. In a preferred embodiment of the present invention, the order can be the order in which they appear in the document or the order determined by specific logic. The loading process includes adding new script or link elements to the DOM, or executing inline JavaScript and CSS code.

[0071] The multi-version front-end resource loading method of the present invention dynamically obtains the version number from the page back-end interface by the front-end, and the acquisition process is run by the front-end alone, so that the decoupling of the front-end and the back-end is realized, so that the management and deployment of the front-end resources are more independent, and the complexity of the back-end architecture is reduced. Secondly, by finding the folder with independent corresponding versions from the multi-version resource package, and obtaining the corresponding front-end resources and entry template files therefrom, the front-end resources of different versions are managed separately through multiple different folders, so as to support the coexistence and isolation of multi-version resources, and at the same time, the storage and retrieval process of resources is optimized, and the efficiency of resource loading is improved. By parsing the front-end entry template file and loading resources on demand, the scheme optimizes the resource loading process, and ensures the correct loading and execution of resources by parsing and loading the front-end entry template text, while reducing unnecessary network requests and data transmission, improving the page loading speed, realizing the rapid switching of resources according to the version number without redeploying the entire application, and enhancing the flexibility and response speed of the system. The present invention simplifies the deployment process through automated version management and multi-version resource packages, improves the agility of the front-end to load and switch multi-version front-end resources, makes version update and maintenance easier, thereby improving the maintainability and scalability of the entire system.

[0072] Optionally, obtaining the version number of the version corresponding to the current environment from the page backend interface includes:

[0073] Initiate a GET request to the page backend interface through the front end, wherein the page backend interface is used to receive the GET request and send a standard string to the front end;

[0074] The standard character string is parsed to obtain the version number of the version corresponding to the current environment.

[0075] Specifically, first, a GET request is initiated through the front end to the page backend interface, which returns a standard string according to the current environment configuration. This standard string contains the key information required by the front end, namely the version number, which is the basis for implementing multi-version resource management. In the uploaded file, this process is described in detail, in which the front end uses the Axios library to send a GET request to the backend interface / a / b / c / version and receives the returned standard string. For example, the back end may return a JSON response, and the front end then parses this standard string and extracts the version field, which is the version number corresponding to the current environment, for the subsequent resource loading process. This step is the starting point of the resource loading process, ensuring that the front end can accurately load the correct resource version according to the backend configuration.

[0076] In the embodiment of the present invention, the front end only needs to call the back end interface to determine the version number required for the current project, thereby simplifying the involvement of the back end and reducing potential errors. By obtaining the version number, the front end can perform adaptive loading for changes in different versions of entry templates without adjusting the front end code, thereby improving the maintainability and scalability of the system.

[0077] Optionally, determining a folder corresponding to the version number from a preset fixed path in the multi-version resource package, and loading a front-end entry template file corresponding to the version number from the folder, includes:

[0078] Concatenate the path name of the preset fixed path with the version number to obtain concatenation information;

[0079] Add the naming suffix of the front-end entry template file to the splicing information to obtain the request address;

[0080] Determine the folder corresponding to the version number according to the request address;

[0081] Obtain the front-end entry template file corresponding to the version number from the folder.

[0082] Specifically, first, the front-end system forms path information pointing to a specific version of the resource by splicing the preset fixed path with the version number obtained from the back-end interface. For example, if the preset fixed path is / combine-static / and the version number is 1.0.0, the splicing information may be / combine-static / 1.0.0 / . Next, based on this splicing path, add the naming suffix of the front-end entry template file, such as index.html, to form a complete request address / combine-static / 1.0.0 / index.html. This request address directly points to the front-end entry template file in the folder corresponding to the specific version number. Subsequently, the front-end obtains the corresponding front-end entry template file from the server by sending a request to this address, thereby ensuring that the front-end can accurately access the correct version of the resource, laying the foundation for subsequent resource parsing and loading.

[0083] In an embodiment of the present invention, by directly integrating the version number into the resource path, the method not only simplifies the resource location process, but also enhances the intuitiveness and maintainability of resource management, making the organization and access of resources more orderly, while also facilitating the implementation of automated and standardized resource loading processes, reducing the complexity of the front-end processing logic, and improving the stability and reliability of the system.

[0084] Optionally, the parsing of the front-end entry template file to obtain a resource tag file of the front-end entry template file includes:

[0085] Create an empty initial array;

[0086] According to the preset content type, the string of the front-end entry template file is converted into a DOM object;

[0087] Traversing the DOM object to obtain multiple web page elements corresponding to the returned version;

[0088] The tag attribute of each of the web page elements is judged, and the required web page elements are added to the initial array as resource records to obtain the resource tag file of the front-end entry template file.

[0089] Specifically, first, the front end initializes an empty array to store the web page elements collected during the parsing process. Subsequently, the system uses the built-in DOMParserAPI of the browser to convert the string of the front-end entry template file into a DOM object according to the preset content type. Next, the front end traverses the converted DOM object and uses the querySelectorAll('*') method to obtain all elements in the DOM. Among them, the input parameter of the querySelectorAll('*') method is *, and all elements are returned. For each web page element, the front end judges according to its tag attributes to determine whether the element is a resource that needs to be loaded. If so, the information of the element (such as tag type, resource link or content) is appended to the initial array as a record. In this way, after a series of judgment and extraction operations, the initial array finally contains all the resource information that needs to be loaded defined in the front-end entry template file.

[0090] In the embodiment of the present invention, by converting the template file into a DOM object, the front end can process HTML content more flexibly and efficiently, thereby improving the accuracy and flexibility of resource parsing. Secondly, by traversing the DOM and extracting resource information according to preset rules, the method ensures that only the resources that are really needed are loaded, avoiding unnecessary resource requests, thereby optimizing page loading performance.

[0091] Optionally, judging the tag attribute of each of the web page elements and appending the required web page elements as resource records to the initial array includes:

[0092] According to the tag attribute of the web page element, determining whether the web page element is a js resource or a css style resource;

[0093] If yes, determining that the web page element is the required web page element, and appending the web page element to the initial array;

[0094] If not, the web page element is determined to be an unnecessary web page element, and the web page element is skipped.

[0095] Specifically, the parsing process of the front-end entry template file involves a detailed judgment of the tag attributes of each web page element to determine whether these elements are JavaScript or CSS resources that need to be loaded. These resource records are then appended to the initial array to prepare for subsequent resource loading. For example, the uploaded file mentions using DOMParser to convert the HTML string into a DOM object, and then using querySelectorAll('*') to obtain all web page elements, and then judging and extracting resource information based on the above logic. If yes, then add it to the initial array, if not, then skip the web page element. Combined with Figure 2As shown, in a preferred embodiment of the present invention, for the parsing of the front-end entry template file, a brand new DOM object is first initialized. Then the parseFromString method under htmlParser is called. The method accepts two parameters. The first is the string of the corresponding version of the front-end entry template file returned in the above steps. The second parameter is to specify the content type, which can be specified as text / html here. The method returns a real DOM object, which is named DOM for subsequent link traversal needs. Before starting to traverse the DOM elements, an initial array is established and the array is named resChildren. All web page elements are obtained through querySelectorAll('*'), and the return value of the method is named nodeList. Start to loop nodeList in sequence, and judge each element returned. The judgment logic is mainly based on the tag attribute corresponding to the element. According to the tag attribute, it is first judged whether it is a js script. If so, it is necessary to confirm whether it is an internal chain js script or an external chain js resource. Here, it can be processed by judging whether the element has a src attribute. If there is a src attribute, it is considered to be an external chain resource, otherwise it is an internal chain resource. For js external link resources, you need to add a resource record of the web page element to the resChildren array prepared for initialization. The record is represented by an object, and the el and src attributes are used to represent the information of js external link resources. For js internal link resources, you also need to add a resource record of the web page element to the resChildren array prepared for initialization. The record is represented by an object, and the el and content attributes are used to represent the information of js internal link resources. If it is not a js script, you need to determine whether it is a css style resource. Here, you can distinguish between internal link css styles and external link css resources, which can also be confirmed according to the tag attributes. For external link css resources, you need to add a resource record of the web page element to the resChildren array prepared for initialization. The record is represented by an object, and the el and href attributes are used to represent the external link css resource information. For internal link css resources, you need to add a resource record of the web page element to the resChildren array prepared for initialization. The record is represented by an object, and the el and content attributes are used to represent the internal link css resource information. For other types of tag elements that do not belong to the above situation, they can be skipped without processing. Finally, when the loop of web page elements in nodeList is completed, the resChildren array will collect all the resource tag files we need. At this point, the entire front-end entry template file resource parsing process is completed.

[0096] In the embodiment of the present invention, by judging the web page elements, it is ensured that only the resources of the required web page elements are loaded, thereby avoiding unnecessary network requests and improving the page loading performance. In this way, the system can dynamically load the correct resources according to the definition in the template file, supporting the flexible management and fast switching of multiple versions of resources.

[0097] Optionally, the loading according to the resource tag file to obtain the front-end resource of the version includes:

[0098] According to the tag attribute of each of the web page elements in the resource tag file, an initial tag element corresponding to the web page element is established, and a value is assigned to the initial tag element;

[0099] The assigned initial tag element is appended to the end of the head element of the page to complete the loading of the web page element and obtain the front-end resource of the web page element.

[0100] Specifically, after completing the parsing of the front-end entry template file, the next step is to load the resources defined in the parsed resource tag file. This process first dynamically creates the corresponding initial tag element based on the tag attributes of each web page element in the resource tag file. For example, for an externally linked JavaScript resource, the front end will create a script tag as the initial tag element and set its src attribute to point to the URL of the resource; for an externally linked CSS resource, a link tag will be created as the initial tag element and its href attribute will be set to point to the URL of the style sheet. These initial tag elements are then appended to the end of the head element of the page, triggering the loading of the resources and obtaining the front-end resources of the web page elements.

[0101] In the embodiment of the present invention, by dynamically adding resource tags to the page header, it is ensured that resources are loaded and executed in the expected order. At the same time, the flexibility and scalability of the system are enhanced, because new resources or versions can be introduced by simply modifying the resource tag file without rewriting or significantly modifying the front-end code. Finally, by centrally managing the resource loading logic, the maintenance and update of the code are simplified, making the front-end development and maintenance work more efficient.

[0102] Optionally, the step of establishing an initial tag element corresponding to each of the web page elements according to the tag attribute of each of the web page elements in the resource tag file includes:

[0103] When determining that the web page element is the js resource according to the tag attribute, taking the script tag element as the initial tag element corresponding to the js resource;

[0104] When determining that the web page element is the CSS style resource according to the tag attribute, if the CSS style resource is an external link resource, the link tag element is used as the initial tag element of the CSS style resource; if the CSS style resource is an internal link resource, the style tag element is used as the initial tag element of the CSS style resource.

[0105] Specifically, according to the information in the resource tag file, the front-end system takes specific steps to establish the initial tag element corresponding to the web page element. Specifically, when the parsed web page element is identified as a JavaScript resource, a script tag element is created as the initial tag element; if it is not a js script resource, then it can be determined whether it is a CSS style resource. If the CSS style resource is a CSS external link resource, a link tag element is created as the initial tag element. If the CSS style resource is a CSS internal link resource, a style tag element is created as the initial tag element. Combined with Figure 3 As shown, in a preferred embodiment of the present invention, the template resources are first processed, that is, the resource tag file is loaded, and the web page element is judged to be a js resource or a css style resource according to the tag attribute. For js resources, a script tag element is first created as the initial tag element, and the js script is assigned to the textContent attribute of the script tag element. Finally, the script tag element s is appended to the end of the page head element to complete the loading. For css external link resources, a link tag element is created as the initial tag element, and the address attribute of the css external link resource is assigned to the href attribute of the link tag element. At the same time, the resource type rel of the link tag element is set to stylesheet, and finally the link tag element is appended to the end of the page head element to complete the loading. For css internal link resources, a style tag element is created as the initial tag element, and the css internal link style value is assigned to the textContent attribute of the style tag element. Finally, the style tag element is appended to the end of the page head element to complete the loading.

[0106] In an embodiment of the present invention, by distinguishing between external and internal link resources and creating appropriate tag elements for each resource type, this method ensures that resources can be loaded and applied in an expected manner.

[0107] Optionally, it also includes: constructing the multi-version resource package;

[0108] The constructing of the multi-version resource package specifically includes:

[0109] According to the version required by the webpage, a configuration file is created, wherein the configuration file includes the npm package version information of each version;

[0110] According to the npm package version information of the version, obtain the tar package path address corresponding to the version;

[0111] Download the tarball resource according to the tarball path address;

[0112] Decompress the tarball resource to obtain the front-end resource of the version, and store each version of the front-end resource separately in the folder under the preset fixed path;

[0113] After all the versions of the front-end resources are stored in the corresponding folders, the folders in the preset fixed path are merged to obtain the multi-version resource package.

[0114] Specifically, the process of building a multi-version resource package is the core link to achieve multi-version management of front-end resources. First, according to the various versions required by the web page, the developer needs to create a configuration file, which lists the version information of the npm package for each version in detail. This step is the starting point for building the resource package, ensuring the accuracy and orderliness of subsequent operations. Next, the system obtains the tarball path address of the corresponding version based on the information in the configuration file. Subsequently, the system downloads these tarball resources from the tarball path address and decompresses these tarball resources to obtain a specific version of the front-end resources. These resources are then stored separately in the corresponding folders under the preset fixed path, one folder for each version, thereby realizing isolated storage of resources, and finally merging all folders in the preset fixed path.

[0115] In the embodiment of the present invention, by managing multi-version resource packages, the entire front-end resource package merges all the front-end resource versions that need to be run, and each version of the resource is isolated by using the version number as a path. At the same time, the front-end can dynamically load a specific version of the resource from the resource package as needed without re-downloading the entire resource package, thereby improving the flexibility and efficiency of resource loading.

[0116] Combination Figure 4 As shown, the present invention also provides a multi-version front-end resource loading system 400, including:

[0117] A version number acquisition unit 410 is used to acquire the version number of the version corresponding to the current environment from the page backend interface;

[0118] The resource extraction unit 420 is used to determine the folder corresponding to the version number from the preset fixed path in the multi-version resource package, and load the front-end entry template file corresponding to the version number from the folder; wherein the preset fixed path of the multi-version resource package includes a plurality of folders, and one folder stores a front-end resource of the version and the front-end entry template file corresponding to the version;

[0119] The resource parsing unit 430 is used to parse the front-end entry template file to obtain a resource tag file of the front-end entry template file;

[0120] The resource loading unit 440 is used to load the resource tag file to obtain the front-end resource of the version.

[0121] The version number acquisition unit 410 is also used to initiate a GET request to the page backend interface through the front end, wherein the page backend interface is used to receive the GET request and send a standard string to the front end; parse the standard string to obtain the version number of the version corresponding to the current environment.

[0122] The resource extraction unit 420 is also used to splice the path name of the preset fixed path with the version number to obtain splicing information; add the naming suffix of the front-end entry template file to the splicing information to obtain the request address; obtain the front-end entry template file corresponding to the version number from the folder; and obtain the front-end entry template file corresponding to the version number by sending a request to the folder.

[0123] The resource parsing unit 430 is also used to establish an empty initial array; according to the preset content type, convert the string of the front-end entry template file into a DOM object; traverse the DOM object to obtain multiple web page elements corresponding to the returned version; judge the tag attribute of each of the web page elements, append the required web page elements as resource records to the initial array, and obtain the resource tag file of the front-end entry template file. Wherein, judging the tag attribute of each of the web page elements and appending the required web page elements as resource records to the initial array includes: judging whether the web page element is a js resource or a css style resource according to the tag attribute of the web page element; if so, judging the web page element as the required web page element, and appending the web page element to the initial array; if not, judging the web page element as the unnecessary web page element, and skipping the web page element.

[0124] The resource loading unit 440 is also used to establish an initial tag element corresponding to the web page element according to the tag attribute of each web page element in the resource tag file, and assign a value to the initial tag element; append the assigned initial tag element to the end of the page head element to complete the loading of the web page element and obtain the front-end resource of the web page element. The establishment of the initial tag element corresponding to the web page element according to the tag attribute of each web page element in the resource tag file includes: when the web page element is determined to be the js resource according to the tag attribute, the script tag element is used as the initial tag element corresponding to the js resource; when the web page element is determined to be the CSS style resource according to the tag attribute, if the CSS style resource is an external link resource, the link tag element is used as the initial tag element of the CSS style resource; if the CSS style resource is an internal link resource, the style tag element is used as the initial tag element of the CSS style resource.

[0125] Combination Figure 5 As shown, the multi-version front-end resource loading system 400 also includes a resource management unit 450, which is used to construct the multi-version resource package; the construction of the multi-version resource package specifically includes: establishing a configuration file according to the version required by the web page, the configuration file including the npm package version information of each version; obtaining the tar package path address corresponding to the version according to the npm package version information of the version; downloading the tar package resources according to the tar package path address; decompressing the tar package resources to obtain the front-end resources of the version, and storing each version of the front-end resources separately in the folder under the preset fixed path; when all the versions of the front-end resources are stored in the corresponding folders, merging the folders in the preset fixed path to obtain the multi-version resource package.

[0126] The multi-version front-end resource loading system of the present invention dynamically obtains the version number from the page back-end interface by the front-end, and the acquisition process is run by the front-end alone, realizing the decoupling of the front-end and the back-end, making the management and deployment of the front-end resources more independent, and reducing the complexity of the back-end architecture. Secondly, by finding the folder with independent corresponding versions from the multi-version resource package, and obtaining the corresponding front-end resources and entry template files therefrom, the front-end resources of different versions are managed separately through multiple different folders, thereby supporting the coexistence and isolation of multi-version resources, and optimizing the storage and retrieval process of resources, and improving the efficiency of resource loading. By parsing the front-end entry template file and loading resources on demand, the scheme optimizes the resource loading process, and ensures the correct loading and execution of resources by parsing and loading the front-end entry template text, while reducing unnecessary network requests and data transmission, improving the page loading speed, realizing the rapid switching of resources according to the version number, without the need to redeploy the entire application, and enhancing the flexibility and response speed of the system. The present invention simplifies the deployment process through automated version management and multi-version resource packages, improves the agility of the front-end to load and switch multi-version front-end resources, makes version update and maintenance easier, thereby improving the maintainability and scalability of the entire system.

[0127] An embodiment of the present invention provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the multi-version front-end resource loading method as described above is implemented.

[0128] In other words, a non-volatile computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the processor performs the following operations:

[0129] Get the version number of the current environment from the backend interface of the page;

[0130] Determine the folder corresponding to the version number from the preset fixed path in the multi-version resource package, and load the front-end entry template file corresponding to the version number from the folder; wherein the preset fixed path of the multi-version resource package includes a plurality of folders, and one of the folders stores a front-end resource of the version and the front-end entry template file corresponding to the version;

[0131] Parsing the front-end entry template file to obtain a resource tag file of the front-end entry template file;

[0132] Loading is performed according to the resource tag file to obtain the front-end resource of the version.

[0133] The computer-readable storage medium of the present invention dynamically obtains the version number from the page backend interface by the front end, and the acquisition process is run by the front end alone, realizing the decoupling of the front end and the back end, making the management and deployment of the front end resources more independent, and reducing the complexity of the back end architecture. Secondly, by finding the folder with independent corresponding versions from the multi-version resource package, and obtaining the corresponding front-end resources and entry template files therefrom, the front-end resources of different versions are managed separately through multiple different folders, thereby supporting the coexistence and isolation of multi-version resources, and optimizing the storage and retrieval process of resources, and improving the efficiency of resource loading. By parsing the front-end entry template file and loading resources on demand, the scheme optimizes the resource loading process, and ensures the correct loading and execution of resources by parsing and loading the front-end entry template text, while reducing unnecessary network requests and data transmission, improving the page loading speed, realizing that resources can be quickly switched according to the version number without redeploying the entire application, and enhancing the flexibility and response speed of the system. The present invention simplifies the deployment process through automated version management and multi-version resource packages, improves the agility of the front end to load and switch multi-version front-end resources, makes version updates and maintenance easier, thereby improving the maintainability and scalability of the entire system.

[0134] Combination Figure 6 As shown, an electronic device 600 provided by an embodiment of the present invention includes a memory 610 and a processor 620; the memory 610 is used to store computer programs; the processor 620 is used to implement the multi-version front-end resource loading method as described above when executing the computer program.

[0135] In other words, an electronic device 600 includes a memory 610 and a processor 620 coupled to the memory 610; the memory 610 is configured to store a computer program; and the processor 620 is configured to perform the following operations when executing the computer program:

[0136] Get the version number of the current environment from the backend interface of the page;

[0137] Determine the folder corresponding to the version number from the preset fixed path in the multi-version resource package, and load the front-end entry template file corresponding to the version number from the folder; wherein the preset fixed path of the multi-version resource package includes a plurality of folders, and one of the folders stores a front-end resource of the version and the front-end entry template file corresponding to the version;

[0138] Parsing the front-end entry template file to obtain a resource tag file of the front-end entry template file;

[0139] Loading is performed according to the resource tag file to obtain the front-end resource of the version.

[0140] An electronic device 600 that can be used as a server or client of the present invention will now be described, which is an example of a hardware device that can be applied to various aspects of the present invention. The electronic device 600 is intended to represent various forms of digital electronic computer equipment, such as laptop computers, desktop computers, workbenches, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device 600 can also represent various forms of mobile devices, such as personal digital processing, cellular phones, smart phones, wearable devices, 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 required herein.

[0141] The electronic device 600 includes a computing unit, which can perform various appropriate actions and processes according to a computer program stored in a read-only memory (ROM) or a computer program loaded from a storage unit into a random access memory (RAM). In the RAM, various programs and data required for the operation of the device can also be stored. The computing unit, ROM, and RAM are connected to each other via a bus. An input / output (I / O) interface is also connected to the bus.

[0142] A person of ordinary skill in the art can understand that the implementation of all or part of the processes in the above-mentioned embodiment method can be completed by instructing the relevant hardware through a computer program, and the program can be stored in a computer-readable storage medium. When the program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, the storage medium can be a disk, an optical disk, a read-only memory (ROM) or a random access memory (RAM), etc. In the present application, the unit described as a separate component may or may not be physically separated, and the component displayed as a unit may or may not be a physical unit, that is, it may be located in one place, or it may be distributed on multiple network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the embodiment of the present invention. In addition, each functional unit in each embodiment of the present invention can be integrated in a processing unit, or each unit can exist physically separately, or two or more units can be integrated in one unit. The above-mentioned integrated unit can be implemented in the form of hardware or in the form of a software functional unit.

[0143] Although the present invention is disclosed as above, the protection scope of the present invention is not limited thereto. Those skilled in the art may make various changes and modifications without departing from the spirit and scope of the present invention, and these changes and modifications will fall within the protection scope of the present invention.

Claims

1. A multi-version front-end resource loading method, characterized in that: include: Get the version number of the current environment from the backend interface of the page; Determine the folder corresponding to the version number from the preset fixed path in the multi-version resource package, and load the front-end entry template file corresponding to the version number from the folder; wherein the preset fixed path of the multi-version resource package includes a plurality of folders, and one of the folders stores a front-end resource of the version and the front-end entry template file corresponding to the version; Parsing the front-end entry template file to obtain a resource tag file of the front-end entry template file; Loading is performed according to the resource tag file to obtain the front-end resource of the version.

2. The multi-version front-end resource loading method according to claim 1, characterized in that: The step of obtaining the version number of the corresponding version of the current environment from the page backend interface includes: Initiate a GET request to the page backend interface through the front end, wherein the page backend interface is used to receive the GET request and send a standard string to the front end; The standard character string is parsed to obtain the version number of the version corresponding to the current environment.

3. The multi-version front-end resource loading method according to claim 1 is characterized in that: The step of determining a folder corresponding to the version number from a preset fixed path in a multi-version resource package, and loading a front-end entry template file corresponding to the version number from the folder includes: Concatenate the path name of the preset fixed path with the version number to obtain concatenation information; Add the naming suffix of the front-end entry template file to the splicing information to obtain the request address; Determine the folder corresponding to the version number according to the request address; Obtain the front-end entry template file corresponding to the version number from the folder.

4. The multi-version front-end resource loading method according to claim 1, characterized in that: The parsing of the front-end entry template file to obtain the resource tag file of the front-end entry template file includes: Create an empty initial array; According to the preset content type, the string of the front-end entry template file is converted into a DOM object; Traversing the DOM object to obtain multiple web page elements corresponding to the returned version; The tag attribute of each of the web page elements is judged, and the required web page elements are added to the initial array as resource records to obtain the resource tag file of the front-end entry template file.

5. The multi-version front-end resource loading method according to claim 4 is characterized in that: The step of judging the tag attribute of each web page element and adding the required web page element as a resource record to the initial array includes: According to the tag attribute of the web page element, determining whether the web page element is a js resource or a css style resource; If yes, determining that the web page element is the required web page element, and appending the web page element to the initial array; If not, the web page element is determined to be an unnecessary web page element, and the web page element is skipped.

6. The multi-version front-end resource loading method according to claim 5, characterized in that: The loading according to the resource tag file to obtain the front-end resource of the version includes: According to the tag attribute of each of the web page elements in the resource tag file, an initial tag element corresponding to the web page element is established, and a value is assigned to the initial tag element; The assigned initial tag element is appended to the end of the head element of the page to complete the loading of the web page element and obtain the front-end resource of the web page element.

7. The multi-version front-end resource loading method according to claim 6, characterized in that: The step of establishing an initial tag element corresponding to each of the web page elements according to the tag attribute of each of the web page elements in the resource tag file includes: When determining that the web page element is the js resource according to the tag attribute, taking the script tag element as the initial tag element corresponding to the js resource; When determining that the web page element is the CSS style resource according to the tag attribute, if the CSS style resource is an external link resource, the link tag element is used as the initial tag element of the CSS style resource; if the CSS style resource is an internal link resource, the style tag element is used as the initial tag element of the CSS style resource.

8. The multi-version front-end resource loading method according to claim 1, characterized in that: Also includes: Building the multi-version resource package; The constructing of the multi-version resource package specifically includes: According to the version required by the webpage, a configuration file is created, wherein the configuration file includes the npm package version information of each version; According to the npm package version information of the version, obtain the tar package path address corresponding to the version; Download the tarball resource according to the tarball path address; Decompress the tarball resource to obtain the front-end resource of the version, and store each version of the front-end resource separately in the folder under the preset fixed path; After all the versions of the front-end resources are stored in the corresponding folders, the folders in the preset fixed path are merged to obtain the multi-version resource package.

9. A multi-version front-end resource loading system, characterized in that: include: A version number acquisition unit is used to obtain the version number of the current environment from the page backend interface; A resource extraction unit, used to determine a folder corresponding to the version number from a preset fixed path in a multi-version resource package, and load a front-end entry template file corresponding to the version number from the folder; wherein the preset fixed path of the multi-version resource package includes a plurality of folders, and one folder stores a front-end resource of the version and the front-end entry template file corresponding to the version; A resource parsing unit, used to parse the front-end entry template file to obtain a resource tag file of the front-end entry template file; The resource loading unit is used to load the resource tag file to obtain the front-end resource of the version.

10. A computer-readable storage medium, characterized in that: The storage medium stores a computer program, and when the computer program is executed by the processor, the multi-version front-end resource loading method as described in any one of claims 1-8 is implemented.

Images