A method and system for vite-based frontend engineering build speed optimization

Abstract

The application belongs to the technical field of Web front-end engineering development, and particularly relates to a method and system for optimizing the construction speed of front-end engineering based on vite, wherein local engineering vite configuration information and third-party dependent package information are acquired; dependent packages that need to be optimized are determined according to the vite configuration information and the third-party dependent package information, and dependent optimization information is generated; the dependent optimization information is added to a local engineering vite configuration file, and a computationally intensive or basic core Javascript or Typescript component is converted into a WebAssembly module; when a project is started through an npm or yarn command, the WebAssembly module is referenced as a dependency to accelerate the loading speed. Thus, the problems of poor first-screen performance of vite and the influence of development efficiency in the prior art are solved.

Description

Technical Field

[0001] This invention belongs to the field of Web front-end engineering development technology, specifically relating to a method and system for optimizing the build speed of front-end projects based on Vite. Background Technology

[0002] With the continuous development of web front-end technologies, Vue 3 has become one of the mainstream technologies for front-end engineering development. Vite, as the official recommended bundler for Vue 3, is crucial in practical development. Compared to other bundlers like Webpack, Vite's major advantage lies in the very fast startup of the Node.js service during the initial project launch. However, this also leads to a drawback: the performance of the first screen load is limited by the size of the project files and the number of third-party dependencies. This is because Vite performs a series of preparatory tasks during the first screen load rather than before the Node.js service starts, requiring a significant amount of dynamic analysis, dynamic resource import, and dynamic compilation compared to other bundlers. When dealing with large and complex front-end projects built with Vite, such as those with hundreds of pages and dozens of dependencies, the first screen can take a very long time to load, potentially several minutes or even tens of minutes depending on the specific project files and the developer's computer configuration. This significantly impacts developer efficiency.

[0003] The system suffers from poor initial screen performance, severely impacting development efficiency. The pre-built dependencies for the initial screen lack precise judgment and authoritative dynamic dependency information provided by AI cloud services, relying solely on developers' subjective experience to select and optimize dependencies. Furthermore, the absence of server-side caching and regular synchronization mechanisms leads to delayed dependency information updates, easily overlooking time-consuming core dependencies or repeatedly parsing dependencies, resulting in excessively long initial screen dependency parsing and compilation times. Simultaneously, computationally intensive and fundamental core JavaScript / Typescript components are loaded and executed as native scripts; current technologies lack automated translation and reference address replacement capabilities, making it difficult to easily convert them into faster-loading WebAssembly modules. The system fails to update reference addresses automatically, and Vite's integration support for the WebAssembly module is insufficient, preventing it from being automatically loaded as a core dependency, further slowing down the initial screen rendering speed. In addition, the retrieval and traversal of configuration files are not targeted, and reading, writing, and inputting dependency optimization information all require manual operation, which is cumbersome and error-prone. The optimizeDeps property configuration cannot be automatically updated, and the lack of a dedicated module to handle cross-platform information transmission and configuration synchronization, coupled with the delay in dependency optimization information interaction, can easily lead to the failure of dependency pre-build optimization or abnormal initial screen loading. This not only increases the configuration and debugging costs for developers but also significantly reduces overall development efficiency due to the excessively long initial screen waiting time and poor loading transitions. Summary of the Invention

[0004] This application provides a method and system for optimizing the build speed of front-end projects based on Vite, in order to solve the problems of poor first-screen performance of Vite affecting development efficiency in the prior art.

[0005] The first aspect of this application provides a method for optimizing the build speed of a front-end project based on Vite, comprising the following steps: obtaining local project Vite configuration information and third-party dependency package information; determining the dependency packages to be optimized based on the Vite configuration information and third-party dependency package information, and generating dependency optimization information; adding the dependency optimization information to the local project Vite configuration file, and converting computationally intensive or basic core Javascript or Typescript components into WebAssembly modules; when starting the project via npm or yarn commands, using the WebAssembly modules as dependencies to speed up loading.

[0006] Preferably, obtaining local project vite configuration information and third-party dependency package information includes: obtaining local project information files; retrieving vite configuration files and package configuration files based on the local project information files; and performing corresponding read and write operations on the vite configuration files and package configuration files by inputting preset node commands or client plugin visual interface buttons.

[0007] Preferably, retrieving vite configuration file and package configuration file information includes: obtaining vite and package configuration file information; uploading the vite and package configuration file information to the server via an API interface; and traversing local project files using the server's getViteDevOptimize method to find the vite.config.ts and package.json files.

[0008] Preferably, determining the dependency packages that need optimization and generating dependency optimization information includes: obtaining vite configuration file and package configuration file information; analyzing the vite configuration file and package configuration file information to match the dependency information that needs optimization stored in the database; and returning the matched dependency information that needs optimization as dependency optimization information to the client. The dependency information in the database is obtained from recommendations in the vite official documentation and learning from the enterprise's internal R&D cloud CodeFree big model.

[0009] Preferably, adding the dependency optimization information to the local project's vite configuration file includes: obtaining the dependency optimization information returned by the server; assigning the dependency optimization information to the optimizeDeps property in the vite configuration file using the setViteDevOptimize method; and when the project is started using the npm or yarn command, vite can perform dependency optimization operations based on the information in the optimizeDeps property.

[0010] Preferably, locating the vite.config.ts and package.json files includes: obtaining custom information of the client plugin visualization interface configuration; adjusting the traversal range of the getViteDevOptimize method based on the custom information of the client plugin visualization interface configuration; and accurately locating the vite.config.ts and package.json files according to the traversal range to ensure the completeness of the configuration information obtained.

[0011] The second aspect of this application provides a system for optimizing the build speed of a front-end project based on Vite, comprising: a recommendation information acquisition module for acquiring information on currently recommended dependency packages; a configuration information generation module for processing local project configuration information sent by the information reading and writing module, and generating recommendation information based on the latest data from the recommendation information acquisition module; an AI cloud module for providing dependency package information support to the recommendation information acquisition module; an information reading and writing module for reading Vite configuration and package dependency information, and transmitting or acquiring information needed or sent back by the configuration information generation module through a network communication module; a file translation module for compiling and converting Javascript or Typescript components into wasm format files; and a network communication module for establishing a connection between the information reading and writing module and the configuration information generation module for information transmission and interaction.

[0012] Preferably, the recommendation information acquisition module includes an information update unit and a data storage unit, wherein the information update unit is used to periodically initiate a session with the AI ​​cloud module to obtain recommendation dependency package information returned in key-value pair form; the data storage unit is used to store the recommendation dependency package information in a local database or cache on the server.

[0013] Preferably, the AI ​​cloud module includes a dependency package information collection unit, wherein the dependency package information collection unit is used to obtain and filter recommendable dependency package information based on relevant attribute keywords through online communities and developer recommendations.

[0014] Preferably, the file translation module includes a format compilation unit and an address replacement unit, wherein the format compilation unit is used to compile Javascript or Typescript components into wasm format files to form WebAssembly modules; and the address replacement unit is used to automatically replace the original dependency reference addresses with the addresses of the newly formed WebAssembly modules.

[0015] Therefore, this application includes the following beneficial effects: By integrating the recommendation information acquisition module and the AI ​​cloud module to preload recommended attributes, the recommended configuration attributes are updated to the latest version, while also reducing the cost of manual maintenance and data integration. The information read / write module automatically reads local project files and uploads the extracted information to the configuration information generation module via network communication. The configuration information generation module returns the recommended preloadable attribute information to the information read / write module based on the uploaded Vite and package information. The information read / write module writes the attribute information locally, and the file translation module automatically translates, compiles, and replaces references. These operations can be automatically executed with a single node command, eliminating the need for other cumbersome preloading optimizations. Overall, this addresses the problem of improving the first-screen loading performance of large and complex Vite-based front-end projects, further improving the development efficiency of enterprise developers. Thus, it solves the problem of poor Vite first-screen performance affecting development efficiency in existing technologies.

[0016] Additional aspects and advantages of this application will be set forth in part in the description which follows, and in part will be obvious from the description, or may be learned by practice of this application. Attached Figure Description

[0017] The above and / or additional aspects and advantages of this application will become apparent and readily understood from the following description of the embodiments taken in conjunction with the accompanying drawings, wherein:

[0018] Figure 1 This is a flowchart illustrating a method for optimizing the build speed of a Vite-based front-end project according to an embodiment of this application;

[0019] Figure 2 This is a schematic diagram of the structure of a system for optimizing front-end engineering build speed based on Vite, according to an embodiment of this application;

[0020] Figure 3 This is a schematic diagram of a recommendation information acquisition module provided according to an embodiment of this application;

[0021] Figure 4 This is a schematic diagram of a configuration information generation module according to an embodiment of this application;

[0022] Figure 5 This is a schematic diagram of an AI cloud module provided according to an embodiment of this application;

