Methods, apparatus, electronic devices and storage media for handling redundant code

Abstract

This invention provides a method, apparatus, electronic device, and storage medium for processing redundant code. The method includes: acquiring target files, the target files including HTML type files and CSS type files; generating an abstract syntax tree corresponding to the target files based on the file content of the target files; determining a set of HTML style class names corresponding to the HTML type files and a set of CSS style class names corresponding to the CSS type files based on the abstract syntax trees corresponding to each target file; filtering style class names based on the set of HTML style class names and the set of CSS style class names to obtain a style class name deletion set; and deleting the CSS code corresponding to the style class name deletion set from the CSS type files.

Description

Technical Field

[0001] This invention relates to the field of front-end data processing technology, and in particular to a method for processing redundant code, a device for processing redundant code, an electronic device, and a computer-readable storage medium. Background Technology

[0002] With the increasing power of front-end technologies, more and more productivity is focused on quick-build UI (User Interface) frameworks. Quick-build UI frameworks typically refer to front-end design frameworks that have already encapsulated a large amount of common business logic and application scenarios. These frameworks, when applied to engineering development projects, can assist developers in rapid development, utilizing the UI visuals and logic assembly capabilities provided by the framework to complete the required business logic, thereby reducing development costs and time.

[0003] The UI frameworks are all developed based on visual design patterns, resulting in extensive use of visual design-related code. During development, developers consider all possible scenarios that might arise in conventional visual design, leading to a massive volume of CSS (Cascading Style Sheets) code in the final output. Furthermore, front-end projects with a significant user base often have long iteration cycles. This means that CSS code submissions may be made under pressure and without proper review. In such cases, it's unclear whether some code has been used after deployment, and it's impossible to detect CSS code usage through testing tools. Over time, this easily leads to redundant CSS code in the production environment. Summary of the Invention

[0004] The present invention provides a method, apparatus, electronic device, and computer-readable storage medium for processing redundant code, in order to solve or partially solve the problem of being unable to process invalid and redundant CSS code in front-end engineering projects.

[0005] This invention discloses a method for processing redundant code, including:

[0006] Obtain the target file, which includes HTML and CSS files;

[0007] Based on the content of the target file, generate an abstract syntax tree corresponding to the target file;

[0008] Based on the abstract syntax tree corresponding to each target file, determine the set of HTML style class names corresponding to the HTML type file and the set of CSS style class names corresponding to the CSS type file;

[0009] Based on the HTML style class name set and the CSS style class name set, filter the style class names to obtain the style class name deletion set;

[0010] Remove the CSS code corresponding to the style class name deletion collection from the CSS type file.

[0011] Optionally, the abstract syntax tree includes a first abstract syntax tree corresponding to the HTML type file and a second abstract syntax tree corresponding to the CSS type file. The step of determining the set of HTML style class names corresponding to the HTML type file and the set of CSS style class names corresponding to the CSS type file based on the abstract syntax trees corresponding to each target file includes:

[0012] Extract the node values ​​of attribute nodes from the first abstract syntax tree, and use the node values ​​of each attribute node to construct a set of HTML style class names corresponding to the HTML type file;

[0013] Extract the node information of the rule nodes from the second abstract syntax tree, and construct the set of CSS style class names corresponding to the CSS type file based on the node information of each rule node.

[0014] Optionally, the step of extracting the node values ​​of rule nodes from the second abstract syntax tree and constructing a set of CSS style class names corresponding to the CSS type file using the node values ​​of each rule node includes:

[0015] Traverse each rule node in the second abstract syntax tree and obtain the tag name of the tag in the rule node, and take the tag name that meets the preset name format as the target tag name;

[0016] Using the target tag name, construct the set of CSS style class names corresponding to the CSS type file.

[0017] Optionally, the step of filtering style class names based on the HTML style class name set and the CSS style class name set to obtain a style class name deletion set includes:

[0018] Determine the intersection of the HTML style class name set and the CSS style class name set;

[0019] The difference between the set of CSS style class names and the intersection is taken as the first style class name deletion set.

[0020] Optionally, the step of filtering style class names based on the HTML style class name set and the CSS style class name set to obtain a style class name deletion set further includes:

[0021] The difference between the set of HTML style class names and the intersection is taken as the style class name retention set.

[0022] Optionally, the step of filtering style class names based on the HTML style class name set and the CSS style class name set to obtain a style class name deletion set further includes:

[0023] Obtain the intersection and the target style class name in the style class name retention set;

[0024] Extract the first style class name that has the same class name as the target style class name from the first style class name deletion set, and obtain the regular expression for the first style class name;

[0025] The first style class name that satisfies the regular expression will be the second style class name that needs to be retained.

[0026] The difference between the first style class name deletion set and the second style class name is taken as the second style class name deletion set.

[0027] Optionally, deleting the CSS code corresponding to the style class name deletion collection from the CSS type file includes:

[0028] Find the target node corresponding to each style class name in the style class name deletion set from the second abstract syntax tree corresponding to the CSS type file, and delete the target node from the second abstract syntax tree to obtain the target abstract syntax tree;

[0029] Convert the target abstract syntax tree into a target CSS type file.

[0030] Optionally, obtaining the target file includes:

[0031] Obtain the front-end project file, which includes several preset files;

[0032] Obtain the file identification information of each preset file, and use the file identification information of each preset file as array elements to construct a file array corresponding to the front-end project file;

[0033] Iterate through the file array to obtain the file path corresponding to each array element;

[0034] Use array elements with file paths of type HTML or CSS as target array elements, and use the preset file corresponding to the target array element as the target file.

[0035] Optionally, the file identification information includes at least the file name and file extension, and the step of constructing a file array corresponding to the front-end project files by using the file identification information of each preset file as array elements includes:

