Efficient front-end code real-time updating method and device and storage medium

Abstract

The invention relates to the field of network page updating, and discloses an efficient front-end code real-time updating method and device and a storage medium, and the method comprises the following steps: initializing a front-end item; a partition recognition method is adopted for front-end items, and the dependency relationship between the items is divided into a plurality of sub-graphs; performing code operation identification on the front-end items by adopting a code analysis tool, and performing operation classification; selecting corresponding updating mechanisms according to different operation classifications; in combination with an incremental compiling method of Webpack and Vite, code incremental compiling is realized through module dependency graph optimization and enhanced analysis; carrying out real-time hot updating on the codes by adopting a multi-level differential hot updating method; and a cache control mechanism is introduced, so that front-end resources are updated in time when codes are subjected to real-time hot update. According to the method and the device, the front-end page updating efficiency and accuracy are improved.

Description

Technical Field

[0001] The present invention relates to the field of network page updating, and in particular to an efficient front-end code real-time updating method. Background Art

[0002] In traditional front-end projects, after completing style modifications, tag replacements, and business logic code modifications, front-end personnel need to manually refresh the browser page to check the modified effect until it meets expectations. This process is repeated many times until the requirements are met. Since front-end personnel frequently adjust styles, modify images, tags, and logical statements, this has a significant impact on the efficiency of front-end development. If there is a way to allow front-end personnel to automatically update the corresponding page after completing the adjustment of the front-end code, front-end personnel can be freed from the action of refreshing the browser and focus on the business itself, improving the efficiency of front-end development.

[0003] The prior art mainly adopts two ways to carry out.

[0004] The first method is to use Webpack to repackage the project and output it to the browser through the hot-replacement module (HMR). After receiving the update instruction, the Webpack hot-replacement module requests the corresponding resources, forms a new JS, inserts the script tag into the DOM through JSONP, and replaces the module. Whether it is a change in a tag or a complete modification of the entire page code, the entire page needs to be recompiled, the corresponding script tag is replaced, and the page is reloaded to restore the initial state.

[0005] Its disadvantages include: Low accuracy: Webpack uses tag request method, which is easily affected by browser cache, resulting in the modification effect not being displayed immediately, affecting development efficiency. Low efficiency: Each update requires recompiling the entire page. Whether modifying a tag or the entire page code, the same waiting time is required, which is not conducive to fast debugging and development.

[0006] The second method is to use vite to build the project. Vite solves the code update problem by identifying modules through the module dependency graph, collecting update modules on the server, and distributing update modules on the client. When the project starts, a file listener is created to listen for file modification, addition, and deletion operations. When a file is modified, there are three execution steps: obtaining the standard file path, removing file cache information, and executing the hot update method. During the project startup phase, a script script will be spliced ​​into index.html, and code will be injected to create a WebSocket service to listen for code update requests. After receiving a module update request, the module code will be updated according to the module's related dependencies.

[0007] Its disadvantages include: Dependence on client injection: When Vite processes files injected by the client or updates HTML files, it will directly refresh the page, which cannot achieve true imperceptible updates, affecting the continuity and efficiency of the development process. Large browser resource usage: The WebSocket used by Vite needs to establish a new channel for each update, especially in complex projects, which will further increase resource usage, affecting the developer's experience and system stability. Summary of the invention

[0008] The purpose of the present invention is to propose an efficient front-end code real-time update method to solve the technical problems of low efficiency, instability and inaccurate judgment of the existing hot update technology.

[0009] An efficient real-time update method for front-end code includes the following steps:

[0010] S1. Initialize the front-end project;

[0011] S2. Use partition identification method to divide the dependencies between projects into multiple subgraphs;

[0012] S3. Use code analysis tools to identify code operations on front-end projects and classify operations; select corresponding update mechanisms based on different operation classifications;

[0013] S4. Combining the incremental compilation method of Webpack and Vite, incremental code compilation is achieved through module dependency graph optimization and enhanced parsing;

[0014] S5. Use a multi-level differentiated hot update method to perform real-time hot update of code;

[0015] S6. Introduce a cache control mechanism so that front-end resources can be updated in time when the code is updated in real time.

[0016] A storage medium stores instructions and data for implementing an efficient real-time update method for front-end codes.

[0017] An efficient front-end code real-time update device comprises: a processor and the storage medium; the processor loads and executes instructions and data in the storage medium to implement an efficient front-end code real-time update method.

