Front-end project construction packaging method, device, equipment, medium and product

Abstract

The invention provides a front-end project construction packaging method and device, equipment, a medium and a product. Relates to the technical field of computers. The method comprises the following steps: firstly, obtaining a to-be-packaged item; then, performing packaging analysis on the to-be-packaged item to obtain an analysis result; then, executing the code checking task and the code conversion task in parallel, and caching processing results of the code checking task and the code conversion task by using a caching mechanism; and finally, packaging the to-be-packaged project based on an analysis result to obtain a static resource file. Through the method, the volume of the front-end project is reduced, and the construction and packaging speed of the front-end project is improved.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a front-end project construction and packaging method, device, equipment, medium and product. Background Art

[0002] With the continuous iteration of the system and the continuous increase in functional modules, front-end projects built based on the view layer (View, Vue) are becoming increasingly large, the code volume is growing rapidly, and the dependencies between modules are becoming increasingly complex. The introduction of a large number of third-party dependency packages and component libraries not only increases the complexity of project construction, but also significantly prolongs the construction and packaging time. The rebuilding process after each code change frequently takes up development time, which directly slows down the efficiency of development, debugging, and deployment. Therefore, how to effectively improve the construction and packaging speed of the front-end code of the Vue project while ensuring the project's functionality and quality has become one of the key technical issues for optimizing the front-end development process and improving the team's overall development efficiency and responsiveness.

[0003] In the prior art, front-end project building and packaging methods generally use build tools to package all modules using multiple complex operations such as dependency resolution, code conversion, module merging, code compression, and resource optimization.

[0004] However, the front-end project construction and packaging method in the prior art has the problems of long project construction and packaging time and low development efficiency. Summary of the Invention

[0005] This application provides a front-end project construction and packaging method to solve the problems of long project construction and packaging time and low development efficiency in the prior art.

[0006] In a first aspect, the present application provides a front-end project construction and packaging method, comprising:

[0007] Get the project to be packaged;

[0008] Performing packaging analysis on the project to be packaged to obtain analysis results;

[0009] Executing the code checking task and the code conversion task in parallel, and using a cache mechanism to cache the processing results of the code checking task and the code conversion task;

[0010] The project to be packaged is packaged based on the analysis result to obtain a static resource file.

[0011] In a possible implementation, performing packaging analysis on the project files to be packaged to obtain analysis results includes:

[0012] Obtain the target component in the component library by loading the component plug-in on demand, where the target component is the component required for the project to be packaged;

[0013] Extract the project dependencies of the project to be packaged through external dependency extraction configuration;

[0014] The target component and the project dependency are the analysis results.

[0015] In a possible implementation, extracting the project dependencies in the project to be packaged by using the external dependency extraction configuration includes:

[0016] Add a configuration file for the project to be packaged;

[0017] Add a configuration item in the configuration file, where the configuration item is used to indicate that the third-party library with CDN service does not need to be packaged;

[0018] Add the CDN link of the third-party library in the entry HTML file so that the browser can obtain the code of the third-party library according to the CDN link when loading the page;

[0019] Package third-party libraries that do not have CDN services into separate module files through static resource linking.

[0020] In a possible implementation, packaging the project to be packaged based on the analysis result to obtain a static resource file includes:

[0021] In the process of packaging the project to be packaged based on the analysis result, dividing the code of the project to be packaged into multiple module files;

[0022] The multiple module files are compressed to obtain the static resource files.

[0023] In a possible implementation, compressing the multiple module files to obtain the static resource file includes:

[0024] The multiple module files are compressed based on the Gzip file compression format to obtain the static resource file.

[0025] In a possible implementation, dividing the code of the project to be packaged into multiple module files includes:

[0026] Use code splitting technology to split the code of the project to be packaged into multiple module files.

[0027] In a second aspect, the present application provides a front-end project construction and packaging device, comprising:

[0028] Acquisition module, used to obtain the project to be packaged;

[0029] An analysis module, configured to perform packaging analysis on the items to be packaged and obtain analysis results;

[0030] A processing module, configured to execute a code checking task and a code conversion task in parallel, and cache processing results of the code checking task and the code conversion task using a cache mechanism;