[0023] Figure 6 This is a schematic diagram of an information reading and writing module according to an embodiment of this application;

[0024] Figure 7 This is a schematic diagram of a document translation module provided according to an embodiment of this application;

[0025] Figure 8 This is a schematic diagram of a network communication module provided according to an embodiment of this application;

[0026] Figure 9 A flowchart illustrating a system for optimizing front-end engineering build speed based on Vite according to this application. Detailed Implementation

[0027] The embodiments of this application are described in detail below. Examples of the embodiments are shown in the accompanying drawings, wherein the same or similar reference numerals denote the same or similar elements or elements having the same or similar functions throughout. The embodiments described below with reference to the accompanying drawings are exemplary and intended to explain this application, and should not be construed as limiting this application.

[0028] The following describes a method and system for optimizing the build speed of a Vite-based front-end project, with reference to the accompanying drawings. Addressing the issue of poor Vite first-screen performance impacting development efficiency mentioned in the background, this application provides a method for optimizing the build speed of a Vite-based front-end project. In this method, a recommendation information acquisition module and an AI cloud module integrate recommended pre-loadable attributes. This ensures that the recommended configuration attributes are the latest version and reduces the cost of manual maintenance and data integration. An information read / write module automatically reads local project files and uploads the extracted information to a configuration information generation module via a network communication module. The configuration information generation module returns recommended pre-loadable attribute information to the information read / write module based on the uploaded Vite and package information. The information read / write module writes the attribute information locally, and a file translation module automatically translates, compiles, and replaces references. These operations can be automatically executed with a single node command, eliminating the need for other cumbersome pre-loading optimization. Overall, this method solves the problem of improving the first-screen loading performance of large and complex Vite-based front-end projects, further improving the development efficiency of enterprise developers. This solves the problem of poor first-screen performance in existing technologies, which affects development efficiency.

[0029] Specifically, Figure 1 This application provides a method for optimizing the build speed of a front-end project based on Vite.

[0030] like Figure 1 As shown, this method for optimizing the build speed of a Vite-based front-end project includes the following steps:

[0031] In step S101, the local project vite configuration information and third-party dependency package information are obtained.

[0032] It is understood that the embodiments of this application can comprehensively grasp the project's build configuration rules, dependency package list, and version information, providing complete data basis for subsequent dependency optimization judgment. Furthermore, through standardized read / write operations and precise file retrieval, it ensures the completeness and accuracy of information obtained from the vite configuration file (vite.config.ts) and package management file (package.json), avoiding optimization failures due to missing or inaccurate information. Simultaneously, this step, through server-side method traversal and custom scope adjustment, can accurately locate key configuration files, building a data bridge for subsequent operations such as dependency package analysis, optimization information generation, and configuration injection, ensuring the orderly progress of the optimization process and laying a solid foundation for improving build efficiency and reducing loading time from the source.

[0033] In this application example, obtaining local project vite configuration information and third-party dependency package information includes: obtaining local project information files; retrieving vite configuration files and package configuration files based on local project information files; and performing corresponding read and write operations on vite configuration files and package configuration files by inputting preset node commands or client plugin visual interface buttons.

[0034] Among them, the package configuration file information is a text file used in software development to centrally describe the metadata (name, version, dependencies, scripts, author, etc.) of the project / package and define the build / run rules. It is the core basis for package management tools to identify and manage projects.

[0035] It is understood that the embodiments of this application can clearly provide a complete list of the names, versions, and dependency types (production / development dependencies) of the third-party dependency packages required for the project, providing an accurate dependency data source for subsequent dependency optimization determination. It can also assist the server-side `getViteDevOptimize` method in quickly locating dependency association information, helping to efficiently match dependencies in the database that need optimization. Simultaneously, its version information ensures the compatibility of dependency optimization operations, avoiding build anomalies caused by version mismatches, and can be linked with the vite configuration file, providing a reliable basis for injecting optimization information into the `optimizeDeps` property, ensuring the dependency optimization process is implemented, and laying the foundation for improving the build speed and stability of vite projects from the dependency level.

[0036] For example, in a Vue 3-based Vite frontend project, when we read the `package.json` configuration file in the project root directory, we can obtain complete third-party dependency information: the production environment dependencies of this project include the Vue framework (version 3.4.21), Vue routing (version 4.3.0), axios request library (version 1.6.8), echarts charting library (version 5.4.3, this package is about 800KB in size, which is a relatively large dependency), and lodash utility library (version 4.17.21, which contains many computationally intensive methods); the development environment dependencies include the Vite build tool (version 5.2.8), the Vue Vite plugin (version 5.0.4), TypeScript (version 5.4.5), and the ESLint code checking tool (version 8.57.0). This configuration file also records that the project name is `vite-vue-optimize-demo`, the version number is 1.0.0, and the project entry file is `src / main.ts`. By using these specific dependency names and version numbers, as well as the large size of echarts and the computationally intensive nature of lodash, we can accurately identify that these two packages have optimization value, providing core data support for subsequent determination of dependency packages that need optimization and generation of dependency optimization information.

[0037] In this application example, the vite configuration file and package configuration file information are retrieved, including: obtaining vite and package configuration file information; uploading vite and package configuration file information to the server via API interface; and traversing local project files using the server's getViteDevOptimize method to find the vite.config.ts and package.json files.

[0038] Among them, getViteDevOptimize is a method in the Vite build tool used to obtain (or configure) optimization configuration items related to dependency pre-build in the development environment. The configuration returned by it will be applied to the Vite development server to customize optimization behaviors such as pre-packaging of third-party dependencies and dependency scanning.

[0039] It is understood that the embodiments of this application can systematically traverse local project files, accurately locate key configuration files such as vite.config.ts and package.json, and flexibly adjust the traversal range based on custom information configured in the client plugin's visual interface. This ensures the accuracy of file retrieval and avoids resource consumption caused by invalid traversal, ensuring the completeness and accuracy of vite configuration information and third-party dependency package information. The effective execution of this method not only provides a complete and reliable data foundation for subsequent core steps such as dependency package analysis, dependency matching that needs optimization, and dependency optimization information generation, but also avoids dependency optimization failures caused by configuration file location deviations or missing information from the source, ensuring the orderly and efficient advancement of the entire vite project build speed optimization process.

[0040] For example, in the optimization of a Vue3 + TypeScript vite front-end project on an e-commerce platform, the server calls the `getViteDevOptimize` method to retrieve the configuration file. This method receives custom traversal parameters configured in the client plugin visualization interface (root directory path is `. / src / modules / order-system`, traversal depth is set to 4 levels, and `node_modules` and the temporary directory `temp` are excluded). When the method executes, it first scans the configuration file `. / src / modules / order-system / vite.config.ts` within the specified range, extracts the currently unconfigured `optimizeDeps` dependency optimization item, and then scans the `package.json` file in the same directory, parsing the project... It includes 28 third-party dependencies (19 production dependencies and 9 development dependencies). Among them, the computationally intensive dependencies are lodash (version 4.17.21, accounting for 12% of the total dependency size) and date-fns (version 2.30.0, accounting for 8%). The dependencies with a size of over 600KB are echarts (version 5.4.3, 815KB) and ant-design-vue (version 4.0.7, 750KB). The entire traversal process of the getViteDevOptimize method takes 156ms, which is about 63% more efficient than the default scan without a custom traversal range (taking 420ms). Finally, the method summarizes and returns the complete path of the configuration file, the number of dependencies, and the size / feature data of key dependencies, providing an accurate and efficient data source for subsequent determination of dependency packages that need optimization.

[0041] In this application example, the process of locating the vite.config.ts and package.json files includes: obtaining custom information of the client plugin visualization interface configuration; adjusting the traversal range of the getViteDevOptimize method based on the custom information of the client plugin visualization interface configuration; and accurately locating the vite.config.ts and package.json files according to the traversal range to ensure the completeness of the configuration information obtained.

[0042] The package.json file is the core configuration file for Node.js / JavaScript projects. It stores metadata such as project name, version, dependencies, and executable scripts in JSON format, and is the basis for package managers such as npm / yarn to identify and manage projects.

[0043] It is understood that the embodiments of this application can fully present the core information such as the name, version number, and dependency type (production / development dependency) of the third-party packages that the project depends on. This provides a comprehensive and authoritative data source for the getViteDevOptimize method to accurately retrieve dependency data and for the server-side analysis to determine the dependency packages that need optimization. It can also ensure the compatibility of dependency optimization matching through version information and avoid build failures caused by version incompatibility. At the same time, the dependency information recorded in this file can be linked with the vite configuration file, providing a key basis for injecting dependency optimization information into the optimizeDeps property of vite.config.ts. This ensures that the optimization strategy is accurately implemented from the dependency list level, and ultimately helps to improve the build and loading speed of the vite project.

