Method and device for cleaning react-redux cache

Abstract

The embodiments of this specification provide a method and device for cleaning react‑redux cache, wherein the method includes: traversing all modules under src, using jscodeshift+execa to parse all js files under the target path, parsing each js file to generate an ast syntax tree, parsing the ast syntax tree, and summarizing the cache usage of the entire project according to the parsing results; according to the cache usage, directly clearing the unused cache definition, and caching the cache that has been used less than a predetermined threshold in the state inside the module.

Description

Technical Field

[0001] This document relates to the field of computer technology, and in particular to a method and device for cleaning react-redux cache. Background Art

[0002] In the prior art, the specific method of cleaning the react-redux cache is to parse the code in the specified directory and rewrite the code that does not conform to antdv4.x into the writing style of antd4.x. However, due to the long-term evolution and iteration of the project, many useless cache definitions are retained in redux, and caches that are only used once in a certain module are copied multiple times in the multi-tab mode (because data isolation is required). This causes the browser to crash due to the surge in newly opened caches in the multi-tab mode. Summary of the invention

[0003] The purpose of the present invention is to provide a method and device for cleaning react-redux cache, aiming to solve the above-mentioned problems in the prior art.

[0004] The present invention provides a method for cleaning a react-redux cache, comprising:

[0005] Traverse all modules under src, use jscodeshift+execa to parse all js files under the target path, parse and generate an ast syntax tree for each js file, parse the ast syntax tree, and summarize the cache usage of the entire project according to the parsing results;

[0006] According to the cache usage, the unused cache definitions are directly cleared, and the caches with usage times less than the preset threshold are cached in the state inside the module.

[0007] The present invention provides a device for cleaning a react-redux cache, comprising:

[0008] The parsing module is used to traverse all modules under src, use jscodeshift+execa to parse all js files under the target path, parse each js file to generate an ast syntax tree, parse the ast syntax tree, and summarize the cache usage of the entire project according to the parsing results;

[0009] The cleanup module is used to directly clear the unused cache definitions according to the cache usage, and cache the caches with the number of uses less than the preset threshold in the state inside the module for caching.

[0010] An embodiment of the present invention further provides an electronic device, comprising: a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the computer program implements the steps of the above-mentioned method for clearing the react-redux cache when executed by the processor.

[0011] An embodiment of the present invention further provides a computer-readable storage medium, on which a program for implementing information transmission is stored, and when the program is executed by a processor, the steps of the method for clearing the react-redux cache are implemented.

[0012] According to the embodiment of the present invention, jscodeshift+execa is used to parse all js files under the target path, and an ast syntax tree is generated for each file. By customizing the parsing AST syntax tree, information can be collected, code can be changed, useless code can be deleted, and the application of jscodeshift+execa under the Dva framework can be used to achieve the purpose of cleaning models cache and code reconstruction, thereby achieving the cleaning of redundant objects defined in redux models. BRIEF DESCRIPTION OF THE DRAWINGS

[0013] In order to more clearly illustrate one or more embodiments of this specification or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments recorded in this specification. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative labor.

[0014] Figure 1 is a flowchart of a method for cleaning react-redux cache according to an embodiment of the present invention;

[0015] Figure 2 is a schematic diagram of a device for cleaning a react-redux cache according to an embodiment of the present invention;

[0016] Figure 3 is a schematic diagram of an electronic device according to an embodiment of the present invention. DETAILED DESCRIPTION

[0017] In order to enable those skilled in the art to better understand the technical solutions in one or more embodiments of this specification, the following will be combined with the drawings in one or more embodiments of this specification to clearly and completely describe the technical solutions in one or more embodiments of this specification. Obviously, the described embodiments are only part of the embodiments of this specification, not all of the embodiments. Based on one or more embodiments of this specification, all other embodiments obtained by ordinary technicians in this field without creative work should fall within the scope of protection of this document.

[0018] Method Embodiment