[0036] The file names and file extensions of each of the preset files are used as array elements to construct a file array corresponding to the front-end project files.

[0037] Optionally, the file content includes the file code of the target file, and the step of generating an abstract syntax tree corresponding to the target file based on the file content of the target file includes:

[0038] The file code of each of the HTML type files is converted into a first abstract syntax tree, and the file code of each of the CSS type files is converted into a second abstract syntax tree.

[0039] This invention also discloses a redundant code processing apparatus, comprising:

[0040] The file acquisition module is used to acquire target files, including HTML files and CSS files;

[0041] The syntax tree generation module is used to generate an abstract syntax tree corresponding to the target file based on the file content of the target file;

[0042] The class name determination module is used to determine the set of HTML style class names corresponding to the HTML type file and the set of CSS style class names corresponding to the CSS type file based on the abstract syntax tree corresponding to each of the target files.

[0043] The class name set determination module is used to filter style class names based on the HTML style class name set and the CSS style class name set to obtain a style class name deletion set.

[0044] The code removal module is used to remove the CSS code corresponding to the style class name removal set from the CSS type file.

[0045] Optionally, the abstract syntax tree includes a first abstract syntax tree corresponding to the HTML type file and a second abstract syntax tree corresponding to the CSS type file, and the class name determination module is specifically used for:

[0046] Extract the node values ​​of attribute nodes from the first abstract syntax tree, and use the node values ​​of each attribute node to construct a set of HTML style class names corresponding to the HTML type file;

[0047] Extract the node information of the rule nodes from the second abstract syntax tree, and construct the set of CSS style class names corresponding to the CSS type file based on the node information of each rule node.

[0048] Optionally, the class name determination module is specifically used for:

[0049] Traverse each rule node in the second abstract syntax tree and obtain the tag name of the tag in the rule node, and take the tag name that meets the preset name format as the target tag name;

[0050] Using the target tag name, construct the set of CSS style class names corresponding to the CSS type file.

[0051] Optionally, the class name set determination module is specifically used for:

[0052] Determine the intersection of the HTML style class name set and the CSS style class name set;

[0053] The difference between the set of CSS style class names and the intersection is taken as the first style class name deletion set.

[0054] Optionally, the class name set determination module is further used for:

[0055] The difference between the set of HTML style class names and the intersection is taken as the style class name retention set.

[0056] Optionally, the class name set determination module is further used for:

[0057] Obtain the intersection and the target style class name in the style class name retention set;

[0058] Extract the first style class name that has the same class name as the target style class name from the first style class name deletion set, and obtain the regular expression for the first style class name;

[0059] The first style class name that satisfies the regular expression will be the second style class name that needs to be retained.

[0060] The difference between the first style class name deletion set and the second style class name is taken as the second style class name deletion set.

[0061] Optionally, the code deletion module is specifically used for:

[0062] Find the target node corresponding to each style class name in the style class name deletion set from the second abstract syntax tree corresponding to the CSS type file, and delete the target node from the second abstract syntax tree to obtain the target abstract syntax tree;

[0063] Convert the target abstract syntax tree into a target CSS type file.

[0064] Optionally, the file acquisition module is specifically used for:

[0065] Obtain the front-end project file, which includes several preset files;

[0066] Obtain the file identification information of each preset file, and use the file identification information of each preset file as array elements to construct a file array corresponding to the front-end project file;

[0067] Iterate through the file array to obtain the file path corresponding to each array element;

[0068] Use array elements with file paths of type HTML or CSS as target array elements, and use the preset file corresponding to the target array element as the target file.

[0069] Optionally, the file identification information includes at least the file name and the file extension, and the file acquisition module is specifically used for:

[0070] The file names and file extensions of each of the preset files are used as array elements to construct a file array corresponding to the front-end project files.

[0071] Optionally, the file content includes the file code of the target file, and the syntax tree generation module is specifically used for:

[0072] The file code of each of the HTML type files is converted into a first abstract syntax tree, and the file code of each of the CSS type files is converted into a second abstract syntax tree.

[0073] This invention also discloses an electronic device, including a processor, a communication interface, a memory, and a communication bus, wherein the processor, the communication interface, and the memory communicate with each other through the communication bus;

[0074] The memory is used to store computer programs;

[0075] When the processor executes a program stored in the memory, it implements the method described in the embodiments of the present invention.

[0076] This invention also discloses a computer-readable storage medium storing instructions that, when executed by one or more processors, cause the processors to perform the methods described in this invention.

[0077] The embodiments of the present invention have the following advantages:

[0078] In this embodiment of the invention, for redundant code in front-end project files, especially redundant CSS code, the following can be achieved: Target files such as HTML and CSS type files can be obtained from the front-end project files. Then, based on the content of the target files, an abstract syntax tree (AST) can be generated corresponding to each target file. Based on the AST of each target file, the set of HTML style class names corresponding to the HTML type files and the set of CSS style class names corresponding to the CSS type files can be determined. Then, style class name filtering can be performed based on these two sets of style class names to obtain a style class name deletion set. Finally, the CSS code corresponding to the style class name deletion set is deleted from the CSS type files. Thus, by comparing the style class names corresponding to the HTML and CSS type files in the front-end project files, redundant code in CSS type files can be deleted based on the HTML structure. On the one hand, deletion based on HTML type files can ensure the accuracy of code deletion to a large extent, preventing accidental or missed deletions. On the other hand, code processing at the code level does not modify the source code and does not generate new files, effectively reducing redundant junk files during the processing and possessing non-intrusive characteristics. Attached Figure Description

[0079] Figure 1 This is a flowchart of the steps of a method for processing redundant code provided in an embodiment of the present invention;

[0080] Figure 2 This is a structural block diagram of a redundant code processing device provided in an embodiment of the present invention;

[0081] Figure 3 This is a block diagram of an electronic device provided in an embodiment of the present invention;

