Code segmentation method and device, electronic equipment, storage medium and product

Abstract

The invention provides a code segmentation method and device, electronic equipment, a computer storage medium and a computer program product, the method is applied to the technical field of Web front ends, and the method comprises the following steps: obtaining a code file of a Web application; splitting the code file by using a code segmentation plug-in in a Webpack tool to obtain a first splitting result; the first splitting result comprises a plurality of first code blocks; in response to a modification operation triggered for the configuration file of the code segmentation plug-in, obtaining a modified configuration file corresponding to the modification operation; adjusting the first splitting result by utilizing the modified configuration file to obtain a second splitting result; the second splitting result comprises a plurality of second code blocks; the number of the second code blocks is smaller than that of the first code blocks.

Description

Technical Field

[0001] The present application relates to the field of Web front-end technology, and in particular to a code segmentation method, device, electronic device, computer storage medium and computer program product. Background Art

[0002] In the current Web development environment, most Web applications are a combination of single page application (SPA) and client side rendering (CSR). By default, all codes are packaged in a JS (JavaScript) file. This may cause the page to be unresponsive for a period of time when loading. Specifically, there will be a long white screen time when opening the page, affecting the user experience. Summary of the invention

[0003] The present application provides a code segmentation method, device, electronic device, computer storage medium and computer program product.

[0004] The technical solution of this application is implemented as follows:

[0005] The present application provides a code segmentation method, the method comprising:

[0006] Get the code file of the web application;

[0007] Using a code splitting plug-in in a Webpack tool to split the code file to obtain a first splitting result; the first splitting result includes a plurality of first code blocks;

[0008] In response to a modification operation triggered on a configuration file of the code splitting plug-in, obtaining a modified configuration file corresponding to the modification operation;

[0009] The first split result is adjusted using the modified configuration file to obtain a second split result; the second split result includes multiple second code blocks; the number of the second code blocks is less than the first code block.

[0010] The present application provides a code segmentation device, the device comprising:

[0011] The acquisition module is used to obtain the code files of the Web application;

[0012] A splitting module, used to split the code file using a code splitting plug-in in a Webpack tool to obtain a first splitting result; the first splitting result includes a plurality of first code blocks;

[0013] A modification module, configured to, in response to a modification operation triggered on a configuration file of the code splitting plug-in, obtain a modified configuration file corresponding to the modification operation;

[0014] An adjustment module is used to adjust the first split result using the modified configuration file to obtain a second split result; the second split result includes multiple second code blocks; the number of the second code blocks is less than the first code block.

[0015] The present application provides an electronic device, which includes a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the code segmentation method provided by one or more of the aforementioned technical solutions when executing the program.

[0016] The present application provides a computer storage medium, which stores a computer program; after the computer program is executed, it can implement the code segmentation method provided by one or more of the above-mentioned technical solutions.

[0017] The present application provides a computer program product, including a computer program, which, when executed by a processor, implements the code segmentation method provided by one or more of the aforementioned technical solutions.

[0018] An embodiment of the present application provides a code splitting method, device, electronic device, computer storage medium and computer program product, the method comprising: obtaining a code file of a Web application; splitting the code file using a code splitting plug-in in a Webpack tool to obtain a first splitting result; the first splitting result includes multiple first code blocks; in response to a modification operation triggered by a configuration file of the code splitting plug-in, obtaining a modified configuration file corresponding to the modification operation; adjusting the first splitting result using the modified configuration file to obtain a second splitting result; the second splitting result includes multiple second code blocks; the number of the second code blocks is less than the first code block.

[0019] It can be seen that in the embodiment of the present application, after the code file of the Web application is split using the code splitting plug-in in the Webpack tool, the administrator of the Web application will modify the configuration file of the code splitting plug-in, and subsequently use the modified configuration file to adjust the splitting result so that the number of adjusted code blocks is less than the number of split code blocks. In this way, the number of code blocks loaded when the page is loaded can be reduced, the page loading efficiency can be improved, and the page white screen time can be shortened. BRIEF DESCRIPTION OF THE DRAWINGS