[0019] According to an embodiment of the present invention, a method for cleaning a react-redux cache is provided. Figure 1 is a flowchart of a method for cleaning react-redux cache according to an embodiment of the present invention, such as Figure 1 As shown, the method for cleaning the react-redux cache according to an embodiment of the present invention specifically includes:

[0020] Step S101, traverse all modules under src, use jscodeshift+execa to parse all js files under the target path, parse and generate an ast syntax tree for each js file, parse the ast syntax tree, and summarize the cache usage of the entire project according to the parsing results;

[0021] Among them, using jscodeshift+execa to parse all js files in the target path specifically includes:

[0022] Batch execution code parsing is performed through execa, js files are parsed into ast syntax trees through jscodeshift, and automated code refactoring is achieved by accessing and modifying AST APIs.

[0023] Parsing the AST syntax tree specifically includes:

[0024] For the modules under the src / models path, parse out the global cache information defined and the number of times the cache is used;

[0025] The corresponding figure is not in the src / models path. The module is parsed according to the specific structure to find out which global cache information the module uses and the number of times the cache is used.

[0026] Step S102, according to the cache usage, directly clear the unused cache definitions, and put the caches with the number of times used less than the predetermined threshold into the state inside the module for caching.

[0027] After performing the above processing, the method further includes:

[0028] Based on the summary results, clean up useless effects in src / models and useless interfaces in src / services;

[0029] Information statistics are performed based on the summary results.

[0030] In summary, the embodiment of the present invention uses jscodeshift+execa to perform parsing on all js files under the target path. An ast syntax tree is generated for each file parsing. By customizing the parsing of the AST syntax tree, information can be collected, code can be changed, useless code can be deleted, etc. This patent focuses on the application of jscodeshift+execa under the Dva framework to achieve the purpose of cleaning up the models cache and code refactoring. The cleaning of redundant objects defined in the redux models is realized. The embodiment of the present invention can be applied to all projects built with the Dva framework, or projects built using the react+react-redux technology stack. Solve the problem of excessive redux global cache or unreasonable cache settings. By counting the usage of each cache, the code is reconstructed and cleaned up in combination with the business scenario.

[0031] The above technical solution of the embodiment of the present invention is described below with reference to the accompanying drawings.

[0032] First, traverse all modules under src, generate an AST syntax tree, and then parse the syntax tree. There are two types of parsing. One is to parse the cache information defined by the module under the src / models path, and the other is to parse the files under the non-src / models path according to a specific structure to find out which caches the module uses. The parsing process is customizable, and the purpose is to summarize the cache usage of the entire project. There are two ways to deal with the summary results: 1. Clear the unused cache definitions directly. 2. Consider caching caches that have only been used 1 to 2 times in the state inside the module. Because in multi-tab mode, in order to isolate data, cache data will be stored in deep copy mode. The more caches there are, the larger the cache will be after opening a new tab.

[0033] In an embodiment of the present invention, execa is used to perform code parsing in batches. The project code is as large as 1200+ files, and 50 files are parsed in batches each time, which greatly improves the execution performance. Jscodeshift is a JavaScript / TypeScript refactoring tool based on the codemod concept. Its principle is to parse JS / TS code into an abstract syntax tree (AST) and provide a series of APIs for accessing and modifying AST to achieve automated code refactoring. It can be regarded as a runner that performs the provided conversion for each file passed to it and outputs statistical information on the number of files that have been (or have not) converted. The embodiment of the present invention uses the API for accessing AST provided by jscodeshift to collect two important information: which global cache information is defined and the number of caches used. Then clean up the global cache definitions that are not used, the global cache that is only used once, and move the global cache to the module cache that is specifically used.

[0034] First, get the global cache information. According to the Dva framework's concept of convention over configuration, all global caches are stored in the src / models directory. The files in this directory can be divided into multiple independent files according to business modules. Each file actually exports a data structure such as default{namespace:"",state:{},effects:{},reduces:{}}. The process is as follows:

[0035] 1. When scanning the file under this path, get the Identifier named "state" (letstateIdentifiers = root.find(j.Identifier,{name:"state"});), return an array named stateIdentifiers, and the first item in the array is the target object state.

