Page loading method and device and computer readable storage medium

Abstract

The invention is suitable for the technical field of webpage development, and provides a page loading method and device and a computer readable storage medium, the method comprises the steps that a page loading request is received, the page loading request is used for requesting to load a target page, and the target page is composed of a plurality of materials; according to the page loading request, a code module corresponding to each material in the multiple materials is obtained, and the code module corresponding to one material is subpackaged into multiple subpackage files based on a preset rule; performing de-duplication processing on the plurality of sub-package files of the plurality of materials to obtain a plurality of target sub-package files, the target sub-package files being not repeated with each other, and at least one target sub-package file belonging to at least two materials; and loading the plurality of target subpackage files to display the target page. According to the method, the resource volume of the established page can be reduced, and the page loading speed is increased.

Description

Technical Field

[0001] The present application belongs to the technical field of page development, and in particular, relates to a page loading method, device and computer-readable storage medium. Background Art

[0002] Web pages are generally composed of a variety of different materials (i.e., components or modules). In the process of building a web page, the code of these materials needs to be packaged to obtain a page resource file, so that when a user visits the web page, the page resource file is loaded to render the web page to be presented.

[0003] In the related art, in one case, the code used by each material is encapsulated independently, which can avoid limiting the flexibility of the development stage. However, since the codes of each material are independent of each other, it is difficult to share the code resources of each material, resulting in a large page size.

[0004] In another case, when packaging the code of each material, the build tool uses tree shaking technology to delete the unused code of the material, which can reduce the size of the package file of a material. However, in this case, even if different materials reference the code in the same dependent library, the dependent library code included in the packaged products of different materials is different, and the dependent library code in the packaged products of each material cannot be shared, which will also cause the size of the built page to be larger, affecting the page loading speed. Summary of the invention

[0005] The embodiments of the present application provide a page loading method, device and computer-readable storage medium, which can reduce the volume of constructed page resources and improve the page loading speed.

[0006] In a first aspect, an embodiment of the present application provides a page loading method, the method comprising: receiving a page loading request, the page loading request being used to request loading a target page, the target page being composed of multiple materials; according to the page loading request, obtaining a code module corresponding to each of the multiple materials, the code module corresponding to a material being subpackaged into multiple subpackage files based on preset rules; performing deduplication processing on multiple subpackage files of the multiple materials to obtain multiple target subpackage files, the target subpackage files being non-duplicates with each other, and at least one target subpackage file belonging to at least two materials; loading multiple target subpackage files to display the target page.

[0007] In the second aspect, an embodiment of the present application provides a page loading device, including: a receiving module, used to receive a page loading request, the page loading request is used to request to load a target page, the target page is composed of multiple materials; an acquisition module, used to obtain a code module corresponding to each material in the multiple materials according to the page loading request, the code module corresponding to a material is packaged into multiple subpackage files based on preset rules; a deduplication module, used to deduplicate multiple subpackage files of multiple materials to obtain multiple target subpackage files, each target subpackage file is not repeated with each other, and at least one target subpackage file belongs to at least two materials; a loading module, used to load multiple target subpackage files to display the target page.

[0008] In a third aspect, an embodiment of the present application provides a computer-readable storage medium, which stores a computer program. When the computer program is executed by a processor, the steps of the page loading method as described in any one of the first aspects above are implemented.

[0009] In a fourth aspect, an embodiment of the present application provides a computer program product. When the computer program product is run on an electronic device, the electronic device executes the page loading method described in any one of the first aspects above.

[0010] In an embodiment of the present application, when multiple code modules of each material are subpackaged, the multiple code modules are subpackaged based on the dependency relationship between the multiple code modules and the type of the code modules, so that in the subpackage files of each material obtained, the subpackage files corresponding to the code modules shared by different materials are exactly the same. In this way, when loading a page composed of multiple materials, the multiple subpackage files can be deduplicated first, and then the deduplicated subpackage files can be loaded, so that the same subpackage files only need to be loaded once, thereby reducing the volume of the constructed page resources and improving the page loading speed.

[0011] It can be understood that the beneficial effects of the second to fourth aspects mentioned above can be found in the relevant description of the first aspect mentioned above, and will not be repeated here. BRIEF DESCRIPTION OF THE DRAWINGS

[0012] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0013] Figure 1 It is one of the dependency diagrams between the sub-package files provided in the embodiment of the present application;

[0014] Figure 2This is the second dependency diagram between sub-package files provided in the embodiment of the present application;

[0015] Figure 3 This is the third dependency diagram between sub-package files provided in the embodiment of the present application;

[0016] Figure 4 This is the fourth dependency diagram between sub-package files provided in the embodiment of the present application;

[0017] Figure 5 This is the fifth dependency diagram between sub-package files provided in the embodiment of the present application;

[0018] Figure 6 This is the sixth dependency diagram between sub-package files provided in the embodiment of the present application;

[0019] Figure 7 This is the seventh dependency diagram between sub-package files provided in the embodiment of the present application;

[0020] Figure 8 This is one of the flow charts of the page loading method provided in the embodiment of the present application;

[0021] Fig. 9 This is the second flow chart of the page loading method provided in the embodiment of the present application;

[0022] Fig.10 This is the third flow chart of the page loading method provided in the embodiment of the present application;

[0023] Fig.11 This is the eighth dependency diagram between sub-package files provided in the embodiment of the present application;

[0024] Fig.12 It is a flowchart of a method for subpackaging a code module of a material provided in an embodiment of the present application;

[0025] Fig.13 It is a schematic diagram of a flow chart of code module initialization of a material provided in an embodiment of the present application;

[0026] Fig.14 It is a structural schematic diagram of a page loading device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0027] In the following description, specific details such as specific system structures, technologies, etc. are provided for the purpose of illustration rather than limitation, so as to provide a thorough understanding of the embodiments of the present application. However, it should be clear to those skilled in the art that the present application may also be implemented in other embodiments without these specific details. In other cases, detailed descriptions of well-known systems, devices, circuits, and methods are omitted to prevent unnecessary details from obstructing the description of the present application.

[0028] It should be understood that when used in the present specification and the appended claims, the term "comprising" indicates the presence of described features, wholes, steps, operations, elements and / or components, but does not exclude the presence or addition of one or more other features, wholes, steps, operations, elements, components and / or combinations thereof.

[0029] It should also be understood that the term “and / or” used in the specification and appended claims refers to any and all possible combinations of one or more of the associated listed items, and includes these combinations.

[0030] As used in the specification and appended claims of this application, the term "if" can be interpreted as "when" or "uponce" or "in response to determining" or "in response to detecting", depending on the context. Similarly, the phrase "if it is determined" or "if [described condition or event] is detected" can be interpreted as meaning "uponce it is determined" or "in response to determining" or "uponce [described condition or event] is detected" or "in response to detecting [described condition or event]", depending on the context.

[0031] In addition, in the description of the present application specification and the appended claims, the terms "first", "second", "third", etc. are only used to distinguish the descriptions and cannot be understood as indicating or implying relative importance.

[0032] References to "one embodiment" or "some embodiments" etc. described in the specification of this application mean that one or more embodiments of the present application include specific features, structures or characteristics described in conjunction with the embodiment. Therefore, the statements "in one embodiment", "in some embodiments", "in some other embodiments", "in some other embodiments", etc. that appear in different places in this specification do not necessarily refer to the same embodiment, but mean "one or more but not all embodiments", unless otherwise specifically emphasized in other ways. The terms "including", "comprising", "having" and their variations all mean "including but not limited to", unless otherwise specifically emphasized in other ways.

[0033] Web pages are generally composed of a variety of different materials (i.e. components or modules), each of which can include multiple code modules (also called code files or modules). In the process of building a web page, the code of these materials needs to be packaged to obtain a page resource file, so that when a user visits the web page, the page resource file is loaded to render the web page to be presented.