[0082] Figure 4 This is a schematic diagram of a computer-readable medium provided in an embodiment of the present invention. Detailed Implementation

[0083] To make the above-mentioned objects, features and advantages of the present invention more apparent and understandable, the present invention will be further described in detail below with reference to the accompanying drawings and specific embodiments.

[0084] As an example, UI frameworks are typically developed based on visual design patterns, heavily utilizing visual design-related code. During development, developers consider all possible scenarios for conventional visual design, resulting in a massive volume of CSS (Cascading Style Sheets) code in the final output. Furthermore, front-end projects with a significant user base often have long iteration cycles. This means that CSS code submissions may be made under pressure and without proper review. In such cases, it's unclear whether some code is actually used after deployment, and it's impossible to detect CSS usage through testing tools. Over time, this easily leads to redundant CSS code in the production environment. Moreover, developers' enthusiasm for maintaining older front-end projects decreases significantly. Since visual styles and business logic are carried by different code, when deleting certain features, only the business logic-related code is removed, while the visual style CSS code remains. This is due to the general lack of attention paid to CSS code in the front-end development field, leading to a large accumulation of CSS code and further exacerbating code redundancy in front-end project files.

[0085] However, simply leaving code unprocessed does not mean there are no production risks. If redundant CSS code is not addressed, it can easily lead to the following problems:

[0086] 1. Due to the lack of standardized handling measures, redundant CSS code can easily accumulate. Each time the project is bundled, it increases the time the script spends processing the CSS code at the underlying level, thereby extending the overall bundling time and increasing the overall size of the bundled project.

[0087] 2. When accessing a page, the browser will not withhold these CSS codes just because they are not used. Instead, it will load and parse them directly, and then set them aside. The browser will determine whether to use the CSS code based on whether there is a matching HTML structure on the page.

[0088] 3. For front-end project files, if the CSS code added in subsequent iterations is named using some common words, it is easy to conflict with the existing but unused CSS code. Since CSS itself has priority calculation, if the priority of the early deprecated CSS code is higher than the priority of the newly added CSS code, the old code will cover the new code, resulting in the visual design style of the new requirement being displayed on the webpage in a way that deviates from the ideal visual experience.

[0089] 4. A front-end project typically has a lifecycle. When the original architecture can no longer meet the needs of subsequent expansion due to development, it may enter the refactoring phase prematurely. In the early stages of the refactoring phase, it is necessary to partially read the source code and break down the requirements. Excessive CSS code can easily affect the developer's judgment and even affect the reconstruction of the page's visuals, potentially leading to the overlap of old and new visual designs.

[0090] Based on the problems caused by redundant CSS code mentioned above, a method is needed to comprehensively and accurately delete invalid and redundant CSS code in front-end project files in order to avoid related problems.

[0091] One of the core inventive points of this invention lies in the fact that during the development phase of the front-end project files, target files such as HTML and CSS type files are obtained. Then, based on the content of the target files, an abstract syntax tree (AST) is generated corresponding to each target file. Based on the AST of each target file, the sets of HTML style class names corresponding to the HTML type files and the sets of CSS style class names corresponding to the CSS type files are determined. Then, style class name filtering is performed based on these two sets of style class names to obtain a style class name deletion set. Finally, the CSS code corresponding to the style class name deletion set is deleted from the CSS type files. Thus, by comparing the style class names corresponding to the HTML and CSS type files in the front-end project files, redundant code in the CSS type files is deleted based on the HTML structure. On the one hand, deletion is based on HTML type files, which not only ensures the accuracy of code deletion to a large extent and prevents accidental or missed deletions, but also, by processing code at the code level, it does not modify the source code and does not generate new files, effectively reducing redundant junk files during the processing and possessing a non-intrusive characteristic.

[0092] Specifically, refer to Figure 1 The diagram illustrates a flowchart of a method for processing redundant code according to an embodiment of the present invention, which may specifically include the following steps:

[0093] Step 101: Obtain the target file, which includes HTML files and CSS files;

[0094] HTML and CSS files are files used to configure the display style of front-end interactive pages. For example, images and objects can be embedded in HTML files, and interactive forms can be created. CSS files can also be used to statically modify the page, or to dynamically format various page elements in conjunction with various scripting languages. Thus, the style of the page can be configured through HTML and CSS files.

[0095] In this embodiment of the invention, during the process of deleting redundant CSS code from the front-end project file, it is necessary to first locate the style-related files in the front-end project file, including HTML files and CSS files, so that the style code involved in the CSS files can be deleted based on the HTML files. Specifically, the front-end project file can be obtained first, which includes several preset files of different types. Then, the file identification information of each preset file can be obtained, and the file identification information of each preset file can be used as array elements to construct a file array corresponding to the front-end project file. Then, the file array is traversed to obtain the file path corresponding to each array element, and the array element whose file path is of type HTML or CSS is used as the target array element, and the preset file corresponding to the target array element is used as the target file.

[0096] Optionally, the front-end project file can correspond to a specific front-end interactive page. This front-end project file may include style files (such as HTML and CSS files) used to configure the page's display style, as well as other preset files (such as static resource files). Style files can be retrieved from the front-end project file using appropriate methods to remove redundant code. The file identification information for the preset files can include the file name and file extension. The file name identifies the preset file, and the file extension indicates how to open it. The file names and extensions of each preset file can be used as array elements to construct a file array corresponding to the front-end project file. Then, the file data is traversed, and the file paths corresponding to each preset file are obtained through the file identifiers. The file types are then determined based on the file paths to identify whether the file is HTML or CSS, thus locating HTML and CSS files within the front-end project file.

[0097] Step 102: Generate an abstract syntax tree corresponding to the target file based on the file content of the target file;