[0036] 2. Next, get the properties in the state object: propertiesNodes = targetStates[0].parentPath.get("value").get("properties").value.

[0037] 3. Then obtain the module namespace attribute value as the key of the final statistical key-value pair.

[0038] 4. Get the properties from propertiesNodes by namespace and store them in the global object allModelsCache to build a data structure like {[namespace]:[props1,props2...]}

[0039] Loop through the above steps for each file under src / models to get all the cache information.

[0040] At the same time, get the cache usage. When using react-redux for global cache, each component module is connected to the global cache in the following way:

[0041] import{connect}from'dva';

[0042] const mapStateToProps=state=>({

[0043] empList:state.common_web.empList,

[0044] seaList:state.clueSea.seaList,

[0045] appList:state.appList

[0046] });

[0047] export default connect(mapStateToProps)(XxxComponent);

[0048] The following features can be seen: 1. Introduce connect from dva. 2. When using connect, the first parameter must be a function, and the first parameter of the function is the global state. 3. When counting usage, count the scenarios of state.xxx or state.xxx.xxx. If the usage of appList in the above example is state.xxx, it means that the cache of the entire appList model is used, and the usage of seaList is state.xxx.xxx, which means that only a cache in clueSea is used.

[0049] From the function body, we can parse which modules in the state are used. For example, in the above example, the cache in the common_web and clueSea modules in the global cache state is used, and the state cache of the entire namespace appList is used. The specific steps are as follows:

[0050] Define a global object modelCacheUseInfo = {}, whose data structure is {[namespace]:{xxx:num1,xxx:num2}}. Traverse all files and perform the following steps

[0051] 1. Check whether connect is imported from Dva, if not, return

[0052] 2. Determine whether the connect under Dva is called, locate the function body of the function, if no function is passed, return

