A method and device for clearing page cache after front-end upgrade

Abstract

This technology is applied to the field of front-end page development, providing a method and device for clearing page caches after front-end upgrades. It mainly solves the problem that the original technology requires clearing caches and re-logging in to obtain the latest page styles. The main solutions include adding the version number to js in the configuration file so that the page is loaded according to the version number during rendering; adding the version number to json.js in insert json.js, and including the version number in the path of the generated packaged file; adding the version number to js in the configuration file webpack.childpro.config.js, declaring the module names that need to clear caches in the front end and their version numbers, and writing the corresponding module names that need to clear caches and their version numbers into cookies according to the business logic as the comparison standard for the front-end file version numbers, and implementing a method for loading the module js and css files that need to clear caches in the front end according to the foregoing declaration; adding a script configuration of valm-version.js to the index.html file in the front-end frameweb directory, and when the page is refreshed, valm-version.js is loaded in real time to render the page.

Description

Technical Field

[0001] This technology is applied to the field of front - end page development to control the front - end page loading, and solve the problem that users need to manually clear the cache and re - log in every time after the front - end is upgraded to use new functions. Background Art

[0002] After the front - end code of the application system is upgraded, users need to manually clear the cache on the browser side and log in again to use the newly released functions. Since there are multiple users on the browser side, the user experience is poor. Therefore, it is necessary to optimize the front - end page loading method so that users can use the new version functions without clearing the cache.

[0003] For this reason, in Patent 2021110292190, a page loading method and device that do not require clearing the cache after front - end upgrade have the following disadvantages in actual use:

[0004] 1. Store the module names that need to clear the cache in the front - end and their version numbers in the database. Every time the front - end version number changes, data needs to be maintained in the database. There are security risks in actual operations, and there will be a situation where the page shows 404 because the transaction is not committed after data change to a certain extent.

[0005] 2. Store the module names that need to clear the cache in the front - end and their version numbers in the database. A separate interface needs to be provided in the background and a front - end implementation method is required to request the background service, increasing the labor cost.

[0006] 3. Store the module names that need to clear the cache in the front - end and their version numbers in the database. The entire interaction process will be affected by the network, program processing, and the database, resulting in longer page loading time and worse user experience. Summary of the Invention

[0007] The main problem solved by this solution is to package the front - end code based on the webpack tool, and then use the cookie mechanism. By comparing the declared modules and version numbers that need to clear the cache in the front - end with the data stored in the cookie, if there is a change, the cookie - stored data is refreshed according to the new version number, and the loadjs function and loadCss function are called to load js and css resources for page re - rendering, solving the problem that the original technology requires clearing the cache and re - logging in to obtain the latest page style.

[0008] The present invention adopts the following technical means to solve the above - mentioned technical problems:

[0009] A method for clearing the page cache after front - end upgrade, including the following steps:

[0010] Step 1: Add the version number to the JavaScript in the webpack configuration file webpack.base.config.js so that it can be loaded according to the version number during page rendering;

[0011] Step 2: Add the version number to the json.js in the configuration file insertjson.js, and include the version number in the path of the generated packaged file;

[0012] Step 3: Add the version number to the JavaScript in the configuration file webpack.childpro.config.js so that it can be loaded according to the version number during page rendering;

[0013] Step 4: Add a file valm-version.js to the vpcommon directory, declare the module names that need to clear the cache and their version numbers in the front end, and write the corresponding module names and their version numbers that need to clear the cache into the cookie according to the business logic in the initscript function, as the comparison standard with the front-end file version number, and implement the method of loading the module js and css files that need to clear the cache in the front end according to the foregoing declaration;

[0014] Step 5: Add the script configuration of valm-version.js to the index.html file in the front-end frameweb directory. When the page is refreshed, valm-version.js is loaded in real time to render the page.

[0015] In the above technical solution, the said Step 1 includes the following steps:

[0016] Step 1.1: Add the updated version number of the front end to the webpack.base.config.js configuration file, and the suffix of the packaged JavaScript file will include this version number:

[0017] Step 1.2: Initialize the Compiler object with the parameters of the configuration file, load all configured plugins, and execute the run method of the object to start compilation;

[0018] Step 1.3: Determine the entry: Find all entry files according to the entry in the configuration;

[0019] Step 1.4: Compile modules: Starting from the entry file, call all configured Loaders to translate the modules, then find the modules that the module depends on, and recursively execute this step until all files depended on by the entry have gone through the processing of this step;

[0020] Step 1.5: Complete module compilation: After translating all modules using the Loader in the previous step, the final content of each module after translation and their dependency relationships are obtained;

[0021] Step 1.6: Output Resources: According to the dependencies between the entry and the modules, assemble them into Chunks that contain multiple modules, and then convert each Chunk into a separate file and add it to the output list;

[0022] Step 1.7: Output Completion: After determining the output content, determine the output path and file name according to the configuration, write the file content to the file system, and generate a js file with the version number included in the suffix;

[0023] In the above technical solution, the said Step 4 includes the following steps:

[0024] Step 4.1: Declare the webinfo variable, and write in order the modules vpplatweb, vpmweb, vptestweb, and zbyhweb that need to clear the cache among the basic module (frameweb), platform modules (vpplatweb, vpmweb), customized modules (vptestweb, zbyhweb), other modules (vpweb, vpflow), and common resources (vpcommon, vpstatic) under the front-end valm;

[0025] Step 4.2: Declare the webversion variable, and write in sequence the version numbers of the front-end modules that need to clear the cache according to the writing order of the webinfo variable value;

[0026] Step 4.3: Define the initscirpt function, traverse according to the value of the webinfo variable, load json.webversion[i].js under the module that needs to clear the cache, and use the cookie mechanism to store the corresponding names and version numbers of the front-end modules that need to clear the cache, so as to facilitate subsequent identification of whether the version numbers of the front-end modules that need to clear the cache have changed;

[0027] Step 4.4: After the initscirpt function is triggered, obtain the modules and their version numbers that need to clear the cache from the cookie, compare them with the webversion variable to determine whether the version numbers of the front-end modules that need to clear the cache have changed. If they have changed, refresh the version number data recorded in the cookie for the front-end modules that need to clear the cache, and call the loadjs function and the loadCss function to load the js and css resources again;

[0028] Step 4.5: Define the loadjs function and the loadCss function in the common.js file to load the js and css resources after the version numbers of the front-end modules that need to clear the cache change in Step 4.4.

[0029] The present invention also provides a device for clearing page cache after front-end upgrade, including the following steps:

[0030] Configuration module: Add the version number to the js in the webpack configuration file webpack.base.config.js so that when the page is rendered, it is loaded according to the version number:

[0031] File path generation module: Add the version number to json.js in the configuration file insertjson.js, and include the version number in the path of the generated packaged file;

[0032] Version number adding to JS module: Add the version number to the js in the configuration file webpack.childpro.config.js so that when the page is rendered, it is loaded according to the version number;

[0033] Browser cookie: Declare the module names and their version numbers that need to clear the cache on the front end, and write the corresponding information of the version number into the cookie as the comparison standard with the front-end file version number;

[0034] Version number query module: When the front-end page is refreshed, load valm-version.js, trigger the initscript function in it, and make it judge whether the version numbers of the modules that need to clear the cache declared on the front end are consistent with the data stored in the cookie;

[0035] Render page module: After the initscript function in valm-vesion.js is triggered, if it is found that the module names and their version numbers that need to clear the cache stored in the cookie are inconsistent with the values of the webinfo and webversion variables in the declaration, then use the loadjs function and the loadCss function to load js and css resources and render the page according to the declared module names and their version numbers that need to clear the cache.

[0036] In the above technical solution, the configuration module:

[0037] Add the version number of the updated front end to the webpack configuration file webpack.base.config.js, and the suffix of the packaged js file will include this version number;

[0038] Initialize the Compiler object with the parameters of the configuration file, load all configured plugins, and execute the run method of the object to start compilation;