[0044] For example, in the Vue3+vite front-end project of a new retail back-end management system, the technicians parsed the package.json file in the project root directory to obtain core dependency data. This file showed a total of 32 dependencies (21 for production and 11 for development). The production dependencies included vue@3.4.21 (core framework, approximately 120KB), element-plus@2.6.3 (UI component library, approximately 1.2MB, accounting for 35% of the total production dependencies), lodash@4.17.21 (utility library, containing 15+ computationally intensive methods such as deep copy and array sorting), xlsx@0.18.5 (Excel processing library, approximately 780KB), and axios@1.6.8 (request library, approximately 45KB). The development dependencies include build tools such as vite@5.2.8 and @vitejs / plugin-vue@5.0.4. By analyzing the specific data extracted from package.json, the technical staff determined that element-plus (large in size and not configured for on-demand loading, requiring full parsing on the first build), lodash (containing a large number of computationally intensive methods), and xlsx (over 600KB in size and only used in the data export function) were the core dependencies that needed optimization. Among them, element-plus, due to the lack of on-demand loading, increased the time taken in the vite pre-build stage by 280ms. This data on version, size, dependency type, and usage characteristics accurately extracted from package.json became the core basis for generating dependency optimization information in the future.

[0045] In step S102, based on the vite configuration information and third-party dependency package information, the dependency packages that need to be optimized are determined, and dependency optimization information is generated.

[0046] In programming projects, a dependency package is a collection of code that has been pre-developed and packaged by others to achieve specific functions. Your project needs the functionality of this code to function properly, hence the name "project dependency package".

[0047] It is understood that the embodiments of this application can provide ready-made utility functions, component libraries, business logic modules, etc. for the project, eliminating the need for developers to redevelop, greatly improving development efficiency. At the same time, the modular design of high-quality dependency packages can be adapted to Vite's build mechanism. In the optimization process, dependency packages are not only the core objects for the getViteDevOptimize method to retrieve and the server-side analysis and matching, but also the carriers for implementing dependency optimization strategies. By filtering the dependency packages that need to be optimized and injecting them into the optimizeDeps property configured in Vite, combined with WebAssembly module conversion and other operations, the build and packaging size of dependency packages can be reduced and the loading and parsing speed can be accelerated. At the same time, reasonable dependency package management can avoid redundant dependencies from consuming resources. Ultimately, while ensuring the integrity of the project's functions, it helps to improve both the build and running efficiency of the Vite project.

[0048] For example, in a Vue 3 + Vite front-end project of a logistics management system, the technical staff, based on the Vite configuration information and the dependency package data parsed from package.json, determined the core dependency packages that needed optimization: echarts@5.4.3 (data visualization dependency, 815KB in size, Vite pre-build time is 320ms without optimization, accounting for 45% of the total pre-build time), lodash@4.17.21 (utility class dependency, containing 20+ computationally intensive methods, such as array deduplication and object deep merging, a single deep copy method call takes 18ms), and moment@2.30.1 (date processing dependency, 230KB in size, due to the inclusion of the full language pack, an additional 150KB of redundant code is loaded during the build). Combined with the official Vite documentation... The recommended optimization list and optimization cases from the enterprise's internal CodeFree large model learning generated dependency optimization information, including: adding echarts to vite's optimizeDeps.include list and configuring on-demand module import (loading only the core modules of line charts and bar charts, reducing the size to 280KB), compiling 12 frequently used computationally intensive methods in lodash into WebAssembly modules (reducing the time of a single deep copy call to 3ms), and replacing moment with dayjs@1.11.10 (only 12KB in size, fully compatible). This dependency optimization information accurately points to the performance bottlenecks and optimization directions of each dependency package, providing a clear basis for subsequent writing to the vite configuration file and improving build speed.

[0049] In this application example, the dependency packages that need optimization are identified, and dependency optimization information is generated, including: obtaining vite configuration file and package configuration file information; analyzing the vite configuration file and package configuration file information to match the dependency information that needs optimization stored in the database; and returning the matched dependency information that needs optimization as dependency optimization information to the client. The dependency information in the database comes from recommendations in the vite official documentation and learning from the enterprise's internal R&D cloud CodeFree big model.

[0050] The Vite configuration file is a dedicated configuration entry file written in JavaScript / TypeScript, used to customize the core behaviors of the Vite build tool, such as project build rules, development server parameters, plugin loading, and dependency resolution.

[0051] It is understood that the embodiments of this application are not only a implementation carrier of dependency optimization strategies, but also can integrate the list of dependency packages to be optimized returned by the server through the optimizeDeps property, guiding Vite to accurately perform dependency pre-build operations when the project starts, reducing real-time compilation time. It can also provide configuration entry points and reference rules for converting computationally intensive or basic core Javascript / Typescript components into WebAssembly modules, ensuring that Wasm modules are effectively loaded when the project starts. At the same time, this file can be linked with the dependency information in package.json to ensure the compatibility and targeting of dependency optimization strategies. It can also adjust the build behavior through custom configuration items, providing support for the orderly advancement of the optimization process from the build rule level, ultimately helping the Vite project achieve a dual improvement in build efficiency and runtime performance.

[0052] For example, in the Vue3 + TypeScript vite front-end project of a financial risk control platform, the technicians obtained a configuration file located at . / vite.config.ts in the project root directory. Initially, this file only configured the basic Vue plugin (@vitejs / plugin-vue@5.0.4), the development server port (3000), and the base path ( / ), without setting any dependency optimization related items. At this point, the project's cold start build took 2950ms, of which the dependency pre-build phase took 1320ms (accounting for 44.7% of the total build time). The technicians then used the setViteDevOptimize method to write the generated dependency optimization information into this configuration file: adding an include array (containing "echarts@5.4.3", "lodash@4.17.21") and an exclude array (containing...) to the optimizeDeps property. The configuration ("dayjs@1.11.10") sets esbuildOptions.target to "es2020" to improve pre-build efficiency. Simultaneously, a WebAssembly module mapping ({"@wasm-lodash":. / src / wasm / lodash.wasm"}) is added to resolve.alias. After this configuration change, dependency pre-build time is reduced to 480ms (a 63.6% decrease), and overall cold start build time is shortened to 1520ms (a 48.5% decrease). Furthermore, vite can prioritize pre-building core dependencies based on the configuration in optimizeDeps upon startup. The reference to the WebAssembly module reduces the execution time of lodash's computationally intensive methods from an average of 18ms / time to 2.7ms / time. This precise modification to the vite configuration file directly implements the dependency optimization strategy, becoming the core carrier for improving build speed.

[0053] In step S103, dependency optimization information is added to the local project vite configuration file, and computationally intensive or basic core Javascript or Typescript components are converted into WebAssembly modules.

[0054] Among them, the WebAssembly module is a portable and high-performance code module written in binary instruction format. It can run at near-native speed in browsers or JavaScript engines and can be compiled from languages ​​such as C / C++ / Rust, serving as a high-performance complement to JavaScript.

[0055] It is understood that the core carrier of the Vite-based front-end project build speed optimization scheme in this application, which improves code execution efficiency and loading performance, converts computationally intensive or fundamental Javascript / Typescript components into a lightweight and efficient binary format. This not only significantly reduces code parsing and compilation time but also effectively avoids the performance bottleneck of pure JS code in complex computational scenarios by achieving near-native code execution efficiency. At the same time, this module can be directly referenced by Vite as a dependency when the project starts, working in conjunction with the dependency optimization strategy configured by the optimizeDeps property to reduce runtime resource consumption and loading latency, further enhancing the build efficiency and smoothness of Vite projects, and providing key technical support for improving the performance of front-end applications in highly complex business scenarios.

[0056] For example, in the Vue3 + vite front-end project of a big data analytics platform, the technical staff converted six core JavaScript methods, including the computationally intensive lodash deep merge and sorting of a 100,000-record data array (sortBigArray), into WebAssembly modules. After compilation with Emscripten, this Wasm module was only 45KB in size (a 45.1% reduction compared to the original 82KB JS code). The technical staff then configured the Wasm module as "@wasm-utils" in vite.config.ts using resolve.alias. In this project, the module was imported via an import statement to replace native JS method calls. In actual testing, native JS took 280ms to sort 100,000 data entries, while calling the same function of the Wasm module only took 65ms (a performance improvement of 76.8%). At the same time, Vite cached the Wasm module independently during the pre-build phase, so it did not need to be recompiled during subsequent hot updates, reducing the project's hot update time from an average of 180ms to 95ms. The introduction of this WebAssembly module not only significantly improved the execution efficiency of computationally intensive operations, but also increased the cache utilization rate in the Vite build process by 52.8%, becoming a core means of optimizing both project build speed and runtime performance.

[0057] In this embodiment, adding dependency optimization information to the vite configuration file of the local project includes: obtaining dependency optimization information returned by the server; assigning the dependency optimization information to the optimizeDeps property in the vite configuration file using the setViteDevOptimize method; and when the project is started using the npm or yarn command, vite can perform dependency optimization operations based on the information in the optimizeDeps property.

