Code packaging method and device, equipment and storage medium

Abstract

The invention discloses a code packaging method and device, equipment and a storage medium, relates to the technical field of network security, and can improve code packaging efficiency and reduce resource overhead. The scheme specifically comprises the steps of obtaining a to-be-packaged source code; splitting the source code into a plurality of code modules; the method comprises the following steps: acquiring a plurality of code modules, importing the plurality of code modules into a preset compiling tool, determining a first target code module with codes modified from the plurality of code modules by utilizing the compiling tool, and compiling and packaging the first target code module to obtain an incremental package; and the target client uses the incremental package to replace the corresponding code module.

Description

Technical Field

[0001] The present application relates to the field of network security technology, and in particular to a code packaging method, device, equipment and storage medium. Background Art

[0002] Code bundling technology has been developed for many years, and its main goal is to package modular code and resources used in the development process into a format that can run efficiently in the browser.

[0003] As front-end applications become increasingly complex, packaging tools and technologies are also evolving. From early single-file development to modular development, and then to the rise of packaging tools. Current code packaging technology not only focuses on code organization and packaging, but also focuses on improving development efficiency and performance in production environments. However, each packaging tool still has its own shortcomings and cannot simultaneously meet multiple advantages such as easy configuration, flexibility, and mature ecology. Summary of the invention

[0004] The embodiments of the present application provide a code packaging method, apparatus, device and storage medium, which can improve the efficiency of code packaging and reduce resource overhead.

[0005] In order to achieve the above objectives, this application adopts the following technical solutions:

[0006] In a first aspect of an embodiment of the present application, a code packaging method is provided, the method comprising:

[0007] Get the source code to be packaged;

[0008] Splitting the source code into multiple code modules;

[0009] Import the multiple code modules into a preset compilation tool, use the compilation tool to determine a first target code module whose code has been modified from the multiple code modules, compile and package the first target code module to obtain an incremental package:

[0010] The incremental package is sent to a target client, so that the target client replaces a corresponding code module with the incremental package.

[0011] As a possible implementation manner, the target code module includes a CSS file; the method further includes: determining a first target code module in which code is modified from the multiple code modules by using the compilation tool:

[0012] The style file in the CSS file of the first target code module is deleted to obtain a second target code module, and the second target code module is compiled and packaged to obtain an incremental package.

[0013] As a possible implementation manner, the importing the multiple code modules into a preset compilation tool includes:

[0014] The multiple code modules are imported into the compilation tool in an on-demand loading manner.

[0015] As a possible implementation manner, the compilation tool includes a file conversion tool; after the second target code module is compiled and packaged to obtain an incremental package, the method further includes:

[0016] The file conversion tool is called to convert the code in the incremental package into a binary format to obtain a target incremental package, and the target incremental package is sent to the target client.

[0017] As a possible implementation manner, the compilation tool includes a compression plug-in, and before compiling and packaging the second target code module, the method further includes:

[0018] The second target code module is compressed by using a compression plug-in and then compiled and packaged.

[0019] As a possible implementation manner, the compilation tool includes a monitoring function, and the using of the compilation tool to determine the first target code module whose code is modified from the multiple code modules includes:

[0020] The monitoring function is used to monitor whether each of the code modules is modified. If the code module is modified, the code module is determined as the target code module.

[0021] As a possible implementation manner, sending the incremental package to the target client includes:

[0022] The incremental packet is sent to the target client based on the WebSocket protocol.

[0023] In a second aspect of an embodiment of the present application, a code packaging device is provided, the device comprising:

[0024] Get module, used to get the source code to be packaged;

[0025] A processing module, used for splitting the source code into multiple code modules;

[0026] A compilation module is used to import the multiple code modules into a preset compilation tool, use the compilation tool to determine a first target code module whose code has been modified from the multiple code modules, compile and package the first target code module to obtain an incremental package:

[0027] The sending module is used to send the incremental package to the target client, so that the target client replaces the corresponding code module with the incremental package.

[0028] According to a third aspect of an embodiment of the present application, an electronic device is provided, including a memory and a processor, wherein the memory stores a computer program, and when the computer program is executed by the processor, the code packaging method according to the first aspect of the embodiment of the present application is implemented.