[0034] In the related art, when building a web page, each material constituting the web page is usually packaged as an independent code project to build a product. The specific packaging methods include the following methods:

[0035] In one approach, the code modules used by each material are packaged independently, which can avoid limiting the flexibility of the development stage. However, the packaged products of each material obtained in this way are independent of each other, making it difficult to share the code resources of each material, resulting in a larger page size and affecting the page loading speed.

[0036] In another way, when building the packaged products of each material, the codes of all dependent libraries used by a material are usually packaged together. However, for this packaging method, if the types of dependent libraries used by each material are different, or the versions of the same dependent library used by each material are different, the codes of the dependent libraries in the packaged products of each material are inconsistent, which will make it difficult to share the dependent library codes in the packaged products of each material, resulting in a larger size of the built page and affecting the page loading speed.

[0037] In another way, since the build tool can support the tree shaking function, when building the packaged products of each material, the build tool will delete the unused code modules of the material, which can reduce the size of the packaged file of a material. However, for this packaging method, the code of the dependent library referenced by the packaged products of different materials is different, which will result in that even if different materials reference the code in the same dependent library, the dependent library code in the packaged products of each material cannot be shared, resulting in a larger size of the built page, affecting the page loading speed.

[0038] For example, dependency library C includes function (i.e., code) a and function b. If material A uses function a in dependency library C, when material A is packaged, only function a in dependency library C is packaged, and function b in dependency library C is not packaged. If material B uses function b in dependency library C, when material B is packaged, only function b in dependency library C is packaged, and function a in dependency library C is not packaged. In other words, the code included in dependency library C in the final packaged products of material A and material B is different, which means that even if both material A and material B reference dependency library C, the code of dependency library C in the final packaged products of material A and material B cannot be shared.

[0039] In summary, in the related art, after the codes of each material are independently packaged, the code resources in the packaged products of each material are often difficult to share, resulting in a larger size of the constructed page, which affects the page loading speed.

[0040] In order to solve the above technical problems, the embodiment of the present application provides a page loading method. Since the code module corresponding to a material is subpackaged based on preset rules, the subpackage files corresponding to the code modules shared by different materials in the obtained subpackage files of each material are exactly the same. In this way, when loading a page composed of multiple materials, the multiple subpackage files can be deduplicated first, and then the deduplicated subpackage files can be loaded. In this way, the same subpackage file only needs to be loaded once, thereby reducing the volume of the constructed page resources and improving the page loading speed.

[0041] The following first introduces the subpackaging strategy provided by the embodiment of the present application.

[0042] The subpackaging strategy can include dependency library splitting strategy, dependency library first-level sub-package splitting strategy, common dependency splitting strategy, circular dependency merging strategy, extraction of build tool additional product strategy, and dependency library packaging priority strategy.

[0043] 1. Dependency library splitting strategy

[0044] A material (i.e., code project) can include multiple code modules, which can be divided into code modules in dependent libraries (i.e., common code modules) and material code modules (i.e., business code modules).

[0045] Among them, the dependency library refers to the external code library that the code project needs to rely on during the development process. The dependency library stores a large number of common code modules, and different common code modules can implement different functions. Exemplarily, the dependency library can be, for example, the horo-ui dependency library (i.e., the user interface component library), the skt-utils dependency library (i.e., the library that provides general tool methods or functions), and the moment dependency library (i.e., the library for processing date and time).

[0046] The material code module itself can be a code module written by the developer. By running the material code itself, the common code modules in the dependent libraries referenced by the material can be combined to obtain a material on the web page. It should be noted that the material code modules of different materials are different, that is, the material code modules are not sharable. However, the common code modules in the dependent libraries referenced by different materials can be the same, that is, the common code modules in the dependent libraries referenced by different materials can be shared.

[0047] According to the dependency library splitting strategy, multiple code modules of the material are split, that is, the material's own code module and the common code module in the dependency library referenced by the material are packaged, and the common code modules belonging to different dependency libraries are packaged, that is, the material's own code module is packaged separately, and the common code modules belonging to different dependency libraries are packaged into different subpackage files, and the common code modules belonging to the same dependency library are merged and packaged.

[0048] For example, taking the dependent libraries referenced by the material including the skt-utils dependent library, the horo-ui dependent library and the moment dependent library as an example, according to the dependent library splitting strategy, multiple code modules of the material are subpackaged to obtain four subpackage files, namely, the subpackage file of the material code module (skt-material), the subpackage file corresponding to the skt-utils dependent library, the subpackage file corresponding to the horo-ui dependent library and the subpackage file corresponding to the moment dependent library, such as Figure 1 shown.

[0049] In this embodiment, according to the dependency library splitting strategy, multiple code modules of the material are subpackaged, and the common code modules belonging to a dependency library can be packaged into a subpackage file separately. In this way, when different materials reference the same code in the same dependency library, since the code modules contained in the subpackage files corresponding to the dependency library are the same, the subpackage files corresponding to the dependency library can be reused by multiple materials. In this way, when loading the page, the same subpackage file only needs to be loaded once, thereby reducing the resource volume required for the page and improving the page loading speed.

[0050] 2. First-level sub-package splitting strategy of dependency library

[0051] The code modules in the dependency library may include an entry code module (i.e., an entry file) and multiple layers of sub-code modules (i.e., common code modules). The required sub-code modules are introduced into the entry file, so that the required sub-code modules can be found through the entry file.

[0052] That is to say, the sub-code modules in the dependent library referenced by the material are different, and the entry files of the dependent library are different. For example, if material A references the horo-ui-button component in the horo-ui dependent library, and material B references the horo-ui-button component and horo-ui-input component in the horo-ui dependent library, even if both material A and material B reference the horo-ui dependent library, the entry file of the horo-ui dependent library referenced by material A is different from the entry file of the horo-ui dependent library referenced by material B.

[0053] According to the first-layer sub-package splitting strategy of the dependent library, the multiple code modules of the material are split, that is, the entry file of the dependent library and other sub-code modules are sub-packaged. Optionally, the entry file of the dependent library is packaged separately as a sub-package file, and other multi-layer sub-code modules are combined and packaged into a sub-package file (i.e., the first-layer sub-package file), wherein the sub-package file corresponding to the entry file of the dependent library depends on the first-layer sub-package file.