[0098] In a practical implementation, the content of the target file can include file code. Then, a transpile can be used to convert HTML type files and CSS type files into corresponding abstract syntax trees. This includes converting the file code of each HTML type file into a first abstract syntax tree and the file code of each CSS type file into a second abstract syntax tree, so that the style class name of the page can be determined in the abstract syntax tree.

[0099] In practical implementation, HTML files can include html files, pug files, etc., and CSS files can include CSS files, SASS files, SCSS files, LESS files, etc. When locating HTML and CSS files in the front-end project files, the readdir function of the Fs module in NodeJS can be used to scan the HTML and CSS files in the source code of the front-end project files. During the scanning process, the file names and file extensions of the traversed files can be used to construct a corresponding array, which is marked as array L. Then, the HTML and CSS files can be located by traversing L.

[0100] Specifically, the `readdir` function can traverse the folders corresponding to the front-end project files. Each time a file is encountered, it returns an object providing information such as the filename and file extension. Then, a corresponding file array can be constructed based on the filename and extension. Next, the array elements in the file array `L` are traversed, and it is determined whether the file path corresponding to each array element is an HTML or CSS file. If the file path is an HTML or CSS file, the `readFile` function of NodeJS's `Fs` module can be used to obtain the file content. An AST transpiler (Babel / PostCSS) is then used to parse the file content and generate the corresponding AST (Abstract Syntax Tree), thus obtaining the first abstract syntax tree for HTML files and the second abstract syntax tree for CSS files.

[0101] Optionally, Babel can be used to transpile HTML files, and PostCSS can be used to transpile CSS files; this invention does not limit this.

[0102] Step 103: Based on the abstract syntax tree corresponding to each target file, determine the set of HTML style class names corresponding to the HTML type file and the set of CSS style class names corresponding to the CSS type file;

[0103] Because of the different file types, the first abstract syntax tree corresponding to an HTML file and the second abstract syntax tree corresponding to a CSS file contain different node contents. Therefore, it is necessary to extract information related to display styles from the corresponding abstract syntax trees in different ways to determine the style class name from the abstract syntax trees.

[0104] Specifically, for the first abstract syntax tree, the node values ​​of attribute nodes can be extracted from the first abstract syntax tree, and the set of HTML style class names corresponding to the HTML type file can be constructed using the node values ​​of each attribute node. For the second abstract syntax tree, the node information of rule nodes can be extracted from the second abstract syntax tree, and the set of CSS style class names corresponding to the CSS type file can be constructed based on the node information of each rule node. Optionally, for the second abstract syntax tree, each rule node in the second abstract syntax tree can be traversed, and the tag names of the tags in the rule nodes can be obtained. Tag names that meet the preset name format can be used as target tag names. Then, the set of CSS style class names corresponding to the CSS type file can be constructed using the target tag names. Thus, by reading the node information of the nodes associated with the display style in the abstract syntax tree and constructing the corresponding set of style class names based on the node information, the set of CSS style class names can be filtered based on the set of HTML style class names to determine redundant style class names.

[0105] Specifically, the attribute nodes in the first abstract syntax tree can be used to represent the attributes and attribute values ​​on the node. For example, they can be used to represent the attributes and attribute values ​​of an object on the page. The rule nodes in the second abstract syntax tree can be used to represent CSS rules. The node information of the rule node can correspond to the rule name, such as the class name corresponding to class or id.

[0106] Optionally, the style class name can be either a class name or an id name. Both can be used to define the styles of various nodes in the HTML structure. The id is unique, and each id can only appear once; the class is reusable, and the same class can appear multiple times. After the HTML structure is defined by the id and class, the corresponding CSS rules defined by the id and class can be found in all CSS type files during parsing to render the HTML nodes. Thus, this invention can filter the style class names of CSS files based on the HTML structure, filtering out invalid and redundant style class names so that the CSS code corresponding to the style class names can be deleted.

[0107] In one example, taking class as an example (the processing of id is the same, and the two can be referenced by each other), two arrays can be created in advance to store class names (i.e. style class names). The array storing the class names of HTML type files is labeled A, and the array storing the class names of CSS type files is labeled B. Then, for HTML type files, all TextAttribute nodes (i.e. attribute nodes) with the name "class" in the first abstract syntax tree can be found by traversing and reading the value of the node (i.e. attribute value). This value is then appended to A to obtain the set of HTML style class names. For example, after traversing the first abstract syntax tree, A can be ["title","desc","mark"]. For CSS type files, all CSSStyleRule nodes (i.e., rule nodes) in the second abstract syntax tree can be traversed to find them. The value of the selectorText of each node (i.e., node information) can be read. If the value conforms to the format ".xxx" (i.e., the default format), the value is appended to B. For example, after traversing the second abstract syntax tree, B can be [".title",".desc",".tag"]. Then, the "." in each class name can be removed to get a new B of ["title","desc","tag"]. Furthermore, for the HTML style class name set and the CSS style class name set, processing can be divided into development and deployment phases. In both phases, all ids and classes can be extracted based on the static characteristics between the HTML and CSS code. This allows the set of style class names associated with the style to be extracted from the abstract syntax tree corresponding to the HTML or CSS type file, so that the style code corresponding to the CSS can be processed based on the comparison results between the two.

[0108] Step 104: Filter style class names based on the HTML style class name set and the CSS style class name set to obtain a style class name deletion set;

[0109] In practical implementation, the HTML style class name set can be used as a basis to filter the CSS style class name set. That is, the style class names in the HTML style class name set are the style class names that need to be kept, while some of the CSS style class names need to be kept and some need to be deleted. By comparing the two, the set of style class names to be deleted from the CSS file can be determined. The style class names are extracted based on the static characteristics of the HTML and CSS code, and then the code is deleted based on the extracted style class names. This can ensure the accuracy of code deletion while preventing accidental or missed deletion of CSS code.