[0058] Among them, optimizeDeps is a core configuration property in the Vite build tool, which is used to specify the relevant rules for dependency pre-building (such as specifying dependencies that need to be pre-built, excluding dependencies that do not need to be pre-built, etc.), thereby optimizing the performance of dependency parsing and loading during the development phase.

[0059] Understandably, the core configuration carrier for dependency pre-build optimization implemented in this application, as a key attribute in the vite configuration file, can carry the list of dependency packages to be optimized returned by the server. This guides vite to accurately perform dependency pre-build operations during the project startup phase, packaging scattered third-party dependency packages into single or a small number of modules, significantly reducing the number of resource requests at runtime. At the same time, the configuration of this attribute can avoid repeated compilation of the same dependencies after project startup, effectively reducing real-time compilation time. It also works in synergy with the WebAssembly module's referencing strategy to further improve dependency loading and code execution efficiency. From the build process level, this ensures the implementation of dependency optimization strategies and provides key configuration support for improving the build speed and runtime performance of vite projects.

[0060] For example, in a Vue3 + vite frontend project for an e-commerce data analysis backend, the `optimizeDeps` property in the `vite.config.ts` file is initially empty. During a cold start, the dependency pre-build phase needs to handle 12 third-party dependencies, including echarts, lodash, and date-fns, taking 1560ms, accounting for 54.7% of the total cold start time (2850ms). Technical staff use the `setViteDevOptimize` method to assign the generated dependency optimization information to `optimizeDeps`: adding three large, frequently called core dependencies—"echarts@5.4.3", "lodash@4.17.21", and "date-fns@2.30.0"—to the `include` array, and excluding "vue@3.4.21" (a built-in optimization in vite) from the `exclude` array. (No need for repeated processing) "axios@1.6.8" (only 45KB in size with no optimization value), while setting optimizeDeps.esbuildOptions.parallel to true to enable multi-threaded pre-build; after configuration, the dependency pre-build time was reduced to 580ms (a reduction of 62.8%), of which the echarts pre-build time was reduced from 420ms to 110ms, and the lodash pre-build time was reduced from 280ms to 85ms. In addition, vite will cache the pre-built dependencies to the node_modules / .vite / deps directory, and directly reuse the cache during the second cold start, reducing the total cold start time from 2850ms to 920ms (a reduction of 67.7%). The precise configuration of optimizeDeps allows vite to focus on core dependencies for pre-compilation, avoiding the compilation overhead of invalid dependencies, which has become the core approach to reducing the dependency pre-build time.

[0061] In step S104, when starting the project via npm or yarn, the WebAssembly module is referenced as a dependency to speed up the loading process.

[0062] npm is the default package manager for Node.js, primarily used for the installation, updating, publishing, and version management of third-party code packages (dependencies) in JavaScript / Node.js projects.

[0063] It is understood that the embodiments of this application can rely on the package.json file to accurately install third-party dependency packages, manage versions, and maintain dependency relationships, ensuring the integrity and compatibility of the dependency packages to be optimized. It can also trigger vite to read the dependency optimization information of the optimizeDeps property in the configuration file by executing the startup command, driving vite to complete the dependency pre-build operation during the project startup phase. At the same time, it supports WebAssembly modules to be directly referenced and loaded by the project in the form of dependencies, avoiding build stagnation caused by module import anomalies. It provides reliable support for the implementation of the entire build speed optimization solution from the perspective of dependency management and process triggering.

[0064] For example, in the Vue3 + vite front-end project of a smart park management system, after the technicians completed the optimizeDeps configuration and WebAssembly module mapping in vite.config.ts, they started the project by executing the npm rundev command. This command triggered vite's built-in dependency pre-build process: before optimization, executing npm rundev took 3820ms from entering the command to successful project startup, including 1650ms for dependency pre-compilation and 420ms for loading the WebAssembly module; after optimization, executing the same npm rundev command, vite prioritized the pre-build of echarts@5.4.3 and lodash@4.17.21 included in optimizeDeps and cached them in nod. The code snippet `e_modules / .vite / deps` was used, and the compiled lodash-related WebAssembly modules (45KB in size) were directly referenced as dependencies. The entire startup process time was reduced to 1450ms (a 62% reduction), with dependency pre-compilation time reduced to 520ms (a 68.5% reduction) and WebAssembly module loading time reduced to 85ms (an 80% reduction). In addition, dependency tree analysis using the `npmls` command revealed that the optimized project had 18 fewer redundant references to third-party dependencies, and the dependency installation size was reduced from 287MB to 195MB (a 32% reduction). The `npm` command is not only the entry point for starting the project, but the Vite build process it triggers can also accurately implement dependency optimization and WebAssembly module referencing strategies, directly demonstrating the optimization effect on build speed.

[0065] The following will illustrate a method for optimizing the build speed of a Vite-based front-end project through a specific embodiment, including:

[0066] A certain enterprise-level back-end management system was developed using the Vite+Vue3+TypeScript technology stack, covering core functions such as data statistics, permission management, Excel import and export, and big data visualization. With business iterations and upgrades, the project gradually integrated over 20 third-party dependency packages, including echarts (a big data visualization component library), lodash-es (a utility library), moment (a time processing library), element-plus (a UI component library), xlsx (an Excel parsing and generation library), axios (a network request library), vue-router (a routing management library), and pinia (a state management library). Simultaneously, a large number of custom business components and utility functions were developed. During development and building, a series of performance pain points gradually emerged: the development environment cold start took up to 12 seconds, and each project restart required a long wait, severely impacting development efficiency; hot update responses were unstable, with occasional stuttering, especially when modifying cores with many dependency references. When hot-updating components, the time taken can reach over 800ms, disrupting development workflows. Production environment builds take approximately 25 seconds, and the overall package size reaches 3.3MB, with third-party dependencies accounting for over 70%, resulting in a long initial page load time. Lighthouse tests show that the initial content rendering (FCP) takes 3.8 seconds. More significantly, in the data visualization module, when rendering over 100,000 line charts, front-end calculations take over 500ms, causing noticeable page lag and even blocking the browser's main thread, impacting user experience. To address these issues, we implemented a targeted Vite build speed optimization solution based on the core concept of "dependency pre-build optimization + WebAssembly (Wasm) computation acceleration." This solution follows the execution logic of "obtaining configuration and dependency information—determining optimization goals and generation schemes—configuration optimization and Wasm conversion—starting and verifying effects," achieving a comprehensive improvement in build speed, runtime performance, and user experience.

[0067] First, our system retrieves the Vite configuration information and third-party dependency details of the local project to provide data support for subsequent optimization decisions. During the Vite configuration information extraction phase, we reviewed the original core configuration of the project and found that the configuration only included basic plugin registration, path aliases, and server settings. It did not configure key parameters such as dependency pre-building and build optimization, and relied entirely on Vite's default behavior. However, Vite only pre-builds non-ESM format dependencies in node_modules by default, which cannot specifically optimize large and frequently called core dependencies, nor can it implement dependency splitting and caching strategies, indicating significant room for optimization. To accurately understand the status of third-party dependencies, we conducted a comprehensive analysis using a combination of tools and commands: We used a dependency tree query command to examine the project's direct and nested dependencies, confirming that echarts depends on the Canvas rendering core library, and both are in UMD format, not pure ESM format, incurring format conversion overhead. Element-plus internally depends on numerous sub-components, some of which are not actually used in the project but are still fully packaged. We installed a volume analysis plugin and generated a dependency volume analysis report, which showed that echarts (including its dependencies) is approximately 800KB, accounting for 35% of the total dependency volume; element-plus is approximately 650KB, accounting for 28%; xlsx is approximately 400KB, accounting for 17%; and moment (including multi-language packages) is approximately 200KB, accounting for 9%. %, with the remaining dependencies accounting for 11% in total; through the reference statistics function of the code editor, it was found that lodash-es was called 218 times, widely distributed in utility functions, form validation, data processing and other modules; echarts was called 45 times, concentrated in the data visualization module; moment was called 127 times, used for time formatting, time difference calculation and other scenarios; by using the performance panel of the browser developer tools and the Lighthouse tool to locate performance bottlenecks, it was found that the echarts line path calculation function and the xlsx Excel parsing function were the two functions with the highest CPU consumption. Both are pure calculation tasks without DOM operations, and the single execution time is 520ms and 380ms respectively, which are typical computing-intensive scenarios with the potential for WebAssembly conversion.

