Method, system and device for controlling cache based on front-end resource embedding

Abstract

The present application relates to the technical field of Web front-end development, and in particular to a method, system and device for controlling cache based on the embedded front-end resource method, including: constructing an SDK file that complies with a first preset rule; using the SDK file that complies with the first preset rule, through a second preset rule, obtaining the file name of the SDK file that complies with the first preset rule; using the file name of the SDK file that complies with the first preset rule, creating a folder that complies with a fourth preset rule; performing a replacement operation on the folder that complies with the fourth preset rule to obtain a result of controlling cache based on the embedded front-end resource method. By performing a replacement operation on the folder that complies with the fourth preset rule, the present application helps solve the problem of high performance consumption, slow loading speed and easy loading errors when controlling cache based on the embedded front-end resource method.

Description

Technical Field

[0001] The present application relates to the technical field of Web front-end development, and in particular to a method, system, and device for controlling cache based on the embedded front-end resource approach. Background Art

[0002] In front-end development, embedded methods are often used to reference components or pages. There are mainly iframe embedding methods and js-sdk methods. However, these two methods have their own advantages and disadvantages. The iframe method is simple to use and only requires adding an iframe tag and src attribute. The main pages are isolated from each other and there are no script conflicts. However, the iframe tag also has problems such as high performance consumption and slow loading speed. js-sdk is simple and flexible to implement, with modular content and convenient reference. It can share parent page resources, but at the same time, version iterations may have cache problems that lead to loading errors.

[0003] That is, in the prior art, when controlling the cache based on the front-end resource embedding method, the performance consumption is large, the loading speed is slow, and loading errors are easily caused. Summary of the Invention

[0004] In order to at least to some extent overcome the problems in related technologies of controlling cache based on front-end resource embedding, such as high performance consumption, slow loading speed and easy loading errors, the present application provides a method, system and device for controlling cache based on front-end resource embedding.

[0005] The scheme of this application is as follows:

[0006] In a first aspect, the present application provides a method for controlling cache based on front-end resource embedding, characterized in that the method includes:

[0007] Build an SDK file that complies with the first preset rule;

[0008] Using the SDK file that complies with the first preset rule, and according to the second preset rule, obtaining the file name of the SDK file that complies with the first preset rule;

[0009] Using the file name of the SDK file that complies with the first preset rule, create a folder that complies with the fourth preset rule;

[0010] A replacement operation is performed on the folder that meets the fourth preset rule to obtain a result of controlling the cache based on the front-end resource embedding method.

[0011] Furthermore, the constructing of the SDK file that complies with the first preset rule includes:

[0012] SDK file built by the packaging tool and containing a hash value in UMD format.

[0013] Further, using the SDK file that complies with the first preset rule, obtaining the file name of the SDK file that complies with the first preset rule through the second preset rule includes:

[0014] The SDK file that complies with the first preset rule is used to obtain the file name of the SDK file that complies with the first preset rule through the fs related function in the nodejs function.

[0015] Furthermore, the step of creating a folder that complies with a fourth preset rule by using the file name of the SDK file that complies with the first preset rule includes:

[0016] Using the file name of the SDK file that complies with the first preset rule, create a folder that complies with the fourth preset rule through the fs related function in the nodejs function;

[0017] The name of the folder that complies with the fourth preset rule is consistent with the file name of the corresponding SDK file that complies with the first preset rule, and the folder contains an immediately executed function.

[0018] Furthermore, the replacing operation is performed on the folder that meets the fourth preset rule to obtain a result of controlling the cache based on the front-end resource embedding method, including:

[0019] Monitor the loading event in the folder that meets the fourth preset rule, and dynamically splice the first replacement information,

[0020] Obtaining path-related attribute information in the loading event, and performing splicing and replacement of the path-related attribute information in the related attribute information with the first replacement information using a regular expression, to obtain a result of controlling cache based on a front-end resource embedding method;

[0021] The first replacement information includes: production information and / or test environment domain name and timestamp parameter information.

[0022] In a second aspect, the present application provides a system for controlling cache based on front-end resource embedding, the system comprising:

[0023] A construction module, used to construct an SDK file that complies with the first preset rule;

[0024] A first processing module is configured to use the SDK file that complies with the first preset rule to obtain a file name of the SDK file that complies with the first preset rule according to a second preset rule;

[0025] A second processing module, configured to create a folder that complies with a fourth preset rule by using the file name of the SDK file that complies with the first preset rule;

[0026] The third processing module is used to perform a replacement operation on the folder that meets the fourth preset rule to obtain a result of controlling the cache based on the front-end resource embedding method.

[0027] In a third aspect, the present application provides a device for controlling cache based on front-end resource embedding, the device comprising:

[0028] a memory having an executable program stored therein;

[0029] A processor is used to execute the executable program in the memory to implement the steps of any one of the above methods.

[0030] The technical solution provided by this application may have the following beneficial effects:

[0031] This application constructs an SDK file that complies with the first preset rule; uses the SDK file that complies with the first preset rule to obtain the file name of the SDK file that complies with the first preset rule through the second preset rule; uses the file name of the SDK file that complies with the first preset rule to create a folder that complies with the fourth preset rule; replaces the folder that complies with the fourth preset rule to obtain the result of controlling the cache based on the embedded front-end resource method. This application helps solve the problem of high performance consumption, slow loading speed and easy loading errors when controlling the cache based on the embedded front-end resource method by performing a replacement operation on the folder that complies with the fourth preset rule.

[0032] It should be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the present application. BRIEF DESCRIPTION OF THE DRAWINGS

[0033] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present application and, together with the description, serve to explain the principles of the present application.

[0034] Figure 1 This is a flow chart of a method for controlling cache based on front-end resource embedding provided by an embodiment of the present application;

[0035] Figure 2 This is a schematic diagram of the internal implementation principle of the immediate execution function of the remote-load-script-pro component provided by another embodiment of the present application;

[0036] Figure 3 This is a schematic diagram of the internal implementation principle of remote-load-script-pro component data replacement provided by another embodiment of the present application;

[0037] Figure 4 This is a schematic diagram of a system composition for controlling cache based on front-end resource embedding, provided by an embodiment of the present application;

[0038] Figure 5 This is a schematic diagram of a device composition for controlling cache based on front-end resource embedding, provided by an embodiment of the present application. DETAILED DESCRIPTION

[0039] Exemplary embodiments will be described in detail herein, with examples illustrated in the accompanying drawings. In the following description, when referring to the drawings, identical numerals in different figures represent identical or similar elements, unless otherwise indicated. The embodiments described in the following exemplary embodiments are not intended to represent all embodiments consistent with the present application. Rather, they are merely examples of apparatus and methods consistent with certain aspects of the present application, as detailed in the appended claims.

[0040] See also Figure 1 , Figure 1 This is a flow chart of a method for controlling cache based on front-end resource embedding provided by an embodiment of the present application, the method comprising:

[0041] S1. Build an SDK file that complies with the first preset rule;

[0042] S2. Using the SDK file that complies with the first preset rules, obtain the file name of the SDK file that complies with the first preset rules through the second preset rules;

[0043] S3. Using the file name of the SDK file that complies with the first preset rule, create a folder that complies with the fourth preset rule;

[0044] S4. Perform a replacement operation on the folder that meets the fourth preset rule to obtain a result of controlling the cache based on the front-end resource embedding method.

[0045] In one embodiment, referring to S1, the step of constructing an SDK file that complies with a first preset rule includes:

[0046] SDK file built by the packaging tool and containing a hash value in UMD format.

[0047] In one embodiment, referring to S2, using the SDK file that complies with the first preset rule, obtaining the file name of the SDK file that complies with the first preset rule according to the second preset rule includes:

[0048] The SDK file that complies with the first preset rule is used to obtain the file name of the SDK file that complies with the first preset rule through the fs related function in the nodejs function.

[0049] In one embodiment, referring to S3, the step of creating a folder that complies with a fourth preset rule by using the file name of the SDK file that complies with the first preset rule includes:

[0050] Using the file name of the SDK file that complies with the first preset rule, create a folder that complies with the fourth preset rule through the fs related function in the nodejs function;

[0051] The folder name of the folder is consistent with the file name of the corresponding SDK file that complies with the first preset rule, and the folder contains an immediate execution function.

[0052] In one embodiment, referring to S4, the replacing operation is performed on the folder that meets the fourth preset rule to obtain a result of controlling the cache based on the front-end resource embedding method, including:

[0053] Monitor the loading event in the folder that meets the fourth preset rule, and dynamically splice the first replacement information,

[0054] Obtaining path-related attribute information in the loading event, and performing splicing and replacement of the path-related attribute information in the related attribute information with the first replacement information using a regular expression, to obtain a result of controlling cache based on a front-end resource embedding method;

[0055] The first replacement information includes: production information and / or test environment domain name and timestamp parameter information.

[0056] In the specific implementation, the SDK file in UMD format with hash is built by webpack;

[0057] Create a new file using the nodejs+fs plug-in, and use the method in the fs module in the nodejs plug-in (i.e., the nodejs function) to query the constructed js file with the umd hash.