[0054] For example, taking the horo-ui-button component, horo-ui-input component and horo-ui-radio component in the horo-ui dependency library as an example, after splitting the multiple code modules of the material into four sub-package files (i.e., the sub-package file of the material's own code module (skt-material), the sub-package file corresponding to the skt-utils dependency library, the sub-package file corresponding to the horo-ui dependency library and the sub-package file corresponding to the moment dependency library), the public code modules in the horo-ui dependency library are sub-packaged according to the first-level sub-package splitting strategy of the dependency library to obtain the sub-package file corresponding to the entry file (i.e., horo-ui) and three first-level sub-package files (i.e., the horo-ui-button sub-package file, the horo-ui-input sub-package file and the horo-ui-radio sub-package file), as shown in Figure 2 shown.

[0055] It is understandable that the skt-utils dependency library and the moment dependency library can also be split according to the first-level sub-package splitting strategy of the dependency library.

[0056] In this embodiment, according to the first-layer sub-package splitting strategy of the dependency library, the common code modules in the dependency library are subpackaged, and the entry file and other sub-code modules in a dependency library can be split. In this way, when different materials reference a component of the same dependency library, even if different materials reference other components in the dependency library differently, or different materials reference different versions of the dependency library, the contents of the subpackage files corresponding to a component obtained after the subpackage processing are the same. In this way, the subpackage files of the same component in the same dependency library referenced by different materials can be shared between different materials. This makes it possible to load the subpackage files of the same component in the same dependency library only once when loading a page, thereby reducing the resource volume required for the page and improving the page loading speed.

[0057] 3. Common dependency splitting strategy

[0058] In some scenarios, the same common code modules may exist in different dependent libraries. For example, Figure 3As shown in (a), taking the example that the dependent libraries referenced by the material include the skt-utils dependent library, the horo-ui dependent library, and the moment dependent library, the horo-ui dependent library includes the horo-ui-button component, the horo-ui-input component, and the horo-ui-calendar component, and the moment component of the horo-ui-calendar component includes the moment-xxx-lib code module. The moment dependent library also includes the moment-xxx-lib code module. In other words, the moment-xxx-lib code module is shared by the horo-ui dependent library and the moment dependent library.

[0059] In this case, if the same common code modules in different dependent libraries are packaged into the subpackage file of any dependent library, the dependency relationship between multiple code modules of the material will change, which will make it difficult to share the common code modules in the dependent library. For example, if the moment-xxx-lib code module is packaged into the subpackage file of the moment component in the horo-ui-calendar component, the moment dependent library depends on the horo-ui dependent library; similarly, if the moment-xxx-lib code module is packaged into the subpackage file of the moment dependent library, the horo-ui dependent library depends on the moment dependent library. In this case, there is no such dependency in other materials (such as the moment dependent library depends on the horo-ui dependent library or the horo-ui dependent library depends on the moment dependent library). Even if other materials also reference the horo-ui dependent library and the moment dependent library, the contents of the subpackage files of the horo-ui dependent library and the moment dependent library of other materials are different from those of the material, which will cause the subpackage files of the horo-ui dependent library and the subpackage files of the moment dependent library to be unable to be shared between different materials.

[0060] In order to solve the above problems, multiple code modules of the material are split according to the common dependency splitting strategy, that is, the common code modules that different dependent libraries depend on are packaged separately into a sub-package file. Figure 3 As shown in (b), the moment-xxx-lib code module is packaged separately as a sub-package file. This can avoid changes in the dependency relationship between multiple code modules of the material, so that other common code modules in the dependent library can be shared between different materials.

[0061] 4. Circular dependency merging strategy

[0062] The multiple code modules of the material are split according to the circular dependency merging strategy, that is, the strategy of merging and packaging the code modules with circular dependencies among multiple code modules. For example, Figure 4 As shown in the figure, horo-ui-moment, xxxx and horo-util form a circular dependency relationship (i.e., the circular dependency structure cycle-1), so horo-ui-moment, xxxx and horo-util are combined and packaged into the same sub-package file.

[0063] In this embodiment, since the sub-package files obtained by packaging cannot be dependent on each other, merging and packaging the code modules with circular dependencies among multiple code modules can ensure that the dependencies of the sub-package products are normal and avoid page loading errors.

[0064] 5. Extract the strategy of additional products from the construction tool

[0065] The additional product of the build tool refers to the code modules that are additionally added by the build tool during the packaging process when the build tool packages multiple code modules of the material. Exemplarily, the build tool may be, for example, vite. Exemplarily, these additional code modules may be code modules that are added for compatibility with different modularization specifications.

[0066] If multiple code modules of a material include additional products of the build tool, if the additional products of the build tool are packaged into the sub-package files of any dependent library, the dependency relationship between multiple code modules of the material will change, which will make it difficult to share the sub-package files of the dependent library. For example, taking the additional product vite-lib of the vite build tool as an example, Figure 5 As shown in the figure, if the code of the build tool additional product vite-lib and the skt-utils dependency library are packaged into the same sub-package file, since the horo-ui dependency library needs to reference the build tool additional product vite-lib, the sub-package file of the horo-ui dependency library will depend on the sub-package file of the skt-utils dependency library. This will cause other materials that use the sub-package file where horo-ui-input is located but do not use the skt-utils dependency library to be unable to share the sub-package file where horo-ui-input is located.

[0067] In order to solve the above problems, the multiple code modules of the material are split according to the strategy of extracting the build tool additional products, that is, the build tool additional products in multiple code modules are packaged separately into a sub-package file. In this way, it is possible to avoid the change of the dependency relationship between multiple code modules caused by merging the build tool additional product packaging with other code modules in the dependent library, so that the build tool additional products can be shared between different materials, and other common code modules in the dependent library can also be shared between different materials.

[0068] 6. Dependency library packaging priority strategy

[0069] In some scenarios, different materials can use some of the same common code modules. However, in different materials, the same common code modules may have different dependencies. Figure 6 As shown in (a) in the figure, for material A (skt-material-A), the qs-lib code module is a shared dependency of the skt-utils dependency library and the qs dependency library (i.e., qs-1.1 and qs-1.0). However, Figure 6 As shown in (b), for material B (skt-material-B), the qs-lib code module is only a separate dependency of the qs dependency library (i.e., qs-1.0).

[0070] In view of the above situation, multiple code modules of the material can be subpackaged according to the dependency library packaging priority strategy. Specifically, according to the priority of each dependency library that depends on the common code module, the code modules of the dependency link where the high-priority dependency library is located are packaged first, that is, the common code module is packaged into the subpackage file corresponding to the high-priority dependency library.

[0071] For example, the user can set the priority of the dependency library according to the needs. Optionally, a high priority is set for a dependency library with a high usage ratio (i.e., a commonly used dependency library). For example, since the skt-utils dependency library is widely used in the material development process of web pages, a high priority is set for the skt-utils dependency library.

[0072] For example, taking material A as an example, the priority of the skt-utils dependency library is higher than that of the qs-1.1 dependency library. Figure 7 As shown in the figure, according to the dependency library packaging priority strategy, the dependency link of the skt-utils dependency library is packaged first, that is, the qs-lib code module is packaged into the sub-package file where qs-1.0 is located. In this way, material A and material B can share the packaged sub-package files of qs-1.0 and skt-utlis.

[0073] In this embodiment, according to the dependency library packaging priority strategy, when the common code modules in the dependency library are subpackaged, based on the priority of each dependency library, the code modules commonly referenced by multiple dependency libraries are packaged into the subpackage files of the dependency library with high priority. In this way, since the usage ratio of the dependency library with high priority is relatively high, the reuse rate of the subpackage files of the dependency library with high priority can be improved. In this way, when loading the page, the subpackage files of the dependency library with high usage ratio only need to be loaded once, thereby reducing the resource volume required for the page and improving the page loading speed.

[0074] The above is an introduction to the subpackaging strategy provided in the embodiment of the present application. The following is a schematic illustration of the page loading method provided in the embodiment of the present application in conjunction with the accompanying drawings.

[0075] Figure 8 A schematic diagram of a page loading method provided in an embodiment of the present application. Figure 8 As shown, the page loading method may include the following steps:

[0076] Step 810, receiving a page loading request, the page loading request is used to request to load a target page, the target page is composed of multiple materials.

[0077] A page is usually composed of multiple materials. Materials are the basic elements used in the code building system. Multiple materials can be combined to form a page. A material can be an element (i.e. component) that makes up a page, such as a control, text box, picture, etc. Among them, a material (i.e. code project) can include multiple code modules, which together implement the functions of the material. Multiple code modules can be divided into code modules in the dependent library (i.e. common code modules) and code modules of the material itself (i.e. business code modules). Common code modules can be used to implement some common functions, such as layout, style, tool class, etc. The code module of the material itself can be used to implement specific functions of the material.

[0078] Step 820, according to the page loading request, obtain the code module corresponding to each material in the multiple materials, and the code module corresponding to one material is packaged into multiple sub-package files based on preset rules.

[0079] Step 830, deduplication processing is performed on the multiple sub-package files of the multiple materials to obtain multiple target sub-package files, where the target sub-package files are not repeated, and at least one target sub-package file belongs to at least two materials.

[0080] Step 840, loading multiple target sub-package files to display the target page.

[0081] In an embodiment of the present application, when multiple code modules of each material are subpackaged, the multiple code modules are subpackaged based on the dependency relationship between the multiple code modules and the type of the code modules, so that in the subpackage files of each material obtained, the subpackage files corresponding to the code modules shared by different materials are exactly the same. In this way, when loading a page composed of multiple materials, the multiple subpackage files can be deduplicated first, and then the multiple target subpackage files obtained after the deduplication process are loaded, so that the same subpackage file only needs to be loaded once, thereby reducing the volume of the constructed page resources and improving the page loading speed.

[0082] The above is an overall description of the page loading method provided in the embodiment of the present application. The following is a schematic description of the subpackaging process of the code module of the material.

[0083] In some embodiments, before receiving a page loading request (i.e., step 810 above), the method may further include: according to preset rules, subpackaging multiple code modules corresponding to the material to obtain multiple subpackaging files corresponding to the material, wherein the preset rules are determined based on the dependency relationship between the multiple code modules and / or the type of the code modules.

[0084] The dependency relationship between multiple code modules can be represented by a code module dependency graph.

[0085] In this embodiment, according to the source classification, the code module can be divided into the code module of the material itself and the code module in the dependent library. The code module of the material itself can be a code module written by the developer. By running the code of the material itself, the common code modules in the dependent library referenced by the material can be combined to obtain a material in the web page. The code module in the dependent library may include an entry code module and a common code module (i.e., the sub-code module in the previous text). A common code module refers to a code module in the dependent library that can be used by one material or reused by multiple materials. Different common code modules can be used to implement different functions, such as UI components, tool functions, etc. When the common code modules in the dependent library used by the material are different, the entry code module is different.

[0086] In addition, the code module corresponding to the material may also include a build tool code module (i.e., a build tool additional code product). The build tool additional code module refers to a code module that is additionally added by the build tool during the packaging process when the build tool packages multiple code modules of the material.

[0087] The type of a code module can include a dependent library code type and a non-dependent library code type. The dependent library code type indicates that the code module is a common code module in the dependent library. For example, if the code module is a common code module in the skt-utils dependent library, the type of the code module is a dependent library code type. For another example, if the code module is a common code module in the horo-ui dependent library, the type of the code module is a dependent library code type. The non-dependent library code type indicates that the code module is not a common code module, such as the material code module, the entry code module, the build tool code module, etc.

[0088] Exemplarily, a code module corresponds to a code identification information (identification, referred to as code ID). The code identification information is used to uniquely identify the code module. Optionally, the code identification information can be represented by the file path corresponding to the code module, or by the name of the code module. It can be understood that for the build tool code module, the name of the code module usually includes the build tool related information to represent it. For example, taking the build tool as vite as an example, the name of the build tool code module can include commonjsHelpers.js. Based on this, as a possible implementation method, based on the code identification information of the code module, it can be determined whether the type of the code module is a dependent library code type.

[0089] Specifically, the file path of the code module is obtained, and according to the file path of the code module, it is determined whether the code module belongs to the dependent library storage directory (i.e., the node_modules directory). If the code module does not belong to the node_modules directory, it means that the code module is the material code module itself, that is, the type of the code module does not belong to the dependent library code type. If the code module belongs to the node_modules directory, according to the name of the code module, it is determined whether the code module is a build tool code module. If the code module is a build tool code module, it means that the type of the code module does not belong to the dependent library code type. If the code module is not a build tool code module, based on the file path of the parent code module of the code module, it is determined whether the parent code module of the code module belongs to the node_modules directory. If the parent code module of the code module does not belong to the node_modules directory, it means that the parent code module of the code module is the material code module itself, and the code module is the entry code module in the dependent library, that is, the type of the code module does not belong to the dependent library code type. If the parent code module of the code module belongs to the node_modules directory, it means that the parent code module of the code module is the entry code module of the dependent library, and the code module is a common code module in the dependent library, that is, the type of the code module belongs to the dependent library code type.

[0090] In an embodiment of the present application, when multiple code modules of each material are subpackaged, the multiple code modules are subpackaged based on the dependency relationship between the multiple code modules and the type of the code modules, so that in the subpackage files of each material obtained, the subpackage files corresponding to the code modules shared by different materials are exactly the same. In this way, when loading a page composed of multiple materials, the multiple subpackage files can be deduplicated first, and then the deduplicated subpackage files can be loaded, so that the same subpackage files only need to be loaded once, thereby reducing the volume of the constructed page resources and improving the page loading speed.

[0091] The following uses any one of the multiple code modules corresponding to the material (ie, the first code module) as an example to schematically illustrate the process of subpackaging the code modules according to the preset rules.

[0092] In some examples, the step of sub-packaging multiple code modules corresponding to a material according to a preset rule to obtain multiple sub-package files corresponding to the material may include: when the type of the first code module is a dependent library code type, according to the dependency relationship between the multiple code modules, sub-packaging the first code module to obtain the sub-package files corresponding to the first code module. When the type of the first code module is not a dependent library code type, the first code module is packaged separately to obtain the sub-package files corresponding to the first code module.

[0093] That is to say, when subcontracting the first code module used by the material, it is determined whether the type of the first code module is a dependent library code type. If the type of the first code module is a dependent library code type (that is, the first code module is a common code module in the dependent library), then based on the dependency relationship between multiple code modules used by the material, the first code module is subcontracted, that is, based on the dependency relationship between the first code module and other code modules, the first code module is subcontracted.

[0094] Exemplarily, when the first code module is an entry code module of a dependent library, the first code module is packaged separately according to the first-layer sub-package splitting strategy of the dependent library in the aforementioned embodiment to obtain a sub-package file corresponding to the first code module.

[0095] For example, take the horo-ui-button component, horo-ui-input component, and horo-ui-radio component in the horo-ui dependency library as an example. Figure 2As shown, after splitting the multiple code modules of the material into four sub-package files (i.e., the sub-package file of the material code module skt-material itself, the sub-package file corresponding to the skt-utils dependency library, the sub-package file corresponding to the horo-ui dependency library, and the sub-package file corresponding to the moment dependency library), according to the first-level sub-package splitting strategy of the dependency library, the public code modules in the horo-ui dependency library are packaged to obtain the sub-package file corresponding to the entry file (i.e., horo-ui) and three first-level sub-package files (i.e., horo-ui-button sub-package file, horo-ui-input sub-package file, and horo-ui-radio sub-package file).

[0096] In this embodiment, the first code module is the entry code module of the dependency library. At this time, the first code module is separately packaged into a sub-package file, so that the entry file and other code modules in a dependency library can be split. In this way, when different materials reference a component of the same dependency library, even if different materials reference other components in the dependency library differently, or different materials reference different versions of the dependency library, the contents of the sub-package file corresponding to a component obtained after packaging are the same. In this way, the sub-package files of the same component in the same dependency library referenced by different materials can be shared between different materials. This makes it possible to load the sub-package files of the same component in the same dependency library only once when loading a page, thereby reducing the resource volume required for the page and improving the page loading speed.

[0097] Exemplarily, when the first code module is the material code module of the dependent library, the first code module is packaged separately according to the dependent library splitting strategy of the aforementioned embodiment to obtain a sub-package file corresponding to the first code module.

[0098] In this embodiment, when the first code module is the code module of the material itself, the first code module is separately packaged into a sub-package file. In this way, when different materials reference the same code in the same dependent library, the code modules contained in the sub-package files corresponding to the dependent library are the same, so that the sub-package files corresponding to the dependent library can be reused by multiple materials. In this way, when loading the page, the same sub-package file only needs to be loaded once, thereby reducing the resource volume required for the page and improving the page loading speed.

[0099] Exemplarily, when the first code module is a construction tool code module of a dependent library, the first code module is packaged separately.

[0100] In this embodiment, the first code module is a build tool additional code module. According to the strategy of extracting the build tool additional product in the previous embodiment, the first code module is packaged separately as a sub-package file. In this way, it is possible to avoid merging the build tool additional product packaging with other code modules in the dependent library, which causes changes in the dependency relationship between multiple code modules. As a result, the build tool additional product can be shared between different materials, and other common code modules in the dependent library can also be shared between different materials.

[0101] The following schematically illustrates a process of subpackaging the first code module according to the dependency relationship between multiple code modules.

[0102] In some examples, such as Fig. 9 As shown, according to the dependency relationship between multiple code modules, sub-packaging the first code module to obtain the sub-packaging file corresponding to the first code module may include the following steps:

[0103] Step 910, based on the dependency relationship between multiple code modules, determine whether the first code module meets the preset condition. If the dependency relationship between the multiple code modules indicates that the first code module meets the preset condition, execute step 920; otherwise, execute step 930.

[0104] Wherein, judging whether the first code module satisfies the preset condition is judging whether the first code module is in a circular dependency relationship (or circular dependency structure). Exemplarily, the first code module satisfies the preset condition including: the first code module and a second code module among the plurality of code modules form a circular dependency relationship.

[0105] As a possible implementation, when determining whether the first code module meets the preset condition, the Kahn algorithm is used to determine whether there is a loop structure formed by the first code module and other code modules in the dependency graph between the multiple code modules. If there is a loop structure formed by the first code module and other code modules in the dependency graph, it means that the first code module belongs to a certain loop dependency structure, that is, the first code module meets the preset condition. Otherwise, the first code module does not meet the preset condition.

[0106] Step 920: Combine and package the first code module and the second code module to obtain a sub-package file corresponding to the first code module.

[0107] When the first code module is a common code module in the dependency library and the first code module is in a circular dependency relationship (i.e., the first code module meets the preset conditions), the first code module and the second code module are combined and packaged. For example, taking the first code module as moment-xxx-lib as an example, Figure 4 As shown, taking horo-ui-moment as the first code module, horo-ui-moment is in cycle-1, and horo-ui-moment, xxxx and horo-util in cycle-1 are merged and packaged.

[0108] In this embodiment, since the sub-package files obtained by packaging cannot be dependent on each other, based on the dependency relationship between multiple code modules, it is determined that the first code module belongs to a certain circular dependency structure, and the first code module and other code modules (i.e., the second code module) in the circular dependency structure to which it belongs are merged and packaged, which can ensure that the dependency relationship of the sub-package products is normal and avoid page loading errors.

[0109] Step 930: According to the dependency link where the first code module is located, the first code module is subpackaged to obtain a subpackage file corresponding to the first code module.

[0110] That is to say, when the first code module is a common code module in the dependency library and the first code module does not belong to a circular dependency relationship, the first code module can be further subpackaged based on the dependency link where the first code module is located to obtain a subpackage file corresponding to the first code module.

[0111] In some examples, the first code module may be sub-packaged according to the number of dependent links where the first code module is located and the priority information of the dependent links where the first code module is located. Fig.10 As shown, according to the number of dependent links where the first code module is located and the priority information of the dependent links where the first code module is located, the first code module is sub-packaged, which may include the following steps:

[0112] Step 1010 , determining whether the number of dependent links where the first code module is located is one, if the number of dependent links where the first code module is located is one, executing step 1020 , otherwise, executing step 1030 .

[0113] Determine whether the dependency link of the first code module is one, that is, determine whether the first code module is a separate dependency of a dependency library or a shared dependency of multiple dependency libraries. For example, taking the first code module in material A as qs-lib, Figure 6As shown in (a), qs-lib is a shared dependency of the skt-utils dependency library and the qs-1.1 dependency library, that is, the dependency link where qs-lib is located includes two dependency links, the dependency link corresponding to the skt-utils dependency library and the dependency link corresponding to the qs-1.1 dependency library. For example, taking the first code module in material B as qs-lib, as Figure 6 As shown in (b), qs-lib is a separate dependency of the skt-utils dependency library, that is, the dependency link where qs-lib is located is the dependency link corresponding to the skt-utils dependency library, and the number of dependency links where qs-lib is located is 1.

[0114] Step 1020: Combine and package the first code module with the code modules of the dependency library code type in the dependency link to obtain a sub-package file corresponding to the first code module.

[0115] When the number of dependency links where the first code module is located is 1, it indicates that the first code module is a separate dependency of a dependency library, and thus the first code module can be merged and packaged with other code modules in the dependency link where the first code module is located.

[0116] Optionally, the first code module is combined and packaged with a common code module of the dependent library code type in the link where the first code module is located, that is, the first code module is subpackaged according to the first-layer subpackage splitting strategy of the dependent library. For example, continuing to take the first code module in material B as qs-lib, as Figure 6 As shown in (b), the dependency link of qs-lib includes the entry code module of the skt-utils dependency library (i.e., skt-utils), qs-1.0, and qs-lib. When qs-lib is subpackaged, qs-lib and qs-1.0 are merged and packaged.

[0117] Exemplarily, the parent code module of the first code module is determined; it is determined whether the parent code module of the first code module is an entry code module in the dependency library. If the parent code module of the first code module is an entry code module in the dependency library, it means that the first code module is the first-layer code module that the entry code module in the dependency library depends on, and thus the first code module is split and packaged from the entry code module, that is, the first code module is packaged into a subpackage file (i.e., a first-layer subpackage file). And, other code modules that the first code module depends on are packaged into the subpackage file. If the parent code module of the first code module is a common code module in the dependency library, and the parent module of the parent code module of the first code module is the entry code module in the dependency library, it means that the parent code module of the first code module is the first-layer code module that the entry code module in the dependency library depends on, and thus the first code module is packaged into the subpackage file (i.e., the first-layer subpackage file) where the parent code module of the first code module is located.

[0118] For example, Fig.11 As shown, taking the first code module as the first-layer sub-package entry B as an example, the parent code module of the first code module is the entry file A (i.e., the entry code module), the first-layer sub-package entry B is packaged to obtain the sub-package file of the first-layer sub-package entry B (i.e., the first-layer sub-package file). In addition, other a, other b, and other c are also packaged into the sub-package file where the first-layer sub-package entry B is located.

[0119] Taking the first code module as the first-layer sub-package entry C as an example, the parent code module of the first code module is the entry file A (i.e., the entry code module), the first-layer sub-package entry C is packaged to obtain the sub-package file of the first-layer sub-package entry C (i.e., the first-layer sub-package file). In addition, other d and other e are packaged into the sub-package file where the first-layer sub-package entry C is located.

[0120] Taking the first code module as other a as an example, the parent code module of the first code module (ie, other a) is not the entry code module. At this time, the first code module (ie, other a) is packaged into the sub-package file where the first-layer sub-package entry B is located.

[0121] It should be noted that the specific implementation method of determining the parent code module of the first code module can refer to the specific implementation method of determining whether a code module is an entry code module mentioned above, which will not be repeated here.

[0122] That is to say, when the number of dependency links where the first code module is located is 1, the first code module and the code modules belonging to the dependency library code type in the dependency link are merged and packaged, so that the entry file and other code modules in a dependency library can be split. In this way, when different materials reference a component of the same dependency library, even if different materials reference other components in the dependency library differently, or different materials reference different versions of the dependency library, the contents of the sub-package files corresponding to a component obtained after packaging are the same. In this way, the sub-package files of the same component in the same dependency library referenced by different materials can be shared between different materials. This means that when loading a page, the sub-package files of the same component in the same dependency library only need to be loaded once, thereby reducing the resource volume required for the page and improving the page loading speed.

[0123] Step 1030: Subpackage the first code module according to the priorities of at least two dependent links to obtain subpackage files corresponding to the first code module.

[0124] In this embodiment, the dependency link where the code module is located has priority information, and the priority information is used to indicate whether the dependency link has priority, that is, whether the dependency library corresponding to the dependency link is set with priority. Exemplarily, the priority information is 0, indicating that the dependency library corresponding to the dependency link has no priority set; the priority information is 1, indicating that the dependency library corresponding to the dependency link has a priority set. Optionally, the priority of the dependency link can also be judged according to the size of the priority value, that is, the priority of the dependency library corresponding to the dependency link is judged. For example, the priority information of the horo-ui dependency library is 1, and the priority information of the moment dependency library is 0, which means that the priority of the horo-ui dependency library is higher than the priority of the moment dependency library. For example, the priority information of the horo-ui dependency library is 90, and the priority information of the moment dependency library is 89, which means that the priority of the horo-ui dependency library is higher than the priority of the moment dependency library.

[0125] In some examples, step 1030 may include: when at least two dependent links are not prioritized or at least two dependent links have the same priority, separately packaging the first code module to obtain a sub-package file corresponding to the first code module.

[0126] For example, taking the first code module as the moment-xxx-lib code module, as Figure 3As shown in (b), the dependency link of the horo-ui dependency library includes the moment-xxx-lib code module, and the dependency link of the moment dependency library also includes the moment-xxx-lib code module. Since neither the horo-ui dependency library nor the moment dependency library has a priority, the moment-xxx-lib code module is packaged separately according to the common dependency splitting strategy of the aforementioned embodiment.

[0127] In other examples, step 1030 may include: when the priorities of at least two dependency links are different, merging and packaging the first code module with the code module belonging to the dependency library code type in the specified dependency link to obtain a subpackage file corresponding to the first code module, and specifying the dependency link as the dependency link with the highest priority among the at least two dependency links.

[0128] For example, the first code module is the qs-lib code module, the dependency link of the qs-lib code module includes the dependency link corresponding to the skt-utils dependency library and the dependency link corresponding to the qs-1.1 dependency library, the priority information of the skt-utils dependency library is 1, and the priority information of the qs-1.1 dependency library is 0. Figure 7 As shown, since the priority of the kt-utils dependency library is higher than that of the qs-1.1 dependency library, that is, the dependency link corresponding to the skt-utils dependency library is the designated dependency link, therefore, according to the dependency library packaging priority strategy of the aforementioned embodiment, the dependency link of the skt-utils dependency library is packaged first, that is, the qs-lib code module is packaged into the sub-package file where qs-1.0 is located.

[0129] In the present embodiment, when the first code module belongs to the dependency link of multiple dependency libraries, that is, when the first code module is shared by multiple dependency libraries, it is first determined whether there is a dependency library with a priority set in multiple dependency libraries. If there is a dependency library with a priority set in multiple dependency libraries, based on the priority of each dependency library, the code modules commonly referenced by multiple dependency libraries are packaged into the sub-package file of the dependency library with the highest priority. In this way, since the usage ratio of the dependency library with a high priority is high, the reuse rate of the sub-package file of the dependency library with a high priority can be improved. In this way, when loading a page, the sub-package file of the dependency library with a high usage ratio only needs to be loaded once, thereby reducing the resource volume required for the page and improving the page loading speed. In addition, if there is no dependency library with a priority set in multiple dependency libraries or at least two dependency links have the same priority, the first code module is packaged separately as a sub-package file. In this way, the change of the dependency relationship between multiple code modules of the material can be avoided, so that other common code modules in the dependency library can be shared between different materials.

[0130] In some embodiments, in the embodiments of the present application, the code module subpackaging process of the material can be implemented by a construction tool. The following takes the construction tool as vite as an example to schematically illustrate the code module subpackaging process of the material provided in the embodiments of the present application.

[0131] Fig.12 The following is a flow chart of a method for subpackaging a code module of a material provided in an embodiment of the present application. Fig.12 As shown, the method may include the following steps:

[0132] Step 1201, traverse each module of the target material.

[0133] Step 1202, determine whether to initialize all modules included in the target material, if so, execute step 1203, otherwise, execute step 1301.

[0134] When all modules included in the target material are not initialized, an initialization process is performed. The initialization process refers to steps 1301 to 1311.

[0135] Step 1203, determine whether the current module is outside the node_modules folder, if so, execute step 1204, otherwise, execute step 1205.

[0136] Specifically, determine whether the current module is in the node_modules directory based on the code id of the current module, that is, determine whether the current module is outside the node_modules folder.

[0137] Step 1204, returning an empty name, that is, packaging the current module separately, and then executing step 1215.

[0138] In this step, if it is determined that the current module is outside the node_modules folder, an empty name is returned, indicating that the current module is the material code of the target material. At this time, the build tool can put the current module into the main subpackage without sharing between materials.

[0139] Step 1205 , determining whether the current module is a build tool additional code module, if so, executing step 1206 , otherwise, executing step 1207 .

[0140] Step 1206, returning the reserved sub-package name corresponding to the current module, that is, packaging the current module separately. Then, executing step 1215.

[0141] The reserved subpackage name corresponding to the current module can be represented by the name of the additional code module of the build tool. Exemplarily, the reserved subpackage name corresponding to the current module is "commonjsHelpers".

[0142] Specifically, when it is determined that the current module belongs to a build tool additional code module, the reserved name corresponding to the current module is returned, so that the current module can be packaged into a sub-package file separately according to the strategy of extracting build tool additional products, wherein the name of the sub-package file is the reserved sub-package name corresponding to the current module.

[0143] Step 1207, determine whether the current module belongs to a circular dependency structure in the dependency graph, if so, execute step 1208, otherwise, execute step 1209.

[0144] Among them, the dependency graph reflects the dependency relationship between multiple modules of the target material.

[0145] Step 1208, returning the name of the circular dependency structure, that is, merging and packaging the modules that form the circular dependency structure with the current module, and then executing step 1215.

[0146] Specifically, the circular dependency structure name is returned, indicating that the current module belongs to the subpackage file corresponding to the circular dependency structure name. At this time, according to the circular dependency merging strategy, the current module and the module that forms a circular dependency structure with the current module are packaged into the subpackage file corresponding to the circular dependency structure name.

[0147] Step 1209, recursively traverse all parents of the current module, search the database for each parent of the current module to see if the subpackage name specified during initialization exists, and put the found subpackage name into the subpackage name set corresponding to the current module.

[0148] Among them, all parents of the current module include the parent of the current module and the parent of the parent of the current module. Specifically, from the data stored in step 1311 below (i.e., the code id of the subpackage module, the subpackage name corresponding to the subpackage module, and the priority information corresponding to each subpackage name), find out whether each parent of the current module has specified a corresponding subpackage name during initialization, and put all the found subpackage names into the subpackage name set corresponding to the current module.

[0149] Step 1210, determine whether there is only one sub-package name in the sub-package name set, if so, execute step 1211, otherwise, execute step 1212.

[0150] Step 1211, return the sub-package name, and then execute step 1215.

[0151] If there is only one subpackage name in the subpackage name set, determine whether the subpackage file corresponding to the subpackage name is the subpackage file of the entry file based on the subpackage name. If the subpackage file corresponding to the subpackage name is the subpackage file of the entry file, it means that the current module is the first-level sub-code module that depends on the entry file, and the current module is packaged separately. If the subpackage file corresponding to the subpackage name is not the subpackage file of the entry file, it means that the current module belongs to the subpackage file (the first-level subpackage), and the current module is packaged into the subpackage file, that is, the packaging is performed here according to the first-level subpackage splitting strategy of the dependent library.

[0152] Step 1212, determine whether there is a sub-package name with a priority set, if so, execute step 1213, otherwise, execute step 1214.

[0153] Step 1213, obtaining the subpackage name with the highest priority, that is, packaging the current module into the subpackage file corresponding to the subpackage name with the highest priority, and then executing step 1215.

[0154] Get the subpackage name with the highest priority, and package the current module into the subpackage file corresponding to the subpackage name with the highest priority according to the dependency library packaging priority strategy.

[0155] Step 1214, determine the merged subpackage name based on all subpackage names in the subpackage name set, and return the merged subpackage name, that is, the current module is packaged separately into a subpackage file.

[0156] Combine all subpackage names in the subpackage name set, get the hash value, and return the hash value. In other words, if there is no subpackage name with a priority set, it means that the current module is used by multiple dependent libraries. In this case, the current module is packaged into a subpackage file, and the name of the subpackage file is the combined subpackage name and hash value of all subpackage names in the subpackage name set.

[0157] Step 1215, whether the traversal is completed, if so, end the process, otherwise, execute step 1201.

[0158] Combine the following Fig.13 , the initialization process is schematically explained. Fig.13 As shown, the initialization process includes the following steps:

[0159] Step 1301, initializing all modules included in the target material.

[0160] Step 1302, obtain the code ID set of all modules of the target material, and traverse the code ID of each module in turn. The code ID can be the file path of the module.

[0161] Specifically, use the get Modules() method provided in the subcontracting function context to obtain the code ID set of all modules of the target material.

[0162] Step 1303, based on the code id, determine whether the current module belongs to the node_modules directory. If so, execute step 1306; otherwise, execute step 1304.

[0163] Step 1304, determine that the current module is not a code module in the dependent library (that is, the type of the current module is not a dependent library code type).

[0164] Step 1305, skip the current module, and then execute step 1302.

[0165] If the current module is not a code module in the dependency library, it means that the current module is the code module of the material itself, that is, the current module is packaged separately and is not shared with other materials, so the process returns to step 1302 to process the next module.

[0166] Step 1306, obtain a set of all parent modules that depend on the current module.

[0167] Specifically, use the get Module info() method provided in the subpackage function context to obtain the parent module set of all modules that depend on the current module.

[0168] Step 1307, determine whether there are elements outside the node_modules directory in the parent module collection, if so, execute step 1308, otherwise, execute step 1305.

[0169] Specifically, according to the code ID of each parent module, determine whether the parent module belongs to the node_modules directory. If the parent module does not belong to the node_modules directory, that is, the parent module is an element outside the node_modules directory, traverse each parent module in the collection to determine whether there are elements outside the node_modules directory in the parent module collection.

[0170] Step 1308, determine that the current module is an entry file (ie, an entry code module) of a dependent library, generate a new sub-package file starting from the current module, and package the current module into the sub-package file.

[0171] That is to say, when the current module is the entry file of a dependent library, a subpackage file is generated starting from the current module according to the dependent library splitting strategy, that is, the subpackage file of the entry file of the dependent library corresponding to the current module is obtained, and the current module is the first file in the subpackage file. Among them, the subpackage name corresponding to the subpackage file of the dependent library corresponding to the current module is the dependent library name of the dependent library corresponding to the current module. By traversing the code IDs of all modules, the subpackage files of the entry files of all dependent libraries referenced by the target material can be determined.

[0172] Step 1309, search and obtain the priority information of the sub-package name of the currently generated sub-package file.

[0173] Specifically, check whether the subpackage name (dependency library name) of the currently generated subpackage file has priority information set. If the subpackage name of the currently generated subpackage file has priority information set, obtain the priority information corresponding to the subpackage name of the currently generated subpackage file. In this way, the priority information of all dependency libraries with priority set can be obtained.

[0174] Step 1310, traverse the set of sub-modules that the current module depends on. If the sub-module has the same name as the dependent library to which the current module belongs, generate a new sub-package file starting from the sub-module, that is, obtain the first-level sub-package of the dependent library.

[0175] Traverse the set of submodules that the current module depends on. If a submodule with the same name as the dependency library to which the current module belongs is found, it means that the submodule is the first-level subcode module of the dependency library to which the current module belongs. At this time, a new subpackage file is generated starting from the submodule to obtain the first-level subpackage of the dependency library corresponding to the current module, and the submodule is the first file in the first-level subpackage. By traversing the set of submodules that all modules depend on, the first-level subpackages of all dependency libraries referenced by the target material can be determined.

[0176] Step 1311, store the code ID of the sub-package module (code file in the sub-package file), the sub-package name corresponding to the sub-package module, and the priority information corresponding to each sub-package name. After step 1311 (ie, initialization is completed), execute step 1203.

[0177] It should be noted that the subpackaging process of the code module of the material in the embodiment of the present application can be implemented by a code building system. The code building system can be, for example, a low-code system or a zero-code system.

[0178] In an embodiment of the present application, when multiple code modules of each material are subpackaged, the multiple code modules are subpackaged based on the dependency relationship between the multiple code modules and the type of the code modules, so that in the subpackage files of each material obtained, the subpackage files corresponding to the code modules shared by different materials are exactly the same. In this way, when loading a page composed of multiple materials, the multiple subpackage files can be deduplicated first, and then the deduplicated subpackage files can be loaded, so that the same subpackage files only need to be loaded once, thereby reducing the volume of the constructed page resources and improving the page loading speed.

[0179] It should be understood that the size of the serial numbers of the steps in the above embodiments does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present application.

[0180] Corresponding to the page loading method described in the above embodiment, Fig.14 A structural block diagram of a page loading device provided in an embodiment of the present application is shown. For ease of explanation, only the parts related to the embodiment of the present application are shown.

[0181] See also Fig.14, the page loading device 400 may include a receiving module 1401, an acquisition module 1402, a deduplication module 1403 and a loading module 1404. Among them, the receiving module 1401 can be used to receive a page loading request, and the page loading request is used to request to load a target page, and the target page is composed of multiple materials. The acquisition module 1402 can be used to obtain a code module corresponding to each material in a plurality of materials according to the page loading request, and a code module corresponding to a material is packaged into a plurality of sub-package files based on preset rules. The deduplication module 1403 can be used to perform deduplication processing on a plurality of sub-package files of a plurality of materials to obtain a plurality of target sub-package files, each target sub-package file does not repeat each other, and at least one target sub-package file belongs to at least two materials. The loading module 1404 can be used to load a plurality of target sub-package files to display a target page.

[0182] In some embodiments, the page loading device 400 may further include a subpackaging module. The subpackaging module is used to perform subpackaging processing on multiple code modules corresponding to the material according to preset rules to obtain multiple subpackaging files corresponding to the material, wherein the preset rules are determined according to the dependency relationship between the multiple code modules and / or the type of the code modules.

[0183] In some examples, the subpackaging module is specifically used to subpack the first code module according to the dependency relationship between multiple code modules to obtain a subpackaging file corresponding to the first code module when the type of the first code module is a dependent library code type; the first code module is any one of the multiple code modules of the material.

[0184] In some examples, the subpackaging module is specifically used to subpackage the first code module according to the dependency link where the first code module is located, to obtain a subpackaging file corresponding to the first code module when the dependency relationship between multiple code modules indicates that the first code module does not meet the preset conditions; wherein the first code module meets the preset conditions including: a circular dependency relationship is formed between the first code module and a second code module among the multiple code modules.

[0185] In some examples, the subpackaging module is specifically used to merge and package the first code module with the code modules belonging to the dependent library code type in the dependent link when the number of dependent links where the first code module is located is one, so as to obtain a subpackaging file corresponding to the first code module; when the number of dependent links where the first code module is located is not one, the first code module is subpackaging according to the priorities of at least two dependent links to obtain a subpackaging file corresponding to the first code module.

[0186] In some examples, the subpackaging module is specifically used to separately package the first code module to obtain a subpackaging file corresponding to the first code module when at least two dependent links have no priority set or at least two dependent links have the same priority; when the priorities of at least two dependent links are different, the first code module is merged and packaged with the code module belonging to the dependent library code type in the specified dependent link to obtain the subpackaging file corresponding to the first code module, and the specified dependent link is the dependent link with the highest priority among the at least two dependent links.

[0187] In some examples, the subpackaging module is specifically used to merge and package the first code module with the second code module to obtain a subpackaging file corresponding to the first code module when the dependency relationship between multiple code modules indicates that the first code module meets a preset condition.

[0188] In some examples, the sub-packaging module is specifically used to separately package the first code module when the type of the first code module is not a dependent library code type, so as to obtain a sub-packaging file corresponding to the first code module.

[0189] The above-mentioned sub-package module may be a code building system.

[0190] It should be noted that the information interaction, execution process, etc. between the above-mentioned devices / units are based on the same concept as the method embodiment of the present application. Their specific functions and technical effects can be found in the method embodiment part and will not be repeated here.

[0191] The technicians in the relevant field can clearly understand that for the convenience and simplicity of description, only the division of the above-mentioned functional units and modules is used as an example for illustration. In practical applications, the above-mentioned function allocation can be completed by different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above. The functional units and modules in the embodiment can be integrated in a processing unit, or each unit can exist physically separately, or two or more units can be integrated in one unit. The above-mentioned integrated unit can be implemented in the form of hardware or in the form of software functional units. In addition, the specific names of the functional units and modules are only for the convenience of distinguishing each other, and are not used to limit the scope of protection of this application. The specific working process of the units and modules in the above-mentioned system can refer to the corresponding process in the aforementioned method embodiment, which will not be repeated here.

[0192] The embodiment of the present application also provides a code construction system. The code construction system includes a processor, a memory, and a computer program stored in the memory and executable on the processor, and the processor implements the steps in any of the above method embodiments when executing the computer program.

[0193] An embodiment of the present application further provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps in the above-mentioned method embodiments can be implemented.

[0194] An embodiment of the present application provides a computer program product. When the computer program product runs on a code construction system, the code construction system can implement the steps in the above-mentioned method embodiments when it is executed.

[0195] If the integrated unit 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 present application implements all or part of the processes in the above-mentioned embodiment method, which can be completed by instructing the relevant hardware through a computer program, and the computer program can be stored in a computer-readable storage medium, and the computer program can implement the steps of the above-mentioned various method embodiments when executed by the processor. Among them, the computer program includes computer program code, and the computer program code can be in source code form, object code form, executable file or some intermediate form. The computer-readable medium may at least include: any entity or device that can carry the computer program code to the device / system, a recording medium, a computer memory, a read-only memory (ROM, Read-Only Memory), a random access memory (RAM, Random Access Memory), an electric carrier signal, a telecommunication signal, and a software distribution medium. For example, a USB flash drive, a mobile hard disk, a magnetic disk or an optical disk. In some jurisdictions, according to legislation and patent practice, computer-readable media cannot be electric carrier signals and telecommunication signals.

[0196] In the above embodiments, the description of each embodiment has its own emphasis. For parts that are not described or recorded in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0197] Those of ordinary skill in the art will appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of this application.