[0068] Based on the above analysis, we have formulated clear dependency optimization judgment rules to accurately screen dependency packages that need optimization and generate detailed dependency optimization information. The judgment criteria for pre-build optimization are non-ESM format, size exceeding 100KB, and call frequency greater than 50 times. The corresponding target dependency packages are element-plus, lodash-es, and moment. These dependencies have incompatible formats, large size, and frequent calls. Pre-build can convert them to ESM format and cache them to reduce repeated conversion overhead. The judgment criteria for WebAssembly conversion optimization are computationally intensive, pure JS / TS logic, no DOM dependency, and single execution time exceeding 100ms. The corresponding targets are the line chart path calculation logic of echarts and the Excel parsing logic of xlsx. These tasks can significantly reduce computation time by using Wasm to achieve near-native execution efficiency. The judgment criteria for size reduction optimization are the presence of redundant code (such as multi-language packs and unused functional modules). The corresponding target is moment, which by default includes the full language pack, but the project only requires Chinese language support, resulting in a large amount of redundancy. Based on this rule, the core optimization information we generate includes three parts: Pre-build optimization information explicitly mandates a pre-build dependency list, including element-plus, lodash-es, moment, and the core ECharts module, while excluding axios (small size, pure ESM format, simple calling logic) which doesn't require pre-build. The pre-build output directory uses the default cache directory to avoid duplicate builds, and specifies the core ECharts module as the custom pre-build entry point to ensure targeted pre-builds. Wasm conversion targets are clearly defined, extracting the ECharts line path calculation function as the core conversion object and the xlsx Excel parsing function as the secondary conversion object, while also planning the post-conversion calling logic and degradation scheme. Size pruning information explicitly states that moment only retains the Chinese language pack, and excludes other language packs through configuration to reduce redundant size.

[0069] Subsequently, we integrated the aforementioned dependency optimization information into the Vite configuration file of the local project. Simultaneously, we completed the conversion of computationally intensive JavaScript components to WebAssembly modules. During the Vite configuration modification phase, we added dependency pre-building and build optimization configurations, and integrated auxiliary plugins for volume analysis and browser compatibility. The optimized configuration primarily strengthens three capabilities: First, it explicitly specifies dependencies that need to be pre-built, allowing Vite to convert these dependencies from CommonJS / UMD format to ESM format and cache them, directly reading the cache during cold starts to avoid repeated conversions; second, it configures a dependency splitting strategy, splitting third-party dependencies into multiple independent modules to avoid excessively large single file sizes, while utilizing browser caching mechanisms so that core dependency modules do not need to be reloaded when non-core dependencies are updated; third, it declares Wasm files as static resources, ensuring Vite can correctly handle their packaging and reference paths, while providing a fallback solution for browsers that do not support Wasm through compatibility plugins, and disabling hot-reload error overlays to reduce development interference. In the WebAssembly module conversion stage, we chose AssemblyScript as the TypeScript to Wasm compiler. This tool combines TypeScript syntax support with efficient compilation capabilities. First, we installed the relevant dependencies and created a dedicated folder in the project root directory to store the Wasm source code, containing the core logic files and compilation configuration files. The compilation configuration files ensure that TypeScript syntax can be correctly compiled into Wasm bytecode. In the core logic files, we implemented logic consistent with the echarts polyline path calculation function and auxiliary data extremum calculation functions, ensuring that the converted code can completely replace the original JS logic.

[0070] Subsequently, a Wasm compilation script was added to the project configuration file to differentiate between development and production environments. The development environment script retains debugging information for easy troubleshooting, while the production environment script enables code compression and performance optimization. A pre-build script was also set up to ensure that the Wasm module is automatically compiled before the production build, preventing omissions. After compilation, the Wasm module was referenced in the front-end code, and the data visualization component was modified, replacing the original JS calculation logic with Wasm calls. A comprehensive fallback mechanism was added to ensure compatibility: the compiled Wasm file is loaded asynchronously, the byte stream is obtained, and the module is instantiated, exposing the core calculation functions for business calls; if Wasm loading fails (e.g., browser incompatibility), it automatically falls back to the original JS logic, ensuring normal functionality. In the chart initialization function, 100,000 test data points were simulated, and the Wasm module's calculation functions were called to obtain the line chart path, replacing the original echarts built-in calculation logic. Calculation time was recorded using performance statistics to verify the optimization effect. Furthermore, logic such as chart redrawing and data format conversion when the window size changes was implemented to ensure the stability and interactive experience of the visualization module.

[0071] Finally, we started the development and production environments using standard commands to verify the optimization effects. During startup, Vite automatically read the optimized configuration, first checking the cache directory. On the first startup, it pre-builds the specified dependencies and generates ESM format cache files, a process that takes about 3 seconds. On subsequent startups, it directly reads the cache. The cold start time was reduced from 12 seconds to 4 seconds, an improvement of 66.7%. The hot update response time was reduced from 800ms to 150ms, an improvement of 81.25%. Modifications to core components showed quick results, significantly improving development efficiency. During production environment setup, the combined effect of pre-build caching and splitting strategies reduced build time from 25 seconds to 8 seconds, a 68% improvement. Simultaneously, significant optimizations were achieved in package size: moment size decreased from 200KB to 50KB (a 75% improvement), echarts size from 800KB to 450KB (a 43.75% improvement), and total dependency size from 2.3MB to 1.2MB (a 47.8% improvement). Through splitting, third-party dependencies were divided into three independent modules, increasing browser cache hit rate to 85%, reducing initial page load time from 3.8 seconds to 1.9 seconds, and improving the Lighthouse benchmark score from 72 to 91. In terms of computational performance, the path calculation time for 100,000 line chart data points decreased from 520ms in JS logic to 140ms in Wasm logic, a 73.1% improvement, completely eliminating page stuttering and ensuring smooth interaction. In Excel parsing scenarios, the parsing time for 10,000 rows of data decreased from 380ms to 95ms, a 75% improvement, significantly enhancing import and export efficiency.

[0072] In addition, we summarized several points to note during the optimization process: Wasm is only suitable for pure computational logic; avoid handling DOM operations within Wasm, as it lacks a DOM API and requires JS bridging, which can actually reduce performance; if dependency pre-build configurations or dependency versions are modified, commands must be executed to clear the cache and rebuild to avoid cache conflicts; for browsers that do not support Wasm, compatibility solutions must be provided through compatibility plugins and custom degradation logic to ensure functional integrity; combining the on-demand import functionality of echarts and element-plus further reduces unnecessary code and maximizes the size optimization effect. This optimization solution addresses the core pain points of the project from two dimensions: build process and runtime performance, through precise dependency analysis, targeted pre-build configuration, and Wasm computation acceleration. Its core logic can be reused in other Vite front-end projects, especially suitable for medium to large-scale projects involving big data processing, visualization, and complex calculations. The optimization effect becomes more significant with increasing dependency size and computational complexity, providing a practical reference for optimizing Vite build speed in similar projects.

[0073] In summary, this invention offers the following advantages: In terms of development efficiency, relying on pre-build and caching reduces cold start time to 4 seconds and hot update time to within 150ms, improving iteration efficiency; in terms of runtime performance, WebAssembly accelerates computationally intensive tasks, reducing core scenario latency by over 73%, eliminating lag and overcoming JS bottlenecks; in terms of user experience, package splitting and size reduction reduce dependency size by 47.8%, halve first-screen loading time, and achieve an 85% cache hit rate, meeting enterprise-level requirements; in terms of production deployment, build time is reduced to 8 seconds, shortening the cycle and reducing bandwidth and maintenance costs; and in terms of industry reference, it provides a complete process, offering a general template for similar medium-to-large-scale Vite projects.

[0074] Figure 2 This is a block diagram illustrating a system for optimizing the build speed of a front-end project based on Vite, according to an embodiment of this application.

[0075] like Figure 2 As shown, the system 10 for optimizing front-end engineering build speed based on Vite includes: a recommendation information acquisition module 100, a configuration information generation module 200, an AI cloud module 300, an information reading and writing module 400, a file translation module 500, and a network communication module 600.

[0076] The system comprises the following modules: a recommendation information acquisition module 100, which acquires information on currently available dependency packages; a configuration information generation module 200, which processes local project configuration information sent by the information reading and writing module and generates recommendation information based on the latest data from the recommendation information acquisition module; an AI cloud module 300, which provides dependency package information support to the recommendation information acquisition module; an information reading and writing module 400, which reads vite configuration and package dependency information and transmits or acquires information needed or sent back by the configuration information generation module through the network communication module; a file translation module 500, which compiles and converts Javascript or Typescript components into wasm format files; and a network communication module 600, which establishes a connection between the information reading and writing module and the configuration information generation module for information transmission and interaction.

[0077] A system for optimizing the build speed of a Vite-based front-end project, as proposed in this application, integrates recommended pre-loadable attributes through a recommendation information acquisition module and an AI cloud module. This ensures that the recommended configuration attributes are the latest version and reduces the cost of manual maintenance and data integration. The information read / write module automatically reads local project files and uploads the extracted information to the configuration information generation module via a network communication module. The configuration information generation module returns recommended pre-loadable attribute information to the information read / write module based on the uploaded Vite and package information. The information read / write module writes the attribute information locally, and the file translation module automatically translates, compiles, and replaces references. These operations can be automatically executed with a single node command, eliminating the need for other cumbersome pre-loading optimization. Overall, this system solves the problem of improving the first-screen loading performance of large and complex Vite-based front-end projects, further improving the development efficiency of enterprise developers. Therefore, it addresses the problem of poor first-screen performance of Vite affecting development efficiency in existing technologies.