[0031] The packaging module is used to package the project to be packaged based on the analysis result to obtain a static resource file.

[0032] In a possible implementation, the analysis module is specifically configured to:

[0033] Obtain the target component in the component library by loading the component plug-in on demand, where the target component is the component required for the project to be packaged;

[0034] Extract the project dependencies of the project to be packaged through external dependency extraction configuration;

[0035] The target component and the project dependency are the analysis results.

[0036] In a possible implementation, the analysis module is specifically configured to:

[0037] Add a configuration file for the project to be packaged;

[0038] Add a configuration item in the configuration file, where the configuration item is used to indicate that the third-party library with CDN service does not need to be packaged;

[0039] Add the CDN link of the third-party library in the entry HTML file so that the browser can obtain the code of the third-party library according to the CDN link when loading the page;

[0040] Package third-party libraries that do not have CDN services into separate module files through static resource linking.

[0041] In a possible implementation, the packaging module is specifically configured to:

[0042] In the process of packaging the project to be packaged based on the analysis result, dividing the code of the project to be packaged into multiple module files;

[0043] The multiple module files are compressed to obtain the static resource files.

[0044] In a possible implementation, the packaging module is specifically configured to:

[0045] The multiple module files are compressed based on the Gzip file compression format to obtain the static resource file.

[0046] In a possible implementation, the packaging module is specifically configured to:

[0047] Use code splitting technology to split the code of the project to be packaged into multiple module files.

[0048] In a third aspect, the present application provides an electronic device, comprising: a memory, a processor;

[0049] The memory stores computer-executable instructions;

[0050] The processor executes the computer-executable instructions stored in the memory, so that the processor executes the above first aspect and / or various possible implementations of the first aspect.

[0051] In a fourth aspect, the present application provides a computer-readable storage medium, in which computer-executable instructions are stored. When the computer-executable instructions are executed by a processor, they are used to implement the above first aspect and / or various possible implementations of the first aspect.

[0052] In a fifth aspect, the present application provides a computer program product, comprising a computer program, which, when executed by a processor, implements the above first aspect and / or various possible implementations of the first aspect.

[0053] The present application provides a front-end project construction and packaging method, device, equipment, medium and product. It relates to the field of computer technology. The method includes: first, obtaining a project to be packaged; then, performing a packaging analysis on the project to be packaged to obtain an analysis result. By first performing a packaging analysis on the packaged project, some unnecessary projects can be reduced, invalid code, duplicate dependencies and redundant resources can be removed, and the subsequent packaging speed can be improved; then, code inspection tasks and code conversion tasks are executed in parallel, and the processing results of the code inspection tasks and code conversion tasks are cached using a cache mechanism. At this point, by executing multiple build tasks in parallel, system resources can be more fully utilized, avoiding idle central processing units and waiting for input and output interfaces, thereby shortening the total packaging time; finally, based on the analysis results, the project to be packaged is packaged to obtain a static resource file. Therefore, the method significantly reduces the problems of repeated calculations and resource waste by disassembling the traditional serial build process into tasks that can be processed in parallel, and introducing a cache mechanism and pre-analysis. While ensuring the correctness of the build, it effectively reduces the size of the front-end project and improves the build and packaging speed, ultimately improving the team's development and delivery efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0054] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present application and, together with the description, serve to explain the principles of the present application.

[0055] Figure 1 Schematic diagram of the process of building a packaging method for a front-end project provided in the embodiment of this application Figure 1 ;

[0056] Figure 2 Schematic diagram of the process of building a packaging method for a front-end project provided in the embodiment of this application Figure 2 ;

[0057] Figure 3 A schematic diagram of the structure of a packaging device for a front-end project provided in an embodiment of the present application;

[0058] Figure 4 A schematic diagram of the structure of an electronic device provided in an embodiment of the present application.

[0059] The above drawings illustrate specific embodiments of the present application, which will be described in more detail below. These drawings and the textual description are not intended to limit the scope of the present application in any way, but rather to illustrate the concepts of the present application to those skilled in the art by reference to specific embodiments. DETAILED DESCRIPTION

