Resource processing method, apparatus and electronic device

Abstract

The application provides a resource processing method and device and electronic equipment, obtains target resource code related to a routing page, determines a resource name of a target third-party resource used by the routing page, generates a target correspondence relationship between the routing page and a target third-party resource file, and generates a file path of the target third-party resource file used by each routing page, so that when the routing page is triggered, the target third-party resource file is loaded based on the file path of the target third-party resource file. Since the target third-party resource used by each routing page is part of all third-party resources, only the resource file of the target third-party resource is generated, so that when the target project is run, the corresponding resource file is loaded according to the currently triggered routing page, the problem of loading and parsing all resource files when the home page is opened is avoided, the request pressure of the server and the waste of network resources are reduced, and the running efficiency of the project is improved.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of computer, and particularly relates to a resource processing method and device and electronic equipment. BACKGROUND

[0002] At present, most of the website projects are developed based on the modularization mode, and a conventional website project usually includes a folder for storing project resources and a folder for storing third-party resources. When packaging the project resources, the construction code in the folder for storing the project resources can be combined into a file, such as manifest.bundle.js, the code in the folder for storing the third-party resources can be combined into a file, such as vendor.bundle.js, and the business code in the above folders can be combined into a file, such as index.bundle.js, and the website project can be run based on the three files. However, as the project requirements are continuously iterated, the size of the project source code will become larger and larger, which usually causes the vendor.bundle.js file to be large. Since the website homepage and each sub-webpage use the third-party resources, the vendor.bundle.js file is loaded when the homepage is opened, and therefore, the loading and parsing of the website homepage are affected, the request pressure of the server is large, network resources are wasted, and the running efficiency of the website is affected. SUMMARY

[0003] Therefore, the present application aims to provide a resource processing method and device and electronic equipment, which generates a resource file of a target third-party resource used by a routing page, so that the corresponding resource file can be loaded according to the currently triggered routing page when the project is run, the problem of loading and parsing all resource files when the homepage is opened is avoided, the request pressure of the server and the waste of network resources are reduced, and the running efficiency of the project is improved.

[0004] In a first aspect, an embodiment of the present application provides a resource processing method. The method is applied to a terminal device. The terminal device is configured with a plurality of resource folders of a target project. The plurality of resource folders store resource codes of the target project. The method comprises the following steps: obtaining target resource codes stored in a target resource folder related to a routing page from the plurality of resource folders; determining a resource name of a target third-party resource used by the routing page based on the target resource codes; generating a target correspondence relationship between the routing page and a target third-party resource file according to the resource name of the target third-party resource used by the routing page and a pre-generated third-party resource file; wherein the third-party resource file stores all third-party resources of the target project, and the target third-party resource file stores part of the third-party resources of the target project; publishing the target correspondence relationship to a corresponding server, and generating a file path of the target third-party resource file used by each routing page, so that when the target project is run, if the routing page is triggered, the target third-party resource file is loaded based on the file path of the target third-party resource file.

[0005] In a second aspect, an embodiment of the present application provides a resource processing device. The device is applied to a terminal device. The terminal device is configured with a plurality of resource folders of a target project. The plurality of resource folders store resource codes of the target project. The device comprises the following modules: a determination module, configured to obtain target resource codes stored in a target resource folder related to a routing page from the plurality of resource folders, and determine a resource name of a target third-party resource used by the routing page based on the target resource codes; a generation module, configured to generate a target correspondence relationship between the routing page and a target third-party resource file according to the resource name of the target third-party resource used by the routing page and a pre-generated third-party resource file; wherein the third-party resource file stores all third-party resources of the target project, and the target third-party resource file stores part of the third-party resources of the target project; and a loading module, configured to publish the target correspondence relationship to a corresponding server, and generate a file path of the target third-party resource file used by each routing page, so that when the target project is run, if the routing page is triggered, the target third-party resource file is loaded based on the file path of the target third-party resource file.

[0006] In a third aspect, an embodiment of the present application provides an electronic device. The electronic device comprises a processor and a memory. The memory stores computer executable instructions capable of being executed by the processor. The processor executes the computer executable instructions to implement the resource processing method of the first aspect.

[0007] In a fourth aspect, an embodiment of the present application provides a computer readable storage medium. The computer readable storage medium stores computer executable instructions. When the computer executable instructions are called and executed by a processor, the computer executable instructions cause the processor to implement the resource processing method of the first aspect.

[0008] The embodiment of the present application brings the following beneficial effects:

[0009] The present application provides a resource processing method, device and electronic equipment, obtaining target resource code related to a routing page, determining the resource name of the target third-party resource used by the routing page; generating a target correspondence relationship between the routing page and the target third-party resource file; generating the file path of the target third-party resource file used by each routing page, so that when the routing page is triggered, the target third-party resource file is loaded based on the file path of the target third-party resource file. Since the target third-party resource used by each routing page is part of all third-party resources, only the resource file of the target third-party resource is generated, so that when the target project is running, the corresponding resource file is loaded according to the currently triggered routing page, avoiding the problem of loading and parsing all resource files when opening the home page, reducing the request pressure of the server and the waste of network resources, and further improving the running efficiency of the project.

[0010] Other features and advantages of the present application will be set forth in the following description, and in part will become apparent to those skilled in the art from the description, or can be learned by practice of the present application. The objects and other advantages of the present application will be realized and achieved by the structure particularly pointed out in the specification, claims and drawings.

[0011] In order to make the above-mentioned objects, features and advantages of the present application more obvious and easy to understand, the following preferred embodiments are specifically described below, and the accompanying drawings are described in detail as follows. BRIEF DESCRIPTION OF DRAWINGS

[0012] In order to more clearly illustrate the specific embodiments of the present application or the technical solutions in the prior art, the following will briefly introduce the drawings needed to be used in the specific embodiments or prior art description. Obviously, the drawings in the following description are some embodiments of the present application, and for those skilled in the art, other drawings can also be obtained without creative labor on the basis of these drawings.

[0013] Figure 1 A flow chart of a resource processing method provided by the embodiment of the present application;

[0014] Figure 2 A schematic diagram of the routing path of a target resource folder provided by the embodiment of the present application;

[0015] Figure 3 A structural schematic diagram of a resource processing device provided by the embodiment of the present application;

[0016] Figure 4 A structural schematic diagram of an electronic equipment provided by the embodiment of the present application. DETAILED DESCRIPTION

[0017] In order to make the objects, technical solutions and advantages of the embodiments of the present application clearer, the technical solutions of the present application will be described clearly and completely below with reference to the drawings. Obviously, the described embodiments are only part of the embodiments of the present application, rather than all the embodiments. Based on the embodiments of the present application, all other embodiments obtained by those skilled in the art without creative work fall within the scope of the present application.

[0018] At present, most of the website projects and the like are developed based on a modular manner. In the development stage, resource files are divided in the form of folders, and codes are coded in the form of modular files. A conventional website project usually includes a folder for storing project resources and a folder for storing third-party resources. When packaging project resources, the construction code in the folder for storing project resources can be combined into a file, such as manifest.bundle.js, the code in the folder for storing third-party resources can be combined into a file, such as vendor.bundle.js, and the business code remaining in the above folder can be combined into a file, such as index.bundle.js. Based on the three files, the website project can be run.

[0019] For example, a conventional project directory, all resource files are usually placed in the src folder, including but not limited to apis interface, assets resource, components component, flows process, hooks hook, layouts layout, stores data, utils tool, views view, etc. All third-party modules are stored in the node_modules folder, and the project depends on some third-party modules, such as: react, vue, jquery, day, moment, ant-design, vant, etc. When installing third-party modules, the modules extracted from package.json will be installed one by one in the node_modules folder. The modularized files in the src folder will continuously reference the third-party modules in the node_modules folder. When the final packaged output code that can be run online is output, the build code is merged into a file manifest.bundle.js, the code of the third-party module is extracted and merged into a file vendor.bundle.js, and the remaining business code is merged into a file index.bundle.js. Insert the three bundle files into the HTML structure of the website, and when the webpage is loaded and run, the overall website function can be activated. However, as the project requirements continue to iterate, the size of the website source code will also continue to grow, which will often cause the vendor.bundle.js and index.bundle.js files to be large, often exceeding 100kb.

[0020] In related technologies, a dynamic import file standard syntax is provided in the JavaScript standard, which can make the JavaScript code introduced into the entry file in an asynchronous manner. For example, all webpage codes can be introduced by dynamically importing import(). When designing webpage route jumping, the URL (Uniform Resource Locator, Uniform Resource Locator) path of the webpage is bound to the specified webpage code. When packaging project resources, the URL path in the above-mentioned import() form corresponds to the code file, which will generate a bundle file. Each bundle file corresponds to a webpage or a triggering functional module, and all belong to business code. Through the above-mentioned manner, index.bundle.js can be split into multiple bundle files. When the user clicks the link to enter different sub-websites, the bundle files of different business codes are loaded to achieve the effect of on-demand loading.