[0029] According to a fourth aspect of the embodiments of the present application, a computer-readable storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, the code packaging method in the first aspect of the embodiments of the present application is implemented.

[0030] The beneficial effects brought by the technical solution provided by the embodiment of the present application include at least:

[0031] The code packaging method provided in the embodiment of the present application obtains source code to be packaged, splits the source code into multiple code modules, imports the multiple code modules into a preset compilation tool, uses the compilation tool to determine a first target code module whose code is modified from the multiple code modules, compiles and packages the first target code module to obtain an incremental package, and sends the incremental package to a target client, so that the target client replaces the corresponding code module with the incremental package, which can improve the efficiency of code packaging and reduce resource overhead. BRIEF DESCRIPTION OF THE DRAWINGS

[0032] Figure 1 A flowchart of a code packaging method provided in an embodiment of the present application;

[0033] Figure 2 A structural diagram of a code packaging device provided in an embodiment of the present application;

[0034] Figure 3 A structural diagram of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0035] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0036] In the following, the terms "first" and "second" are used for descriptive purposes only and are not to be understood as indicating or implying relative importance or implicitly indicating the number of the indicated technical features. Thus, a feature defined as "first" or "second" may explicitly or implicitly include one or more of the features. In the description of the embodiments of the present disclosure, unless otherwise specified, "plurality" means two or more.

[0037] Additionally, the use of “based on” or “according to” is meant to be open and inclusive, as a process, step, calculation, or other action “based on” or “according to” one or more conditions or values ​​may, in practice, be based on additional conditions or beyond values.

[0038] Code bundling technology has been developed for many years, and its main goal is to package modular code and resources used in the development process into a format that can run efficiently in the browser.

[0039] As front-end applications become increasingly complex, packaging tools and technologies are also evolving. From early single-file development to modular development, and then to the rise of packaging tools. Current code packaging technology not only focuses on code organization and packaging, but also focuses on improving development efficiency and performance in production environments. However, each packaging tool still has its own shortcomings and cannot simultaneously meet multiple advantages such as easy configuration, flexibility, and mature ecology.

[0040] Specifically, there are many front-end development frameworks or packaging tools that integrate packaging optimization and hot update, but they each have certain limitations: Parcel packaging tool is not as flexible as Webpack for complex projects or projects that require custom configuration. Compared with Webpack, Parcel's community and plug-in ecosystem are relatively small, and some specific needs may not be met. Although the Vite packaging tool is developing rapidly, compared with Webpack, Vite's plug-in ecosystem and community support are still being improved. In addition, due to its reliance on modern browser features, Vite may have compatibility issues in some older browsers.

[0041] In order to solve the above problems, the present application embodiment provides a code packaging method, such as Figure 1 As shown, the method comprises the following steps:

[0042] Step 101: Obtain source code to be packaged.

[0043] Step 102: split the source code into multiple code modules.

[0044] Optionally, the source code may be split into multiple code modules according to the business functions of the code in the source code. Alternatively, the source code may be split according to the application scenario, which is not specifically limited in this application.

[0045] In addition, after obtaining multiple code modules, each code module is encapsulated and linked to a corresponding loading function, so as to facilitate importing the code module into a compilation tool for compilation.

[0046] Step 103: import the multiple code modules into a preset compilation tool, use the compilation tool to determine a first target code module whose code is modified from the multiple code modules, compile and package the first target code module to obtain an incremental package.

[0047] Optionally, importing the multiple code modules into a preset compilation tool includes: importing the multiple code modules into the compilation tool in an on-demand loading manner.

[0048] The compilation tool is a compilation tool based on Webpack. That is, if a code module is modified, the code module is determined as the first target code module. Then, only the first target code module is compiled and packaged to obtain an incremental package.

[0049] Optionally, the compilation tool includes a monitoring function, and the step of using the compilation tool to determine the first target code module whose code is modified from the multiple code modules includes:

[0050] The monitoring function is used to monitor whether each of the code modules is modified. If the code module is modified, the code module is determined as the first target code module.