[0078] In this embodiment of the application, the recommendation information acquisition module 100 includes: such as Figure 3 As shown, there are an information update unit and a data storage unit.

[0079] The information update unit is used to periodically initiate a session with the AI ​​cloud module to obtain recommended dependency package information returned in key-value pair form; the data storage unit is used to store the recommended dependency package information in the local database or cache on the server.

[0080] It is understood that the information update unit in this embodiment periodically initiates a session with the AI ​​cloud module and obtains recommended dependency package information in key-value pair format. This ensures that dependency package data is synchronized in real time and accurately adapted to the needs of the front-end project. The key-value pair format makes it easier for subsequent modules to quickly parse and filter the data, avoiding build optimization failures caused by outdated dependency information. The data storage unit stores the recommended dependency package information in the local database or cache on the server side, which can significantly reduce the frequency of repeated requests to the AI ​​cloud module, reduce network transmission time and resource consumption, and at the same time enable rapid retrieval of dependency package information. This provides timely data support for the configuration information generation module, helps the system efficiently output dependency recommendation schemes adapted to the current project, and further improves the build speed and optimization efficiency of the Vite front-end project.

[0081] For example, when a team built a Vite enterprise-level front-end project and used this system, the information reading and writing module called the `getViteDevOptimize` method to read the core configuration and dependencies within 1.5 seconds, and the network communication module completed the establishment of the client-server link and data upload within 100ms. After the configuration parsing unit quickly decomposed the information, it triggered the recommendation information acquisition module, whose information update unit requested the AI ​​cloud module—the AI ​​cloud module had already selected 20+ adaptable dependencies through multiple channels, and returned the top 10 optimal items as key-value pairs within 1 second, which were then cached in real time by the data storage unit. The recommendation generation unit selected adaptable dependencies, and after feedback from the network module, the configuration writing unit wrote the information to the `optimizeDeps` property, completing the configuration optimization. At the same time, the file translation module compiled 30+ core components into wasm format, and the address replacement unit synchronously updated the references, improving component loading speed by 60%. The entire process required no manual intervention, reducing the initial project build time from 25 seconds to 15 seconds (a 40% reduction), and the hot update response latency from 300ms to 80ms, significantly improving build efficiency.

[0082] In this embodiment of the application, the configuration information generation module 200 includes: Figure 4 As shown, the configuration includes a parsing unit and a recommendation generation unit.

[0083] The configuration parsing unit is used to receive and parse the vite configuration file information and third-party package dependency information uploaded by the information reading and writing module; the recommendation generation unit is used to combine the recommendation information to obtain the latest dependency package data stored in the module, filter out the recommended dependency package information that is suitable for the current project, and organize and generate recommendation data.

[0084] It is understood that the configuration parsing unit in this embodiment receives and parses the vite configuration file information and third-party package dependency information uploaded by the information reading and writing module. It can accurately grasp the technology stack characteristics, dependency structure and build configuration rules of the current front-end project, providing a low-level basis for subsequent dependency recommendations that fits the actual project, and avoiding conflicts between recommended dependency packages and the existing configuration and dependency system of the project from the source. The recommendation generation unit combines the latest dependency package data stored in the recommendation information acquisition module, filters and organizes it to generate recommended dependency package information that is suitable for the current project. This ensures the timeliness and accurate adaptation of the recommended content, and filters out low-performance and incompatible dependency packages. The structured recommendation data output can directly support the information reading and writing module to complete the optimization and adjustment of vite configuration. From the dependency selection level, it can accurately solve the problems of compilation time and slow resource loading caused by dependency redundancy, poor compatibility or insufficient performance during the build process, and finally perform targeted and efficient optimization of the vite front-end project build speed.

[0085] In this embodiment of the application, the AI ​​cloud module 300 includes: Figure 5 As shown, this is the dependency package information collection unit.

[0086] The dependency package information collection unit is used to obtain and filter recommended dependency package information based on relevant attribute keywords through online communities and developer recommendations.

[0087] It is understood that the dependency package information collection unit in this application embodiment uses online communities and developer recommendations as the core information source, and combines relevant attribute keywords to carry out acquisition and screening work. It can not only rely on the community ecosystem and developer practical experience to discover high-quality dependency packages that have been verified in real scenarios, have strong compatibility, and excellent performance, ensuring the practicality and timeliness of information, but also accurately focus on dependency packages with core characteristics such as being compatible with Vite builds and having speed-up potential through attribute keywords, effectively filtering out low-quality dependency packages with lagging performance, poor compatibility, and stagnant maintenance.

[0088] In this embodiment of the application, the information read / write module 400 includes: Figure 6 As shown, there are configuration reading unit and configuration writing unit.

[0089] The configuration reading unit is used to call the getViteDevOptimize method of the built-in plugin, traverse the local project files, and retrieve and read the configuration and dependency information in vite.config.ts and package.json; the configuration writing unit is used to write the recommended dependency package information returned by the configuration information generation module into the optimizeDeps property of the local vite configuration file through the setViteDevOptimize method.

[0090] It is understood that the configuration reading unit in this embodiment calls the built-in plugin method to accurately read the core configuration and dependency information, which is in line with the Vite ecosystem, efficient and without omissions, and provides reliable local data support for subsequent optimization; the configuration writing unit automatically writes the recommended dependencies into the optimizeDeps property through the corresponding method, saving manual operation, avoiding errors, directly triggering Vite dependency pre-optimization, and helping to speed up the build and make it more feasible.

[0091] For example, when a team was developing a Vite+React+TS e-commerce front-end project and used this system, the AI ​​cloud module had already pre-selected 45 high-quality dependency packages adapted to e-commerce scenarios and cached them for later use. The configuration reading unit of the information reading and writing module then started, calling the getViteDevOptimize method of the built-in plugin. Within 1.8 seconds, it traversed more than 100 local project files (including page components, utility functions, etc.), accurately reading 18 core parameters such as server configuration and build compression rules in vite.config.ts, and 22 third-party dependencies (including routes, UI component libraries, etc.) in package.json. The overall read and write time was only 1.2 seconds. After the data was uploaded by the network communication module, it was filtered by the configuration parsing and recommendation generation unit. Finally, the data of 6 optimal dependency packages adapted to e-commerce high-concurrency scenarios was fed back. The configuration writing unit used the setViteDevOptimize method to write the information of these 6 dependency packages into the optimizeDeps property of the vite configuration file within 400ms, completing the automatic configuration synchronization. The subsequent file translation module processed 40+ core business components in wasm format, reducing the initial build time of the final project from 32 seconds to 18 seconds (a reduction of 43.75%), improving component loading speed by 65%, and reducing hot update latency from 350ms to 70ms.

[0092] In this embodiment of the application, the document translation module 500 includes: Figure 7 As shown, the format compilation unit and the address substitution unit.

[0093] The format compilation unit is used to compile Javascript or Typescript components into wasm format files to form WebAssembly modules; the address replacement unit is used to automatically replace the original dependency reference addresses with the addresses of the newly formed WebAssembly modules.

[0094] It is understood that the format compilation unit in this application compiles Javascript or Typescript components into wasm format files to generate WebAssembly modules. Leveraging the fact that WebAssembly's execution efficiency is far superior to native JS / TS, it can significantly improve component compilation and execution speed, reducing code translation time during the Vite build process. The address replacement unit automatically replaces the original dependency reference addresses with the new WebAssembly module addresses, eliminating the need for manual modification of reference paths. This avoids build errors caused by address modification mistakes and achieves seamless switching from native JS / TS components to high-performance wasm modules, ensuring that the optimized modules can be called normally by the project. This directly improves the build and execution efficiency of the Vite front-end project from the code execution level.

[0095] In this embodiment of the application, the network communication module 600 includes: Figure 8 As shown, the connection establishment unit and the data transmission unit are connected.

[0096] The connection establishment unit is used to establish a network communication link between the client information reading and writing module and the server configuration information generation module to ensure smooth data transmission. The data transmission unit is used to upload the local project configuration information read by the information reading and writing module to the configuration information generation module, and to receive the recommended dependency information returned by the configuration information generation module, thus performing bidirectional data interaction.

[0097] It is understood that the connection establishment unit in this application establishes a network communication link between the client information reading and writing module and the server configuration information generation module and ensures smooth channel operation. This ensures the stability and continuity of data transmission from the bottom layer, avoiding configuration / dependency information transmission failure due to link interruption or lag, and laying a solid network foundation for data interaction in the entire system. The data transmission unit realizes bidirectional interaction between uploading local project configuration information and sending back recommended dependency information. This allows the server to accurately obtain the actual configuration and dependency status of the project, ensuring the adaptability and relevance of recommended dependencies. It also enables the optimized recommendation information to be efficiently sent back to the client, opening up a complete link from "local information collection - server analysis and recommendation - client configuration implementation". This ensures seamless and efficient data flow throughout the entire process of optimizing Vite project construction speed.