[0110] In one alternative embodiment, the intersection of the HTML style class name set and the CSS style class name set can be determined first. Then, the difference between the CSS style class name set and the intersection can be used as the first style class name deletion set, while the difference between the HTML style class name set and the intersection can be used as the style class name retention set. For example, assuming the HTML style class name set is A["title","desc","mark"] and the CSS style class name set is B["title","desc","tag"], the intersection X["title","desc"] can be taken, indicating that these class names exist in both HTML and CSS and need to be retained. Then, the difference Y["mark"] between A and X can be taken, indicating that these class names exist in HTML but not in CSS and need to be retained. Finally, the difference Z["tag"] between B and X can be taken, indicating that these class names exist in CSS but not in HTML and need to be removed. Through the above process, the first style class name deletion set Z can be obtained, so that the code corresponding to the style class names involved in this set can be deleted.

[0111] In another optional embodiment, based on the first style class name deletion set mentioned above, the target style class name in the intersection and style class name retention set can also be obtained. Then, the first style class name that has the same class name as the target style class name is extracted from the first style class name deletion set, and the regular expression for the first style class name is obtained. The first style class name that satisfies the regular expression is taken as the second style class name to be retained, and the difference between the first style class name deletion set and the second style class name is taken as the second style class name deletion set. The target style class name can include style class names that exist in both the HTML style class name set and the CSS style class name set, as well as style class names in the retention set that need to be retained. If there are some style class names that are the same in both sets, these style class names can be grouped into a target set. Then, the target set can be traversed to check if there is a first style class name that has the same class name as the first style class name in the deletion set. If it exists, the class name of the first style class name can be obtained, and the class name of the first style class name can be judged based on the setted regular expression to determine whether it meets the corresponding format conditions. If it does, it indicates that the first style class name is a class name that needs to be retained and will not be processed during the deletion of CSS code to avoid accidental deletion of CSS code.

[0112] It should be noted that in some HTML structures, certain class names are declared in advance, but their use is selective depending on the usage scenario. In the previous embodiment, these class names might be mistakenly deleted because they don't yet appear in the static HTML. For example, using the above process, if .desc-1, .desc-2, or .desc-3 are dynamically added to .desc based on different scenarios, these class names represent different text colors for .desc. The corresponding HTML and CSS could be: .desc.desc-1, .desc.desc-2, .desc.desc-3. In CSS rules, the .classA.classB format indicates that the HTML element has both classA and classB. The later the class name appears, the higher its weight; therefore, properties with the same classA and classB will take precedence over those with classB. Since class B is only inserted into HTML elements after a certain condition is met, and the HTML structure in the previous step was in a statically initialized state, the condition was definitely not met, so class B will be excluded. That is, class names like .desc.desc-1, .desc.desc-2, and .desc.desc-3 will be considered useless class names. Therefore, all class names of the form class B need to be retained based on class A.

[0113] Specifically, for the intersection of the HTML style class name set and the CSS style class name set, and the target style class names in the style class name retention set, we can iterate through these target style class names and filter out the class names in the first style class name deletion set that conform to the form .classA.classB. Here, classA must be a class name inside the target style class name. Of course, .classA.classB.classC... also conforms to the form .classA.classB. We use the regular expression / ^classA\. / g to check if .classA.classB starts with classA and is connected by "." to form a new set. The union of this new set and the target style class names can be the style class names that need to be retained. The difference between this new set and the first style class name deletion set is the second style class name deletion set. The code corresponding to the style class names in this set is the code that needs to be deleted.

[0114] In one example, X and Y contain class names that need to be retained in CSS. Merging and deduplicating them yields a set J["title","desc","tag"] containing the target style class names. Z contains class names that need to be removed. We can iterate through J and filter out class names in Z that conform to the form .classA.classB, where classA must be a class name in J. Of course, .classA.classB.classC... also conforms to the form .classA.classB. We use the regular expression / ^classA\. / g to check if .classA.classB starts with classA and is connected by a ".". The filtered class names are then grouped into a new set K["title","desc","tag"]. If we have ["desc-1","desc-2","desc-3"], then the union of J and K, M["title","desc","tag","desc-1","desc-2","desc-3"], represents all the CSS codes that need to be retained. The difference between Z["tag"] and K["desc-1","desc-2","desc-3"], N["tag"], represents all the class names that need to be deleted. This allows us to delete the corresponding CSS code based on the class name, avoiding potential omissions during manual CSS code lookup. Furthermore, by statically analyzing the code files and deleting redundant CSS code based on code characteristics, we can ensure the accuracy of code deletion while preventing accidental or missed deletions.

[0115] Step 105: Delete the CSS code corresponding to the style class name deletion collection from the CSS type file.

[0116] In practice, once the set of style class names to be deleted is determined, the code corresponding to the style class names can be deleted from the corresponding CSS file. This achieves the deletion of redundant code in CSS type files based on the HTML structure. On the one hand, deleting based on HTML type files can not only ensure the accuracy of code deletion to a large extent and prevent accidental or missed deletion of code, but also process the code at the code level without modifying the source code and without generating new files, effectively reducing the redundancy of junk files during the processing and possessing non-intrusive characteristics.

[0117] Specifically, you can first find the target nodes corresponding to each style class name in the style class name deletion set in the second abstract syntax tree (BAST) of the CSS type file, and then delete the target nodes from the BAST to obtain the target BAST. Then, convert the target BAST into the target CSS type file. For example, you can re-traverse the BAST of all CSS files, find all CSSStyleRule nodes with selectorText value 'tag' in the BAST, and delete them. After completing the traversal and converting the BAST, you can use PostCSS to convert it into an output content string, and then use the `writeFileSync` function of Node.js's `fs` module to convert the content string into a new CSS file. This file will ultimately contain only the class names that appear in the HTML structure.