[0051] The monitoring function may be webpack-dev-server or webpack-dev-middleware. When the monitoring function determines that the first target code module has been modified, Webpack will recompile the first target code module through the module dependency graph and generate an incremental package.

[0052] Step 104: Send the incremental package to the target client, so that the target client replaces the corresponding code module with the incremental package.

[0053] Optionally, the incremental packet may be sent to a target client based on the WebSocket protocol.

[0054] The code packaging method provided in the embodiment of the present application obtains source code to be packaged, splits the source code into multiple code modules, imports the multiple code modules into a preset compilation tool, uses the compilation tool to determine a first target code module whose code is modified from the multiple code modules, compiles and packages the first target code module to obtain an incremental package, and sends the incremental package to a target client, so that the target client replaces the corresponding code module with the incremental package, which can improve the efficiency of code packaging and reduce resource overhead.

[0055] Optionally, the target code module includes a CSS file; after using the compilation tool to determine the target code module that needs to be recompiled from the multiple code modules, the method further includes:

[0056] The style file in the CSS file of the first target code module is deleted to obtain a second target code module, and the second target code module is compiled and packaged to obtain an incremental package.

[0057] It should be noted that the source code includes JS files, HTML files and CSS files, so after obtaining the first target code module, the style file in the CSS file in the first target code module is deleted to obtain the second target code module. Then the second target code module is compiled and packaged to obtain an incremental package, which can further improve the efficiency of code packaging and reduce resource overhead.

[0058] Optionally, the compilation tool includes a file conversion tool; after compiling and packaging the second target code module to obtain an incremental package, the method further includes:

[0059] The file conversion tool is called to convert the code in the incremental package into a binary format to obtain a target incremental package, and the target incremental package is sent to the target client.

[0060] The file conversion tool may be a WebAssembly module. The WebAssembly module may be built into Webpack, and is used to convert the code in the incremental package into a binary format after obtaining the incremental package, obtain the target incremental package, and send the target incremental package to the target client. This makes it easier for the code of the target incremental package to run on the browser of the target client.

[0061] In the actual execution process, prepare the WebAssembly module, create a C file such as "example.c", use the Emscripten toolchain to compile the C code into WebAssembly, and use the corresponding commands to load and use the WebAssembly module. Integrate the WebAssembly module into Webpack, which can be achieved by adding configuration code to the webpack configuration file.

[0062] In addition, you can load the WebAssembly module in the front-end entry file. Use Webpack Dev Server to start the development server and enable HMR, open the browser http: / localhost:8000, and you can see the output of the WebAssembly module. At this time, modify the WebAssembly module and execute the compile command again. Webpack's HMR will detect the changes in the compiled file and automatically update the module in the browser.

[0063] Optionally, the compilation tool includes a compression plug-in, and before compiling and packaging the second target code module, the method further includes:

[0064] The second target code module is compressed by using a compression plug-in and then compiled and packaged.

[0065] In addition, in order to improve compilation efficiency, you can also adopt a combination of the following strategies to optimize Webpack.

[0066] Automatically enable Tree Shaking in Webpack, a technique for removing unused code through static analysis. It relies on the static structure of the ES6 module system to remove unused code at build time. Enable in Webpack configuration, mode:production, and automatically enable Tree Shaking.

[0067] Code splitting: Split the code into multiple smaller packages based on permissions, business functions, and other dimensions, using on-demand loading to reduce initial loading time and the complexity of the dependency tree. Enable optimization.splitChunks in the Webpack configuration.

[0068] Load code modules on demand, use the dynamic import "import()" method to load code components on demand. In addition, lazy loading components can be implemented, taking React as an example. Compress code, use the TerserPlugin built into Webpack to compress JavaScript code. At the same time, you can delete unused style files or codes, use "purges-webpack-plugin", and add the configuration code of the plug-in in the Webpack configuration file.

[0069] Furthermore, optimize the update logic of Webpack HMR to reduce unnecessary reconstruction and re-rendering. Use the "React Fast Refresh" plugin to achieve this and include component exports in the hot method.