[0039] Determine the entry: Find all entry files according to the entry in the configuration;

[0040] Compilation module: Starting from the entry file, call all configured Loaders to translate the module, then find the modules that the module depends on, and recursively repeat this step until all files depended on by the entry have gone through this step of processing:

[0041] Complete module compilation: After translating all modules using the Loader in the previous step, the final translated content of each module and their dependency relationships are obtained;

[0042] Output resources: According to the dependency relationships between the entry and the modules, assemble them into Chunks containing multiple modules, and then convert each Chunk into a separate file and add it to the output list;

[0043] Output completed: After determining the output content, determine the output path and file name according to the configuration, write the file content to the file system, and generate a js file with the version number in the suffix;

[0044] In the above technical solution, the version number query module:

[0045] In valm-version.js, declare the webinfo variable and the webversion variable, and assign the module names that need to clear the cache and their version numbers for the front end;

[0046] Trigger the defined initscript function, and store the declared module names that need to clear the cache and their version numbers in the cookie;

[0047] In the initscript function, compare the module names that need to clear the cache and their version numbers stored in the cookie with the values of the webinfo and webversion variables in the declaration;

[0048] If it is found that the declared modules that need to clear the cache and their version numbers are inconsistent with those stored in the cookie, then use the loadjs function and the loadCss function to load js and css resources and render the page according to the declared module names that need to clear the cache and their version numbers.

[0049] In the above technical solution, the page rendering module:

[0050] Load valm-vesion.js to trigger the initscript function;

[0051] Judge whether the module names that need to clear the cache and their version numbers stored in the cookie are consistent with the values of the webinfo and webversion variables in the declaration;

[0052] If there is a change and the data stored in the cookie for the module that needs to clear the cache is inconsistent with the declared values of the webinfo and webversion variables, then according to the declared module name that needs to clear the cache and its version number, use the loadjs function and the loadCss function to load js and css resources and render the page.

[0053] The present invention also provides a storage medium, which stores a program for page loading that does not require manual cache clearing after front-end upgrade. When the CPU executes the program, a method for clearing the page cache after front-end upgrade is implemented.

[0054] Because the present invention adopts the above technical means, the following beneficial effects are achieved:

[0055] 1. The main problem solved by this solution is to package the front-end code based on the webpack tool, and then use the cookie mechanism to compare the declared modules and version numbers that need to clear the cache in the front-end with the data stored in the cookie. If there is a change, then refresh the cookie stored data according to the new version number and call the loadjs function and the loadCss function to load js and css resources for page re-rendering, solving the problem that the existing technology requires clearing the cache and re-logging in to obtain the latest page style.

[0056] 2. The current solution saves data storage costs, does not require database maintenance, and reduces the risk of operating the database;

[0057] 3. The current solution does not require the background to provide an interface, and requires the front-end to implement a method for front-back-end interaction, reducing labor costs;

[0058] 4. The current solution only needs the front-end to integrate the existing method in combination with the cookie mechanism to achieve cache clearing, reducing the interaction between programs and improving program efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0059] Figure 1 It is a schematic flowchart of the present invention;

[0060] Figure 2 、 Figure 3 、 Figure 4 They are all screenshots of software operation instances. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0061] This solution uses the static module bundling tool webpack to bundle the front-end files into js files with the new version number in the suffix. Then, using the cookie mechanism, it compares the declared front-end modules that need to clear the cache and their version numbers with the data stored in the cookie. If there is a change, it refreshes the cookie stored data according to the new version number and calls the loadjs function and the loadCss function to load the js and css resources for page re-rendering, solving the problem that the original technology requires clearing the cache and re-logging in to obtain the latest page styles. The following is a brief introduction to these technologies.

[0062] 1. webpack is a static module bundling tool for JavaScript applications.

[0063] 2. When webpack processes an application, it builds a dependency graph internally. This dependency graph corresponds to and maps to each module required by the project and generates one or more bundles. After the bundling is completed, the front-end files will be compiled into js files.