[0060] Exemplary embodiments will be described in detail herein, with examples illustrated in the accompanying drawings. In the following description, when referring to the drawings, identical numerals in different figures represent identical or similar elements, unless otherwise indicated. The embodiments described in the following exemplary embodiments are not intended to represent all embodiments consistent with the present application. Rather, they are merely examples of apparatus and methods consistent with certain aspects of the present application, as detailed in the appended claims.

[0061] First, let’s explain the terms involved in this application:

[0062] Several file compression programs (Gzip compression): Gzip compression is the abbreviation of several file compression programs, used for file compression in UNIX systems. It has now become a very common data compression format, or a file format, used on the Internet.

[0063] Node: Node is a JavaScript runtime environment based on the Google Chrome V8 engine. It uses a time-driven, non-blocking I / O model to allow JavaScript to run on the server-side development platform.

[0064] Multiprocessing is a concurrent programming technique used to execute multiple independent processes simultaneously to complete a task. In multiprocessing, each process has its own independent memory space and execution context, and can execute tasks in parallel, thereby improving program performance and efficiency.

[0065] Static resource linking: This technology manages and loads static resources (such as images and JavaScript files) on web pages through links. Through linking, static resources can be referenced and requested using independent uniform resource locators (URLs), providing better performance and manageability.

[0066] Module Bundler (Webpack): webpack is a static module bundler for modern JavaScript applications.

[0067] Content Delivery Network (CDN) adds a new layer of network architecture to the Internet, publishing website content to the "edge" of the network closest to the user, allowing users to obtain the required content nearby, thereby solving Internet network congestion and improving the response speed of users accessing websites.

[0068] Created by Evan You and released in 2014, Vue is a popular front-end JavaScript framework for building user interfaces. It's a progressive framework for building single-page applications and dynamic websites. By providing a concise syntax and a flexible component system, Vue enables developers to easily build interactivity and reusable components, easily handling most web application scenarios. However, with the iterative development of large-scale Vue projects, the codebase grows and the complexity increases, leading to longer build and packaging times, seriously impacting team development efficiency.

[0069] With the continuous iteration of the system and the continuous increase in functional modules, front-end projects built on Vue are becoming increasingly large, the code volume is rapidly increasing, and the dependencies between modules are becoming increasingly complex. The introduction of a large number of third-party dependency packages and component libraries not only increases the complexity of project construction, but also significantly prolongs the build and packaging time. The rebuild process after each code change frequently consumes development time, directly slowing down the efficiency of development, debugging, and deployment. Therefore, how to effectively improve the build and packaging speed of Vue project front-end code while ensuring project functionality and quality has become one of the key technical issues for optimizing the front-end development process and improving the overall development efficiency and responsiveness of the team.

[0070] In the prior art, front-end project building and packaging methods generally use build tools to package all modules using multiple complex operations such as dependency resolution, code conversion, module merging, code compression, and resource optimization.

[0071] However, the front-end project construction and packaging method in the prior art has the problems of long project construction and packaging time and low development efficiency.

[0072] Based on this, the present application proposes a front-end project construction and packaging method. Since the traditional front-end project construction and packaging method has a lot of redundant code and resources and repeated dependencies, the project construction and packaging speed is too slow, which seriously affects the development efficiency. Therefore, the present application performs a packaging analysis on the project to be packaged before the project construction and packaging, so as to remove some unnecessary data components and codes in the project to be packaged, thereby reducing the project size; further, during the subsequent packaging processing, the traditional serial construction process is disassembled into tasks that can be processed in parallel, thereby improving resource utilization. While ensuring the correctness of the construction, it effectively reduces the front-end project size and increases the construction and packaging speed, ultimately improving the team's development and delivery efficiency.

[0073] The following specific embodiments describe in detail the technical solution of the present application and how the technical solution of the present application solves the above-mentioned technical problems. The following specific embodiments can be combined with each other, and the same or similar concepts or processes may not be repeated in some embodiments. The embodiments of the present application will be described below in conjunction with the accompanying drawings.

