Project splitting method, system and equipment based on vue and medium
Through Tree-Shaking technology and modular design, the vue.js project code is parsed and optimized, the vue.js project module splitting problem is solved, the development efficiency and work efficiency are improved, and the efficient module splitting of vue.js project code is realized. point.
Patent Information
- Application Number
- CN202411274691.4
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-09-12
- Publication Date
- 2025-01-03
AI Technical Summary
In the field of web development, with the expansion of project scale and complex functions, the module splitting of vue.js project code has problems such as code redundancy, duplication and complex dependencies, and the lack of effective tool support, resulting in inefficient development.
Using Tree-Shaking technology combined with modular design and code splitting, that is, on-demand loading strategy, uses tree-Shaking technology to parse source code into abstract syntax tree (AST) objects, collects and analyzes import and export dependencies, marks and deletes unused code, and optimizes code Structure, implement module splitting of vue.js project.
It improves the work efficiency of developers, reduces labor costs, solves the problem of the lack of module splitting tools in the vue.js framework community, realizes efficient module splitting of vue.js project code, and reduces investment in functional dependency analysis.
Smart Images
Figure CN119248279A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the field of web application development, and in particular to a Vue-based project splitting method, system, device and medium. Background Art
[0002] In the field of web development, as the project scale expands and the functions become more complex, the amount of code will increase dramatically, accompanied by a series of problems, such as code redundancy, code duplication, complex dependencies, etc. When a project needs to split modules, it often takes a lot of human resources to confirm the code dependency path and retention relationship.
[0003] In order to solve the above problems, the react and angular framework communities already have available tools such as react-modules and ng-cli. However, the most widely used vue.js framework still lacks tools with similar functions.
[0004] Therefore, how to realize the module splitting of vue.js project code is a technical problem that needs to be solved urgently. Summary of the invention
[0005] The technical task of the present invention is to provide a Vue-based project splitting method, system, device and medium to solve the problem of how to realize module splitting of Vue.js project code.
[0006] The technical task of the present invention is achieved in the following way: a project splitting method based on Vue, which uses Tree-Shaking technology, combined with modular design, code splitting, and on-demand loading strategy to achieve module splitting of Vue.js project code; specifically as follows:
[0007] Parse the target area file into an AST (Abstract Syntax Tree) object: parse the source code file in the vue project into an AST object for subsequent code analysis and operations; the source code file formats in the vue project include .vue, .js and .ts;
[0008] Collect and record the import and export dependencies and state function definition contents of target area files: traverse the AST object, collect and record the import and export statements of each file. The import and export statements of each file reflect the dependency relationship between files; collect the state and function contents defined in the file for subsequent analysis of component dependency and state management; then record the collected dependent entity states, dependency relationships, and reference directories in the global data structure Map to generate dependency links;
[0009] Traverse and analyze the files that need to be retained: According to user needs or preset rules, determine the key files or modules that need to be retained, and then traverse the key files or modules that need to be retained, and analyze the dependency links referenced within the key files or modules that need to be retained; the dependency links include direct dependencies and indirect dependencies;
[0010] Mark the used file dependencies according to the dependency links of the file references that need to be retained: During the traversal process, for each referenced dependency (whether direct or indirect), mark the corresponding dependent file, indicating that the corresponding dependent file is actually used in the project;
[0011] Delete unused code based on usage tags: After completing the dependency tags for all files, traverse the source code files of the entire project and check the import and export statements and internal code of each file; among them, for the import statements, export statements and related internal code (such as unused variables, functions, etc.) that are not referenced by any retained files or modules, perform deletion operations to eliminate unused code, and verify and optimize the code structure after deletion to ensure that the deletion operation does not disrupt the normal operation of the project or introduce new errors.
[0012] Preferably, in the process of parsing the target area file into an AST object, a JavaScript or TypeScript parser (such as Babel, Acorn, etc.) is used to ensure that the source code is accurately converted into an AST object; specifically:
[0013] Use the Babel plug-in in the JavaScript or TypeScript parser to parse the main code files in the project into AST objects. The Babel plug-in is executed in the front-end project build scaffolding (such as webpack) or node.js service. Using a Babel plug-in that specifically parses vue code (such as vue-loader) can improve the accuracy of processing AST objects. At the same time, according to the expected operating environment of the Babel plug-in, use the corresponding language to write a custom plug-in, that is, use the parse part of the Babel plug-in to parse the project code into AST objects, and collect the state function entity definition and the import and export association information of the corresponding AST object.
[0014] Preferably, the AST object includes complete structural information of the source code for subsequent optimization processing.
[0015] Preferably, the process of collecting and recording the import and export dependencies and state function definition content of the target area files also includes processing of the unique properties of the Vue component. The processing of the unique properties of the Vue component includes props, data, and computed, so as to have a more comprehensive understanding of the component's dependencies and state management.
[0016] Preferably, the information stored in the global data structure Map is in the form of:
[0017] Take a file information as an object node, the file directory as the node id, and the import and export entities of the application as key attributes. The import and export attributes of different object nodes are associated to form a dependency link, which is convenient for subsequent steps to retrieve the application.
[0018] Preferably, in the process of traversing and parsing the files to be retained, dynamic configuration is supported, allowing the user to customize the rules and conditions for retaining the files as needed.
[0019] More preferably, in the process of marking the used file dependencies according to the dependency links of the file references that need to be retained, a depth-first search (DFS) algorithm or a breadth-first search (BFS) algorithm is used to ensure that all used dependencies are accurately marked without omission.
[0020] A Vue-based project splitting system, the system is used to implement the Vue-based project splitting method as described above; the system comprises:
[0021] Parsing module: used to parse source code files into AST objects;
[0022] Dependency collection module: used to collect and record the import and export dependencies and state function definition content of files;
[0023] Dependency analysis module: used to traverse and parse the files that need to be retained, and mark the file dependencies to be used according to the dependency links referenced by the files that need to be retained;
[0024] Optimization processing module: used to delete unused code according to usage tags and optimize the structure of the remaining code.
[0025] An electronic device comprising: a memory and at least one processor;
[0026] Wherein, the memory stores a computer program;
[0027] The at least one processor executes the computer program stored in the memory, so that the at least one processor executes the Vue-based project splitting method as described above.
[0028] A computer-readable storage medium having a computer program stored therein, wherein the computer program can be executed by a processor to implement the Vue-based project splitting method as described above.
[0029] The Vue-based project splitting method, system, device and medium of the present invention have the following advantages:
[0030] (1) The present invention can improve the work efficiency of developers and reduce labor costs in business scenarios where Vue project codes need to be split;
[0031] (ii) The present invention solves the problem of lack of module splitting tools in the Vue.js framework community by using Tree-Shaking technology and combining strategies such as modular design, code splitting, and on-demand loading, and realizes module splitting of Vue.js project codes;
[0032] (III) When a front-end project developed with vue.js as a framework needs to be split according to functional modules, the present invention can reduce the energy and resources invested in the project functional dependency analysis and improve the work efficiency of developers. BRIEF DESCRIPTION OF THE DRAWINGS
[0033] The present invention is further described below in conjunction with the accompanying drawings.
[0034] Attached Figure 1 This is a flowchart of the project splitting method based on Vue. DETAILED DESCRIPTION
[0035] The Vue-based project splitting method, system, device and medium of the present invention are described in detail below with reference to the accompanying drawings and specific embodiments of the specification.
[0036] Embodiment 1:
[0037] This embodiment provides a project splitting method based on Vue, which uses Tree-Shaking technology, combined with modular design, code splitting, and on-demand loading strategy to achieve module splitting of Vue.js project code; the details are as follows:
[0038] S1. Parse the target area file into an AST (Abstract Syntax Tree) object: parse the source code file in the vue project into an AST object for subsequent code analysis and operation; the source code file formats in the vue project include .vue, .js and .ts;
[0039] S2. Collect and record the import and export dependencies and state function definition contents of target area files: traverse the AST object, collect and record the import and export statements of each file, which reflect the dependency relationship between files; collect the state and function contents defined in the file for subsequent analysis of component dependency and state management; then record the collected dependent entity states, dependency relationships, and reference directories in the global data structure Map to generate dependency links;
[0040] S3. Traverse and parse the files to be retained: Determine the key files or modules to be retained according to user needs or preset rules, and then traverse the key files or modules to be retained starting from the key files or modules to be retained, and analyze the dependency links referenced within the key files or modules to be retained; wherein the dependency links include direct dependencies and indirect dependencies;
[0041] S4. Mark the used file dependencies according to the dependency links of the file references that need to be retained: During the traversal process, for each referenced dependency (whether direct or indirect), mark the corresponding dependent file, indicating that the corresponding dependent file is actually used in the project;
[0042] S5. Delete unused code according to usage tags: After completing the dependency tags for all files, traverse the source code files of the entire project and check the import and export statements and internal codes of each file; among them, for the import statements, export statements and related internal codes (such as unused variables, functions, etc.) that are not referenced by any retained files or modules, perform deletion operations to eliminate unused codes, and verify and optimize the code structure after deletion to ensure that the deletion operation does not disrupt the normal operation of the project or introduce new errors.
[0043] In the process of parsing the target area file into an AST object in step S1 of this embodiment, a JavaScript or TypeScript parser (such as Babel, Acorn, etc.) is used to ensure that the source code is accurately converted into an AST object; specifically:
[0044] Use the Babel plug-in in the JavaScript or TypeScript parser to parse the main code files in the project into AST objects. The Babel plug-in is executed in the front-end project build scaffolding (such as webpack) or node.js service. Using a Babel plug-in that specifically parses vue code (such as vue-loader) can improve the accuracy of processing AST objects. At the same time, according to the expected operating environment of the Babel plug-in, use the corresponding language to write a custom plug-in, that is, use the parse part of the Babel plug-in to parse the project code into AST objects, and collect the state function entity definition and the import and export association information of the corresponding AST object.
[0045] The AST object in step S1 of this embodiment includes complete structural information of the source code, which is used for subsequent optimization processing.
[0046] The process of collecting and recording the import and export dependencies and state function definition contents of the target area files in step S2 of this embodiment also includes the processing of the unique properties of the Vue component. The processing of the unique properties of the Vue component includes props, data, and computed, so as to have a more comprehensive understanding of the component's dependencies and state management.
[0047] The form of information stored in the global data structure Map in step S2 of this embodiment is:
[0048] Take a file information as an object node, the file directory as the node id, and the import and export entities of the application as key attributes. The import and export attributes of different object nodes are associated to form a dependency link, which is convenient for subsequent steps to retrieve the application.
[0049] In the process of traversing and parsing the files to be retained in step S3 of this embodiment, dynamic configuration is supported, allowing the user to customize the rules and conditions for retaining files as needed.
[0050] In the process of marking the used file dependencies according to the dependency links of the file references that need to be retained in step S4 of this embodiment, a depth-first search (DFS) algorithm or a breadth-first search (BFS) algorithm is adopted to ensure that all used dependencies are accurately marked without omission.
[0051] Embodiment 2:
[0052] This embodiment provides a Vue-based project splitting system, which is used to implement the Vue-based project splitting method in Embodiment 1; the system includes:
[0053] Parsing module: used to parse source code files into AST objects;
[0054] Dependency collection module: used to collect and record the import and export dependencies and state function definition content of files;
[0055] Dependency analysis module: used to traverse and parse the files that need to be retained, and mark the file dependencies to be used according to the dependency links referenced by the files that need to be retained;
[0056] Optimization processing module: used to delete unused code according to usage tags and optimize the structure of the remaining code.
[0057] The working process of the system is as follows:
[0058] (1) Determine the optimization goals and scope, including which modules or components are the focus of optimization, and use visualization tools or other scaffolding tools to determine the specific use and matching project catalog;
[0059] (2) Use the Babel function to parse the main code files in the project into AST objects;
[0060] Among them, the babel plug-in can be executed in the front-end project scaffolding (such as webpack) or node.js service; using a babel plug-in that specifically parses vue code (such as vue-loader) can improve the accuracy of processing AST objects;
[0061] (3) Write a custom plug-in in the corresponding language according to the expected operating environment of the function. The function is to use the parse part of the babel function to parse the project code into an AST object, collect the state function entity definition of the AST object and the import and export association information of the entity;
[0062] (4) The collected information is stored in a global data structure Map and organized as follows: a file information is used as an object node, the file directory is used as the node id, and the import and export entities of the application are used as key attributes. The import and export attributes of different object nodes are associated to form a dependency link, which is convenient for subsequent steps to retrieve the application;
[0063] (5) For the target files of the determined application, the dependency link is traversed according to the entry files determined by each code project; during the traversal process, for each accessed file and the dependency applied, its usage status is marked in the data structure;
[0064] (6) After traversing the file, according to the data structure Map and the marked information, the definition of the data function entity and the import and export code of the file AST object are deleted and integrated; the generate function of babel is used to process the AST object to generate project code that can be used normally, and combined with the determined module file range, the effect of splitting the project module based on vue is achieved.
[0065] Embodiment 3:
[0066] This embodiment also provides an electronic device, including: a memory and a processor;
[0067] Wherein, the memory stores computer-executable instructions;
[0068] The processor executes the computer-executable instructions stored in the memory, so that the processor executes the Vue-based project splitting method in any embodiment of the present invention.
[0069] The processor may be a central processing unit (CPU), or other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), field-programmable gate arrays (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. The processor may be a microprocessor or any conventional processor, etc.
[0070] The memory can be used to store computer programs and / or modules. The processor realizes various functions of the electronic device by running or executing the computer programs and / or modules stored in the memory, and calling the data stored in the memory. The memory can mainly include a program storage area and a data storage area, wherein the program storage area can store an operating system, at least one application required for a function, etc.; the data storage area can store data created according to the use of the terminal, etc. In addition, the memory can also include a high-speed random access memory, and can also include a non-volatile memory, such as a hard disk, a memory, a plug-in hard disk, a smart memory card (SMC), a secure digital (SD) card, a flash memory card, at least one disk storage period, a flash memory device, or other volatile solid-state storage devices.
[0071] Embodiment 4:
[0072] This embodiment also provides a computer-readable storage medium, in which a plurality of instructions are stored, and the instructions are loaded by a processor to enable the processor to execute the Vue-based project splitting method in any embodiment of the present invention. Specifically, a system or device equipped with a storage medium can be provided, on which a software program code that implements the functions of any of the above embodiments is stored, and a computer (or CPU or MPU) of the system or device reads and executes the program code stored in the storage medium.
[0073] In this case, the program code itself read from the storage medium can realize the function of any one of the above-mentioned embodiments, and thus the program code and the storage medium storing the program code constitute a part of the present invention.
[0074] The storage medium embodiments for providing the program code include a floppy disk, a hard disk, a magneto-optical disk, an optical disk (such as CD-ROM, CD-R, CD-RW, DVD-ROM, DVD-RYM, DVD-RW, DVD+RW), a magnetic tape, a non-volatile memory card, and a ROM. Alternatively, the program code can be downloaded from a server computer via a communication network.
[0075] In addition, it should be clear that the functions of any of the above embodiments can be implemented not only by executing the program code read by the computer, but also by enabling an operating system operating on the computer to complete part or all of the actual operations based on instructions from the program code.
[0076] In addition, it can be understood that the program code read from the storage medium is written to a memory provided in an expansion board inserted into the computer or written to a memory provided in an expansion unit connected to the computer, and then based on the instructions of the program code, a CPU installed on the expansion board or the expansion unit is enabled to perform part or all of the actual operations, thereby realizing the functions of any of the above-mentioned embodiments.
[0077] 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 project splitting method based on Vue, characterized in that: This method uses Tree-Shaking technology, combined with modular design, code splitting and on-demand loading strategy, to achieve module splitting of vue.js project code; the details are as follows: Parse the target area file into an AST object: parse the source code file in the vue project into an AST object for subsequent code analysis and operation; the source code file formats in the vue project include .vue, .js and .ts; Collect and record the import and export dependencies and state function definition contents of target area files: traverse the AST object, collect and record the import and export statements of each file. The import and export statements of each file reflect the dependency relationship between files; collect the state and function contents defined in the file for subsequent analysis of component dependency and state management; then record the collected dependent entity states, dependency relationships, and reference directories in the global data structure Map to generate dependency links; Traverse and analyze the files that need to be retained: According to user needs or preset rules, determine the key files or modules that need to be retained, and then traverse the key files or modules that need to be retained, and analyze the dependency links referenced within the key files or modules that need to be retained; the dependency links include direct dependencies and indirect dependencies; Mark the used file dependencies according to the dependency links of the file references that need to be retained: During the traversal process, for each referenced dependency, mark the corresponding dependent file, indicating that the corresponding dependent file is actually used in the project; Delete unused code based on usage tags: After completing the dependency tags for all files, traverse the source code files of the entire project and check the import and export statements and internal code of each file; among them, for the import statements, export statements and related internal codes that are not referenced by any retained files or modules, perform deletion operations to eliminate unused code, and verify and optimize the code structure after deletion to ensure that the deletion operation does not disrupt the normal operation of the project or introduce new errors.
2. The Vue-based project splitting method according to claim 1 is characterized in that: When parsing the target area file into an AST object, a JavaScript or TypeScript parser is used to ensure that the source code is accurately converted into an AST object; specifically: Use the Babel plug-in in the JavaScript or TypeScript parser to parse the main code files in the project into AST objects. The Babel plug-in is executed in the front-end project build scaffolding or node.js service. At the same time, write a custom plug-in in the corresponding language according to the expected operating environment of the Babel plug-in, that is, use the parse part of the Babel plug-in to parse the project code into AST objects, and collect the state function entity definition and import and export association information of the corresponding AST object.
3. The Vue-based project splitting method according to claim 1 is characterized in that: The AST object includes the complete structural information of the source code for subsequent optimization processing.
4. The Vue-based project splitting method according to claim 1 is characterized in that: In the process of collecting and recording the import and export dependencies and state function definition content of the target area files, it also includes the processing of the unique properties of the Vue component, including props, data, and computed.
5. The Vue-based project splitting method according to claim 1 is characterized in that: The form of information stored in the global data structure Map is: Take a file information as an object node, the file directory as the node id, and the import and export entities of the application as key attributes, and associate the import and export attributes of different object nodes to form a dependency link.
6. The Vue-based project splitting method according to claim 1, characterized in that: In the process of traversing and parsing the files that need to be retained, dynamic configuration is supported, allowing users to customize the rules and conditions for retaining files as needed.
7. The Vue-based project splitting method according to any one of claims 1 to 6, characterized in that: In the process of marking the used file dependencies according to the dependency links of the file references that need to be retained, a depth-first search algorithm or a breadth-first search algorithm is adopted to ensure that all used dependencies are accurately marked without omission.
8. A project splitting system based on Vue, characterized in that: The system is used to implement the Vue-based project splitting method according to any one of claims 1 to 7; the system comprises: Parsing module: used to parse source code files into AST objects; Dependency collection module: used to collect and record the import and export dependencies and state function definition content of files; Dependency analysis module: used to traverse and parse the files that need to be retained, and mark the file dependencies to be used according to the dependency links referenced by the files that need to be retained; Optimization processing module: used to delete unused code according to usage tags and optimize the structure of the remaining code.
9. An electronic device, characterized in that: include: memory and at least one processor; Wherein, the memory stores a computer program; The at least one processor executes the computer program stored in the memory, so that the at least one processor executes the Vue-based project splitting method according to any one of claims 1 to 7.
10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, which can be executed by a processor to implement the Vue-based project splitting method according to any one of claims 1 to 7.