[0021] However, the above method can only process business code and cannot solve the problem of vendor.bundle.js, i.e., a file storing third-party resources, which usually exists as a separate individual. If different web pages in a project resource need to be displayed, one or more functional modules in the third-party resource may need to be loaded, so the third-party resource cannot be split. If the third-party resource is split, the internal code may be decomposed, resulting in a running failure. For example, vendor.bundle.js is composed of react+react-dom+react-router+recoil+axios+day+prop-types+swiper+vconsole, and the splitting method of index.bundle.js will make the above modules not exist as the smallest independent individual. In short, it will disassemble the swiper to different pages or modules. However, if the third-party resource file is not split, it means that the third-party resource file needs to be loaded in advance in the home page when the home page and each sub-web page use the third-party resource file. If the subsequent sub-web page is not opened, the third-party resource file loaded in the home page will be loaded in advance even if it is not used, which will affect the loading and parsing of the home page of the website, seriously affect the user experience, and increase the request pressure of the server. At the same time, network resources are wasted, and the running efficiency of the website is affected. Based on this, the resource processing method, device and electronic equipment provided by the embodiment of the application can be applied to terminal devices such as mobile phones, tablet computers and computers, and can be particularly applied to resource preloading of a website.

[0022] To facilitate the understanding of the present embodiment, first, a resource processing method disclosed by the present embodiment is introduced in detail. The method is applied to a terminal device, and the terminal device is configured with a plurality of resource folders of a target project. The plurality of resource folders store resource codes of the target project, as shown in Figure 1 The method comprises the following steps.

[0023] In step S102, target resource codes stored in a target resource folder related to a routing page are obtained from the plurality of resource folders. Based on the target resource codes, a resource name of a target third-party resource used by the routing page is determined.

[0024] The above target project can usually refer to a website project, which includes a home page and other sub-web pages. Different web pages perform different functions, for example, the other sub-web pages can be a login page or a personal center page. The above plurality of resource folders usually refer to folders storing resource codes of the target project. The resource codes can be build codes, third-party module codes or business codes. The above target resource codes specifically refer to third-party module codes, i.e., third-party resource codes, which are stored in the target resource folder. For example, Figure 2As shown, the front-end project includes multiple resource folders, such as a src folder, a package folder, a readme folder, and the like. The target resource folders related to the routing pages can be a home folder, a login folder, an auth folder, and the like.

[0025] The third-party resource generally refers to a module with certain functions downloaded from a network resource. For example, a third-party module can be understood as a module written by a non-target project developer, similar to a plug-in for front-end development. The resource name generally refers to the name of the third-party module used by the routing page, such as react, classnames, day, and the like. The routing page is generally for intranet links. In fact, it is a view switching in a web page. After switching, it is still in the same page. In order to distinguish the switched view, a suffix is added to the URL to indicate the switched view. For example, the domain name of a website is https: / / xyz.com. The login page uses https: / / xyz.com / login, the about page uses https: / / xyz.com / about, and the personal center page uses https: / / xyz.com / center. The like.

[0026] For example, the target resource code in the home folder, the login folder, and the about folder related to the routing pages such as the home page, the login page, and the about page can be obtained from the multiple resource folders of the target project. Then, based on the target resource code, the resource name of the third-party resource in the target resource code is extracted through code conversion. The extracted resource name can be determined as the resource name of the target third-party resource used by the routing page. Or the resource name of the internal resource of the target project in the extracted resource name can be deleted to obtain a more accurate resource name of the target third-party resource used by the routing page. Of course, the resource name of the third-party resource that has been published in the extracted resource name can also be deleted to determine a more accurate resource name of the target third-party resource used by the routing pages such as the home page, the login page, and the about page.

[0027] In step S104, a target correspondence relationship between the routing page and the target third-party resource file is generated according to the resource name of the target third-party resource used by the routing page and the third-party resource file generated in advance. The third-party resource file stores all third-party resources of the target project, and the target third-party resource file stores part of the third-party resources of the target project.

[0028] The pre-generated third-party resource file can generally refer to a file generated by packaging all third-party resources of the target project, which can be represented as vendor.bundle.js. The target third-party resource file can generally refer to a file generated by packaging part of the third-party resources of the target project, which is usually the third-party resources corresponding to different routing pages. The target third-party resource file can be further reduced in content, such as home.vendor.bundle.js containing target third-party resources react and swiper. The target correspondence can generally refer to the correspondence between the routing page and one or more target third-party resource files. If the routing page corresponds to one target third-party resource, the target third-party resource can include third-party resources corresponding to multiple resource names, i.e., multiple third-party modules. If the routing page corresponds to multiple target third-party resources, each target third-party resource can include third-party resources corresponding to one resource name, i.e., one third-party module. It should be noted that the resource names of the target third-party resources used by different routing pages can be the same, and therefore, the target third-party resource files corresponding to multiple different routing pages can be the same.

[0029] Specifically, the target third-party resources corresponding to the resource names can be segmented from the pre-generated third-party resource file according to the resource names of the target third-party resources used by the routing page, and then combined into the corresponding target third-party resource file, thereby generating the target correspondence between the routing page and the target third-party resource file. Since the third-party resources used by different routing pages can be the same, in order to avoid unnecessary resource loading, the resource names of the target third-party resources used by the routing page can be specified for deduplication according to the page function of each routing page and the resource names of the target third-party resources used by each routing page. Then, the target correspondence between the routing page and the target third-party resource file can be generated according to the resource names of the target third-party resources used by the routing page after deduplication and the pre-generated third-party resource file.

[0030] For example, if the resource names of the target third-party resources used by the home page are react and swiper, for the home page, the third-party resources with the resource names react and swiper can be obtained from the pre-generated third-party resource file, and the third-party resources with the resource names react and swiper can be packaged and processed to obtain the corresponding target third-party resources. One target third-party resource file can be packaged together, or multiple target third-party resource files can be packaged separately. For example, the target third-party resource file can be represented as home.vendor.bundle.js (containing third-party resources with the resource names react and swiper). The finally generated target correspondence can be represented as home: home.vendor.bundle.js.

[0031] In step S106, the target correspondence is published to the corresponding server, and the file path of the target third-party resource file used by each routing page is generated, so that when the target project is run, if the routing page is triggered, the target third-party resource file is loaded based on the file path of the target third-party resource file.

[0032] The file path of the target third-party resource file generally refers to the storage path of the target third-party resource file used by each routing page generated by publishing the target correspondence to the server. The storage path can also be understood as an external network link URL.

[0033] In actual implementation, the target correspondence is published to the corresponding server, that is, the target third-party resource file used by each routing page is saved to the server. Then, for the target third-party resource file corresponding to each routing page in the target correspondence, it is replaced to generate a file path in the server. That is, the correspondence between the routing page and the file path is generated.

[0034] In the running stage of the target project, if the routing page is triggered, the file path corresponding to the routing page can be obtained, the target third-party resource file under the file path is obtained from the server based on the file path, and the target third-party resource file is loaded into the currently triggered routing page. For example, if the routing page is home and the domain name of the server is http: / / static.xyz.com / battle, the file path corresponding to the routing page can be generated as http: / / static.xyz.com / battle / home.vendor.bundle.js.

[0035] The resource processing method obtains target resource code stored in a target resource folder related to a routing page from a plurality of resource folders, determines a resource name of a target third-party resource used by the routing page based on the target resource code, generates a target correspondence relationship between the routing page and a target third-party resource file according to the resource name of the target third-party resource used by the routing page and a third-party resource file generated in advance, and publishes the target correspondence relationship to a corresponding server and generates a file path of the target third-party resource file used by each routing page, so that when the routing page is triggered when the target project is running, the target third-party resource file is loaded based on the file path of the target third-party resource file. Since the target third-party resource used by each routing page is part of all third-party resources, only the resource file of the target third-party resource is generated, so that when the target project is running, the corresponding resource file is loaded according to the currently triggered routing page, the problem of loading and parsing all resource files when the home page is opened is avoided, the request pressure of the server and the waste of network resources are reduced, and the running efficiency of the project is improved.

[0036] According to the step S102, a possible implementation of the step of obtaining target resource code stored in a target resource folder related to a routing page from a plurality of resource folders, and determining a resource name of a target third-party resource used by the routing page based on the target resource code is as follows:

[0037] Step 1: Obtain the routing path of each target resource folder in the first resource folder; wherein the first resource folder stores a plurality of target resource folders, and each target resource folder has a corresponding routing page.

[0038] Step 2: Obtain the target resource code stored in the target resource folder according to the routing path, and convert the target resource code into a string.

[0039] Step 3: Determine a target string with a specified form from the string, and determine the resource name of the target third-party resource used by the routing page from the target string.

[0040] The first resource folder specifically refers to a folder under the root directory including the routing page, for example, Figure 2The views folder shown, of course, can also be set as the pages folder, and the folder name of the routing page can also be customized. The above routing path is usually set in advance for each target resource folder, which can be set as a backslash “ / ” before the name of the target resource folder, or the routing path of each target resource folder can be configured in advance before writing the code, such as Figure 2 As shown, “ / ” represents the routing path of the home page, and “ / login” represents the routing path of the login page.