[0070] The code packaging method provided in the embodiment of the present application obtains the source code to be packaged, splits the source code into multiple code modules, imports the multiple code modules into a preset compilation tool, uses the compilation tool to determine the first target code module whose code is modified from the multiple code modules, compiles and packages the first target code module to obtain an incremental package, and sends the incremental package to the target client so that the target client replaces the corresponding code module with the incremental package, which can improve the efficiency of code packaging and reduce resource overhead. It can also provide instant feedback, reduce waiting time, and maintain application status. Furthermore, it can be combined with various front-end frameworks (such as React, Vue, Angular, etc.).

[0071] like Figure 2 As shown, an embodiment of the present application provides a code packaging device, the device comprising:

[0072] An acquisition module 11 is used to acquire source code to be packaged;

[0073] A processing module 12, used for splitting the source code into multiple code modules;

[0074] The compiling module 13 is used to import the multiple code modules into a preset compiling tool, use the compiling tool to determine a first target code module whose code is modified from the multiple code modules, compile and package the first target code module to obtain an incremental package:

[0075] The sending module 14 is used to send the incremental package to the target client, so that the target client replaces the corresponding code module with the incremental package.

[0076] In one embodiment, the target code module includes a CSS file; the encoding module 13 is also used to:

[0077] The style file in the CSS file of the target code module is deleted to obtain a second target code module, and the second target code module is compiled and packaged to obtain an incremental package.

[0078] In one embodiment, the compiling module 13 is specifically used for:

[0079] The multiple code modules are imported into the compilation tool in an on-demand loading manner.

[0080] In one embodiment, the compilation tool includes a file conversion tool; the compilation module 13 is also used for:

[0081] Calling the file conversion tool to convert the code in the incremental package into a binary format to obtain a target incremental package;

[0082] The sending module 14 is further used to send the target incremental package to the target client.

[0083] In one embodiment, the compilation tool includes a compression plug-in, and the encoding module 13 is further used to:

[0084] The second target code module is compressed by using a compression plug-in and then compiled and packaged.

[0085] In one embodiment, the compilation tool includes a monitoring function, and the encoding module 13 is specifically used to:

[0086] The monitoring function is used to monitor whether each of the code modules is modified. If the code module is modified, the code module is determined as the target code module.

[0087] In one embodiment, the sending module 14 is specifically used for:

[0088] The incremental packet is sent to the target client based on the WebSocket protocol.

[0089] The code packaging device provided in this embodiment can execute the above-mentioned code packaging method embodiment, and its implementation principle and technical effect are similar, which will not be described in detail here.

[0090] For the specific definition of the code packaging device, please refer to the definition of the code packaging method above, which will not be repeated here. Each module in the above-mentioned code packaging device can be implemented in whole or in part by software, hardware and a combination thereof. The above-mentioned modules can be embedded in or independent of the processor of the electronic device in the form of hardware, or can be stored in the memory of the electronic device in the form of software, so that the processor can call and execute the operations corresponding to the above modules.

[0091] The execution subject of the code packaging method provided in the embodiment of the present application can be a local device, which can be an electronic device, which can be a computer device, a terminal device, a server or a server cluster, and the embodiment of the present application does not specifically limit this.

[0092] Figure 3 This is a schematic diagram of the internal structure of an electronic device provided in an embodiment of the present application. Figure 3 As shown, the electronic device includes a processor and a memory connected via a system bus. The processor is used to provide computing and control capabilities. The memory may include a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The computer program can be executed by the processor to implement the steps of the code packaging method provided in each of the above embodiments. The internal memory provides a cached operating environment for the operating system and the computer program in the non-volatile storage medium.

[0093] Those skilled in the art will understand that Figure 3 The internal structure diagram of the electronic device shown in the figure is only a block diagram of a partial structure related to the scheme of the present application, and does not constitute a limitation on the electronic device to which the scheme of the present application is applied. The specific electronic device may include more or fewer components than those shown in the figure, or combine certain components, or have a different arrangement of components.

[0094] In another embodiment of the present application, a computer-readable storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, the steps of the code packaging method in the embodiment of the present application are implemented.

[0095] In another embodiment of the present application, a computer program product is also provided. The computer program product includes computer instructions. When the computer instructions execute the various steps of the code packaging method in the method flow shown in the above method embodiment.