[0074] Figure 1 Schematic diagram of the process of building a packaging method for a front-end project provided in the embodiment of this application Figure 1 ;like Figure 1 As shown, the method includes:

[0075] S101. Obtain the project to be packaged.

[0076] It should be noted that before obtaining the project to be packaged, you also need to use webpack to package the HTML files, .vue pages, .scss styles, .js logic codes and other materials in the project into .html, .js, and .css. That is, you can package the files into modules, compress them, integrate them, and increase the loading speed.

[0077] It can be understood that this step is the beginning of the process, that is, to clarify the project code and resource files that need to be built.

[0078] S102: Perform packaging analysis on the project to be packaged to obtain analysis results.

[0079] It is understandable that by pre-analyzing the project structure, module dependencies, and build configuration, the critical paths and task distribution that affect packaging efficiency can be identified in advance, laying the foundation for subsequent parallelization and cache optimization.

[0080] S103: Execute the code checking task and the code conversion task in parallel, and use a cache mechanism to cache the processing results of the code checking task and the code conversion task.

[0081] It should be understood that in the traditional build process, code checking tasks and code conversion tasks are usually executed serially, resulting in problems such as resource waiting and low CPU utilization. In the embodiment of the present application, it is changed to parallel processing, which can significantly shorten the execution time and improve the overall build efficiency. Furthermore, by caching the processing results of unchanged files (for example, caching the code translated by Babel or the ESLint inspection results), repeated processing of the same files can be avoided in subsequent builds, thereby greatly reducing redundant calculations and improving the incremental build speed.

[0082] S104: Pack the project to be packaged based on the analysis result to obtain a static resource file.

[0083] It is understandable that after the preprocessing is performed, the resources are packaged in a targeted manner according to the analysis results to reduce invalid or repeated packaging operations, thereby optimizing the final output and obtaining a static resource file.

[0084] The present application provides a front-end project construction and packaging method, which includes: first, obtaining a project to be packaged; then, performing a packaging analysis on the project to be packaged to obtain an analysis result. By first performing a packaging analysis on the packaged project, some unnecessary projects can be reduced, invalid code, duplicate dependencies and redundant resources can be removed, and the subsequent packaging speed can be improved; then, code inspection tasks and code conversion tasks are executed in parallel, and the processing results of the code inspection tasks and code conversion tasks are cached using a cache mechanism. At this point, by executing multiple construction tasks in parallel, system resources can be more fully utilized, the idleness of the central processing unit and the waiting of the input and output interfaces can be avoided, thereby shortening the total packaging time; finally, based on the analysis results, the project to be packaged is packaged to obtain a static resource file. Therefore, by decomposing the traditional serial construction process into tasks that can be processed in parallel, and introducing a cache mechanism and pre-analysis, the method significantly reduces the problems of repeated calculations and resource waste, thereby effectively reducing the size of the front-end project and improving the construction and packaging speed while ensuring the correctness of the construction, and ultimately improving the team development and delivery efficiency.

[0085] In one feasible method, the specific process of performing package analysis on the project files to be packaged and obtaining the analysis results is as follows:

[0086] First, the target component in the component library is obtained by loading the component plug-in on demand; then, the project dependencies in the project to be packaged are extracted through the external dependency extraction configuration.

[0087] Among them, the target component is the component required by the project to be packaged; the target component and project dependency are analysis results.

[0088] Optionally, you can use babel-plugin-component to implement on-demand import and load component plug-ins into the component library, thereby obtaining the components needed by the project to be packaged in the component library, thereby reducing the project size and speeding up the packaging process; further, by using external dependencies (externals), you can extract project dependencies and exclude third-party libraries that do not need to be packaged.

[0089] For example, suppose the Element UI component library is used, but the page only uses buttons (el-button) and inputs (el-input). If the component plug-in is not loaded on demand, dozens of components in the entire Element UI library will be packaged in. However, if babel-plugin-component is used to implement on-demand introduction of the component library, only the code related to the button and input components needs to be packaged.

[0090] It is understandable that the on-demand introduction method can significantly reduce the build volume and thus increase the packaging speed.