[0041] For example, as shown in Figure 2 The src root directory stores multiple resource folders, wherein the views folder is the first resource folder, and the views folder stores multiple target resource folders, such as Figure 2 The home, login, auth, and mine folders shown. Then, the FS module (abbreviation of filesystem, used to provide access to the file system) of NodeJS can be used to process the related files of all routing pages. Specifically, the readdirSync function can be used to read the routing path of each target resource folder in the views folder, and then the readFileSync function can be used to read the target resource code stored in each target resource folder according to the routing path, and the target resource code can be converted from binary encoding form to string text form. Further, a target string with a specified form is determined from the string, and the specified form of the target string is usually import xxx from xyz, wherein xyz is the resource name of the target third-party resource used by the above routing page. The xxx in it represents a module, which usually defaults to finding the xxx module from the node modules folder. After a series of screening of the module xyz, the resource name of the target third-party resource used by the routing page can be determined.

[0042] For example, for a target routing page such as the home page, the target resource code stored in the target resource folder is obtained, and the target resource code is converted into a string; a target string with a specified form is determined from the string, and the target string with the specified form can be:

[0043] import React from“react”;

[0044] import Classnames from“classnames”;

[0045] import Swiper from“swiper”;

[0046] import { GetData} react from “.. / .. / apis”;

[0047] import Modal from “.. / .. / components / modal”;

[0048] According to the target string in the specified form, the resource names of the target third-party resources used by the target route page can be determined as “react”, “classnames”, “swiper”, “.. / .. / apis”, and “.. / .. / components / modal”, or can be “react”, “classnames”, “swiper”.

[0049] In the above manner, by obtaining the route path of the target resource folder, then reading the target resource code and converting it into a target string in a specified form, and determining the resource name of the target third-party resource according to the target string in the specified form, an accurate resource name can be obtained.

[0050] Further, according to the step 3 above, a possible implementation of the step of determining the resource name of the target third-party resource used by the route page from the target string:

[0051] Determine the initial resource name from the target string, delete the resource names containing the specified content in the initial resource name to obtain an intermediate resource name; delete the resource names of the resource files that have not been published on the specified website in the intermediate resource name to obtain a target resource name; and determine the target resource name as the resource name of the target third-party resource used by the route page.

[0052] The initial resource name generally refers to the resource name obtained from the target string in the specified form. The intermediate resource name generally refers to the resource name determined after deleting the resource names containing the code content that has been written by the developers in the target project in the initial resource name. The target resource name generally refers to the resource name of the third-party resource determined after deleting the resource names of the resource files that have not been published on the specified website in the intermediate resource name. The specified website can be the official website of Npm (Node Package Manager).

[0053] Specifically, for the target string converted from the target resource code, the xyz module in the code in the form of import xxx from xyz can be extracted by a regular expression, and the name of the xyz module is the initial resource name. The method of constructing the regular expression is a prior art and will not be described here.

[0054] Then, the resource name containing the path in the form of “. / ” and “.. / ” at the beginning is deleted from the initial resource name to obtain an intermediate resource name. Both “. / ” and “.. / ” represent the code content that has been written by the developer in the target project. Further, it is also necessary to query whether the resource file corresponding to the intermediate resource name has been published before on the Npm official website. If yes, that is, the intermediate resource name exists, the intermediate resource name is retained; if no, that is, the intermediate resource name does not exist, the intermediate resource name is deleted. In this way, it is determined which third-party Npm modules are used by the routing page, that is, the above-mentioned target third-party resource file, and then the target resource name, that is, the resource name of the target third-party resource used by the routing page, is obtained. Wherein, Npm is a package management tool in the JavaScript programming world and is the default package management tool of the Node.js platform. Through Npm, code can be installed, shared, distributed, and project dependency relationships can be managed. Finally, the target resource name obtained through the above screening process can represent the resource name of the target third-party resource used by the routing page.

[0055] For example, it is assumed that the target string in the specified form of the routing pages home, login and mine in the views folder is as follows:

[0056] import React from“react”;

[0057] import Classnames from“classnames”;

[0058] import Swiper from“swiper”;

[0059] import{GetData}from“.. / .. / apis”;

[0060] import Modal from“.. / .. / components / modal”。

[0061] The target string of the specified form can be extracted by a regular expression to obtain initial resource names: "react", "classnames", "swiper", ".. / .. / apis", and ".. / .. / components / modal", and then the resource names containing the specified content in the initial resource names are deleted, that is, ".. / .. / apis" and ".. / .. / components / modal" are deleted to obtain intermediate resource names: "react", "classnames", and "swiper"; the resource names of resource files that are not published on the specified website in the intermediate resource names are deleted, and if "swiper" is not published on the specified website, "swiper" is deleted to obtain target resource names: "react" and "classnames"; the target resource names "react" and "classnames" are determined as the resource names of the target third-party resources used by the routing page. It can be represented as home: ["react", "classnames"].

[0062] In the above manner, by determining the initial resource names from the target string, and then screening and determining the resource names of the target third-party resources used by the routing page, the resource names of invalid third-party resources are deleted, the accuracy of the resource names is improved, and the file size of the third-party resources is further compressed.

[0063] The following continues to describe step S104, a step of generating a target correspondence relationship between the routing page and the target third-party resource file according to the resource names of the target third-party resources used by the routing page and the third-party resource files generated in advance, and a possible implementation manner:

[0064] According to the resource names of the target third-party resources used by the routing page, a first correspondence relationship between the routing page and the resource names of the target third-party resources is generated; according to the first correspondence relationship, the target third-party resource files used by the routing page are obtained from the third-party resource files to generate a target correspondence relationship between the routing page and the target third-party resource files.

[0065] The first correspondence relationship is generated according to the resource names of the target third-party resources used by each routing page, and the resource names of the target third-party resources can be one or more. The first correspondence relationship is usually obtained by dividing and merging the resource names of the third-party resources according to a specified rule.

[0066] For example, the home page uses the resource names "react" and "swiper" for the target third-party resources, the login page uses "react" and "classnames" for the target third-party resources, and the personal center page uses "react," "classnames," and "day" for the target third-party resources. Therefore, based on the resource names and the page type of the routed page, a primary mapping between the routed page and the target third-party resource names can be generated. For example, home: ["react," "swiper"], login: ["classnames"], mine: [["classnames"], ["day"]]. Based on the resource names in this primary mapping, the target third-party resource files used by each routed page can be obtained from the third-party resource files, such as: home.vendor.bundle.js; login: common.vendor.bundle.js and mine.vendor.bundle.js, thus generating the target mapping relationship.

[0067] home: home.vendor.bundle.js;

[0068] login: common.vendor.bundle.js;

[0069] mine: common.vendor.bundle.js and mine.vendor.bundle.js.

[0070] In the above method, the resource names of the target third-party resources in the set are split and merged to obtain the first correspondence between the route page and the resource name, and the target correspondence between the route page and the target third-party resource file is generated, thus avoiding the problem of loading and parsing all resource files when opening the homepage.

[0071] Furthermore, regarding the step of generating a first correspondence between the routing page and the resource name of the target third-party resource based on the resource name used by the routing page, one possible implementation is as follows:

[0072] Based on the resource name of the target third-party resource used by the routing page, an initial mapping relationship with a first specified data structure is generated; wherein, the initial mapping relationship is used to generate one or more target third-party resource files for each routing page in the packaging result obtained by packaging the third-party resource files based on the initial mapping relationship;

[0073] The initial correspondence relationship is processed to generate a first correspondence relationship; wherein the first correspondence relationship is used to generate one or more target third-party resource files corresponding to each routing page in the packaging result obtained by packaging the third-party resource file based on the first correspondence relationship.

[0074] The initial correspondence relationship generally refers to the correspondence relationship between the routing page and the resource name of the third-party resource file used. The first specified data structure generally refers to the data structure form of the initial correspondence relationship generated by storing the resource name of the target third-party resource in an array and corresponding the array to the routing page. The specific form can be {routing page: [“resource name of target third-party resource file”]}.

[0075] Specifically, the file name of the target third-party resource file contained in each routing page can be saved in a set, for example, a set S can be customized. If react and swiper are used in the home page home, react and classnames are used in the login page login, and react, classnames and day are used in the personal center page mine, then the initial correspondence relationship with the first specified data structure is const S = {home: [“react”, “swiper”], login: [“react”, “classnames”], mine[“react”, “classnames”, “day”]}, wherein each routing page can use one or more target third-party resources to correspond to generate one or more target third-party resource files.

[0076] From the above content analysis, it can be known that each routing page contains react, which is extracted as a necessary loading item for the first screen rendering in the home page. In addition, login and mine contain classnames, but they only appear in these two routing pages. In order to prevent the repeated loading of modules caused by adding classnames when entering these two web pages, classnames are extracted as separate loading items for these two web pages. Finally, S becomes the following data structure:

[0077] home: [“react”, “swiper”], login: [“classnames”], mine: [[“classnames”], [“day”]].