[0096] In the above embodiments, it can be implemented in whole or in part by software, hardware, firmware or any combination thereof. When implemented using a software program, it can be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When loading and executing computer execution instructions on a computer, the process or function according to the embodiment of the present application is generated in whole or in part. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices. Computer instructions can be stored in a computer-readable storage medium, or transmitted from one computer-readable storage medium to another computer-readable storage medium. For example, computer instructions can be transmitted from a website site, computer, server or data center by wired (e.g., coaxial cable, optical fiber, digital subscriber line (digital subscriber line, DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) mode to another website site, computer, server or data center. The computer-readable storage medium can be any available medium that a computer can access or a data storage device such as a server, data center, etc. that contains one or more servers that can be integrated with a medium. The available medium may be a magnetic medium (eg, a floppy disk, a hard disk, a magnetic tape), an optical medium (eg, a DVD), or a semiconductor medium (eg, a solid state disk (SSD)).

[0097] The technical features of the above embodiments may be combined arbitrarily. To make the description concise, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0098] The above embodiments only express several implementation methods of the present application, and the descriptions thereof are relatively specific and detailed, but they cannot be understood as limiting the scope of the invention patent. It should be pointed out that, for a person of ordinary skill in the art, several variations and improvements can be made without departing from the concept of the present application, and these all belong to the protection scope of the present application. Therefore, the protection scope of the patent of the present application shall be subject to the attached claims.

Claims

1. A code packaging method, characterized in that: The method comprises: Get the source code to be packaged; Splitting the source code into multiple code modules; Import the multiple code modules into a preset compilation tool, use the compilation tool to determine a first target code module whose code has been modified from the multiple code modules, compile and package the first target code module to obtain an incremental package: The incremental package is sent to a target client, so that the target client replaces a corresponding code module with the incremental package.

2. The method according to claim 1, characterized in that The target code module includes a CSS file; after using the compilation tool to determine the first target code module whose code is modified from the multiple code modules, the method further includes: The style file in the CSS file of the first target code module is deleted to obtain a second target code module, and the second target code module is compiled and packaged to obtain an incremental package.

3. The method according to claim 1, characterized in that The step of importing the plurality of code modules into a preset compilation tool includes: The multiple code modules are imported into the compilation tool in an on-demand loading manner.

4. The method according to claim 2, characterized in that: The compilation tool includes a file conversion tool; after the second target code module is compiled and packaged to obtain an incremental package, the method further includes: The file conversion tool is called to convert the code in the incremental package into a binary format to obtain a target incremental package, and the target incremental package is sent to the target client.

5. The method according to claim 2, characterized in that: The compilation tool includes a compression plug-in, and before compiling and packaging the second target code module, the method further includes: The second target code module is compressed by using a compression plug-in and then compiled and packaged.

6. The method according to claim 1, characterized in that The compilation tool includes a monitoring function, and the using of the compilation tool to determine the first target code module whose code is modified from the multiple code modules includes: The monitoring function is used to monitor whether each of the code modules is modified. If the code module is modified, the code module is determined as the target code module.

7. The method according to claim 1, characterized in that The step of sending the incremental packet to the target client includes: The incremental packet is sent to the target client based on the WebSocket protocol.

8. A code packaging device, characterized in that: The device comprises: Get module, used to get the source code to be packaged; A processing module, used for splitting the source code into multiple code modules; A compilation module is used to import the multiple code modules into a preset compilation tool, use the compilation tool to determine a first target code module whose code has been modified from the multiple code modules, compile and package the first target code module to obtain an incremental package: The sending module is used to send the incremental package to the target client, so that the target client replaces the corresponding code module with the incremental package.

9. An electronic device, characterized in that: The invention comprises a memory and a processor, wherein the memory stores a computer program, and when the computer program is executed by the processor, the code packaging method according to any one of claims 1 to 7 is implemented.

10. A computer-readable storage medium, characterized in that: A computer program is stored thereon, and when the computer program is executed by a processor, the code packaging method according to any one of claims 1 to 7 is implemented.

Images