[0198] In the embodiments provided in the present application, it should be understood that the disclosed devices / systems and methods can be implemented in other ways. For example, the device / system embodiments described above are merely schematic. For example, the division of the modules or units is only a logical function division. There may be other division methods in actual implementation, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.

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

[0200] The embodiments described above are only used to illustrate the technical solutions of the present application, rather than to limit them. Although the present application has been described in detail with reference to the aforementioned embodiments, a person skilled in the art should understand that the technical solutions described in the aforementioned embodiments may still be modified, or some of the technical features may be replaced by equivalents. Such modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present application, and should all be included in the protection scope of the present application.

Claims

1. A page loading method, characterized in that: include: Receive a page loading request, where the page loading request is used to request loading a target page, where the target page consists of multiple materials; According to the page loading request, a code module corresponding to each of the multiple materials is obtained, and a code module corresponding to the material is packaged into multiple sub-package files based on a preset rule; Deduplication processing is performed on the multiple sub-package files of the multiple materials to obtain multiple target sub-package files, wherein the target sub-package files are not repeated with each other, and at least one of the target sub-package files belongs to at least two of the materials; The multiple target sub-package files are loaded to display the target page.

2. The method according to claim 1, characterized in that One material corresponds to multiple code modules. Before receiving the page loading request, the method further includes: According to the preset rule, the multiple code modules corresponding to the material are subpackaged to obtain multiple subpackage files corresponding to the material, wherein the preset rule is determined according to the dependency relationship between the multiple code modules and / or the type of the code modules.