[0078] Based on the first correspondence relationship, the new data structure can be disassembled and assigned to a packaging tool, such as webpack, to disassemble the structure and obtain a packaging result by packaging. The packaging result stores one or more target third-party resource files corresponding to the routing page.

[0079] In the above manner, the first correspondence relationship is obtained by processing the coinciding resource names in the initial correspondence relationship, and the relationship between the route page and the target third-party resource file obtained based on the first correspondence relationship avoids the problem of repeated loading when opening the page for the same third-party resource file.

[0080] To further illustrate the specified rule in the above processing manner, the following describes a possible implementation of the step of processing the initial correspondence relationship to generate the first correspondence relationship:

[0081] If the resource names of the target third-party resources used by each route page in the initial correspondence relationship have the same first resource name, the first resource name corresponding to the sub-page other than the first page in the route page is deleted;

[0082] If the resource names of the target third-party resources used by the target sub-page in the initial correspondence relationship have the same second resource name, the resource name corresponding to the target sub-page is set to a specified format to generate the first correspondence relationship.

[0083] The target third-party resource represented by the first resource name is usually a necessary loading item of the target project, which can be loaded separately when the user opens the first page of the target project. The second resource name is usually the resource name of the same target third-party resource used by multiple target sub-pages, and the resource name corresponding to each target sub-page is set to a specified format to distinguish it from other target third-party resources in the target sub-page. In actual implementation, for the initial correspondence relationship, for example, the first page contains target third-party resources react and swiper, the login page contains target third-party resources react and classnames, and the personal center page contains target third-party resources react, classnames, and day, and each route page contains the first resource name "react", then only the react in the first page can be retained, and the react corresponding to the login page and the personal center page is deleted.

[0084] In addition, according to the initial correspondence relationship, the login page and the personal center page contain the same second resource name "classnames" in the sub-pages other than the first page, and the resource name corresponding to the login page and the personal center page is set to a specified format, which can be adding square brackets to the resource name, such as ["classnames"], to generate the first correspondence relationship.

[0085] In the above manner, by deleting the resource names coinciding with the homepage in the subpage and setting the coinciding resource names in the subpage with the specified format, the effect of deduplication can be achieved, the repeated loading of the target third-party resources can be avoided, and the request pressure of the server can be reduced.

[0086] Further, according to the first correspondence relationship, the target third-party resource file used by the routing page is obtained from the third-party resource file, and the target corresponding relationship between the routing page and the target third-party resource file is generated. A possible implementation manner is:

[0087] It is judged whether the resource name corresponding to the routing page in the first corresponding relationship is in the specified format. If yes, the target third-party resource matching the resource name corresponding to the routing page is obtained from the third-party resource file, and each target third-party resource is packaged to generate a plurality of target third-party resource files corresponding to the routing page. If no, the target third-party resource matching the resource name corresponding to the routing page is obtained from the third-party resource file, and the target third-party resource is packaged to generate a target third-party resource file corresponding to the routing page.

[0088] In actual implementation, the resource name corresponding to the routing page in the first corresponding relationship is obtained, it is judged whether the resource name is in the specified format, and the target third-party resource of the routing page can be packaged according to the judgment result.

[0089] If yes, that is, the resource name corresponding to the routing page in the first corresponding relationship is in the specified format, then for each routing page, the target third-party resource matching the resource name corresponding to the routing page is obtained from the third-party resource file, and each target third-party resource is packaged. For the target third-party resources with the same resource name in different pages in the specified format, the packaging results are the same. Finally, a plurality of target third-party resource files corresponding to each routing page are generated.

[0090] If no, that is, the resource name corresponding to the routing page in the first corresponding relationship is not in the specified format, that is, the target third-party resource required by the routing page only appears once. The target third-party resource matching each resource name corresponding to the routing page is obtained from the third-party resource file, and all target third-party resources are packaged as a whole to generate a target third-party resource file corresponding to the routing page. For example, if the homepage uses swiper+axios, the vendor.bundle.js generated by packaging the page only contains the target third-party resource file of swiper and axios.

[0091] In the above manner, by judging whether the resource name corresponding to the routing page is in the specified format, the target third-party resource is packaged in two cases, which further avoids repeated loading of the target third-party resource, and further reduces the request pressure of the server.

[0092] In order to further improve the user experience, when the target project is running, if the routing page is triggered, based on the file path of the target third-party resource file, the step of loading the target third-party resource file, one possible implementation:

[0093] (1) display the page in the target project through the terminal device, read the specified label in the currently displayed page; wherein the specified label is used to: in response to the triggering operation of the specified label, display the routing page corresponding to the specified label;

[0094] (2) monitor the operation behavior of the specified label, and display the target specified label in the specified area of the browsing window, and the mouse pointer is suspended in the target specified label, and the file path of the target third-party resource file used by the routing page corresponding to the target specified label is obtained from the target correspondence;

[0095] (3) based on the file path, load the target third-party resource file from the server, and store the target third-party resource file in the browser memory.

[0096] The above specified label usually refers to a label with routing page characteristics, and the above triggering operation for the specified label can be a click operation for the specified label, which can jump (or switch page) to the corresponding routing page according to the routing path carried by the specified label. Wherein, a is an HTML language label; the a label defines a hyperlink, which is used to link from one page to another page. The above target specified label specifically refers to the specified label meeting the specified area of the browser window, and satisfying that the mouse pointer is suspended in the area where it is located, and the target specified label can have one or more.

[0097] Specifically, the user clicks the routing page entry, and the terminal device displays the routing page of the target project. All a tags with routing page features in the current page can be understood as clickable elements of the routing page. The target specified tag in the specified tag is displayed in the specified area of the browser window, which can be understood as the target specified tag meeting the cross behavior. For example, the target specified tag is located at a certain position in the current page. When the page is scrolled, the top or bottom of the browser window coincides with the target specified tag, which can be regarded as triggering the cross behavior. The mouse pointer hovering over the target specified tag can be understood as the target specified tag meeting the mouse hovering behavior, such as the mouse pointer sliding over or hovering over the target specified tag. If the cross behavior and the mouse hovering behavior are triggered for the user's operation behavior in the browser page, the browser accesses the server to obtain the file path of the target third-party resource file used by the routing page corresponding to the target specified tag from the target correspondence. At this time, the obtained file path of the target third-party resource file is a file array corresponding to the routing page. The file array is only a file URL wrapped by an array for batch loading.

[0098] Further, according to the obtained file path, the target third-party resource file previously saved from the server is loaded, and a copy of the target third-party resource file is saved in the memory of the browser, which can be called at any time for rendering the corresponding routing page.

[0099] In the above manner, by monitoring the target specified tag triggered by the user, the target third-party resource file corresponding to the routing page is loaded in advance, which can play a role in preloading the target third-party resource to be used in the web page, and reduce the request pressure of the server.

[0100] According to the above step (2), reading the specified tag in the currently displayed page, a possible implementation manner is as follows:

[0101] Reading the language tag in the currently displayed page, obtaining the href attribute of the language tag; determining the specified tag in the language tag based on the href attribute.

[0102] The language label specifically refers to all a tags, which can be not only text but also pictures, and clicking the a tag can switch the route page. The href (Hypertext Reference) attribute can be used to specify the URL of the hyperlink target, which is used to determine whether the language label has the route page feature. The href attribute of the a tag with the route feature is in the form of / xxx, so reading such an a tag is a clickable element of the route page. There are many types of href elements, such as target elements that can be title display, text, buttons, and input boxes.

[0103] In actual implementation, all a tags in the current page are read first, the href attribute of the a tag is obtained, and then it can be determined whether the language label has the route page feature. The a tags without the route page feature are deleted, and the remaining a tags are the a tags with the route page feature.

[0104] In the above manner, all a tags are read, and the specified tags with the route page feature are filtered based on the href attribute, and then the target of the link is specified.

[0105] According to the step (3), based on the file path, the target third-party resource file is loaded from the server, and the target third-party resource file is stored in the browser memory. One possible implementation manner is:

[0106] It is judged whether the browser memory stores the target third-party resource file used by the route page corresponding to the target specified label. If not, the target third-party resource file is loaded from the server based on the file path, and the target third-party resource file is stored in the browser memory.

[0107] In actual implementation, when the target specified label is displayed in the specified area of the browser window, and the mouse pointer is hovering over the target specified label, it is judged whether the browser memory stores a copy of one or more target third-party resource files used by the route page corresponding to the target specified label. If not, the server is requested to access, and the target third-party resource file missing in the corresponding route page is loaded from the file path previously saved in the server. The file path is in the form of a URL existing in the server, and the target third-party resource file can be downloaded by loading the URL. After loading is completed, the target third-party resource file is stored in the browser memory as a copy. It should be noted that the batch loading at this time is the single target third-party resource file itself.