[0058] Get the file name of the js file containing the hashed umd file, extract the hash value of the file name as umdHash using a regular expression, create a file using the fs method, and name it the same as the sdk file name containing the hash, but without the hash (for the convenience of business systems). The file contains an immediately executed function. Add WORKFLOW_SDK_HASH: ${umdHash} to the window, place the file and [hash].umd.min.js in the same directory, and publish it to the server for use. This method has been written into a plugin (@zto / vue-sfc-to-lib-webpack-plugin) and has been implemented.

[0059] It should be noted that webpack is a code compilation tool with entry, exit, loader and plug-in.

[0060] In the specific implementation, take the process details page as an example: develop a component for the process details page through component-based development (such as vue+element-ui). This component can be connected to the corresponding required business system and declare the component name (such as workflow-sdk);

[0061] In addition, the business system develops a component called remote-load-script-pro for the parent component of workflow-sdk, which packages the workflow-sdk component, such as Figure 2 As shown, the src parameter received by this component is a fixed parameter configured in the management backend (such as xxxx.umd.min.js. If it is not combined with the management backend, a fixed address can be written here). By dynamically splicing the production / test environment domain name + timestamp parameter, this method can avoid calling browser cache-related methods.

[0062] In specific implementation, the remote-load-script-pro component is implemented internally, such as Figure 2 、 Figure 3 As shown:

[0063] 1. Initialize and create a script tag (script tag 1). The tag's src attribute is the received src attribute (how to implement the src content will be mentioned below). This js content is an immediately executed function, and a current version hash value (WORKFLOW_SDK_HASH:`4a748c3cb436d8580701`) is added to the window.

[0064] 2. Listen for the onload event of script tag 1. After the onload event, a WORKRKFLOW_SDK_HASH property will be created on the window object. Use a regular expression to replace the original src with xxxx.[HASH].umd.min.js (HASH is the value of WORKFLOW_SDK_HASH) and name it a new property mainSrc.

[0065] 3. Add a second script (script tag 2). The src attribute is the content of mainSrc. The content loaded by this src is the real SDK content. At this time, the workflow-sdk component can be used normally and there is no caching problem.

[0066] In one embodiment, this application uses the development and construction method of js-sdk, combined with the self-developed @zto / vue-sfc-to-lib-webpack-plugin, to solve the browser caching problem.

[0067] Specifically, the present application constructs an SDK file that complies with a first preset rule; uses the SDK file that complies with the first preset rule to obtain the file name of the SDK file that complies with the first preset rule through a second preset rule; uses the file name of the SDK file that complies with the first preset rule to create a folder that complies with a fourth preset rule; performs a replacement operation on the folder that complies with the fourth preset rule to obtain a result of controlling the cache based on the embedded front-end resource method. The present application helps solve the problem of high performance consumption, slow loading speed and easy loading errors when controlling the cache based on the embedded front-end resource method by performing a replacement operation on the folder that complies with the fourth preset rule.

[0068] Example 2

[0069] See also Figure 4 , Figure 4 This is a schematic diagram of a system composition for controlling cache based on front-end resource embedding, provided by an embodiment of the present application. The method includes:

[0070] Construction module 401, used to construct an SDK file that complies with a first preset rule;

[0071] The first processing module 402 is configured to use the SDK file that complies with the first preset rule to obtain the file name of the SDK file that complies with the first preset rule according to the second preset rule;

[0072] The second processing module 403 is configured to create a folder that complies with a fourth preset rule using the file name of the SDK file that complies with the first preset rule;

[0073] The third processing module 404 is configured to perform a replacement operation on the folder that meets the fourth preset rule, and obtain a result of controlling the cache based on the front-end resource embedding method.

[0074] Example 3

[0075] See also Figure 5 , Figure 5 This is a schematic diagram of a device composition for controlling cache based on front-end resource embedding provided by an embodiment of the present application. The method includes:

[0076] a memory 51 on which an executable program is stored;

[0077] The processor 52 is configured to execute the executable program in the memory 51 to implement the steps of any one of the above methods.

[0078] It can be understood that the same or similar parts of the above embodiments can be referenced to each other, and the contents not described in detail in some embodiments can refer to the same or similar contents in other embodiments.

[0079] It should be noted that, in the description of this application, the terms "first", "second", etc. are used for descriptive purposes only and should not be understood as indicating or implying relative importance. In addition, in the description of this application, unless otherwise specified, the meaning of "plurality" refers to at least two.

[0080] Any process or method description in a flowchart or otherwise described herein may be understood to represent a module, segment or portion of code comprising one or more executable instructions for implementing the steps of a specific logical function or process, and the scope of the preferred embodiments of the present application includes alternative implementations in which functions may be performed out of the order shown or discussed, including performing functions in a substantially simultaneous manner or in the reverse order depending on the functions involved, which should be understood by those skilled in the art to which the embodiments of the present application belong.