[0018] The beneficial effects provided by the present invention are: through partition identification and intelligent caching mechanism, the complexity of global dependency calculation and unnecessary compilation time are reduced. Through refined identification and classification of change types, update strategies are selected in a targeted manner to improve update efficiency and accuracy. Combining the incremental compilation technology of Webpack and Vite and the improved real-time hot update mechanism, only the changed parts are compiled and updated to ensure the timely display of the modification effects and reduce performance overhead. Through the cache control mechanism, it is ensured that the browser can obtain the latest modules in time, avoid display problems, and improve development efficiency and user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] Figure 1 It is a schematic flow chart of the method of the present invention;

[0020] Figure 2 It is a working schematic diagram of the hardware device of the present invention. DETAILED DESCRIPTION

[0021] In order to make the objectives, technical solutions and advantages of the present invention more clear, the embodiments of the present invention will be further described below with reference to the accompanying drawings.

[0022] Before formally describing the present invention, the scheme of the present invention is first generally described for easy understanding.

[0023] Please refer to Figure 1 , Figure 1 It is a schematic flow diagram of the method of the present invention;

[0024] The present invention provides an efficient real-time update method for front-end code, comprising the following steps:

[0025] S1. Initialize the front-end project;

[0026] It should be noted that in step S1, the front-end project is initialized, including installing Vue scaffolding, configuring Vue routing, configuring Element-UI component library, axios library, git remote repository, etc.

[0027] S2, adopt the partition identification method for the front-end project to divide the dependencies between projects into multiple subgraphs;

[0028] It should be noted that the present invention modularizes the front-end project and identifies all modules and their dependencies. Compared with the traditional global dependency graph, the present invention adopts partition identification to divide the dependency into multiple subgraphs, thereby reducing the computational complexity of the global dependency. The methods used for partition identification include:

[0029] Isograph partitioning algorithm: Use the Metis isograph partitioning algorithm to divide the module dependency graph in the project into multiple subgraphs. Metis is an efficient multi-level graph partitioning tool that can divide the entire dependency graph into several independent or weakly dependent subgraphs based on the dependency relationship between modules, thereby reducing the complexity of global dependency calculation.

[0030] Hierarchical processing: By hierarchical processing of the divided subgraphs, the complexity of dependency calculation can be further reduced. Specific technologies include hierarchical graph partitioning algorithms, which can further layer the nodes in the subgraphs and improve the efficiency of dependency processing.

[0031] After the subgraph is divided, an intelligent caching mechanism is introduced to update only the modules with code changes and their direct dependencies, avoiding unnecessary global compilation and improving the update speed. The technologies used to implement the intelligent caching mechanism include: caching strategy based on file changes and dependency tracking algorithm to ensure that only the actual changed parts are recompiled.

[0032] It should be noted that the cache strategy and dependency tracking algorithm based on file changes are as follows:

[0033] File change-based caching strategy: Adopt a file change-based caching strategy to record the change status and timestamp of each file. When a file changes, only the changed file and its dependent modules are updated. This strategy has been widely used by tools such as Webpack. Please refer to Webpack's documentation and implementation (https: / / webpack.js.org / ).

[0034] Dependency tracking algorithm: Dependency tracking algorithm is used to ensure that only changed files and their dependent modules are processed in each compilation, thereby improving compilation efficiency. Dependency tracking algorithm has been used in many compilation tools, such as Bazel and Buck. References include Bazel's official documentation and related research papers (https: / / bazel.build / ).

[0035] S3. Use code analysis tools to identify code operations on front-end projects and classify operations; select corresponding update mechanisms based on different operation classifications;

[0036] It should be noted that the present invention uses code analysis tools, such as AST analysis, to accurately identify specific changes in the code. Code changes include: style modification, tag replacement, and logic adjustment. According to different types of changes, targeted update strategies are selected.

[0037] As an embodiment, the AST analysis adopted by the present invention includes: a difference detection algorithm based on an abstract syntax tree.

[0038] Specific technologies include an AST Diff Algorithm based on an abstract syntax tree. The AST Diff Algorithm is an existing algorithm. This algorithm can refer to existing literature, such as the relevant technical principles introduced in "Change Detection in Abstract Syntax Trees". This algorithm accurately detects the changed parts of the code by comparing the structural differences between two abstract syntax trees (ASTs).

[0039] S4. Combining the incremental compilation method of Webpack and Vite, incremental code compilation is achieved through module dependency graph optimization and enhanced parsing;

[0040] It should be noted that Webpack is a front-end module packaging tool. It can statically analyze multiple modules according to their dependencies and generate one or more packaged files. The main functions of Webpack include:

[0041] 1. Module packaging

[0042] Treat all modules (JavaScript, CSS, images, etc.) in the project as a whole and package them into one or more static resource files through dependencies.

