Search

CN-121579100-B - Method and system for optimizing front-end engineering construction speed based on vite

CN121579100BCN 121579100 BCN121579100 BCN 121579100BCN-121579100-B

Abstract

The invention belongs to the technical field of Web front-end engineering development, and particularly relates to a method and a system for optimizing front-end engineering construction speed based on vite, wherein local engineering vite configuration information and third-party dependence package information are acquired, dependence packages to be optimized are judged according to vite configuration information and third-party dependence package information, dependence optimization information is generated, the dependence optimization information is added into a local engineering vite configuration file, a computation intensive or basic core Javascript or TYPESCRIPT component is converted into a WebAssembly module, and when a project is started through npm or yarn commands, the WebAssembly module is used as dependence reference, so that loading speed is increased. Therefore, the problems that vite first screen performance is poor, development efficiency is affected and the like in the prior art are solved.

Inventors

  • MENG DEJIANG
  • CHEN TAO

Assignees

  • 中博信息技术研究院有限公司

Dates

Publication Date
20260512
Application Date
20260127

Claims (10)

  1. 1. A method for optimizing the speed of front-end engineering construction based on vite, comprising: Acquiring configuration information of a local project vite and third-party dependent package information; Judging a dependent package to be optimized according to the vite configuration information and the third-party dependent package information, and generating dependent optimization information; Adding the dependent optimization information to a local engineering vite configuration file and converting the computationally intensive or basic core Javascript or TYPESCRIPT component into a WebAssembly module; When the project is started through npm or a yarn command, the WebAssembly module is used as a dependent reference, so that the loading speed is increased.
  2. 2. The method for optimizing a front-end engineering construction speed based on vite of claim 1, wherein obtaining the configuration information of the local engineering vite and the third party dependent package information comprises: Acquiring a local engineering information file; according to the local engineering information file, vite configuration files and package configuration file information are retrieved; And executing corresponding read-write operation on the vite configuration files and the package configuration file information through inputting a preset node instruction or a visual interface button of the client plug-in.
  3. 3. The method for optimizing a front-end engineering construction speed based on vite of claim 2, wherein retrieving vite profile and package profile information comprises: obtaining vite and package configuration file information; uploading the vite and package configuration file information to a server through an api interface; Traversing the local engineering file by the server getViteDevOptimize method, and searching the vite.config.ts and package.json files.
  4. 4. The method for optimizing the speed of front-end engineering construction based on vite of claim 1, wherein determining the dependent package to be optimized and generating the dependent optimization information includes: obtaining vite configuration files and package configuration file information; Analyzing the vite configuration file and the package configuration file information, and matching the dependency information to be optimized stored in a database; and returning the matched dependency information to be optimized to the client as dependency optimization information, wherein the dependency information in the database is derived from vite official document recommendation and learning acquisition of a large model of the enterprise internal research and development cloud CodeFree.
  5. 5. The method for optimizing front-end engineering building speed of claim 1, wherein adding the dependent optimization information to the local engineering vite profile comprises: Obtaining dependency optimization information returned by a server side; Assigning the dependent optimization information to optimizeDeps attributes in the vite configuration file through a setViteDevOptimize method; When an item is launched by npm or a yarn command, vite may perform a dependency optimization operation based on information in the optimizeDeps attribute.
  6. 6. A method for optimizing the speed of front-end engineering construction based on vite as claimed in claim 3, wherein finding the vite. Config. Ts and package. Json files comprises: Acquiring user-defined information of client plug-in visual interface configuration; Based on the user-defined information of the client plug-in visual interface configuration, adjusting getViteDevOptimize the traversal range of the method; And precisely positioning the vite.config.ts and package.json files according to the traversal range, and ensuring the integrity of configuration information acquisition.
  7. 7. A system for front-end engineering build speed optimization based on vite, comprising: the recommendation information acquisition module is used for acquiring the current recommendable dependent package information; the configuration information generation module is used for processing the engineering local configuration information sent by the information read-write module and generating recommendation information according to the latest data of the recommendation information acquisition module; the AI cloud module is used for providing packet-dependent information support for the recommended information acquisition module; the information read-write module is used for reading vite configuration and package dependent information and transmitting or acquiring information required by the configuration information generation module or sent back by the network communication module; The file translation module is used for compiling and converting the Javascript or TYPESCRIPT components into wasm format files; and the network communication module is used for establishing the connection between the information reading and writing module and the configuration information generation module and carrying out information transmission and interaction.
  8. 8. The system for optimizing front-end engineering construction speed based on vite of claim 7, wherein the recommendation information acquisition module comprises an information updating unit and a data storage unit, wherein the information updating unit is used for periodically initiating a session to the AI cloud module to acquire recommendation dependent package information returned in a key value pair form, and the data storage unit is used for storing the recommendation dependent package information in a server local database or a cache.
  9. 9. The vite-based front end engineering construction speed optimization system of claim 7, wherein the AI cloud module comprises a dependency package information gathering unit for acquiring and screening dependency package information that can be recommended based on relevant attribute keywords via web communities and developer recommendation sources.
  10. 10. The system for optimizing front-end engineering construction speed based on vite of claim 7, wherein the file translation module comprises a format compiling unit and an address replacement unit, wherein the format compiling unit is configured to compile and convert Javascript or TYPESCRIPT components into wasm format files to form a WebAssembly module, and the address replacement unit is configured to automatically replace original dependent reference addresses with newly formed WebAssembly module addresses.