[0108] For example, the target designation tags of the A page, the B page and the C page are displayed in the current page. The A page needs to load the target third-party resource files 1 and 3, the B page needs to load the target third-party resource files 2 and 4, and the C page needs to load the target third-party resource files 3, 4 and 5. At this time, the mouse pointer is hovering over the target designation tag area of the A page and the B page in the browser window, and the target third-party resource files 1, 2, 3 and 4 are loaded by using the script tag (used to define a client script such as JavaScript), but the mouse pointer slides away from the target designation tag area after a short stay, and slides and hovers over the target designation tag area of the C page. Since the target third-party resource files 3 and 4 corresponding to the C page are already stored in the browser memory, it is only necessary to dynamically create a script tag to load the target third-party resource file 5 corresponding to the C page.

[0109] In the above manner, by judging whether the target third-party resource files corresponding to the routing page exist in the browser memory, the server is prevented from being repeatedly requested to load the target third-party resource files, the pressure on the server is reduced, the use of network resources is maximized, and the running efficiency of the website is improved.

[0110] In order to further improve the utilization rate of the browser and the user experience, when the routing page is triggered during the running of the target project, after the step of loading the target third-party resource files based on the file path of the target third-party resource files, the above method further includes:

[0111] In response to the triggering operation on the target designation tag, the target third-party resource files used by the routing page corresponding to the target designation tag are loaded from the browser memory, and the routing page is displayed based on the target third-party resource files.

[0112] In actual implementation, the triggering operation usually refers to a click operation on the target designation tag. When the user clicks the target designation tag and switches the current page of the browser to the corresponding routing page, since the target third-party resource files used by the routing page corresponding to the target designation tag are already stored in the browser memory, the web page will directly find the copy of the corresponding target third-party resource file from the browser memory during rendering, and then quickly render, so as to display the corresponding routing page in the browser page of the terminal device.

[0113] In the above manner, the target third-party resource of the routing page to be displayed can be directly found from the browser memory, so that the effect of quickly rendering to display the routing page can be achieved.

[0114] In order to further improve the utilization rate of the browser, the above method further includes: deleting the files stored in the browser memory at a regular time.

[0115] Specifically, in the monitoring of the specified label, the target specified label that can be clicked is calculated through the operation behavior of the user, the target third-party resource file corresponding to the routing page is preloaded, and the preloaded target third-party resource file is saved in the browser memory as a copy file. If the copy file is not used later, the prediction fails, the user does not click the target specified label to switch the webpage view to the routing page, and the generated target third-party resource file saved in the browser memory can be used at any time. If not used, because the browser will delete the stored files in the memory at regular intervals, it can also be understood that the browser has a garbage collection mechanism to clean up the memory, and the copy file will be cleaned up at regular intervals, so it will not affect the rendering and running process of the browser.

[0116] In the above manner, the memory space of the browser can be reduced by the regular cleaning of the memory by the browser, and the running efficiency of the browser can be improved.

[0117] For the above method embodiment, refer to Figure 3 The resource processing apparatus shown in the drawing is applied to a terminal device, and the terminal device is configured with a plurality of resource folders of a target project, and the plurality of resource folders store resource codes of the target project. The apparatus comprises:

[0118] The determining module 31 is configured to obtain the target resource code stored in the target resource folder related to the routing page from the plurality of resource folders, and determine the resource name of the target third-party resource used by the routing page based on the target resource code.

[0119] The generating module 32 is configured to generate the target corresponding relationship between the routing page and the target third-party resource file according to the resource name of the target third-party resource used by the routing page and the pre-generated third-party resource file. The third-party resource file stores all third-party resources of the target project, and the target third-party resource file stores part of the third-party resources of the target project.

[0120] The loading module 33 is configured to publish the target corresponding relationship to the corresponding server, and generate the file path of the target third-party resource file used by each routing page, so that when the target project is running, if the routing page is triggered, the target third-party resource file is loaded based on the file path of the target third-party resource file.

[0121] The resource processing apparatus obtains target resource code stored in a target resource folder related to a routing page from a plurality of resource folders, determines a resource name of a target third-party resource used by the routing page based on the target resource code, generates a target correspondence relationship between the routing page and a target third-party resource file according to the resource name of the target third-party resource used by the routing page and a third-party resource file generated in advance, wherein the third-party resource file stores all third-party resources of the target project, and the target third-party resource file stores part of the third-party resources of the target project, publishes the target correspondence relationship to a corresponding server, and generates a file path of the target third-party resource file used by each routing page, so that when the routing page is triggered when the target project is running, the target third-party resource file is loaded based on the file path of the target third-party resource file. Since the target third-party resource used by each routing page is part of all third-party resources, only the resource file of the target third-party resource is generated, so that when the target project is running, the corresponding resource file is loaded according to the currently triggered routing page, the problem of loading and parsing all resource files when opening the home page is avoided, the request pressure of the server and the waste of network resources are reduced, and the running efficiency of the project is improved.

[0122] The determination module is further configured to: obtain a routing path of each target resource folder in the first resource folder; wherein the first resource folder stores a plurality of target resource folders, and each target resource folder has a corresponding routing page; obtain target resource code stored in the target resource folder according to the routing path, and convert the target resource code into a string; determine a target string with a specified form from the string, and determine a resource name of a target third-party resource used by the routing page from the target string.

[0123] The determination module is further configured to: determine an initial resource name from the target string, delete a resource name containing specified content in the initial resource name to obtain an intermediate resource name, delete a resource name of a resource file that has not been published on a specified website in the intermediate resource name to obtain the target resource name, and determine the target resource name as the resource name of the target third-party resource used by the routing page.

[0124] The generation module is further configured to: generate a first correspondence relationship between the routing page and the resource name of the target third-party resource according to the resource name of the target third-party resource used by the routing page, and obtain a target third-party resource file used by the routing page from a third-party resource file according to the first correspondence relationship to generate a target correspondence relationship between the routing page and the target third-party resource file.

[0125] The generating module is further configured to: generate an initial correspondence relationship with the first specified data structure according to the resource names of the target third-party resources used by the route pages; wherein the initial correspondence relationship is used to generate one or more target third-party resource files corresponding to each route page in a packaging result obtained by packaging the third-party resource files based on the initial correspondence relationship; and process the initial correspondence relationship to generate a first correspondence relationship; wherein the first correspondence relationship is used to generate one or more target third-party resource files corresponding to each route page in a packaging result obtained by packaging the third-party resource files based on the first correspondence relationship.

[0126] The generating module is further configured to: if the resource names of the target third-party resources used by each route page in the initial correspondence relationship have the same first resource name, delete the first resource names corresponding to the sub-pages other than the first page in the route pages; and if the resource names of the target third-party resources used by a target sub-page in the sub-pages other than the first page in the route pages in the initial correspondence relationship have the same second resource name, set the resource name corresponding to the target sub-page to a specified format to generate the first correspondence relationship.

[0127] The generating module is further configured to: determine whether the resource names corresponding to the route pages in the first correspondence relationship are in the specified format; if yes, obtain the target third-party resources matching the resource names corresponding to the route pages from the third-party resource files respectively, and package each target third-party resource respectively to generate a plurality of target third-party resource files corresponding to the route pages; and if no, obtain the target third-party resource matching the resource name corresponding to the route page from the third-party resource files, and package the target third-party resource to generate a target third-party resource file corresponding to the route page.

[0128] The loading module is further configured to: display a page in the target project through the terminal device, and read a specified label in the currently displayed page; wherein the specified label is used to: display a route page corresponding to the specified label in response to a trigger operation on the specified label; monitor an operation behavior on the specified label, and display a target specified label in a specified area of a browsing window and make a mouse pointer hover over the target specified label, and obtain a file path of a target third-party resource file used by a route page corresponding to the target specified label from the target correspondence relationship; and load the target third-party resource file from the server based on the file path, and store the target third-party resource file in the browser memory.

[0129] The loading module is further configured to: read a language label in the currently displayed page, and obtain an href attribute of the language label; and determine a specified label in the language label based on the href attribute.

[0130] The loading module is further configured to: determine whether the target third-party resource file used by the routing page corresponding to the target specified label is stored in the browser memory; if not, load the target third-party resource file from the server based on the file path, and store the target third-party resource file in the browser memory.

[0131] The device further includes a display module configured to: in response to a triggering operation on the target specified label, load the target third-party resource file used by the routing page corresponding to the target specified label from the browser memory, and display the routing page based on the target third-party resource file.

[0132] The device further includes a cleaning module configured to: periodically delete the files stored in the browser memory.

[0133] The resource processing device provided by the embodiments of the present application has the same technical features as the resource processing method provided by the above embodiments, and can solve the same technical problems and achieve the same technical effects.

[0134] The embodiments of the present application further provide an electronic device including a processor and a memory, the memory storing machine executable instructions capable of being executed by the processor, and the processor executing the machine executable instructions to implement the above resource processing method. The electronic device can be a server or a terminal device.

[0135] Referring to Figure 4 As shown in the figure, the electronic device includes a processor 100 and a memory 101, the memory 101 storing machine executable instructions capable of being executed by the processor 100, and the processor 100 executing the machine executable instructions to implement the above resource processing method, the method being applied to a terminal device, the terminal device being configured with a plurality of resource folders of a target project, the plurality of resource folders storing resource codes of the target project, and the method including the following steps:

[0136] The target resource code stored in the target resource folder related to the routing page is obtained from the multiple resource folders, the resource name of the target third-party resource used by the routing page is determined based on the target resource code, the target corresponding relationship between the routing page and the target third-party resource file is generated according to the resource name of the target third-party resource used by the routing page and the third-party resource file generated in advance, the third-party resource file stores all third-party resources of the target project, and the target third-party resource file stores part of the third-party resources of the target project. The target corresponding relationship is published to the corresponding server, and the file path of the target third-party resource file used by each routing page is generated, so that when the routing page is triggered when the target project is run, the target third-party resource file is loaded based on the file path of the target third-party resource file. Since the target third-party resource used by each routing page is part of all third-party resources, only the resource file of the target third-party resource is generated, so that when the target project is run, the corresponding resource file is loaded according to the currently triggered routing page, the problem of loading and parsing all resource files when the home page is opened is avoided, the request pressure of the server and the waste of network resources are reduced, and the running efficiency of the project is improved.

[0137] The above step of obtaining the target resource code stored in the target resource folder related to the routing page from the multiple resource folders and determining the resource name of the target third-party resource used by the routing page based on the target resource code includes: obtaining the routing path of each target resource folder in the first resource folder; wherein the first resource folder stores multiple target resource folders, and each target resource folder has a corresponding routing page; obtaining the target resource code stored in the target resource folder according to the routing path, and converting the target resource code into a string; determining the target string with a specified form from the string, and determining the resource name of the target third-party resource used by the routing page from the target string. In this way, by obtaining the routing path of the target resource folder, the target resource code is further read and converted into a target string with a specified form, and the resource name of the target third-party resource is determined according to the target string with a specified form, so that the accurate resource name can be obtained.

[0138] The step of determining the resource name of the target third-party resource used by the routing page from the target string includes: determining an initial resource name from the target string, deleting the resource name containing the specified content in the initial resource name to obtain an intermediate resource name; deleting the resource name of the resource file that is not published in the specified website in the intermediate resource name to obtain the target resource name; and determining the target resource name as the resource name of the target third-party resource used by the routing page. In this way, the initial resource name is determined from the target string, and then the resource name of the target third-party resource used by the routing page is screened and determined, the resource name of the invalid third-party resource is deleted, the accuracy of the resource name is improved, and the file size of the third-party resource is further compressed.

[0139] The step of generating the target corresponding relationship between the routing page and the target third-party resource file according to the resource name of the target third-party resource used by the routing page and the third-party resource file generated in advance includes: generating a first corresponding relationship between the routing page and the resource name of the target third-party resource according to the resource name of the target third-party resource used by the routing page; and obtaining the target third-party resource file used by the routing page from the third-party resource file according to the first corresponding relationship to generate the target corresponding relationship between the routing page and the target third-party resource file. In this way, the resource name of the target third-party resource in the set is segmented and combined to obtain the first corresponding relationship between the routing page and the resource name, and the target corresponding relationship between the routing page and the target third-party resource file is generated, thereby avoiding the problem of loading and parsing all resource files when opening the home page.

[0140] The step of generating the first corresponding relationship between the routing page and the resource name of the target third-party resource according to the resource name of the target third-party resource used by the routing page includes: generating an initial corresponding relationship with a first specified data structure according to the resource name of the target third-party resource used by the routing page; wherein the initial corresponding relationship is used to generate one or more target third-party resource files corresponding to each routing page in a packaging result obtained by packaging the third-party resource file based on the initial corresponding relationship; and the initial corresponding relationship is processed to generate the first corresponding relationship; wherein the first corresponding relationship is used to generate one or more target third-party resource files corresponding to each routing page in a packaging result obtained by packaging the third-party resource file based on the first corresponding relationship. In this way, the overlapping resource names in the initial corresponding relationship are processed to obtain the first corresponding relationship, and the relationship between the routing page and the target third-party resource file based on the first corresponding relationship avoids the problem of repeated loading when opening the page for the same third-party resource file.

[0141] The step of processing the initial correspondence relationship and generating the first correspondence relationship includes: if the resource names of the target third-party resources used by each routing page in the initial correspondence relationship have the same first resource name, deleting the first resource name corresponding to the sub-page other than the first page in the routing page; and if the resource names of the target third-party resources used by the target sub-page in the sub-pages other than the first page in the routing page in the initial correspondence relationship have the same second resource name, setting the resource name corresponding to the target sub-page to a specified format to generate the first correspondence relationship. In this way, by deleting the resource name coinciding with the first page in the sub-page and setting the coinciding resource name in the sub-page to the specified format, the effect of deduplication can be achieved, the target third-party resource is prevented from being loaded repeatedly, and the request pressure of the server is reduced.

[0142] The step of generating the target correspondence relationship between the routing page and the target third-party resource file according to the first correspondence relationship includes: judging whether the resource name corresponding to the routing page in the first correspondence relationship is in the specified format; if yes, acquiring the target third-party resource matching the resource name corresponding to the routing page from the third-party resource file respectively, and packing each target third-party resource respectively to generate a plurality of target third-party resource files corresponding to the routing page; and if no, acquiring the target third-party resource matching the resource name corresponding to the routing page from the third-party resource file, and packing the target third-party resource to generate the target third-party resource file corresponding to the routing page. In this way, by judging whether the resource name corresponding to the routing page is in the specified format, the target third-party resource is packed in two cases, the target third-party resource is further prevented from being loaded repeatedly, and the request pressure of the server is reduced.

[0143] The step of loading the target third-party resource file based on the file path of the target third-party resource file if the routing page is triggered when the target project is run includes: displaying the page in the target project through the terminal device, and reading the specified label in the currently displayed page; wherein the specified label is used to: display the routing page corresponding to the specified label in response to the triggering operation on the specified label; and monitor the operation behavior on the specified label, and display the routing page corresponding to the target specified label in the specified area of the browsing window in response to the target specified label in the specified label, and the mouse pointer is hovering over the target specified label, and acquire the file path of the target third-party resource file used by the routing page corresponding to the target specified label from the target correspondence relationship; and load the target third-party resource file from the server based on the file path, and store the target third-party resource file in the browser memory. In this way, by monitoring the target specified label triggered by the user, the target third-party resource file corresponding to the routing page is loaded in advance, the effect of preloading the target third-party resource to be used in the webpage can be achieved, and the request pressure of the server is reduced.

[0144] The step of reading the specified tag in the currently displayed page includes: reading a language tag in the currently displayed page, obtaining an href attribute of the language tag; and determining the specified tag in the language tag based on the href attribute. In this way, by reading all a tags, the specified tag with the page routing feature can be screened out based on the href attribute, and the target of the link is specified.

[0145] The step of loading the target third-party resource file from the server based on the file path and storing the target third-party resource file in the browser memory includes: determining whether the browser memory stores the target third-party resource file used by the routing page corresponding to the target specified tag; and if not, loading the target third-party resource file from the server based on the file path and storing the target third-party resource file in the browser memory. In this way, by determining whether the target third-party resource file corresponding to the routing page exists in the browser memory, the server is prevented from being repeatedly requested to load the target third-party resource file, the pressure on the server is reduced, the use of network resources is maximized, and the operation efficiency of the website is improved.

[0146] The method further includes: in response to a triggering operation on the target specified tag, loading the target third-party resource file used by the routing page corresponding to the target specified tag from the browser memory, and displaying the routing page based on the target third-party resource file. In this way, by directly searching for the target third-party resource of the routing page to be displayed from the browser memory, the routing page can be quickly rendered and displayed.

[0147] The method further includes: periodically deleting the files stored in the browser memory. In this way, by periodically cleaning the memory of the browser, the memory space of the browser can be reduced, and the operation efficiency of the browser is improved.

[0148] Further, Figure 4 The electronic device also includes a bus 102 and a communication interface 103, and the processor 100, the communication interface 103, and the memory 101 are connected through the bus 102.

[0149] The memory 101 can include a random access memory (RAM) and can also include a non-volatile memory such as at least one disk memory. The communication connection between the system network element and at least one other network element is realized through at least one communication interface 103 (which can be wired or wireless), and the Internet, a wide area network, a local area network, a metropolitan area network, etc. can be used. The bus 102 can be an ISA bus, a PCI bus, an EISA bus, etc. The bus can be divided into an address bus, a data bus, a control bus, etc. For ease of representation, Figure 4 Only one bidirectional arrow is used to represent the bus in the figure, but it does not mean that there is only one bus or only one type of bus.