[0053] 3. In the function body, use the API provided by jscodeshift to find the Identifier named "state" (letstateIdentifiers = root.find(j.Identifier,{name:"state"}); In this case, the parent node of state in the syntax tree is an object of type MemberExpression, and its property.name is the namespace we want.

[0054] 4. If the parent node of the parent node of state is also an object of type MemberExpression, its property.name is the specific cache under the namespace we want

[0055] 5. Record the usage of models cache by all state.xxx or state.xxx.xxx in modelCacheUseInfo. The count of those counted in modelCacheUseInfo is increased by original count+1, and the count of those not counted is set to 1

[0056] Repeat the above steps for each file to get all cache usage information.

[0057] After the above steps, we get two pieces of information: defined cache and cache usage. These two pieces of information are in two global objects: allModelsCache and modelCacheUseInfo. By writing a js script for cross-comparison, we can get which modules' caches are not used and which are only used once, so that we can get the required information.

[0058] In addition, in the embodiment of the present invention, useless effects in src / models and useless interfaces in src / services can also be removed. In addition, statistics can be performed, for example, statistics on the use of a certain react component, which fills the gap in the capabilities of IDEs such as vscode in this area. For example, component A has a parameter that must be passed, which helps with code review or code refactoring. When the upper layer calls component A, the parameter is not clear, and the missing of the required parameter will cause problems.

[0059] After executing the technical solution of the embodiment of the present invention, the entire project has 730+ caches and 270+ useless caches, and the caches are greatly reduced after cleaning.

[0060] Device Example 1

[0061] According to an embodiment of the present invention, a device for cleaning a react-redux cache is provided. Figure 2 is a schematic diagram of a device for cleaning react-redux cache according to an embodiment of the present invention, such as Figure 2 As shown, the device for cleaning the react-redux cache according to an embodiment of the present invention specifically includes:

[0062] The parsing module 30 traverses all modules under src, uses jscodeshift+execa to parse all js files under the target path, generates an ast syntax tree for each js file, parses the ast syntax tree, and summarizes the cache usage of the entire project according to the parsing results; the parsing module 30 is used to:

[0063] Batch execution code parsing is performed through execa, js files are parsed into ast syntax trees through jscodeshift, and automated code refactoring is achieved by accessing and modifying AST APIs.

[0064] For the modules under the src / models path, parse out the global cache information defined and the number of times the cache is used;

[0065] The corresponding figure is not in the src / models path. The module is parsed according to the specific structure to find out which global cache information the module uses and the number of times the cache is used.

[0066] The cleaning module 32 directly clears the unused cache definitions according to the cache usage, and puts the caches with the number of times used less than the predetermined threshold into the state inside the module for caching. The cleaning module 32 is used to:

[0067] According to the summary results, clean up useless effects in src / models and useless interfaces in src / services;

[0068] Information statistics are performed based on the summary results.

[0069] The embodiment of the present invention is a device embodiment corresponding to the above-mentioned method embodiment. The specific operations of each module can be understood by referring to the description of the method embodiment, which will not be repeated here.

[0070] Device Example 2

[0071] An embodiment of the present invention provides an electronic device, such as Figure 3 The method includes: a memory 40 and a processor 42 storing a computer program that can be executed in the memory 40 and the processor 42, and the computer program is executed by the processor 42 to implement the steps described in the method embodiment.

[0072] Device Example 3

[0073] An embodiment of the present invention provides a computer-readable storage medium, on which a program for implementing information transmission is stored. When the program is processed by a processor 42, the steps described in the method embodiment are implemented.

[0074] The computer-readable storage medium in this embodiment includes, but is not limited to, ROM, RAM, magnetic disk or optical disk, etc.

[0075] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit it. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or replace some or all of the technical features therein with equivalents. However, these modifications or replacements do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of the present invention.

Claims

1. A method for cleaning react-redux cache, characterized in that: include: Traverse all modules under src, use jscodeshift+execa to parse all js files under the target path, parse and generate an AST syntax tree for each js file, parse the AST syntax tree, and summarize the cache usage of the entire project according to the parsing results; wherein, using jscodeshift+execa to parse all js files under the target path specifically includes: batch execution code parsing through execa, parsing js files into AST syntax trees through jscodeshift, accessing and modifying AST APIs to achieve automatic code refactoring; parsing the AST syntax tree specifically includes: for modules under the src / models path, parse out the global cache information defined by the module and the number of times the cache is used; for modules under non-src / models paths, parse out which global cache information the module uses and the number of times the cache is used according to a specific structure; According to the cache usage, the unused cache definitions are directly cleared, and the caches with the number of times used less than a predetermined threshold are placed in the state inside the module for caching; the method further includes: according to the summary results, clearing useless effects in src / models and useless interfaces in src / services; and performing information statistics according to the summary results.

2. A device for cleaning react-redux cache, characterized in that: include: The parsing module is used to traverse all modules under src, use jscodeshift+execa to parse all js files under the target path, parse and generate an AST syntax tree for each js file, parse the AST syntax tree, and summarize the cache usage of the entire project according to the parsing results; the parsing module is specifically used for: Batch execution code parsing is performed through execa, js files are parsed into AST syntax trees through jscodeshift, and the API for accessing and modifying AST is used to achieve automated code refactoring; For the modules under the src / models path, parse out the global cache information defined by them and the number of times the cache is used; for the modules under the corresponding non-src / models path, parse out the global cache information used by the module and the number of times the cache is used according to the specific structure; The cleaning module is used to directly clear the unused cache definitions according to the cache usage, and put the caches with the number of times used less than the predetermined threshold into the state inside the module for caching; the cleaning module is further used to: According to the summary results, the useless effects in src / models and the useless interfaces in src / services are cleaned up; and information statistics are performed according to the summary results.

3. An electronic device, characterized in that: include: A memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the computer program is executed by the processor, the steps of the method for cleaning the react-redux cache as claimed in claim 1 are implemented.

4. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores an implementation program for information transmission, and when the program is executed by the processor, the steps of the method for clearing the react-redux cache as claimed in claim 1 are implemented.

Images