[0118] It should be noted that the embodiments of the present invention include, but are not limited to, the examples described above. It is understood that those skilled in the art can make further settings according to actual needs under the guidance of the ideas in the embodiments of the present invention, and the present invention does not limit such settings.

[0119] In this embodiment of the invention, for redundant code in front-end project files, especially redundant CSS code, the following can be achieved: Target files such as HTML and CSS type files can be obtained from the front-end project files. Then, based on the content of the target files, an abstract syntax tree (AST) can be generated corresponding to each target file. Based on the AST of each target file, the set of HTML style class names corresponding to the HTML type files and the set of CSS style class names corresponding to the CSS type files can be determined. Then, style class name filtering can be performed based on these two sets of style class names to obtain a style class name deletion set. Finally, the CSS code corresponding to the style class name deletion set is deleted from the CSS type files. Thus, by comparing the style class names corresponding to the HTML and CSS type files in the front-end project files, redundant code in CSS type files can be deleted based on the HTML structure. On the one hand, deletion based on HTML type files can ensure the accuracy of code deletion to a large extent, preventing accidental or missed deletions. On the other hand, code processing at the code level does not modify the source code and does not generate new files, effectively reducing redundant junk files during the processing and possessing non-intrusive characteristics.

[0120] It should be noted that, for the sake of simplicity, the method embodiments are all described as a series of actions. However, those skilled in the art should understand that the embodiments of the present invention are not limited to the described order of actions, because according to the embodiments of the present invention, some steps can be performed in other orders or simultaneously. Furthermore, those skilled in the art should also understand that the embodiments described in the specification are preferred embodiments, and the actions involved are not necessarily essential to the embodiments of the present invention.

[0121] Reference Figure 2 The diagram illustrates a structural block diagram of a redundant code processing device provided in an embodiment of the present invention, which may specifically include the following modules:

[0122] File acquisition module 201 is used to acquire target files, including HTML type files and CSS type files;

[0123] The syntax tree generation module 202 is used to generate an abstract syntax tree corresponding to the target file based on the file content of the target file;

[0124] The class name determination module 203 is used to determine the set of HTML style class names corresponding to the HTML type file and the set of CSS style class names corresponding to the CSS type file based on the abstract syntax tree corresponding to each of the target files.

[0125] The class name set determination module 204 is used to filter style class names based on the HTML style class name set and the CSS style class name set to obtain a style class name deletion set.

[0126] The code deletion module 205 is used to delete the CSS code corresponding to the style class name deletion collection from the CSS type file.

[0127] In one optional embodiment, the abstract syntax tree includes a first abstract syntax tree corresponding to the HTML type file and a second abstract syntax tree corresponding to the CSS type file, and the class name determination module 203 is specifically used for:

[0128] Extract the node values ​​of attribute nodes from the first abstract syntax tree, and use the node values ​​of each attribute node to construct a set of HTML style class names corresponding to the HTML type file;

[0129] Extract the node information of the rule nodes from the second abstract syntax tree, and construct the set of CSS style class names corresponding to the CSS type file based on the node information of each rule node.

[0130] In one optional embodiment, the class name determination module 203 is specifically used for:

[0131] Traverse each rule node in the second abstract syntax tree and obtain the tag name of the tag in the rule node, and take the tag name that meets the preset name format as the target tag name;

[0132] Using the target tag name, construct the set of CSS style class names corresponding to the CSS type file.

[0133] In one optional embodiment, the class name set determination module 204 is specifically used for:

[0134] Determine the intersection of the HTML style class name set and the CSS style class name set;

[0135] The difference between the set of CSS style class names and the intersection is taken as the first style class name deletion set.

[0136] In an optional embodiment, the class name set determination module 204 is further configured to:

[0137] The difference between the set of HTML style class names and the intersection is taken as the style class name retention set.

[0138] In an optional embodiment, the class name set determination module 204 is further configured to:

[0139] Obtain the intersection and the target style class name in the style class name retention set;

[0140] Extract the first style class name that has the same class name as the target style class name from the first style class name deletion set, and obtain the regular expression for the first style class name;

[0141] The first style class name that satisfies the regular expression will be the second style class name that needs to be retained.

[0142] The difference between the first style class name deletion set and the second style class name is taken as the second style class name deletion set.

[0143] In one optional embodiment, the code removal module 205 is specifically used for:

[0144] Find the target node corresponding to each style class name in the style class name deletion set from the second abstract syntax tree corresponding to the CSS type file, and delete the target node from the second abstract syntax tree to obtain the target abstract syntax tree;

[0145] Convert the target abstract syntax tree into a target CSS type file.

[0146] In one optional embodiment, the file acquisition module 201 is specifically used for:

[0147] Obtain the front-end project file, which includes several preset files;

[0148] Obtain the file identification information of each preset file, and use the file identification information of each preset file as array elements to construct a file array corresponding to the front-end project file;

[0149] Iterate through the file array to obtain the file path corresponding to each array element;

[0150] Use array elements with file paths of type HTML or CSS as target array elements, and use the preset file corresponding to the target array element as the target file.

[0151] In one optional embodiment, the file identification information includes at least the file name and the file extension, and the file acquisition module 201 is specifically used for:

[0152] The file names and file extensions of each of the preset files are used as array elements to construct a file array corresponding to the front-end project files.

[0153] In one optional embodiment, the file content includes the file code of the target file, and the syntax tree generation module 202 is specifically used for:

[0154] The file code of each of the HTML type files is converted into a first abstract syntax tree, and the file code of each of the CSS type files is converted into a second abstract syntax tree.

[0155] As the device embodiment is basically similar to the method embodiment, the description is relatively simple, and relevant parts can be found in the description of the method embodiment.