[0081] It should be understood that various parts of the present application can be implemented using hardware, software, firmware, or a combination thereof. In the above embodiments, multiple steps or methods can be implemented using software or firmware stored in a memory and executed by a suitable instruction execution system. For example, if implemented using hardware, as in another embodiment, any one of the following technologies known in the art or a combination thereof can be used to implement: a discrete logic circuit having a logic gate circuit for implementing a logic function on a data signal, an application-specific integrated circuit having a suitable combination of logic gate circuits, a programmable gate array (PGA), a field programmable gate array (FPGA), etc.

[0082] Those skilled in the art will understand that all or part of the steps in the method of the above embodiment can be completed by instructing related hardware through a program, and the program can be stored in a computer-readable storage medium. When the program is executed, it includes one or a combination of the steps of the method embodiment.

[0083] In addition, the functional units in the various embodiments of the present application may be integrated into a processing module, or each unit may exist physically separately, or two or more units may be integrated into a module. The above-mentioned integrated module may be implemented in the form of hardware or in the form of a software functional module. If the integrated module is implemented in the form of a software functional module and sold or used as an independent product, it may also be stored in a computer-readable storage medium.

[0084] The storage medium mentioned above can be a read-only memory, a magnetic disk or an optical disk, etc.

[0085] Throughout this specification, reference to terms such as "one embodiment," "some embodiments," "examples," "specific examples," or "some examples" means that a specific feature, structure, material, or characteristic described in conjunction with that embodiment or example is included in at least one embodiment or example of the present application. In this specification, schematic representations of the above terms do not necessarily refer to the same embodiment or example. Furthermore, the specific features, structures, materials, or characteristics described may be combined in any suitable manner in any one or more embodiments or examples.

[0086] Although the embodiments of the present application have been shown and described above, it can be understood that the above embodiments are exemplary and cannot be understood as limitations on the present application. Ordinary technicians in this field can change, modify, replace and modify the above embodiments within the scope of the present application.

Claims

1. A method for controlling cache based on front-end resource embedding, characterized in that: The method comprises: Build an SDK file that complies with the first preset rule; Using the SDK file that complies with the first preset rule, and according to the second preset rule, obtaining the file name of the SDK file that complies with the first preset rule; Using the file name of the SDK file that complies with the first preset rule, create a folder that complies with the fourth preset rule; Performing a replacement operation on the folder that meets the fourth preset rule to obtain a result of controlling the cache based on the front-end resource embedding method; The step of constructing an SDK file that complies with the first preset rule includes: SDK file built by the packaging tool with a hash value and in UMD format; The step of creating a folder that complies with a fourth preset rule by using the file name of the SDK file that complies with the first preset rule includes: Using the file name of the SDK file that complies with the first preset rule, create a folder that complies with the fourth preset rule through the fs related function in the nodejs function; The folder name that complies with the fourth preset rule is consistent with the file name of the corresponding SDK file that complies with the first preset rule, and the folder contains an immediately executed function; The replacing operation is performed on the folder that meets the fourth preset rule to obtain a result of controlling the cache based on the front-end resource embedding method, including: Monitor the loading event in the folder that meets the fourth preset rule, and dynamically splice the first replacement information, Obtaining path-related attribute information in the loading event, and performing splicing and replacement of the path-related attribute information in the related attribute information with the first replacement information using a regular expression, to obtain a result of controlling cache based on a front-end resource embedding method; The first replacement information includes: production information and / or test environment domain name and timestamp parameter information.

2. The method according to claim 1, characterized in that Using the SDK file that complies with the first preset rule, obtaining the file name of the SDK file that complies with the first preset rule through the second preset rule includes: The SDK file that complies with the first preset rule is used to obtain the file name of the SDK file that complies with the first preset rule through the fs related function in the nodejs function.

3. A system for controlling cache based on front-end resource embedding, applied to the method for controlling cache based on front-end resource embedding according to any one of claims 1-2, characterized in that: The system comprises: A construction module, used to construct an SDK file that complies with the first preset rule; A first processing module is configured to use the SDK file that complies with the first preset rule to obtain a file name of the SDK file that complies with the first preset rule according to a second preset rule; A second processing module, configured to create a folder that complies with a fourth preset rule by using the file name of the SDK file that complies with the first preset rule; The third processing module is used to perform a replacement operation on the folder that meets the fourth preset rule to obtain a result of controlling the cache based on the front-end resource embedding method.

4. A device that controls cache based on the embedded front-end resource, characterized in that: The device comprises: a memory having an executable program stored therein; A processor, configured to execute the executable program in the memory to implement the steps of the method according to any one of claims 1 to 3.

Images