3. The method according to claim 2, characterized in that The step of performing sub-packaging processing on the multiple code modules corresponding to the material according to the preset rule to obtain multiple sub-packaging files corresponding to the material includes: In the case where the type of the first code module is a library-dependent code type, the first code module is subpackaged according to the dependency relationship between the multiple code modules to obtain a subpackage file corresponding to the first code module; the first code module is any one of the multiple code modules of the material.

4. The method according to claim 3, characterized in that The step of sub-packaging the first code module according to the dependency relationship between the multiple code modules to obtain a sub-packaging file corresponding to the first code module includes: When the dependency relationship between the multiple code modules indicates that the first code module does not meet a preset condition, the first code module is subpackaged according to the dependency link where the first code module is located to obtain a subpackage file corresponding to the first code module; The first code module satisfies the preset condition, which includes: a circular dependency relationship is formed between the first code module and a second code module among the multiple code modules.

5. The method according to claim 4, characterized in that The step of performing sub-packaging processing on the first code module according to the dependency link where the first code module is located to obtain a sub-packaging file corresponding to the first code module includes: When the number of dependency links where the first code module is located is one, the first code module is combined and packaged with code modules belonging to the dependency library code type in the dependency link to obtain a subpackage file corresponding to the first code module; When the number of dependent links where the first code module is located is not one, the first code module is subpackaged according to the priorities of at least two of the dependent links to obtain a subpackage file corresponding to the first code module.