[0098] For example, when a team was developing a Vite+React+TS e-commerce front-end project, they used this system. The AI ​​cloud module had already pre-selected 45 high-quality dependency packages suitable for e-commerce scenarios and cached them for later use. After the configuration reading unit of the information reading and writing module completed local data reading and writing, the network communication module immediately started: the connection establishment unit used the TCP long connection protocol to establish an encrypted communication link between the client information reading and writing module and the server-side configuration information generation module within 80ms, and ensured zero packet loss and low latency through a three-way handshake verification. Subsequently, the data transmission unit uploaded the 18 Vite configuration parameters and 22 third-party dependency information (totaling 2.8KB of data) read to the configuration information generation module in binary stream form within 120ms; after the configuration parsing and recommendation generation unit selected 6 optimal dependency packages suitable for high-concurrency e-commerce scenarios, the data transmission unit received feedback data (0.5KB) within 30ms, realizing efficient two-way data interaction. The configuration writing unit synchronously completes the configuration update, the file translation module processes 40+ core business components in wasm format, and the final first build time of the project is reduced from 32 seconds to 17.6 seconds (a reduction of 45%), the component loading speed is improved by 68%, and the hot update latency is reduced from 350ms to 65ms.

[0099] The following will illustrate a system for optimizing front-end project build speed based on Vite through a specific embodiment, including:

[0100] With the continuous iteration of web front-end technologies, Vue3 has become the mainstream framework for enterprise-level front-end project development. Vite, as the officially recommended build tool for Vue3, boasts significant advantages over traditional bundling tools like Webpack due to its native support for ES modules, enabling rapid Node service response during initial project startup. However, this advantage is severely weakened when dealing with large and complex front-end projects. Because Vite concentrates key preparatory work such as dynamic analysis, resource import, and compilation during the initial page load phase, rather than before Node service startup, large enterprise-level projects with over 400 functional pages and 45 third-party dependencies often experience a 9-13 minute wait for the initial page load, and hot reloading after code modifications frequently suffers from a 3-4.5 second delay, significantly hindering development progress and team collaboration efficiency. To address this industry pain point, a method for optimizing front-end project build speed based on Vite has emerged. Its core process is as follows: Figure 9As shown, the entire process is automated, eliminating the need for tedious manual operations by developers. Furthermore, through precise data support and technological innovation, it achieves a significant leap in the efficiency of building large-scale Vite projects. The first step (S1) of this method involves collecting and uploading local project information on the client side. The client possesses powerful local project file reading and retrieval capabilities. Developers only need to input preset node commands or click the visual interface button of the client plugin to trigger the entire information collection process.

[0101] The client calls the built-in plugin's `getViteDevOptimize` method, which automatically traverses the local project file directory, accurately locates and reads two core files: `vite.config.ts` and `package.json`. `vite.config.ts` serves as the default Vite configuration entry file, containing key information such as server and plugin configurations. If the project has customized the Vite entry file address (e.g., `. / src / config / vite.prod.ts`) due to multi-environment deployment or architecture customization needs, the client plugin's visual interface also provides options to customize the entry file information, ensuring comprehensive and accurate acquisition of complete Vite configuration information. The `dependencies` and `devDependencies` fields in the `package.json` file fully record information about the project's 45 third-party dependency packages, including dependency names, version numbers, and other key details. The `getViteDevOptimize` method extracts this information one by one, ensuring no omissions or errors. After the information collection is completed, the client uploads the integrated Vite configuration information and dependency package list to the server through the API interface. The entire collection process does not require manual screening, sorting or intervention and is completely automated by the tool. The collection time is only 0.7 seconds and the information extraction accuracy rate reaches 100%, which not only ensures the integrity of the data, but also avoids the omissions that may be caused by manual operation.

[0102] The second step (S2) is the server-side dependency package preloading recommendation and data feedback. After receiving the project configuration information uploaded by the client, the server will immediately start a comprehensive data analysis process. The core objective is to match and return the preloaded dependency package information suitable for the current project from the server database. It is worth noting that the recommended preloaded dependency package information stored in the server-side database has two authoritative sources. On the one hand, it comes from the preloaded dependency list explicitly recommended in the official Vite documentation, ensuring the authority and compatibility of the recommendation results. On the other hand, it is learned by the enterprise's internal R&D cloud model CodeFree through attribute keywords (such as "Vite preloading", "core dependencies", "large project optimization", etc.) from recommended use cases from online communities such as GitHub, StackOverflow, and Juejin, as well as other developers. The CodeFree model continuously optimizes the recommendation accuracy through a sophisticated algorithm. Its model update formula introduces a learning rate α (with a value of 0.015) to control the step size of each update. The Extract(R,k) function extracts core information such as code snippets, best practices, and problem solutions related to keyword k from massive recommendation data R. Then, the Update function, combined with layer normalization, updates the knowledge representation of keyword k in the model, ensuring that the model always keeps up with the latest development practices. Meanwhile, the model also introduces a keyword weight ω, which is dynamically updated through a weight adjustment coefficient β (value 0.02), the relevance index Relevance(R,k), and the popularity index Popularity(k): Relevance(R,k) uses the cosine similarity algorithm (cosine_similarity(Embedding(R),Embedding(k))) to calculate the relevance between the recommended data and the keywords, while Popularity(k) uses the sigmoid function (sigmoid(log(usage_count(k)+1))) to calculate popularity in combination with the number of times the keywords are used, further improving the accuracy of recommendations. The server-side database already stores pre-loading recommendation data for over 1100 mainstream dependency packages. The server compares the 45 dependency lists uploaded by the client with the database data, eliminating 7 dependency packages that are incompatible with the current project's technology stack and 3 dependency packages that are used infrequently. Finally, it selects 35 highly adaptable pre-loading dependency package information, organizes it into a JSON format string array, and sends it back to the client. The entire analysis and feedback process takes only 0.4 seconds, with a recommendation adaptation rate of 93%.

[0103] The third step (S3) involves automatically writing the preloaded configuration to the client. After receiving the 35 preloaded dependency packages returned by the server, the client's built-in plugin immediately calls the `setViteDevOptimize` method, automatically assigning this information to the `optimizeDeps` property in the local project's Vite configuration file. This process is fully automated, requiring no manual modification of the Vite configuration file by the developer. The tool automatically locates the target properties in the configuration file and accurately writes them into the preloaded dependency list, ensuring that Vite can directly preload dependencies based on the information in `optimizeDeps` when starting the project via npm or yarn commands. Simultaneously, to avoid potential risks during configuration updates, the client automatically generates a backup of the original configuration file (named `vite.config.ts.bak`), with a 100% backup success rate. In case of configuration errors, developers can quickly restore the original configuration, greatly reducing operational risks. The entire configuration update process takes only 0.3 seconds, completely eliminating the omissions and formatting errors that can occur with manual configuration in traditional optimization solutions, significantly lowering the operational threshold for developers.

[0104] The fourth step (S4) is the conversion of the core component WebAssembly module, a crucial step in improving build speed. The conversion plugin in the client further filters 35 pre-loaded dependency packages, accurately identifying computationally intensive components (such as data report rendering components, complex form validation components, and large data volume filtering components) and basic core components (such as Vue core components, CSS style components, and routing core components). These components are often key factors affecting project startup speed and runtime efficiency. Subsequently, the conversion plugin uses the Emscripten tool to compile these JavaScript or Typescript components into wasm format files, forming WebAssembly modules. WebAssembly, as a relatively low-level language in the browser, is distributed in binary form, far exceeding JavaScript in both speed and file size: In actual tests, the wasm file size of the converted Vue core component was reduced by 40% compared to the original JavaScript file, the execution speed of the data report rendering component increased by 3-4 times, and the response time of the complex form validation component was shortened from 800ms to less than 200ms. Simultaneously, the conversion plugin automatically scans the dependency reference paths of the entire project, replaces the original dependency package reference addresses with the newly generated WebAssembly module addresses, and writes the replaced addresses into the local project file. The address replacement accuracy reaches 100%, ensuring that the project can accurately reference the optimized modules at runtime. The entire translation process is executed automatically in the background. The first complete translation takes about 2 minutes. Subsequently, when developers add computationally intensive components or update dependency versions, the plugin only performs incremental translation on the changed parts, which can reduce the time to 30-50 seconds, significantly saving the time cost of repeated translations.