[0064] 2. XMLHTTP: It is a set of API function sets that can be called by JavaScript, JScript, VBScript, and other scripting languages embedded in web browsers to send and receive XML or other data between the browser and the web server via HTTP. Through XMLHttpRequest, a specific URL can be requested without refreshing the page to obtain data. This means that a part of the web page can be updated without reloading the entire web page.

[0065] The following takes the upgrade of the front-end from version V7.2.42 to V7.2.43 as an example to further elaborate on the specific implementation method. The flowchart is shown in Figure 1 and the final effect is shown in Figure 2 :

[0066] Step 1: Add the version number to the css in webpack.base.config.js and set the constant const version = "v7.2.43".

[0067] Step 2: Add the version number to json.js in insertjson.js and splice the response path

[0068] fs.writeFile('. / webapp / ' + baseConfig.appname + ' / json.' + baseConfig.version + '.js', jsonhtml, 'utf-8')

[0069] Step 3: Add the version number to the js in webpack.childpro.config.js and splice the request path

[0070] path: path.join(_dirname, '. / webapp / ' + baseConfig.appname)

[0071] Step 4: Declare the module names and version number information that need to clear the cache:

[0072] var webinfo = ["vpplatweb", "vpmweb", "vptestweb", "zbyhweb"];

[0073] var webversion = ["v7.2.55", "v7.2.3", "v7.2.38", "v1.1.26"];

[0074] Step 5: Define the initscript function, traverse according to the variable value of webinfo, load json.webversion[i].js under the module that needs to clear the cache, and use the cookie mechanism to store the module name that needs to clear the cache on the front end and its version number correspondingly, so as to facilitate subsequent identification of whether the version number of the module that needs to clear the cache on the front end has changed. If it has changed and the data stored in the cookie for the module that needs to clear the cache is inconsistent with the declared webinfo and webversion variable values, then use the loadjs function and loadCss function to load js and css resources and render the page according to the declared module names and their version numbers that need to clear the cache.

[0075] In the above technical solution, the said Step 1 includes the following steps:

[0076] Step 1.1: Add the updated version number of the front end to the configuration file; such as:

[0077]

[0078] Step 1.2: Initialize the Compiler object with the parameters obtained in the previous configuration, load all configured plugins, and execute the run method of the object to start compilation;

[0079] Step 1.3: Determine the entry: Find all entry files according to the entry in the configuration;

[0080] Step 1.4: Compilation Module: Starting from the entry file, call all configured Loaders to translate the module, then find the modules that this module depends on, and recursively execute this step until all files dependent on the entry have gone through the processing of this step;

[0081] Step 1.5: Complete Module Compilation: After translating all modules using the Loader in the previous step, the final content of each module after translation and their dependency relationships are obtained.

[0082] Step 1.6: Output Resources: According to the dependency relationships between the entry and the modules, assemble them into Chunks containing multiple modules, and then convert each Chunk into a separate file and add it to the output list;

[0083] Step 1.7: Output Completion: After determining the output content, determine the output path and file name according to the configuration, and write the file content to the file system to generate a js file with the version number in the suffix as shown in Figure 3 shown:

[0084] In the above technical solution, the said Step 4 includes the following steps:

[0085] Step 4.1: Declare the webinfo variable. The front-end valm includes basic modules (frameweb), platform modules (vpplatweb, vpmweb), customized modules (vptestweb, zbyhweb), other modules (vpweb, vpflow), and common resources (vpcommon, vpstatic). Write in order the modules that need to clear the cache, which are vpplatweb, vpmweb, vptestweb, and zbyhweb;

[0086] Step 4.2: Declare the webversion variable. According to the writing order of the values of the webinfo variable, write in sequence the version numbers of the modules that need to clear the cache on the front end;

[0087] Step 4.3: Define the initscirpt function. Traverse according to the values of the webinfo variable, load json.webversion[i].js under the modules that need to clear the cache, and use the cookie mechanism to store the names and version numbers of the modules that need to clear the cache on the front end in a corresponding manner, so as to facilitate subsequent identification of whether the version numbers of the modules that need to clear the cache on the front end have changed;