Description

Method and system for optimizing front-end engineering construction speed based on vite Technical Field The invention belongs to the technical field of Web front-end engineering development, and particularly relates to a method and a system for optimizing front-end engineering construction speed based on vite. Background With the continuous development of Web front-end technology, the current Vue3 has become one of the main flows of front-end engineering development. vite is an official packaging tool recommended by Vue3 and is very important for practical development of the application of vite. vite has a great advantage over other packaging tools such as webpack in that the node service is started very fast when the project is started for the first time, but this also results in a disadvantage in that the performance of the first screen load is limited by the size of the project file load and the number of third party dependent item loads, since vite puts a series of preparation work on the first screen load instead of before the node service is started, and a great deal of dynamic analysis, dynamic resource introduction and dynamic compilation are required compared to other packaging tools. When dealing with large and complex front-end projects based on vite construction, for example, when performing projects with hundreds of page compositions and tens of dependent item loads, the first screen page needs to be opened for a very long time, and depending on specific project files and computer configuration conditions used by developers, the first screen page may need to wait for a few minutes or even tens of minutes, which greatly influences the development efficiency of the developers. The method has the defects that the initial screen performance is poor and the development efficiency is seriously influenced, the initial screen dependence pre-construction lacks the authoritative dynamic dependence information support provided by accurate judgment and AI cloud service, only relies on subjective experience of a developer to screen optimization dependence, a server-side caching and periodical synchronization mechanism is omitted, dependence information updating is delayed, high-time consumption core dependence or repeated analysis dependence is prone to be omitted, the initial screen dependence analysis and compiling time is too long, meanwhile, a computation intensive and basic core Javascript/TYPESCRIPT assembly is loaded and executed in a native script mode, the prior art lacks automatic translation and reference address replacement capability, cannot be conveniently converted into a WebAssembly module with higher loading speed and automatically update a reference address, vite is insufficient in integrated support of WebAssembly modules, cannot be used as core dependence reference loading, further compromises the initial screen rendering speed, in addition, searching of configuration files is not specific, reading and writing and dependence optimization information input are required to be manually operated, the process is tedious, optimizeDeps attribute configuration cannot be automatically updated synchronously, and the special module is in charge of cross-end information transfer and configuration synchronization, the interaction delay of dependence optimization information is prone to be caused, the initial screen dependence optimization information loading is prone to be used, the initial screen loading failure or the initial screen loading or the whole debugging is increased, the initial screen loading efficiency is greatly prolonged, the development cost is reduced, the initial screen loading efficiency is greatly is lowered, and the development cost is greatly is lowered. Disclosure of Invention The application provides a front-end engineering construction speed optimization method and system based on vite, which are used for solving the problems that vite first-screen performance is poor, development efficiency is affected and the like in the prior art. The embodiment of the first aspect of the application provides a front-end engineering construction speed optimization method based on vite, which comprises the following steps of obtaining local engineering vite configuration information and third party dependence package information, judging dependence packages to be optimized according to the vite configuration information and the third party dependence package information, generating dependence optimization information, adding the dependence optimization information into a local engineering vite configuration file, converting a computation intensive or basic core Javascript or TYPESCRIPT component into a WebAssembly module, and taking the WebAssembly module as a dependence reference when a project is started through npm or yarn commands, so that the loading speed is increased. Preferably, the local project vite configuration information and the third party dependency package information are