6. The method according to claim 5, characterized in that The step of performing sub-packaging processing on the first code module according to the priorities of at least two of the dependent links to obtain a sub-packaging file corresponding to the first code module includes: When at least two of the dependent links have no priority set or at least two of the dependent links have the same priority, the first code module is packaged separately to obtain a sub-package file corresponding to the first code module; In the case where the priorities of at least two of the dependency links are different, the first code module is merged and packaged with the code module belonging to the dependency library code type in the specified dependency link to obtain a subpackage file corresponding to the first code module, and the specified dependency link is the dependency link with the highest priority among the at least two dependency links.

7. The method according to claim 4, characterized in that The step of sub-packaging the first code module according to the dependency relationship between the multiple code modules to obtain a sub-packaging file corresponding to the first code module includes: When the dependency relationship between the multiple code modules indicates that the first code module meets the preset condition, the first code module and the second code module are merged and packaged to obtain a sub-package file corresponding to the first code module.

8. The method according to claim 3, characterized in that The step of performing sub-packaging processing on the multiple code modules corresponding to the material according to the preset rule to obtain multiple sub-packaging files corresponding to the material includes: When the type of the first code module is not the dependent library code type, the first code module is packaged separately to obtain a sub-package file corresponding to the first code module.

9. A page loading device, characterized in that: The device comprises: A receiving module, used for receiving a page loading request, wherein the page loading request is used for requesting to load a target page, wherein the target page is composed of multiple materials; An acquisition module, used for acquiring a code module corresponding to each of the multiple materials according to the page loading request, wherein a code module corresponding to one of the multiple materials is packaged into multiple package files based on a preset rule; a deduplication module, configured to perform deduplication processing on the multiple subpackage files of the multiple materials to obtain multiple target subpackage files, wherein the target subpackage files are not repeated with each other, and at least one of the target subpackage files belongs to at least two of the materials; The loading module is used to load the multiple target sub-package files to display the target page.

10. A computer-readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the steps of the page loading method according to any one of claims 1 to 8 are implemented.

Images