[0020] Figure 1 is a flowchart of a code segmentation method in the related art;

[0021] Figure 2 A schematic diagram of the structure of a code segmentation device according to an embodiment of the present application;

[0022] Figure 3 A schematic diagram of the structure of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0023] The present application will be further described in detail below in conjunction with the accompanying drawings and Examples. It should be understood that the embodiments provided herein are only used to explain the present application and are not intended to limit the present application. In addition, the embodiments provided below are partial embodiments for implementing the present application, rather than providing all embodiments for implementing the present application. In the absence of conflict, the technical solutions recorded in the embodiments of the present application can be implemented in any combination.

[0024] It should be noted that, in the embodiments of the present application, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a method or system including a series of elements includes not only the elements explicitly recorded, but also includes other elements not explicitly listed, or also includes elements inherent to the implementation of the method or system. In the absence of further restrictions, an element defined by the sentence "includes a ..." does not exclude the presence of other related elements (such as steps in a method or units in a system, for example, a unit may be a part of a processor, a part of a program or software, etc.) in the method or system including the element.

[0025] For example, the code segmentation method provided in the present application includes a series of steps, but the code segmentation method provided in the present application is not limited to the recorded steps. Similarly, the code segmentation device provided in the present application includes a series of modules, but the code segmentation device provided in the present application is not limited to including the modules explicitly recorded, and may also include modules that need to be set up to obtain relevant information or perform processing based on information.

[0026] Code splitting is a useful technique for reducing the initial JavaScript payload of a page by splitting the JavaScript file into two parts: one part is the JavaScript file that is required when the page loads; the other part is the remaining JavaScript file that can be loaded at a later point in time (most commonly when the user interacts with a specific interactive element on the page).

[0027] In some embodiments of the present application, the code segmentation method can be implemented using a processor in a code segmentation device, and the above-mentioned processor can be at least one of an application-specific integrated circuit (ASIC), a digital signal processor (DSP), a digital signal processing device (DSPD), a programmable logic device (PLD), a field programmable gate array (FPGA), a central processing unit (CPU), a controller, a microcontroller, and a microprocessor.

[0028] In the embodiment of the present application, the code segmentation method can be applied to a terminal. Here, the terminal is not limited to a personal computer, a television, a mobile phone, a tablet computer, etc. The terminal can be a mobile terminal or a fixed terminal.

[0029] Figure 1 A flowchart of a code segmentation method provided in an embodiment of the present application is shown in FIG. Figure 1 As shown, the process may include:

[0030] Step 101: Obtain the code file of the Web application.

[0031] In an embodiment of the present application, before obtaining the code file of the Web application, a target user interface (UI) framework is obtained, and the Web application is built using the target UI framework; here, there is no specific limitation on the type of the target UI framework, for example, the target UI framework can be React, Vue or Angular; React will be used as an example for explanation later.

[0032] Here, there is no limitation on the method of obtaining the target UI frame; for example, the target UI frame can be pre-stored in the terminal and directly obtained from the terminal when needed, or it can be stored in a server or cloud and obtained from the server or cloud when needed.

[0033] In some embodiments, obtaining a code file of a Web application may include: obtaining a program code of the Web application; and using a Webpack tool to package the program code of the Web application to obtain a code file of the Web application.

[0034] In an embodiment of the present application, after a Web application is built using the target UI framework, the program code of the Web application can be obtained, and the program code of the Web application can be packaged using the Webpack tool to obtain a code file of the Web application; illustratively, the code file packaged by the Webpack tool is typically a bundle file, which can be run on a browser.

[0035] Here, Webpack is a front-end resource loading and packaging tool; it will perform static analysis based on the module dependencies, and then generate corresponding static resources for these modules according to the specified rules; in Webpack, files can be used as a module.

[0036] Step 102: Use the code splitting plug-in in the Webpack tool to split the code file to obtain a first splitting result.

[0037] Exemplarily, the code splitting plug-in is a SplitChunks plug-in built into the Webpack tool; the main function of the SplitChunks plug-in in the webpack tool is to split code files to improve the maintainability and loading performance of the code.