[0043] 2. Dependency Management

[0044] Webpack can analyze the dependencies between modules, find all dependent modules according to the configured entry files, and integrate them into the packaging results.

[0045] 3. File conversion

[0046] Webpack itself can only process JavaScript modules, but through the use of loaders, other types of files (such as CSS, LESS, images, etc.) can be converted into valid modules so that they can be packaged into the final result.

[0047] 4. Code Splitting

[0048] Webpack supports splitting the code into multiple modules and loading them on demand, thus achieving on-demand loading and improving application performance.

[0049] 5. Plugin System

[0050] Webpack provides a rich plug-in system, which can be used to extend various functions, such as compressing code, automatically generating HTML files, etc.

[0051] Vite is a lighter and faster web application development tool for modern browsers. Its core is based on the ECMAScript standard native module system (ES Modules).

[0052] The present invention combines the incremental compilation technology of Webpack and Vite, and through module dependency graph analysis and incremental compilation technology, only the changed parts are compiled and updated, avoiding the performance overhead caused by full compilation.

[0053] As an example, the present invention is unique in that the following technologies are introduced:

[0054] 1. Module dependency graph optimization: Not only direct dependencies but also indirect dependencies are analyzed to ensure that all affected modules are taken into account during the update process.

[0055] The specific implementation principle is as follows:

[0056] Direct dependency analysis: Through the reference relationship between modules, directly determine which modules depend on the changed modules.

[0057] Indirect dependency analysis: Use a recursive algorithm (such as the depth-first search algorithm DFS) to traverse the module dependency graph and find all modules that are indirectly dependent on the changed module, thereby ensuring that all affected modules can be updated correctly.

[0058] Different from the traditional module dependency processing of Webpack and Vite, the present invention reduces repeated compilation through more in-depth dependency analysis.

[0059] 2. AST enhanced parsing: Although other solutions may use AST for basic syntax analysis, the present invention can more finely identify minor changes in the code through enhanced AST parsing technology (such as using the incremental abstract syntax tree parsing algorithm), thereby achieving more efficient incremental compilation. The specific technology used includes the incremental abstract syntax tree parsing algorithm (Incremental AST Parsing Algorithm), which can quickly detect and apply minor code changes.

[0060] Among them, the incremental abstract syntax tree parsing algorithm is described in existing literature, and the references include: "Incremental Parsing and Syntax Tree Analysis".

[0061] S5. Use a multi-level differentiated hot update method to perform real-time hot update of code;

[0062] It should be noted that the present invention improves the traditional WebSocket hot update technology and introduces a multi-level differentiated hot update mechanism. The specific implementation principle is as follows:

[0063] 1. Differentiated update strategy: Based on the specific scope of code changes, analyze the impact of the changes on the entire project in real time and adopt a differentiated update strategy.

[0064] As an example, small changes (such as style adjustments) only update related modules, while large changes (such as logic modifications) perform more extensive dependency updates. The specific technology used in the present invention includes a dynamic change range detection algorithm that can accurately identify the change range and apply the corresponding update strategy.

[0065] Dynamic Scope Detection Algorithm: This algorithm is a prior art, and the references include relevant computer science research papers and technical reports (such as "Dynamic Scope Detection in Software Systems").

[0066] 2. Intelligent priority processing: Different priorities are assigned to different types of code changes, and they are updated in order according to the priorities when transmitted through WebSocket. The types of code changes have been determined in the previous steps. High-priority key functional modules will be updated first to ensure the timeliness and stability of core functions.

[0067] As an embodiment, the specific technology includes a priority-based update scheduling algorithm, which can optimize the update sequence and improve the update efficiency.

[0068] The specific technology of intelligent priority processing includes a priority-based update scheduling algorithm (Priority-basedUpdate Scheduling Algorithm), which is described in existing literature, including references: "Priority Scheduling in Real-Time Systems".

[0069] 3. Integrated edge cache: Introduce edge cache mechanism during WebSocket transmission to reduce frequent full refresh. Use edge cache to store intermediate state data to ensure that local updates can be completed efficiently under network fluctuations.

[0070] As an embodiment, the specific technology adopted by the present invention includes edge cache management, which can efficiently manage cache data between the client and the server and reduce the network transmission load.

[0071] The specific technology of integrating edge cache includes edge cache management system, which reduces the amount of data transmission and improves transmission efficiency by caching intermediate state data between the client and the server. This technology can refer to the edge cache implementation in CDN, such as Akamai and Cloudflare's edge cache documents (such as "Akamai Edge Cache" and "Cloudflare Edge Cache").