[0150] The processor 100 can be an integrated circuit chip with signal processing capability. In the implementation process, each step of the above method can be completed by the integrated logic circuit of hardware in the processor 100 or the instruction in the form of software. The processor 100 described above can be a general-purpose processor, including a central processing unit (CPU), a network processor (NP), etc.; it can also be a digital signal processor (DSP), an application specific integrated circuit (ASIC), a field programmable gate array (FPGA) or other programmable logic devices, discrete gates or transistor logic devices, discrete hardware components. Each method, step and logic block disclosed in the embodiment of the present application can be implemented or executed. The general-purpose processor can be a microprocessor or the processor can also be any conventional processor. The steps of the method disclosed in combination with the embodiment of the present application can be directly embodied as a hardware code processor for execution, or a combination of hardware and software modules in the code processor for execution. The software module can be located in a random access memory, a flash memory, a read-only memory, a programmable read-only memory, an electrically erasable programmable memory, a register, etc. The storage medium in the art. The storage medium is located in the memory 101, and the processor 100 reads the information in the memory 101, and combines the hardware to complete the steps of the method of the above embodiment.

[0151] The embodiment also provides a machine readable storage medium, which stores machine executable instructions. When the machine executable instructions are invoked and executed by a processor, the machine executable instructions cause the processor to implement the resource processing method. The method is applied to a terminal device, and the terminal device is configured with a plurality of resource folders of a target project. The plurality of resource folders store resource codes of the target project. The method comprises the following steps:

[0152] The target resource code stored in the target resource folder related to the routing page is obtained from the plurality of resource folders. Based on the target resource code, the resource name of the target third-party resource used by the routing page is determined. According to the resource name of the target third-party resource used by the routing page and the pre-generated third-party resource file, the target corresponding relationship between the routing page and the target third-party resource file is generated. The third-party resource file stores all third-party resources of the target project, and the target third-party resource file stores part of the third-party resources of the target project. The target corresponding relationship is published to the corresponding server, and the file path of the target third-party resource file used by each routing page is generated, so that when the target project is run, if the routing page is triggered, the target third-party resource file is loaded based on the file path of the target third-party resource file. Since the target third-party resource used by each routing page is part of all third-party resources, only the resource file of the target third-party resource is generated, so that when the target project is run, the corresponding resource file is loaded according to the currently triggered routing page, avoiding the problem of loading and parsing all resource files when opening the home page, reducing the request pressure of the server and the waste of network resources, and further improving the running efficiency of the project.

[0153] The above step of obtaining the target resource code stored in the target resource folder related to the routing page from the plurality of resource folders, and determining the resource name of the target third-party resource used by the routing page based on the target resource code, comprises: obtaining the routing path of each target resource folder in the first resource folder; wherein the first resource folder stores a plurality of target resource folders, and each target resource folder has a corresponding routing page; obtaining the target resource code stored in the target resource folder according to the routing path, and converting the target resource code into a string; determining a target string with a specified form from the string, and determining the resource name of the target third-party resource used by the routing page from the target string. In this way, by obtaining the routing path of the target resource folder, the target resource code is further read and converted into a target string with a specified form, and the resource name of the target third-party resource is determined according to the target string with the specified form, so that the accurate resource name can be obtained.

[0154] The step of determining the resource name of the target third-party resource used by the routing page from the target string includes: determining an initial resource name from the target string, deleting the resource name containing the specified content in the initial resource name to obtain an intermediate resource name; deleting the resource name of the resource file that is not published in the specified website in the intermediate resource name to obtain the target resource name; and determining the target resource name as the resource name of the target third-party resource used by the routing page. In this way, the initial resource name is determined from the target string, and then the resource name of the target third-party resource used by the routing page is screened and determined, the resource name of the invalid third-party resource is deleted, the accuracy of the resource name is improved, and the file size of the third-party resource is further compressed.

[0155] The step of generating the target corresponding relationship between the routing page and the target third-party resource file according to the resource name of the target third-party resource used by the routing page and the third-party resource file generated in advance includes: generating a first corresponding relationship between the routing page and the resource name of the target third-party resource according to the resource name of the target third-party resource used by the routing page; and obtaining the target third-party resource file used by the routing page from the third-party resource file according to the first corresponding relationship to generate the target corresponding relationship between the routing page and the target third-party resource file. In this way, the resource name of the target third-party resource in the set is segmented and combined to obtain the first corresponding relationship between the routing page and the resource name, and the target corresponding relationship between the routing page and the target third-party resource file is generated, avoiding the problem of loading and parsing all resource files when opening the home page.

[0156] The step of generating the first corresponding relationship between the routing page and the resource name of the target third-party resource according to the resource name of the target third-party resource used by the routing page includes: generating an initial corresponding relationship with a first specified data structure according to the resource name of the target third-party resource used by the routing page; wherein the initial corresponding relationship is used to generate one or more target third-party resource files corresponding to each routing page in a packaging result obtained by packaging the third-party resource file based on the initial corresponding relationship; and the initial corresponding relationship is processed to generate the first corresponding relationship; wherein the first corresponding relationship is used to generate one or more target third-party resource files corresponding to each routing page in a packaging result obtained by packaging the third-party resource file based on the first corresponding relationship. In this way, the first corresponding relationship is obtained by processing the coinciding resource names in the initial corresponding relationship, and the relationship between the routing page and the target third-party resource file based on the first corresponding relationship avoids the problem of repeated loading when opening the page for the same third-party resource file.

[0157] The step of processing the initial correspondence relationship and generating the first correspondence relationship includes: if the resource names of the target third-party resources used by each routing page in the initial correspondence relationship have the same first resource name, deleting the first resource name corresponding to the sub-page other than the first page in the routing page; and if the resource names of the target third-party resources used by the target sub-page in the sub-pages other than the first page in the routing page in the initial correspondence relationship have the same second resource name, setting the resource name corresponding to the target sub-page to a specified format to generate the first correspondence relationship. In this way, by deleting the resource name coinciding with the first page in the sub-page and setting the coinciding resource name in the sub-page to the specified format, the effect of deduplication can be achieved, the target third-party resource is prevented from being loaded repeatedly, and the request pressure of the server is reduced.

[0158] The step of generating the target correspondence relationship between the routing page and the target third-party resource file according to the first correspondence relationship includes: judging whether the resource name corresponding to the routing page in the first correspondence relationship is in the specified format; if yes, acquiring the target third-party resource matching the resource name corresponding to the routing page from the third-party resource file respectively, and packing each target third-party resource respectively to generate a plurality of target third-party resource files corresponding to the routing page; and if no, acquiring the target third-party resource matching the resource name corresponding to the routing page from the third-party resource file, and packing the target third-party resource to generate the target third-party resource file corresponding to the routing page. In this way, by judging whether the resource name corresponding to the routing page is in the specified format, the target third-party resource is packed in two cases, the target third-party resource is further prevented from being loaded repeatedly, and the request pressure of the server is reduced.

[0159] The step of loading the target third-party resource file based on the file path of the target third-party resource file if the routing page is triggered when the target project is run includes: displaying the page in the target project through the terminal device, and reading the specified label in the currently displayed page; wherein the specified label is used to: display the routing page corresponding to the specified label in response to the triggering operation on the specified label; and monitor the operation behavior on the specified label, and display the routing page corresponding to the target specified label in the specified area of the browsing window in response to the target specified label in the specified label, and the mouse pointer is hovering over the target specified label, and acquire the file path of the target third-party resource file used by the routing page corresponding to the target specified label from the target correspondence relationship; and load the target third-party resource file from the server based on the file path, and store the target third-party resource file in the browser memory. In this way, by monitoring the target specified label triggered by the user, the target third-party resource file corresponding to the routing page is loaded in advance, the effect of preloading the target third-party resource to be used in the webpage can be achieved, and the request pressure of the server is reduced.

[0160] The step of reading the specified label in the currently displayed page includes: reading a language label in the currently displayed page, and obtaining an href attribute of the language label; and determining the specified label in the language label based on the href attribute. In this way, by reading all a labels, the specified label with the page routing feature can be screened out based on the href attribute, and the target of the link is specified.

[0161] The step of loading the target third-party resource file from the server based on the file path and storing the target third-party resource file in the browser memory includes: determining whether the browser memory stores the target third-party resource file used by the routing page corresponding to the target specified label; and if not, loading the target third-party resource file from the server based on the file path and storing the target third-party resource file in the browser memory. In this way, by determining whether the target third-party resource file corresponding to the routing page exists in the browser memory, the server is prevented from being repeatedly requested to load the target third-party resource file, the pressure on the server is reduced, the use of network resources is maximized, and the operation efficiency of the website is improved.

[0162] The method further includes: in response to a triggering operation on the target specified label, loading the target third-party resource file used by the routing page corresponding to the target specified label from the browser memory, and displaying the routing page based on the target third-party resource file. In this way, the target third-party resource of the routing page to be displayed can be directly found from the browser memory, and the effect of quickly rendering the routing page to be displayed can be achieved.

[0163] The method further includes: periodically deleting the files stored in the browser memory. In this way, the memory space of the browser can be reduced by periodically cleaning the memory of the browser, and the operation efficiency of the browser is improved.

[0164] The resource processing method and device, the electronic device, and the computer program product of the storage medium provided in the embodiments of the present application include a computer readable storage medium storing program codes, the program codes include instructions for executing the method described in the foregoing method embodiments, and the specific implementation can be referred to the method embodiments, which will not be described herein.