[0088] Step 4.4: After the initscirpt function is triggered, obtain the version number of the module whose cache needs to be cleared from the cookie and compare it with the webversion variable to determine whether the version number of the module whose cache needs to be cleared on the front end has changed. If it has changed, refresh the version number data recorded in the cookie for the module whose cache needs to be cleared on the front end, and call the loadjs function and the loadCss function to load the js and css resources again;

[0089] Step 4.5: The loadjs function and the loadCss function are defined in the common.js file to load the js and css resources after the version number of the module whose cache needs to be cleared on the front end changes in Step 4.4.

Claims

1. A method for clearing page cache after front-end upgrade, characterized in that, it includes the following steps: Step 1: Add the version number to the js in the webpack configuration file webpack.base.config.js so that it can be loaded according to the version number when the page is rendered; Step 2: Add the version number to json.js in the configuration file insertjson.js, and include the version number in the path of the generated packaged file; Step 3: Add the version number to the js in the configuration file webpack.childpro.config.js so that it can be loaded according to the version number when the page is rendered; Step 4: Add a file valm-version.js to the vpcommon directory, declare the module names that need to clear the cache in the front end and their version numbers, and write the corresponding module names that need to clear the cache and their version numbers into the cookie according to the business logic in the initscript function, as the comparison standard with the front-end file version number, and implement the method of loading the module js and css files that need to clear the cache in the front end according to the foregoing declaration; Step 5: Add the script configuration of valm-version.js to the index.html file in the front-end frameweb directory. When the page is refreshed, valm-version.js is loaded in real time to render the page.

2. The method for clearing page cache after front-end upgrade according to claim 1, characterized in that, the said Step 1 includes the following steps: Step 1.1: Add the version number of the updated front end to the webpack configuration file webpack.base.config.js, and the suffix of the packaged js file will contain this version number; Step 1.2: Initialize the Compiler object with the parameters of the configuration file, load all configured plugins, and execute the run method of the object to start compilation; Step 1.3: Determine the entry: Find all entry files according to the entry in the configuration; Step 1.4: Compile the module: Starting from the entry file, call all configured Loaders to translate the module, then find the modules on which the module depends, and then recursively perform this step until all files depended on by the entry have passed the processing of this step; Step 1.5: Complete module compilation: After translating all modules using the Loader in the previous step, the final content of each module after translation and their dependency relationships are obtained; Step 1.6: Output resources: According to the dependency relationship between the entry and the modules, assemble them into Chunks containing multiple modules, and then convert each Chunk into a separate file and add it to the output list; Step 1.7: Output completion: After determining the output content, determine the output path and file name according to the configuration, write the file content into the file system, and generate a js file with the version number in the suffix.

3. The method for clearing page cache after front-end upgrade according to claim 1, characterized in that, the said Step 4 includes the following steps: Step 4.1: Declare the webinfo variable, and write the modules vpplatweb, vpmweb, vptestweb, zbyhweb that need to clear the cache in frameweb, vpplatweb, vpmweb, vptestweb, zbyhweb, vpweb, vpflow, vpcommon, vpstatic under the front-end valm in order; Step 4.2: Declare the webversion variable, and write the version numbers of the modules that need to clear the cache on the front-end in order according to the writing order of the webinfo variable value; Step 4.3: Define the initscirpt function, traverse according to the value of the webinfo variable, load json.webversion[i].js under the module that needs to clear the cache, and use the cookie mechanism to store the module name that needs to clear the cache on the front-end and its version number correspondingly, so as to facilitate subsequent identification of whether the version number of the module that needs to clear the cache on the front-end has changed; Step 4.4: After the initscirpt function is triggered, obtain the module that needs to clear the cache and its version number from the cookie, and compare it with the webversion variable to determine whether the version number of the module that needs to clear the cache on the front-end has changed. If it has changed, refresh the version number data recorded in the cookie for the module that needs to clear the cache on the front-end, and call the loadjs function and the loadCss function to load the js and css resources again; Step 4.5: Define the loadjs function and the loadCss function in the common.js file to load the js and css resources after the version number of the module that needs to clear the cache on the front-end changes in Step 4.