[0091] In one feasible way, the specific process of extracting project dependencies from the project to be packaged is as follows:

[0092] First, add a configuration file for the project to be packaged; then, add configuration items to the configuration file; then, add the CDN link of the third-party library to the entry HTML file so that the browser can obtain the code of the third-party library according to the CDN link when loading the page; finally, package the third-party library that does not have CDN service into a separate module file through static resource linking.

[0093] The configuration item is used to indicate that the third-party library with CDN service does not need to be packaged.

[0094] It should be noted that many third-party libraries (such as Vue, Axios, and Lodash) are large in size, but change little, are not updated frequently, and can be loaded from CDN, so they do not need to be packaged into the project, which increases the packaging speed and reduces the pressure of loading the first screen.

[0095] Specifically, first add the vue.config.js configuration file to the project to be packaged, then add the externals item in the configuration file vue.config.js, configure the names of third-party libraries that do not need to be packaged in externals, tell webpack to exclude these libraries and not package them; then add the CDN link of the third-party library in the entry HTML file, so that the browser can obtain the code of the third-party library according to the CDN link when loading the page; finally, in order to improve the build speed, third-party libraries that do not have CDN services can also be packaged into separate module files through static resource linking, for example: introduce the DLLplugin plug-in, and configure the dependency name, output directory and file name that need to be packaged separately in the dll.config.js file, and finally run npm run build:dll to package and generate dependency files, so that only business code will be built in subsequent builds.

[0096] It is understandable that by introducing on-demand packaging components and extracting configuration through external dependencies, and extracting project dependencies from the project to be packaged, it is possible to no longer process the compilation and compression of these third-party libraries during construction, reducing the project packaging volume and significantly improving the packaging speed. In addition, due to the use of CDN with better distribution nodes and caching advantages, users can download faster.

[0097] Figure 2 Schematic diagram of the process of building a packaging method for a front-end project provided in the embodiment of this application Figure 2 ,like Figure 2 As shown, this embodiment Figure 1 Based on the embodiment, the process of packaging the project to be packaged is described in detail based on the analysis results. The method includes:

[0098] S201 . In the process of packaging the project to be packaged based on the analysis result, the code of the project to be packaged is divided into multiple module files.

[0099] In one achievable method, the code of the project to be packaged is split into multiple module files through code splitting technology.

[0100] It is understandable that in the process of packaging the project based on the analysis results, if all the codes are packaged in one bundle.js file, even if the user only visits one page, the browser needs to load the entire file when loading the page for the first time. If the code of the project to be packaged is divided into multiple module files through code splitting technology, only the relevant files will be loaded when the user visits the page, thereby speeding up the first screen loading speed and improving the user experience.

[0101] S202: compress multiple module files to obtain static resource files.

[0102] In one achievable manner, multiple module files are compressed based on the Gzip file compression format to obtain static resource files.

[0103] It is understandable that even if the project has been divided into multiple module files through code splitting technology, these files may still be large. Therefore, in order to further reduce the file size and improve network transmission efficiency, the files need to be compressed twice, that is, multiple module files are compressed using the Gzip file compression format to obtain static resource files.

[0104] Figure 3 A schematic diagram of a front-end project packaging device provided in an embodiment of the present application; Figure 3 As shown, the device includes:

[0105] Acquisition module 301, used to acquire the project to be packaged;

[0106] An analysis module 302 is used to perform packaging analysis on the project to be packaged and obtain analysis results;

[0107] The processing module 303 is used to execute the code checking task and the code conversion task in parallel, and use a cache mechanism to cache the processing results of the code checking task and the code conversion task;

[0108] The packaging module 304 is used to package the project to be packaged based on the analysis result to obtain a static resource file.

[0109] In a possible implementation, the analysis module 302 is specifically configured to:

[0110] By loading component plug-ins on demand, the target component in the component library is obtained. The target component is the component that the project to be packaged needs to use.

[0111] Extract project dependencies from the project to be packaged through external dependency extraction configuration;

[0112] Target components and project dependencies are analysis results.

[0113] In a possible implementation, the analysis module 302 is specifically configured to:

[0114] Add configuration files for the project to be packaged;

[0115] Add a configuration item in the configuration file to indicate that third-party libraries with CDN services do not need to be packaged;

[0116] Add the CDN link of the third-party library in the entry HTML file so that the browser can obtain the code of the third-party library according to the CDN link when loading the page;

[0117] Package third-party libraries that do not have CDN services into separate module files through static resource linking.

[0118] In a possible implementation, the packaging module 304 is specifically configured to:

[0119] In the process of packaging the project to be packaged based on the analysis results, the code of the project to be packaged is divided into multiple module files;

[0120] Compress multiple module files to obtain static resource files.

[0121] In a possible implementation, the packaging module 304 is specifically configured to:

[0122] Multiple module files are compressed based on the Gzip file compression format to obtain static resource files.

[0123] In a possible implementation, the packaging module 304 is specifically configured to:

[0124] Use code splitting technology to split the code of the project to be packaged into multiple module files.

[0125] The front-end project construction and packaging device provided in the embodiment of the present application can execute the method provided in the above method embodiment. Its implementation principle and technical effects are similar, and are not described in detail in this embodiment.

[0126] Figure 4 This is a schematic diagram of the structure of the electronic device provided in the embodiment of the present application. Figure 4 As shown, the electronic device 40 provided in this embodiment includes: at least one processor 401 and a memory 402. Optionally, the device 40 further includes a communication component 403. The processor 401, the memory 402 and the communication component 403 are connected via a bus 404.

[0127] In a specific implementation process, at least one processor 401 executes the computer-executable instructions stored in the memory 402, so that the at least one processor 401 performs the above method.

[0128] The specific implementation process of the processor 401 can be found in the above method embodiment. Its implementation principle and technical effects are similar and will not be repeated here in this embodiment.

[0129] In the above embodiments, it should be understood that the processor may be a central processing unit (CPU), or other general-purpose processors, a digital signal processor (DSP), an application-specific integrated circuit (ASIC), etc. The general-purpose processor may be a microprocessor or any conventional processor. The steps of the method disclosed in the present invention may be directly implemented by a hardware processor or implemented by a combination of hardware and software modules in the processor.

[0130] The memory may include a high-speed memory (Random Access Memory, RAM), and may also include a non-volatile memory (NVM), such as at least one disk memory.

[0131] The bus can be an Industry Standard Architecture (ISA) bus, a Peripheral Component Interconnect (PCI) bus, or an Extended Industry Standard Architecture (EISA) bus. Buses can be divided into address buses, data buses, control buses, etc. For ease of presentation, the buses in the drawings of the embodiments of the present application are not limited to just one bus or just one type of bus.

[0132] An embodiment of the present application also provides a computer program product, including a computer program, which implements the above method when executed by a processor.

[0133] An embodiment of the present application further provides a computer-readable storage medium, in which computer-executable instructions are stored. When the computer-executable instructions are executed, any of the above methods is implemented.

[0134] The above-mentioned readable storage medium can be implemented by any type of volatile or non-volatile memory device or a combination thereof, such as static random-access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic storage, flash memory, magnetic disk, or optical disk. The readable storage medium can be any available medium that can be accessed by a general-purpose or special-purpose computer.

[0135] An exemplary readable storage medium is coupled to a processor so that the processor can read information from the readable storage medium and write information to the readable storage medium. Of course, the readable storage medium can also be an integral part of the processor. The processor and the readable storage medium can be located in an application specific integrated circuit (ASIC). Of course, the processor and the readable storage medium can also exist in a device as discrete components.

[0136] The division of units is merely a logical functional division; actual implementations may employ alternative divisions, such as combining or integrating multiple units or components into another system, or omitting or disabling certain features. Furthermore, any direct coupling or communication connection shown or discussed may be an indirect coupling or communication connection between devices or units, either through an interface, electrical, mechanical, or other means.

[0137] Units described as separate components may or may not be physically separate, and components shown as units may or may not be physical units, that is, they may be located in one place or distributed across multiple network units. Some or all of these units may be selected to achieve the purpose of this embodiment according to actual needs.