[0072] S6. Introduce a cache control mechanism so that front-end resources can be updated in time when the code is updated in real time.

[0073] It should be noted that the present invention introduces a cache control mechanism to ensure that the browser can obtain the latest module in a timely manner and avoid display problems caused by cache.

[0074] The specific implementation principle is to attach a unique identifier (such as a hash value) to the module request to force the browser to obtain the latest resources, and use server-side cache management to ensure the timeliness and effectiveness of resource updates.

[0075] As an embodiment, specific technologies include a hash value cache control algorithm and server-side cache management to ensure that the browser can always obtain the latest module resources.

[0076] See also Figure 2 , Figure 2 It is a schematic diagram of the working of the hardware device of an embodiment of the present invention, and the hardware device specifically includes: an efficient front-end code real-time update device 401, a processor 402 and a storage medium 403.

[0077] An efficient front-end code real-time update device 401: The efficient front-end code real-time update device 401 implements the efficient front-end code real-time update method.

[0078] Processor 402: The processor 402 loads and executes the instructions and data in the storage medium 403 to implement the efficient real-time update method of the front-end code.

[0079] Storage medium 403: The storage medium 403 stores instructions and data; the storage medium 403 is used to implement the efficient real-time update method of front-end code.

[0080] The beneficial effects of the present invention are: through partition identification and intelligent caching mechanism, the complexity of global dependency calculation and unnecessary compilation time are reduced. Through refined identification and classification of change types, update strategies are selected in a targeted manner to improve update efficiency and accuracy. Combining the incremental compilation technology of Webpack and Vite and the improved real-time hot update mechanism, only the changed parts are compiled and updated to ensure the timely display of the modification effects and reduce performance overhead. Through the cache control mechanism, it is ensured that the browser can obtain the latest modules in time, avoid display problems, and improve development efficiency and user experience.

[0081] The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principle of the present invention should be included in the protection scope of the present invention.

Claims

1. An efficient real-time update method for front-end code, characterized by: The following steps are involved: S1. Initialize the front-end project; S2. Use partition identification method to divide the dependencies between projects into multiple subgraphs; S3. Use code analysis tools to identify code operations on front-end projects and classify operations; select corresponding update mechanisms based on different operation classifications; S4. Combining the incremental compilation method of Webpack and Vite, incremental code compilation is achieved through module dependency graph optimization and enhanced parsing; S5. Use a multi-level differentiated hot update method to perform real-time hot update of code; S6. Introduce a cache control mechanism so that front-end resources can be updated in time when the code is updated in real time.

2. An efficient real-time update method for front-end code according to claim 1, characterized in that: In step S2, the specific process of partition identification is as follows: using graph partitioning algorithms such as Metis, the module dependency graph in the project is divided into multiple sub-graphs; the sub-graphs after division are further partitioned using a hierarchical graph partitioning method.

3. An efficient real-time update method for front-end code according to claim 2, characterized in that: After dividing into multiple subgraphs in step S2, an intelligent cache mechanism is introduced to update only the code-changed modules and their direct dependencies in the subgraphs.

4. An efficient real-time update method for front-end code according to claim 1, characterized in that: In step S3, AST analysis is used to identify code operations; the operation categories include: UI update, logic update and resource update.

5. An efficient real-time update method for front-end code according to claim 1, characterized in that: Step S4 is specifically as follows: S41. Analyze the module dependency graph to find out the indirect dependencies of the code changes, and also update the indirect dependencies of the code changes. S42. Use enhanced AST parsing method to further detect code changes.

6. An efficient real-time update method for front-end code according to claim 1, characterized in that: Step S5 is specifically as follows: S51. Using a dynamic change range detection method to detect the range of code changes, and adjusting the update strategy according to different types of ranges; S52, assigning different priorities according to different types of code changes, and adjusting the update strategy according to the priorities; S53. Introduce edge caching mechanism to reduce frequent full refreshes during the update process.

7. An efficient real-time update method for front-end code according to claim 1, characterized in that: The cache control mechanism of step S6 includes: adding a unique identifier to the update request to force the browser to obtain the latest resources, and using server-side cache management to ensure the timeliness and effectiveness of resource updates.

8. A storage medium, characterized in that: The storage medium stores instructions and data for implementing an efficient front-end code real-time updating method as described in any one of claims 1 to 7.

9. An efficient front-end code real-time update device, characterized by: include: Processor and storage medium; the processor loads and executes instructions and data in the storage medium to implement an efficient front-end code real-time update method as described in any one of claims 1 to 7.

Images