[0105] Step 5 (S5) optimizes project startup and build efficiency. After completing all optimization configurations, developers can start the project using npm or yarn commands (such as npm rundev). The Vite build process will execute efficiently according to the optimized logic: First, it reads the optimizeDeps configuration in vite.config.ts, preloads 35 preloaded dependency packages, and caches the pre-compiled results in the .node_modules / .vite directory to avoid repeated dynamic analysis and compilation each time it starts. Then, Vite prioritizes loading the transpiled WebAssembly module. Since the wasm file is smaller and has higher execution efficiency, the initialization speed of core components is greatly improved, while the original Javascript or Typescript dependencies will not be loaded repeatedly because their reference addresses have been replaced, significantly reducing performance overhead. Actual testing showed that before optimization, the startup time of a large enterprise-level e-commerce management system was 11.2 minutes, and the hot update latency was 4.1 seconds. After optimization, the startup time was reduced to 48 seconds, and the hot update latency was reduced to 0.6 seconds, resulting in a 92% improvement in startup efficiency and an 85.4% improvement in hot update efficiency. In the production environment, the first screen rendering time decreased from 1.8 seconds to 0.7 seconds, and the total size of static resources decreased from 2.6MB to 1.7MB, a reduction of 34.6%. In terms of development efficiency, the optimization saved each developer 2.2 hours of waiting time per day, shortened the overall project development cycle from the original 110 days to 82 days, and completed the launch 28 days ahead of schedule. Regarding team collaboration, the rapid hot update response allowed developers to debug code in real time, reducing collaboration bottlenecks caused by waiting, and improving the overall team development efficiency by more than 30%. This optimization method... Figure 1 The automated process shown deeply integrates dependency preloading recommendations with WebAssembly translation technology, fundamentally solving the pain point of excessively long first-screen loading and build times in large Vite projects. Its accurate data support, innovative technical implementation, and ease of operation make it an indispensable and efficient tool for enterprise-level front-end project development. As web front-end technologies continue to evolve and project complexity continues to increase, this method will further optimize dependency recommendation accuracy and translation efficiency through the continuous learning capabilities of the CodeFree large model, bringing a better development experience to front-end developers and further promoting the improvement of enterprise-level front-end project development efficiency.

[0106] In summary, the embodiments of this application efficiently solve the pain points of slow initial page loading and time-consuming build in large-scale Vite front-end projects. The entire process is automated and requires no tedious manual operation. Through the accurate pre-loading dependency recommendation combining Vite's official recommendations and CodeFree's large model, and with the Emscripten tool to translate core / computation-intensive components into high-performance WebAssembly modules, it not only reduces manual maintenance costs but also significantly improves project build and loading speed, fundamentally optimizing the development efficiency of large-scale Vite projects.

[0107] In the description of this specification, the references to "one embodiment," "some embodiments," "example," "specific example," or "some examples," etc., indicate that a specific feature, structure, material, or characteristic described in connection with that embodiment or example is included in at least one embodiment or example of this application. In this specification, the illustrative expressions of the above terms do not necessarily refer to the same embodiment or example. Furthermore, the specific features, structures, materials, or characteristics described may be combined in any suitable manner in one or more embodiments or examples. Moreover, without contradiction, those skilled in the art can combine and integrate the different embodiments or examples described in this specification, as well as the features of different embodiments or examples.

[0108] Furthermore, the terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include at least one of that feature. In the description of this application, "multiple" means at least two, such as two, three, etc., unless otherwise explicitly specified.

[0109] Any process or method description in the flowchart or otherwise herein can be understood as representing a module, segment, or portion of code comprising one or more executable instructions for implementing custom logic functions or processes, and the scope of the preferred embodiments of this application includes additional implementations in which functions may be performed not in the order shown or discussed, including substantially simultaneously or in reverse order depending on the functions involved, as should be understood by those skilled in the art to which embodiments of this application pertain.

[0110] It should be understood that various parts of this application can be implemented using hardware, software, firmware, or a combination thereof. In the above embodiments, multiple steps or methods can be implemented using software or firmware stored in memory and executed by suitable instructions. For example, if implemented in hardware as in another embodiment, it can be implemented using any of the following techniques known in the art, or a combination thereof: discrete logic circuits having logic gates for implementing logical functions on data signals, application-specific integrated circuits (ASICs) having suitable combinational logic gates, programmable gate arrays (PGAs), field-programmable gate arrays (FPGAs), etc.

[0111] Those skilled in the art will understand that all or part of the steps of the methods in the above embodiments can be implemented by a program instructing related hardware. The program can be stored in a computer-readable storage medium, and when executed, the program includes one or a combination of the steps of the method embodiments.

[0112] Although embodiments of this application have been shown and described above, it is understood that the above embodiments are exemplary and should not be construed as limiting this application. Those skilled in the art can make changes, modifications, substitutions and variations to the above embodiments within the scope of this application.

Claims

1. A method for optimizing the build speed of a front-end project based on Vite, characterized in that, include: Retrieve local project Vite configuration information and third-party dependency package information; Based on the vite configuration information and third-party dependency package information, determine the dependency packages that need optimization and generate dependency optimization information; Add the dependency optimization information to the local project vite configuration file and convert computationally intensive or basic core Javascript or Typescript components into WebAssembly modules; When starting the project using npm or yarn commands, the WebAssembly module is referenced as a dependency to speed up loading.

2. The method for optimizing the build speed of a front-end project based on Vite according to claim 1, characterized in that, Retrieve local project Vite configuration information and third-party dependency package information, including: Obtain local project information files; Based on the local project information file, retrieve the vite configuration file and package configuration file information; The vite configuration file and package configuration file information can be read and written by entering preset node commands or by using the visual interface buttons of the client plugin.

3. The method for optimizing the build speed of a front-end project based on Vite according to claim 2, characterized in that, Retrieved vite configuration file and package configuration file information, including: Retrieve vite and package configuration file information; The vite and package configuration file information are uploaded to the server via the API interface; The server uses the getViteDevOptimize method to traverse the local project files, looking for vite.config.ts and package.json files.

4. The method for optimizing the build speed of a front-end project based on Vite according to claim 1, characterized in that, Identify the dependency packages that need optimization and generate dependency optimization information, including: Retrieve vite configuration file and package configuration file information; The vite configuration file and package configuration file information are analyzed and matched with the dependency information that needs to be optimized stored in the database; The matched dependency information that needs optimization is returned to the client as dependency optimization information. The dependency information in the database comes from recommendations in the official Vite documentation and learning from the CodeFree large model in the enterprise's internal R&D cloud.

5. The method for optimizing the build speed of a front-end project based on Vite according to claim 1, characterized in that, Add the dependency optimization information to the local project's vite configuration file, including: Retrieve dependency optimization information returned by the server; The dependency optimization information is assigned to the optimizeDeps property in the vite configuration file by using the setViteDevOptimize method. When a project is started via npm or yarn, vite can perform dependency optimization operations based on the information in the optimizeDeps property.

6. The method for optimizing the build speed of a front-end project based on Vite according to claim 3, characterized in that, Locate the vite.config.ts and package.json files, including: Retrieve custom information from the client plugin's visual interface configuration; Based on the custom information configured in the client plugin's visual interface, adjust the iteration range of the getViteDevOptimize method; Based on the traversal range, accurately locate the vite.config.ts and package.json files to ensure the completeness of the configuration information obtained.

7. A system for optimizing front-end project build speed based on Vite, characterized in that, include: The recommendation information acquisition module is used to obtain information on currently available dependency packages for recommendation; The configuration information generation module is used to process the local configuration information of the project sent by the information reading and writing module, and to generate recommendation information based on the latest data obtained from the recommendation information module. The AI ​​cloud module is used to provide dependency package information support for the recommendation information acquisition module. The information reading and writing module is used to read vite configuration and package dependency information, and transmit or obtain configuration information through the network communication module to generate the information needed or sent back by the module. The file translation module is used to compile and convert Javascript or Typescript components into wasm format files; The network communication module is used to establish a connection between the information reading and writing module and the configuration information generation module to transmit and interact information.

8. The system for optimizing front-end project build speed based on Vite according to claim 7, characterized in that, The recommendation information acquisition module includes an information update unit and a data storage unit. The information update unit is used to periodically initiate a session with the AI ​​cloud module to obtain recommendation dependency package information returned in key-value pair form. The data storage unit is used to store the recommendation dependency package information in a local database or cache on the server.

9. The system for optimizing front-end project build speed based on Vite according to claim 7, characterized in that, The AI ​​cloud module includes a dependency package information collection unit, which is used to obtain and filter recommended dependency package information based on relevant attribute keywords through online communities and developer recommendations.

10. The system for optimizing front-end project build speed based on Vite according to claim 7, characterized in that, The file translation module includes a format compilation unit and an address replacement unit. The format compilation unit is used to compile Javascript or Typescript components into wasm format files to form WebAssembly modules. The address replacement unit is used to automatically replace the original dependency reference addresses with the addresses of the newly formed WebAssembly modules.

Images