[0156] In addition, embodiments of the present invention also provide an electronic device, such as... Figure 3 As shown, it includes a processor 301, a communication interface 302, a memory 303, and a communication bus 304, wherein the processor 301, the communication interface 302, and the memory 303 communicate with each other through the communication bus 304.

[0157] Memory 303 is used to store computer programs;

[0158] When processor 301 executes a program stored in memory 303, it performs the following steps:

[0159] Obtain the target file, which includes HTML and CSS files;

[0160] Based on the content of the target file, generate an abstract syntax tree corresponding to the target file;

[0161] Based on the abstract syntax tree corresponding to each target file, determine the set of HTML style class names corresponding to the HTML type file and the set of CSS style class names corresponding to the CSS type file;

[0162] Based on the HTML style class name set and the CSS style class name set, filter the style class names to obtain the style class name deletion set;

[0163] Remove the CSS code corresponding to the style class name deletion collection from the CSS type file.

[0164] In one optional embodiment, the abstract syntax tree includes a first abstract syntax tree corresponding to the HTML type file and a second abstract syntax tree corresponding to the CSS type file. The step of determining the set of HTML style class names corresponding to the HTML type file and the set of CSS style class names corresponding to the CSS type file based on the abstract syntax trees corresponding to each target file includes:

[0165] Extract the node values ​​of attribute nodes from the first abstract syntax tree, and use the node values ​​of each attribute node to construct a set of HTML style class names corresponding to the HTML type file;

[0166] Extract the node information of the rule nodes from the second abstract syntax tree, and construct the set of CSS style class names corresponding to the CSS type file based on the node information of each rule node.

[0167] In one optional embodiment, the step of extracting the node values ​​of rule nodes from the second abstract syntax tree and constructing a set of CSS style class names corresponding to the CSS type file using the node values ​​of each rule node includes:

[0168] Traverse each rule node in the second abstract syntax tree and obtain the tag name of the tag in the rule node, and take the tag name that meets the preset name format as the target tag name;

[0169] Using the target tag name, construct the set of CSS style class names corresponding to the CSS type file.

[0170] In one optional embodiment, the step of filtering style class names based on the HTML style class name set and the CSS style class name set to obtain a style class name deletion set includes:

[0171] Determine the intersection of the HTML style class name set and the CSS style class name set;

[0172] The difference between the set of CSS style class names and the intersection is taken as the first style class name deletion set.

[0173] In one optional embodiment, the step of filtering style class names based on the HTML style class name set and the CSS style class name set to obtain a style class name deletion set further includes:

[0174] The difference between the set of HTML style class names and the intersection is taken as the style class name retention set.

[0175] In one optional embodiment, the step of filtering style class names based on the HTML style class name set and the CSS style class name set to obtain a style class name deletion set further includes:

[0176] Obtain the intersection and the target style class name in the style class name retention set;

[0177] Extract the first style class name that has the same class name as the target style class name from the first style class name deletion set, and obtain the regular expression for the first style class name;

[0178] The first style class name that satisfies the regular expression will be the second style class name that needs to be retained.

[0179] The difference between the first style class name deletion set and the second style class name is taken as the second style class name deletion set.

[0180] In one optional embodiment, deleting the CSS code corresponding to the style class name deletion set from the CSS type file includes:

[0181] Find the target node corresponding to each style class name in the style class name deletion set from the second abstract syntax tree corresponding to the CSS type file, and delete the target node from the second abstract syntax tree to obtain the target abstract syntax tree;

[0182] Convert the target abstract syntax tree into a target CSS type file.

[0183] In one optional embodiment, obtaining the target file includes:

[0184] Obtain the front-end project file, which includes several preset files;

[0185] Obtain the file identification information of each preset file, and use the file identification information of each preset file as array elements to construct a file array corresponding to the front-end project file;

[0186] Iterate through the file array to obtain the file path corresponding to each array element;

[0187] Use array elements with file paths of type HTML or CSS as target array elements, and use the preset file corresponding to the target array element as the target file.

[0188] In one optional embodiment, the file identification information includes at least the file name and the file extension, and the step of constructing a file array corresponding to the front-end project files by using the file identification information of each preset file as array elements includes:

[0189] The file names and file extensions of each of the preset files are used as array elements to construct a file array corresponding to the front-end project files.

[0190] In one optional embodiment, the file content includes the file code of the target file, and the step of generating an abstract syntax tree corresponding to the target file based on the file content of the target file includes:

[0191] The file code of each of the HTML type files is converted into a first abstract syntax tree, and the file code of each of the CSS type files is converted into a second abstract syntax tree.

[0192] The communication bus mentioned above can be a Peripheral Component Interconnect (PCI) bus or an Extended Industry Standard Architecture (EISA) bus, etc. This communication bus can be divided into address bus, data bus, control bus, etc. For ease of illustration, only one thick line is used to represent it in the diagram, but this does not mean that there is only one bus or one type of bus.

[0193] The communication interface is used for communication between the aforementioned terminal and other devices.

[0194] The memory may include random access memory (RAM) or non-volatile memory, such as at least one disk storage device. Optionally, the memory may also be at least one storage device located remotely from the aforementioned processor.

[0195] The processors mentioned above can be general-purpose processors, including central processing units (CPUs), network processors (NPs), etc.; they can also be digital signal processors (DSPs), application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components.

[0196] like Figure 4 As shown, in another embodiment of the present invention, a computer-readable storage medium 401 is also provided, which stores instructions that, when run on a computer, cause the computer to execute the redundant code processing method described in the above embodiments.

[0197] In another embodiment of the present invention, a computer program product containing instructions is also provided, which, when run on a computer, causes the computer to execute the method for processing redundant code described in the above embodiments.