4.

4. A device for clearing page cache after front-end upgrade, characterized in that, it includes the following steps: Configuration module: Add the version number to the js in the webpack configuration file webpack.base.config.js so that it can be loaded according to the version number during page rendering; File path generation module: Add the version number to the json.js in the configuration file insertjson.js, and include the version number in the path of the generated packaged file; Version number addition to JS module: Add the version number to the js in the configuration file webpack.childpro.config.js so that it can be loaded according to the version number during page rendering; Browser cookie: Declare the module name that needs to clear the cache on the front-end and its version number, and write the corresponding version number information into the cookie as the comparison standard with the front-end file version number; Version number query module: Load valm-version.js when the front-end page is refreshed, trigger the initscript function in it, and make it judge whether the version number of the module that needs to clear the cache declared on the front-end is consistent with the data stored in the cookie; Render page module: After the initscript function in valm-vesion.js is triggered, if it is found that the module names and their version numbers for which the front-end needs to clear the cache stored in the cookie are inconsistent with the values of the webinfo and webversion variables in the declaration, then the loadjs function and the loadCss function are used to load js and css resources and render the page according to the module names and their version numbers for which the cache needs to be cleared as declared.

5. A device for clearing page cache after front-end upgrade according to claim 4, characterized in that Configuration module: Add the version number of the updated front-end to the configuration file webpack.base.config.js, and the suffix of the packaged js file will contain this version number; Initialize the Compiler object with the parameters of the configuration file, load all configured plugins, and execute the run method of the object to start compilation; Determine the entry: Find all entry files according to the entry in the configuration; Compilation module: Starting from the entry file, call all configured Loaders to translate the module, then find the modules on which the module depends, and then recursively perform this step until all files on which the entry depends have gone through the processing of this step; Complete module compilation: After translating all modules using the Loader in the previous step, the final content of each module after translation and their dependency relationships are obtained; Output resources: According to the dependency relationships between the entry and the modules, assemble them into Chunks containing multiple modules, and then convert each Chunk into a separate file and add it to the output list; Output completion: After determining the output content, determine the output path and file name according to the configuration, write the file content to the file system, and generate a js file with the version number in the suffix.

6. A device for clearing page cache after front-end upgrade according to claim 4, characterized in that Version number query module: In valm-version.js, declare the webinfo variable and the webversion variable, and assign the module names and their version numbers for which the front-end needs to clear the cache; Trigger the defined initscript function, and store the declared module names and their version numbers for which the cache needs to be cleared in the cookie; In the initscript function, compare the module names and their version numbers for which the front-end needs to clear the cache stored in the cookie with the values of the webinfo and webversion variables in the declaration; If it is found that the declared module and its version number for which the cache needs to be cleared are inconsistent with those stored in the cookie, then use the loadjs function and the loadCss function to load js and css resources and render the page according to the declared module names and their version numbers for which the cache needs to be cleared.

7. A device for clearing page cache after front-end upgrade according to claim 4, characterized in that Render page module: Loading valm-vesion.js triggers the initscript function; Determine whether the module names and their version numbers that need to clear the cache stored in the cookie in the front end are consistent with the values of the webinfo and webversion variables in the declaration; If there is a change, that is, the data of the module that needs to clear the cache stored in the cookie is inconsistent with the values of the webinfo and webversion variables declared, then use the loadjs function and the loadCss function to load js and css resources and render the page according to the declared module names and their version numbers that need to clear the cache.

8. A storage medium, characterized in that, the storage medium stores a program for page loading that is exempt from manual cache clearing after front-end upgrade. When the CPU executes the program, it implements a method for clearing page cache after front-end upgrade as described in any one of claims 1-4.

Images