[0165] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working process of the system and device described above can refer to the corresponding process in the foregoing method embodiments, which will not be described herein.

[0166] In addition, in the description of the embodiments of the present application, unless otherwise explicitly specified and limited, the terms "mounting", "connection", "connecting" should be understood in a broad sense, for example, can be fixedly connected, can be detachably connected, or integrally connected; can be mechanically connected, can be electrically connected; can be directly connected, can be indirectly connected through an intermediate medium, or can be the communication inside two elements. For those skilled in the art, the specific meaning of the above terms in the present application can be understood according to the specific circumstances.

[0167] If the functions are realized in the form of software function units and sold or used as independent products, they can be stored in a computer readable storage medium. Based on such understanding, the technical solutions of the present application or the part of the present application that essentially contributes to the prior art or the part of the technical solutions can be embodied in the form of a software product. The computer software product is stored in a storage medium and includes a plurality of instructions for causing a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the method described in the embodiments of the present application. The aforementioned storage medium includes a U disk, a mobile hard disk, a read-only memory (ROM, Read-Only Memory), a random access memory (RAM, Random Access Memory), a magnetic disk or an optical disk, and various media that can store program codes.

[0168] In the description of the present application, it should be noted that the terms "center", "upper", "lower", "left", "right", "vertical", "horizontal", "inner", "outer" and the like indicate the orientation or positional relationship based on the orientation or positional relationship shown in the drawings, and are only for the convenience of describing the present application and simplifying the description, and do not indicate or imply that the devices or elements referred to must have a particular orientation, be constructed and operated in a particular orientation, and therefore cannot be understood as a limitation on the present application. In addition, the terms "first", "second", "third" are only for descriptive purposes and cannot be understood as indicating or implying relative importance.

[0169] Finally, it should be noted that: the above embodiments are only specific embodiments of the present application, which are used to illustrate the technical solutions of the present application, and are not limited thereto. Although the present application has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that any person skilled in the art can make modifications or easily think of changes to the technical solutions described in the foregoing embodiments within the technical scope disclosed by the present application, or make equivalent replacements to some of the technical features; and these modifications, changes or replacements do not cause the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present application, and should be covered within the protection scope of the present application. Therefore, the protection scope of the present application should be subject to the protection scope of the claims.

Claims

1. A resource processing method, characterized by, The method is applied to a terminal device, wherein a plurality of resource folders of a target project are configured in the terminal device, and resource codes of the target project are stored in the plurality of resource folders, and the method comprises: obtaining target resource codes stored in target resource folders related to routing pages from the plurality of resource folders, and determining resource names of target third-party resources used by the routing pages based on the target resource codes; generating target corresponding relationships between the routing pages and target third-party resource files according to the resource names of the target third-party resources used by the routing pages and pre-generated third-party resource files, wherein the third-party resource files store all third-party resources of the target project, and the target third-party resource files store part of the third-party resources of the target project; publishing the target corresponding relationships to corresponding servers, and generating file paths of the target third-party resource files used by each of the routing pages, so that when the target project is run, if the routing pages are triggered, the target third-party resource files are loaded based on the file paths of the target third-party resource files; the step of generating the target corresponding relationships between the routing pages and the target third-party resource files according to the resource names of the target third-party resources used by the routing pages and the pre-generated third-party resource files comprises: generating an initial corresponding relationship having a first specified data structure according to the resource names of the target third-party resources used by the routing pages; if the resource names of the target third-party resources used by each of the routing pages in the initial corresponding relationship have the same first resource name, deleting the first resource name corresponding to a sub-page of the routing pages other than a first page; if the resource names of the target third-party resources used by a target sub-page in the sub-pages of the routing pages other than the first page in the initial corresponding relationship have the same second resource name, setting the resource name corresponding to the target sub-page to a specified format to generate a first corresponding relationship; generating the target corresponding relationships between the routing pages and the target third-party resource files according to the first corresponding relationship and the target third-party resource files used by the routing pages from the third-party resource files.

2. The method of claim 1, wherein, the step of obtaining target resource codes stored in target resource folders related to routing pages from the plurality of resource folders and determining resource names of target third-party resources used by the routing pages based on the target resource codes comprises: obtaining routing paths of each of the target resource folders in a first resource folder; wherein a plurality of the target resource folders are stored in the first resource folder, and each of the target resource folders has a corresponding routing page; obtaining target resource codes stored in the target resource folders according to the routing paths, and converting the target resource codes into strings; Determining a target string with a specified form from the string, and determining a resource name of a target third-party resource used by the routing page from the target string.

3. The method of claim 2, wherein, The step of determining the resource name of the target third-party resource used by the routing page from the target string comprises: Determining an initial resource name from the target string, and deleting resource names containing specified content in the initial resource name to obtain an intermediate resource name; Deleting resource names of resource files not published in a specified website in the intermediate resource name to obtain a target resource name; Determining the target resource name as the resource name of the target third-party resource used by the routing page.

4. The method of claim 1, wherein, According to the first correspondence relationship, obtaining a target third-party resource file used by the routing page from the third-party resource file, and generating a target correspondence relationship between the routing page and the target third-party resource file, comprising: Determining whether the resource name corresponding to the routing page in the first correspondence relationship is in a specified format; If yes, obtaining target third-party resources matching the resource name corresponding to the routing page from the third-party resource file respectively, and packaging each target third-party resource respectively to generate a plurality of target third-party resource files corresponding to the routing page; If no, obtaining a target third-party resource matching the resource name corresponding to the routing page from the third-party resource file, and packaging the target third-party resource to generate a target third-party resource file corresponding to the routing page.

5. The method of claim 1, wherein, When the target project is running, if the routing page is triggered, loading the target third-party resource file based on the file path of the target third-party resource file, comprising: Displaying a page in the target project through the terminal device, and reading a specified label in the currently displayed page; wherein the specified label is used to display a routing page corresponding to the specified label in response to a triggering operation on the specified label; Monitoring operation behaviors on the specified label, and displaying a target third-party resource file used by a routing page corresponding to a target specified label in the target correspondence relationship in a specified area of a browsing window, and the mouse pointer is hovering over the target specified label; Loading the target third-party resource file from the server based on the file path, and storing the target third-party resource file in the browser memory.

6. The method of claim 5, wherein, The step of reading the specified label in the currently displayed page comprises: Reading a language label in the currently displayed page, and obtaining an href attribute of the language label; Determining the specified label in the language label based on the href attribute.

7. The method of claim 5, wherein, The step of loading the target third-party resource file from the server based on the file path, and storing the target third-party resource file in the browser memory comprises: Determining whether the browser memory stores a target third-party resource file used by a routing page corresponding to the target specified label; If no, the target third-party resource file is loaded from the server based on the file path and stored in the browser memory.

8. The method of claim 5, wherein, When the target project is run, if the routing page is triggered, the method further comprises the following steps after loading the target third-party resource file based on the file path of the target third-party resource file: In response to a trigger operation on the target specified label, the target third-party resource file used by the routing page corresponding to the target specified label is loaded from the browser memory, and the routing page is displayed based on the target third-party resource file.

9. The method of claim 5, wherein, The method further comprises: deleting the files stored in the browser memory in a timely manner.

10. A resource processing device, characterized by The device is applied to a terminal equipment, and the terminal equipment is configured with a plurality of resource folders of a target project, and the plurality of resource folders store resource codes of the target project. A determination module is configured to acquire target resource codes stored in a target resource folder related to a routing page from the plurality of resource folders, and determine resource names of target third-party resources used by the routing page based on the target resource codes. A generation module is configured to generate a target correspondence relationship between the routing page and a target third-party resource file according to the resource names of the target third-party resources used by the routing page and a third-party resource file generated in advance, wherein the third-party resource file stores all third-party resources of the target project, and the target third-party resource file stores part of the third-party resources of the target project. A loading module is configured to publish the target correspondence relationship to a corresponding server, and generate file paths of the target third-party resource files used by each routing page, so that when the target project is run, if the routing page is triggered, the target third-party resource file is loaded based on the file path of the target third-party resource file. The generation module is further configured to generate an initial correspondence relationship with a first specified data structure according to the resource names of the target third-party resources used by the routing page, delete the first resource names corresponding to the sub-pages of the routing page except the first page if the resource names of the target third-party resources used by each routing page in the initial correspondence relationship have the same first resource name, set the resource names corresponding to the target sub-pages of the routing page except the first page in the initial correspondence relationship to a specified format if the resource names of the target third-party resources used by the target sub-pages of the routing page have the same second resource name, generate a first correspondence relationship, and generate the target correspondence relationship between the routing page and the target third-party resource file according to the first correspondence relationship and the target third-party resource files used by the routing page acquired from the third-party resource file.

11. An electronic device, comprising: A computer readable storage medium storing computer executable instructions that, when invoked and executed by a processor, cause the processor to implement the resource processing method of any one of claims 1-9.

12. A computer-readable storage medium, characterized in that, The computer readable storage medium stores computer executable instructions that, when invoked and executed by a processor, cause the processor to implement the resource processing method of any one of claims 1-9.

Images