[0138] In addition, each functional unit in each embodiment of the present invention may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit.

[0139] If the function is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention, or the part that contributes to the prior art, or the part of the technical solution, can be embodied in the form of a software product. The computer software product is stored in a storage medium and includes a number of instructions for enabling a computer device (which can be a personal computer, server, or network device, etc.) to execute all or part of the steps of the various embodiments of the present invention. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM), random access memory (RAM), magnetic disk or optical disk, and other media that can store program code.

[0140] Those skilled in the art will appreciate that all or part of the steps in the above-described method embodiments can be implemented using hardware associated with program instructions. The aforementioned program can be stored in a computer-readable storage medium. When executed, the program performs the steps of the above-described method embodiments. The aforementioned storage medium includes various media capable of storing program code, such as ROM, RAM, magnetic disks, or optical disks.

[0141] Finally, it should be noted that those skilled in the art will readily identify other embodiments of the present invention after considering the specification and practicing the invention disclosed herein. The present invention is intended to cover any variations, uses, or adaptations of the present invention that follow the general principles of the present invention and include common knowledge or customary techniques in the art not disclosed herein. The present invention is not limited to the precise structure described above and illustrated in the accompanying drawings, and various modifications and variations may be made without departing from the scope thereof. The scope of the present invention is limited solely by the appended claims.

Claims

1. A front-end project construction and packaging method, characterized in that: The method comprises: Get the project to be packaged; Performing packaging analysis on the project to be packaged to obtain analysis results; Executing the code checking task and the code conversion task in parallel, and using a cache mechanism to cache the processing results of the code checking task and the code conversion task; The project to be packaged is packaged based on the analysis result to obtain a static resource file.

2. The method according to claim 1, characterized in that The step of performing packaging analysis on the project files to be packaged to obtain analysis results includes: Obtain the target component in the component library by loading the component plug-in on demand, where the target component is the component required for the project to be packaged; Extract the project dependencies of the project to be packaged through external dependency extraction configuration; The target component and the project dependency are the analysis results.

3. The method according to claim 2, characterized in that The extraction of project dependencies from the project to be packaged by extracting the configuration through external dependencies includes: Add a configuration file for the project to be packaged; Add a configuration item in the configuration file, wherein the configuration item is used to indicate that a third-party library with a content delivery network CDN service does not need to be packaged; Add the CDN link of the third-party library in the entry hypertext markup language html file, so that the browser can obtain the code of the third-party library according to the CDN link when loading the page; Package third-party libraries that do not have CDN services into separate module files through static resource linking.

4. The method according to claim 1, wherein The step of packaging the project to be packaged based on the analysis result to obtain a static resource file includes: In the process of packaging the project to be packaged based on the analysis result, dividing the code of the project to be packaged into multiple module files; The multiple module files are compressed to obtain the static resource files.

5. The method according to claim 4, characterized in that The compressing the multiple module files to obtain the static resource file includes: The plurality of module files are compressed based on the Gzip file compression format of several file compression programs to obtain the static resource files.

6. The method according to claim 4, characterized in that The code of the project to be packaged is divided into multiple module files, including: Use code splitting technology to split the code of the project to be packaged into multiple module files.

7. A front-end project construction and packaging device, characterized in that: include: Acquisition module, used to obtain the project to be packaged; An analysis module, configured to perform packaging analysis on the items to be packaged and obtain analysis results; A processing module, configured to execute a code checking task and a code conversion task in parallel, and cache processing results of the code checking task and the code conversion task using a cache mechanism; The packaging module is used to package the project to be packaged based on the analysis result to obtain a static resource file.

8. An electronic device, characterized in that: include: Memory, processor; The memory stores computer-executable instructions; The processor executes the computer-executable instructions stored in the memory, so that the processor performs the method according to any one of claims 1 to 6.

9. A computer-readable storage medium, characterized in that The computer-readable storage medium stores computer-executable instructions, which are used to implement the method according to any one of claims 1 to 6 when executed.

10. A computer program product, characterized in that The method comprises a computer program, which implements the method according to any one of claims 1 to 6 when the computer program is executed.

Images