[0198] In the above embodiments, implementation can be achieved entirely or partially through software, hardware, firmware, or any combination thereof. When implemented using software, it can be implemented entirely or partially in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, all or part of the processes or functions described in the embodiments of the present invention are generated. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions can be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, the computer instructions can be transmitted from one website, computer, server, or data center to another website, computer, server, or data center via wired (e.g., coaxial cable, fiber optic, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) means. The computer-readable storage medium can be any available medium that a computer can access or a data storage device such as a server or data center that integrates one or more available media. The available medium can be a magnetic medium (e.g., floppy disk, hard disk, magnetic tape), an optical medium (e.g., DVD), or a semiconductor medium (e.g., solid state disk (SSD)).

[0199] It should be noted that, in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

[0200] The various embodiments in this specification are described in a related manner. Similar or identical parts between embodiments can be referred to mutually. Each embodiment focuses on describing the differences from other embodiments. In particular, the system embodiments are basically similar to the method embodiments, so the description is relatively simple; relevant parts can be referred to the descriptions of the method embodiments.

[0201] The above description is merely a preferred embodiment of the present invention and is not intended to limit the scope of protection of the present invention. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of the present invention are included within the scope of protection of the present invention.

Claims

1. A method for processing redundant code, characterized in that, include: Obtain the target files, which include HTML and CSS files in the front-end project files; Based on the content of the target file, generate an abstract syntax tree corresponding to the target file; The abstract syntax tree includes a first abstract syntax tree corresponding to the HTML type file and a second abstract syntax tree corresponding to the CSS type file; Extract the node values ​​of attribute nodes from the first abstract syntax tree, and use the node values ​​of each attribute node to construct a set of HTML style class names corresponding to the HTML type file; Traverse each rule node in the second abstract syntax tree and obtain the tag name of the tag in the rule node, and take the tag name that meets the preset name format as the target tag name; Using the target tag name, construct a set of CSS style class names corresponding to the CSS type file; Determine the intersection of the HTML style class name set and the CSS style class name set; The difference between the set of CSS style class names and the intersection is taken as the first style class name deletion set; The difference between the set of HTML style class names and the intersection is taken as the style class name retention set; Obtain the intersection and the target style class name in the style class name retention set; Extract the first style class name that has the same class name as the target style class name from the first style class name deletion set, and obtain the regular expression for the first style class name; The first style class name that satisfies the regular expression will be the second style class name that needs to be retained. The union of the second style class name and the target style class name is taken as the target style class name retention set to be retained. The difference between the first style class name deletion set and the second style class name is taken as the second style class name deletion set; Remove the CSS code corresponding to the second style class name deletion collection from the CSS type file.

2. The method according to claim 1, characterized in that, The step of deleting the CSS code corresponding to the second style class name deletion collection from the CSS type file includes: Find the target node corresponding to each style class name in the second style class name deletion set from the second abstract syntax tree corresponding to the CSS type file, and delete the target node from the second abstract syntax tree to obtain the target abstract syntax tree; Convert the target abstract syntax tree into a target CSS type file.

3. The method according to claim 1, characterized in that, The acquisition of the target file includes: Obtain the front-end project file, which includes several preset files; Obtain the file identification information of each preset file, and use the file identification information of each preset file as array elements to construct a file array corresponding to the front-end project file; Iterate through the file array to obtain the file path corresponding to each array element; Use array elements with file paths of type HTML or CSS as target array elements, and use the preset file corresponding to the target array element as the target file.

4. The method according to claim 3, characterized in that, The file identification information includes at least the file name and the file extension. The step of using the file identification information of each preset file as array elements to construct a file array corresponding to the front-end project files includes: The file names and file extensions of each of the preset files are used as array elements to construct a file array corresponding to the front-end project files.

5. The method according to claim 1, characterized in that, The file content includes the file code of the target file, and the step of generating an abstract syntax tree corresponding to the target file based on the file content of the target file includes: The file code of each of the HTML type files is converted into a first abstract syntax tree, and the file code of each of the CSS type files is converted into a second abstract syntax tree.

6. A device for processing redundant code, characterized in that, include: The file acquisition module is used to acquire target files, including HTML and CSS files in the front-end project files; The syntax tree generation module is used to generate an abstract syntax tree corresponding to the target file based on the file content of the target file; the abstract syntax tree includes a first abstract syntax tree corresponding to the HTML type file and a second abstract syntax tree corresponding to the CSS type file. The class name determination module is used to extract the node values ​​of attribute nodes from the first abstract syntax tree, and use the node values ​​of each attribute node to construct a set of HTML style class names corresponding to the HTML type file; traverse each rule node in the second abstract syntax tree, and obtain the tag names of the tags in the rule nodes, and take the tag names that meet the preset name format as the target tag names; Using the target tag name, construct a set of CSS style class names corresponding to the CSS type file; The class name set determination module is used to determine the intersection of the HTML style class name set and the CSS style class name set; The difference between the CSS style class name set and the intersection is taken as the first style class name deletion set; the difference between the HTML style class name set and the intersection is taken as the style class name retention set; Obtain the intersection of the target style class names and the style class name retention set; extract the first style class names that have the same class name as the target style class names from the first style class name deletion set, and obtain the regular expression for the first style class names; select the first style class names that satisfy the regular expression as the second style class names to be retained; use the union between the second style class names and the target style class names as the target style class name retention set; use the difference between the first style class name deletion set and the second style name as the second style class name deletion set. The code removal module is used to remove the CSS code corresponding to the second style class name removal set from the CSS type file.

7. An electronic device, characterized in that, It includes a processor, a communication interface, a memory, and a communication bus, wherein the processor, the communication interface, and the memory communicate with each other through the communication bus; The memory is used to store computer programs; When the processor executes a program stored in the memory, it implements the method as described in any one of claims 1-5.

8. A computer-readable storage medium having instructions stored thereon that, when executed by one or more processors, cause the processors to perform the method as described in any one of claims 1-5.

Images