[0038] In an embodiment of the present application, the splitChunks plug-in in the Webpack tool is enabled by default. The SplitChunks plug-in has a default configuration file that includes constraints for controlling code splitting.

[0039] Exemplarily, the code file of the Web application may be split using a default configuration file to obtain a first split result; here, the first split result may include multiple first code blocks after splitting and the overall volume of the multiple first code blocks.

[0040] Here, the types of the first code block may include: non-asynchronous loaded code blocks and asynchronous loaded code blocks, which are referred to as asynchronous code blocks (async chunks) and non-asynchronous code blocks (initial chunks) respectively; the difference between asynchronous and non-asynchronous is that non-asynchronous code blocks are code blocks (chunks) loaded at the entry, and asynchronous code blocks are chunks loaded on demand after the application is loaded. The content of the configuration file is explained below.

[0041] It should be noted that, by default, when the code file is split using the configuration file of the SplitChunks plug-in, it will only affect the asynchronously loaded code blocks, because modifying the non-asynchronously loaded code blocks will affect the script tags in the project's HyperText Markup Language (HTML) files.

[0042] For example, the following constraints in the configuration file may be used to split the code files of the Web application:

[0043] 1. New chunks can be shared, or modules come from the node_modules folder;

[0044] 2. The new chunk size is larger than 20kb (the size before “min+gz”);

[0045] 3. When loading chunks on demand, the maximum number of parallel requests is less than or equal to 30;

[0046] 4. When loading the initialization page, the maximum number of concurrent requests is less than or equal to 30;

[0047] 5. When trying to meet the last two conditions, it is better to use larger chunks.

[0048] Here, "min+gz" refers to the size of the code file before minification and gzip compression.

[0049] For example, the configuration file may be implemented using the following program code:

[0050] optimization:

[0051] splitChunks:{

[0052] chunks:'async', / / indicates which chunks will be selected for optimization. There are three optional values: all (all chunks), async (asynchronous chunks) and initial (non-asynchronous chunks). Setting it to all means that chunks can be shared between asynchronous chunks and non-asynchronous chunks;

[0053] minSize:20000, / / The minimum size of the generated chunk;

[0054] minRemainingSize: 0, / / Avoid zero-sized modules by ensuring that the minimum remaining chunk size after splitting exceeds the limit;

[0055] minChunks: 1, / / The minimum number of chunks that must be shared before splitting;

[0056] maxAsyncRequests:30, / / The maximum number of parallel requests when loading on demand;

[0057] maxInitialRequests:30, / / The maximum number of parallel requests for the entry point;

[0058] enforceSizeThreshold:50000, / / Enforce the volume threshold for splitting, other restrictions (minRemainingSize, maxAsyncRequests, maxInitialRequests) will be ignored;

[0059] cacheGroups:{ / / cache group;

[0060] defaultVendors:{ / / Default cache group for node_modules module;

[0061] test: / [\\ / ]node_modules[\\ / ] / , / / Regular match node_modules, if it meets the requirement, it will be added to the default cache group;

[0062] priority:-10, / / priority;

[0063] reuseExistingChunk:true, / / If the current chunk contains a module that has been split out of the code file, it will be reused without generating a new module;

[0064]

[0065] It should be noted that the above program code is the default configuration program code of the configuration file and will not be repeated here.

[0066] Step 103: In response to a modification operation triggered on a configuration file of the code splitting plug-in, a modified configuration file corresponding to the modification operation is obtained.

[0067] For example, the administrator of the Web application can modify the configuration file of the code splitting plug-in according to the actual situation of the project; if the terminal receives a modification operation triggered by the administrator on the configuration file of the code splitting plug-in, the modified configuration file corresponding to the modification operation can be obtained. Here, the modification operation may include operations such as change, configuration, and addition.

[0068] In some embodiments, the configuration file of the code splitting plug-in includes configuration parameters. In response to a modification operation triggered on the configuration file of the code splitting plug-in, obtaining a modified configuration file corresponding to the modification operation may include: in response to the modification operation triggered on the configuration parameters in the configuration file, obtaining target configuration parameters corresponding to the modification operation; based on the target configuration parameters, obtaining the modified configuration file.

[0069] In an embodiment of the present application, when a modification operation triggered by a configuration parameter in a configuration file is received, the configuration parameter can be modified according to the modification operation, and the target configuration parameter corresponding to the modification operation is obtained. If the target configuration parameter is combined with the unmodified configuration parameter, the modified configuration file can be obtained.

[0070] In some embodiments, the configuration parameters may include a usage status of a default cache group for node_modules, where the usage status is a startup status. Obtaining the target configuration parameters corresponding to the modification operation may include: when the modification operation is a change operation to change the usage status of the default cache group, obtaining the changed usage status.

[0071] In the embodiment of the present application, the target configuration parameter includes a changed usage state, and in this case, the changed usage state is a disabled state.

[0072] For example, according to the program code of the above configuration file, the default cache group for node_modules is the defaultVendors cache group. By default, the use state of the defaultVendors cache group is enabled; the above change operation is used to change the use state of the defaultVendors cache group to disabled; in this way, node_modules will become part of the default cache group. Accordingly, the change operation can be implemented using the following program code:

[0073] cacheGroups:

[0074] defaultVendors:false, / / Disable the default cache group; false disables.

[0075] }

[0076] In some embodiments, obtaining the target configuration parameters corresponding to the modification operation may include: when the modification operation is a configuration operation of configuring a cache group of a target UI framework, obtaining the configured cache group; the target configuration parameters include the configured cache group.

[0077] In an embodiment of the present application, the configured cache group is a custom cache group configured for the target UI framework; illustratively, if the target UI framework is React, it is equivalent to the administrator of the Web application configuring a separate code block for React and its related libraries. In this way, the code block can be obtained from the browser's long-term cache because the versions of these libraries are rarely upgraded.

[0078] Exemplarily, in this custom cache group, the chunk attribute is set to "all", so that no matter whether the code chunks are asynchronous chunks or non-asynchronous chunks, they are all part of this cache group.

[0079] It should be noted that for different types of UI frameworks, the content in the custom cache group can be adaptively adjusted; for example, if the target UI framework is React, the configuration operation of the custom cache group can be implemented using the following program code:

[0080]

[0081]

[0082] In some embodiments, the target configuration parameters also include a cache group configured for non-asynchronously loaded code blocks.

[0083] Exemplarily, in the cache group configured for non-asynchronously loaded code chunks, the chunk attribute is set to "initial" so that only non-asynchronously loaded code chunks will be selected for optimization; the minSize attribute is set to 0, so that even if the size of the initial required node_modules changes and is less than the default specified value (e.g., 17000 bytes), it is still a separate chunk. The configuration process can be implemented using the following program code:

[0084]

[0085] For example, in the above program code, a cache group named common is configured, which will match all modules located in the node_modules directory and set a priority of -5 for them, which means that these modules will be packaged into blocks with lower priority. The purpose of this is to reuse existing code blocks, thereby reducing the size of the final packaged file.

[0086] In some embodiments, the target configuration parameters also include a minimum size for reconfiguration of the first code block.

[0087] For example, according to the above content, for the default cache group, the minChunks property is specified as 2, which means that a module must be required in at least two chunks to become part of this cache group. The minimum size of the first code chunk defined by webpack is 20,000 bytes; the optimal size for different applications will vary.

[0088] In the embodiment of the present application, the minimum size of the first code block can be reconfigured, that is, the minSize value is reconfigured to obtain a reconfigured minimum size, for example, 17000 bytes. To ensure the code segmentation effect, in the process of reconfiguring the minSize value, different minSize values ​​can be tried, and the optimal minSize value can be determined to minimize the number of code blocks and the overall volume of all code blocks.

[0089] Exemplarily, by integrating the contents of the above target configuration parameters, a modified configuration file can be obtained, which can be implemented using the following program code:

[0090] splitChunks:{

[0091] {

[0092] minSize:17000,

[0093] minRemainingSize:0,

[0094] minChunks:1,

[0095] maxAsyncRequests:30,

[0096] maxInitialRequests:30,

[0097] automaticNameDelimiter:"_",

[0098] enforceSizeThreshold:30000,

[0099] cacheGroups:

[0100] common:

[0101] test: / [\\ / ]node_modules[\\ / ] / ,

[0102] priority:-5,

[0103] reuseExistingChunk:true,

[0104] chunks:"initial",

[0105] name:"common_app",

[0106] minSize:0,

[0107] },

[0108] default:{

[0109] minChunks:2,

[0110] priority:-20,

[0111] reuseExistingChunk:true,

[0112]

[0113] It should be noted that the meaning of each line of code in the above program code has been explained in the above embodiment, and will not be repeated here to avoid repeated description.

[0114] Step 104: Use the modified configuration file to adjust the first split result to obtain a second split result.

[0115] In an embodiment of the present application, after obtaining the modified configuration file according to the above steps, the first splitting result can be adjusted using the modified configuration file to obtain a second splitting result; here, the second splitting result can include multiple second code blocks and the overall volume of multiple second code blocks.

[0116] Exemplarily, according to the above content, in the process of reconfiguring the minSize value, different minSize values ​​will be tried so that the number of adjusted code blocks and the overall volume of all code blocks are minimized; that is, the number of second code blocks is smaller than the first code blocks, and the overall volume of multiple second code blocks is also smaller than the overall volume of multiple first code blocks.

[0117] Exemplarily, Table 1 shows the comparison results of the first split result and the second split result, wherein "before configuration" refers to the process of using the SplitChunks plug-in to split the code file to obtain the first split result, and "after configuration" refers to the process of obtaining the modified configuration file and using the configuration file to adjust the first split result to obtain the second split result; as shown in Table 1, the number of first code blocks is 56, and the overall volume of the first code block is 647.76KB, the number of second code blocks is 43, and the overall volume of the second code block is 619.19KB.

[0118] Before configuration After configuration Overall volume 647.76KB 619.19KB Number of code blocks 56 43

[0119] Table 1

[0120] It can be seen that compared with the default split result of the SplitChunks plug-in, the embodiment of the present application can further reduce the total code volume and reduce the number of chunks by modifying the configuration file of the SplitChunks plug-in and adjusting the split result using the modified configuration file, so that the effect of code segmentation is optimal. In this way, the number of code blocks loaded when the page is loaded can be reduced, the page loading efficiency can be improved, and the page white screen time can be shortened. In addition, by splitting the code file into smaller code blocks and only downloading the content necessary for the normal operation of the web page during startup, the loading responsiveness of the web page can be greatly improved, and the user experience can be improved.

[0121] Figure 2 A schematic diagram of the structure of a code segmentation device according to an embodiment of the present application is shown in FIG. Figure 2 As shown, the device may include:

[0122] The acquisition module 200 is used to acquire the code file of the Web application;

[0123] The splitting module 201 is used to split the code file using the code splitting plug-in in the Webpack tool to obtain a first splitting result; the first splitting result includes multiple first code blocks;

[0124] A modification module 202, configured to obtain a modified configuration file corresponding to a modification operation triggered on a configuration file of the code splitting plug-in in response to the modification operation;

[0125] The adjustment module 203 is used to adjust the first split result by using the modified configuration file to obtain a second split result; the second split result includes multiple second code blocks; the number of the second code blocks is less than the first code block.

[0126] In some embodiments, the acquisition module 200 is further used to:

[0127] Obtaining program code of the Web application;

[0128] The Webpack tool is used to package the program code of the Web application to obtain the code file of the Web application.

[0129] In some embodiments, the configuration file of the code splitting plug-in includes configuration parameters, and the modification module 202 is further used to:

[0130] In response to a modification operation triggered on a configuration parameter in the configuration file, obtaining a target configuration parameter corresponding to the modification operation;

[0131] Based on the target configuration parameters, the modified configuration file is obtained.

[0132] In some embodiments, the configuration parameters include a usage state of a default cache group for node_modules, the usage state being a startup state, and the modification module 202 is further used to:

[0133] When the modification operation is a modification operation of modifying the usage state of the default cache group, the modified usage state is acquired; the target configuration parameter includes the modified usage state, and the modified usage state is a disabled state.

[0134] In some embodiments, before obtaining the code file of the Web application, the device further includes a building module, wherein the building module is used to:

[0135] Get the target UI frame;

[0136] Building the Web application using the target UI framework;

[0137] Accordingly, the modification module 202 is further used for:

[0138] When the modification operation is a configuration operation of configuring a cache group of the target UI framework, the configured cache group is acquired; and the target configuration parameters include the configured cache group.

[0139] In some embodiments, the types of the first code block include: a non-asynchronously loaded code block and an asynchronously loaded code block; the target configuration parameters also include a cache group configured for the non-asynchronously loaded code block, and a minimum size reconfigured for the first code block.

[0140] In some embodiments, the first split result also includes the overall volume of the multiple first code blocks, and the second split result also includes the overall volume of the multiple second code blocks, and the overall volume of the multiple second code blocks is smaller than the overall volume of the multiple first code blocks.

[0141] In actual applications, the above-mentioned acquisition module 200, splitting module 201, modification module 202, adjustment module 203 and building module can all be implemented by a processor located in an electronic device, and the processor can be at least one of ASIC, DSP, DSPD, PLD, FPGA, CPU, controller, microcontroller, and microprocessor.

[0142] In addition, each functional module in this embodiment can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The above integrated unit can be implemented in the form of hardware or software functional modules.

[0143] If the integrated unit is implemented in the form of a software function module and is not 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 this embodiment is essentially or the part that contributes to the relevant technology or the whole or 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, including several instructions for a computer device (which can be a personal computer, server, or network device, etc.) or a processor to perform all or part of the steps of the method of this embodiment. The aforementioned storage medium includes: a USB flash drive, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a disk or an optical disk, and other media that can store program codes.

[0144] Specifically, a computer program instruction corresponding to a code segmentation method in this embodiment can be stored on a storage medium such as a CD, a hard disk, or a USB flash drive. When the computer program instruction corresponding to a code segmentation method in the storage medium is read or executed by an electronic device, any code segmentation method in the aforementioned embodiments is implemented.

[0145] Based on the same technical concept as the above embodiments, see Figure 3 , which shows an electronic device 300 provided in an embodiment of the present application, which may include: a memory 301 and a processor 302; wherein,

[0146] Memory 301, used for storing computer programs and data;

[0147] The processor 302 is configured to execute a computer program stored in the memory to implement any one of the code segmentation methods in the foregoing embodiments.

[0148] In practical applications, the memory 301 may be a volatile memory, such as RAM; or a non-volatile memory, such as ROM, flash memory, hard disk drive (HDD) or solid-state drive (SSD); or a combination of the above types of memory, and provide instructions and data to the processor 302.

[0149] The processor 302 may be at least one of an ASIC, a DSP, a DSPD, a PLD, an FPGA, a CPU, a controller, a microcontroller, and a microprocessor. It is understandable that for different code segmentation devices, the electronic device used to implement the processor function may also be other, which is not specifically limited in the embodiments of the present application.

[0150] The present application provides a computer program product, including a computer program, which implements any one of the code segmentation methods in the aforementioned embodiments when executed by a processor.

[0151] In some embodiments, the functions or modules included in the device provided in the embodiments of the present application can be used to execute the method described in the above method embodiments. The specific implementation can refer to the description of the above method embodiments. For the sake of brevity, it will not be repeated here.

[0152] The above description of various embodiments tends to emphasize the differences between the various embodiments. The same or similar aspects can be referenced to each other, and for the sake of brevity, they will not be repeated herein.

[0153] The methods disclosed in the various method embodiments provided in this application can be arbitrarily combined without conflict to obtain new method embodiments.

[0154] The features disclosed in the various product embodiments provided in this application can be arbitrarily combined without conflict to obtain new product embodiments.

[0155] The features disclosed in the various method or device embodiments provided in this application can be arbitrarily combined without conflict to obtain new method embodiments or device embodiments.

[0156] Those skilled in the art will appreciate that the embodiments of the present application may be provided as methods, systems, or computer program products. Therefore, the present application may adopt the form of hardware embodiments, software embodiments, or embodiments in combination with software and hardware. Moreover, the present application may adopt the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage and optical storage, etc.) that contain computer-usable program code.

[0157] The present application is described with reference to the flowcharts and / or block diagrams of the methods, devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0158] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process. Figure 1 A process or multiple processes and / or boxes Figure 1 A step that specifies a function in one or more boxes.

[0159] The above are only preferred embodiments of the present application and are not intended to limit the protection scope of the present application.

Claims

1. A code segmentation method, characterized in that: The method comprises: Get the code file of the web application; Using a code splitting plug-in in a Webpack tool to split the code file to obtain a first splitting result; the first splitting result includes a plurality of first code blocks; In response to a modification operation triggered on a configuration file of the code splitting plug-in, obtaining a modified configuration file corresponding to the modification operation; The first split result is adjusted using the modified configuration file to obtain a second split result; the second split result includes multiple second code blocks; the number of the second code blocks is less than the first code block.

2. The method according to claim 1, characterized in that The step of obtaining the code file of the Web application includes: Obtaining program code of the Web application; The Webpack tool is used to package the program code of the Web application to obtain the code file of the Web application.

3. The method according to claim 1 or 2, characterized in that: The configuration file of the code splitting plug-in includes configuration parameters, and in response to a modification operation triggered on the configuration file of the code splitting plug-in, obtaining a modified configuration file corresponding to the modification operation includes: In response to a modification operation triggered on a configuration parameter in the configuration file, obtaining a target configuration parameter corresponding to the modification operation; Based on the target configuration parameters, the modified configuration file is obtained.

4. The method according to claim 3, characterized in that The configuration parameters include a usage status of a default cache group for node_modules, where the usage status is a startup status. The acquiring of the target configuration parameters corresponding to the modification operation includes: When the modification operation is a modification operation of modifying the usage state of the default cache group, the modified usage state is acquired; the target configuration parameter includes the modified usage state, and the modified usage state is a disabled state.

5. The method according to claim 4, characterized in that Before obtaining the code file of the Web application, the method further includes: Get the target UI frame; Building the Web application using the target UI framework; Accordingly, the obtaining of the target configuration parameters corresponding to the modification operation includes: When the modification operation is a configuration operation of configuring a cache group of the target UI framework, the configured cache group is acquired; and the target configuration parameters include the configured cache group.

6. The method according to claim 3, characterized in that The types of the first code block include: a non-asynchronously loaded code block and an asynchronously loaded code block; the target configuration parameters also include a cache group configured for the non-asynchronously loaded code block and a minimum size reconfigured for the first code block.

7. The method according to claim 1, characterized in that The first split result also includes the overall volume of the multiple first code blocks, and the second split result also includes the overall volume of the multiple second code blocks, and the overall volume of the multiple second code blocks is smaller than the overall volume of the multiple first code blocks.

8. A code segmentation device, characterized in that: The device comprises: The acquisition module is used to obtain the code files of the Web application; A splitting module, used to split the code file using a code splitting plug-in in a Webpack tool to obtain a first splitting result; the first splitting result includes a plurality of first code blocks; A modification module, configured to, in response to a modification operation triggered on a configuration file of the code splitting plug-in, obtain a modified configuration file corresponding to the modification operation; An adjustment module is used to adjust the first split result using the modified configuration file to obtain a second split result; the second split result includes multiple second code blocks; the number of the second code blocks is less than the first code block.

9. An electronic device, characterized in that: The device comprises a memory, a processor and a computer program stored in the memory and executable on the processor, and the method according to any one of claims 1 to 7 is implemented when the processor executes the program.

10. A computer storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the method according to any one of claims 1 to 7 is implemented.

11. A computer program product, comprising a computer program, characterized in that The computer program implements the method according to any one of claims 1 to 7 when executed by a processor.

Images