Applet compression processing method and device, electronic equipment and storage medium

Abstract

The application provides a mini-program compression processing method and device, electronic equipment and a storage medium. The method comprises the following steps: performing syntax analysis processing on each single-file component in the mini-program to obtain a syntax tree corresponding to each single-file component; analyzing the syntax tree corresponding to each single-file component to obtain a class name set; analyzing each style file in the mini-program to obtain a target data structure; matching each second class name in the target data structure with each first class name in the class name set, and saving the matched target class name and the attribute value corresponding to the target class name to an object file; and generating a compressed mini-program based on the object file. Through the application, the compression processing efficiency of the mini-program can be improved.

Description

Technical Field

[0001] This application relates to the field of Internet technology, and in particular to a method, apparatus, electronic device and storage medium for compressing mini-programs. Background Technology

[0002] With the saturation of the APP market, mini-programs have become increasingly popular as applications that can be used without downloading and installation. During the development of mini-programs, optimizing the package size has become a very important part of the work of developers because mini-programs have a requirement to keep the package size to a small size (e.g., 2M).

[0003] The package of a mini program mainly consists of three parts: functional code, styles, and local static resources. In the process of compressing mini programs, existing technologies mostly use manual processing to compress the styles in the mini program. However, when a mini program uses a lot of styles, it will lead to an increase in the workload of style simplification, and manual processing is inefficient and takes a long time.

[0004] There is currently no effective solution from relevant technologies for improving the compression efficiency of mini-programs. Summary of the Invention

[0005] This application provides a method, apparatus, electronic device, computer-readable storage medium, and computer program product for compressing mini-programs, which can improve the compression efficiency of mini-programs.

[0006] The technical solution of this application embodiment is implemented as follows: This application provides a method for compressing mini-programs, including: Each single-file component in the mini-program is subjected to syntax parsing to obtain a syntax tree corresponding to each single-file component; Parse the syntax tree corresponding to each single-file component to obtain a set of class names, wherein the set of class names includes the first class name of the style file referenced by each single-file component; Each style file in the mini-program is parsed to obtain a target data structure, wherein the target data structure includes a second class name for each style file and the attribute value corresponding to the second class name; Each second class name in the target data structure is matched with each first class name in the class name set, and the matched target class name and the attribute value corresponding to the target class name are saved to the object file; The compressed version of the mini-program is generated based on the object file.

[0007] This application provides a compression processing device for mini-programs, including: The parsing module is used to perform syntax parsing on each single-file component in the mini-program to obtain a syntax tree corresponding to each single-file component. The parsing module is further configured to parse the syntax tree corresponding to each single-file component to obtain a set of class names, wherein the set of class names includes the first class name of the style file referenced by each single-file component; The parsing module is also used to parse each of the style files in the mini program to obtain a target data structure, wherein the target data structure includes a second class name for each style file and the attribute value corresponding to the second class name; The matching module is used to match each second class name in the target data structure with each first class name in the class name set, and save the matched target class name and the attribute value corresponding to the target class name to the object file; The generation module is used to generate the compressed version of the mini-program based on the object file.

[0008] This application provides an electronic device, including: Memory, used to store executable instructions; The processor, when executing executable instructions stored in the memory, implements the applet compression method provided in the embodiments of this application.

[0009] This application provides a computer-readable storage medium storing executable instructions for implementing the applet compression method provided in this application when executed by a processor.

[0010] This application provides a computer program product, including a computer program or instructions, which, when executed by a processor, implements the applet compression method provided in this application.

[0011] The embodiments of this application have the following beneficial effects: By parsing the single-file components and style files of the mini-program, the corresponding set of class names and target data structure are obtained. Each second class name in the target data structure is matched with each first class name in the set of class names, and a compressed mini-program is generated based on the matched target class names. This achieves automated compression of mini-program styles without the need for manual cleanup of redundant styles in components, thus significantly improving the compression efficiency of mini-programs. In addition, the matched target class names are all the class names corresponding to the styles required in the actual operation of the mini-program, thereby improving the accuracy of the matched class names. Attached Figure Description

[0012] Figure 1This is a schematic diagram of the architecture of the mini-program compression processing system 100 provided in this application embodiment; Figure 2A This is a schematic diagram of the structure of terminal 401 provided in an embodiment of this application; Figure 2B This is a schematic diagram of the structure of terminal 402 provided in an embodiment of this application; Figures 3A-3G This is a flowchart illustrating the compression method for a mini-program provided in this application embodiment.

[0013] Figure 4A This is a schematic diagram of a single-file component provided in an embodiment of this application; Figure 4B This is a schematic diagram of the parsing result of the single-file component provided in the embodiments of this application; Figure 4C This is a schematic diagram of the parsing result of the style file provided in the embodiments of this application; Figure 4D This is a schematic diagram illustrating the style compression effect provided in the embodiments of this application; Figure 5 This is a schematic diagram of the mini-program upload interface provided in an embodiment of this application; Figure 6 This is a schematic diagram of the compression method for a mini-program provided in an embodiment of this application; Figure 7 This is a schematic diagram of a method for compressing a mini-program provided in an embodiment of this application. Detailed Implementation

[0014] To make the objectives, technical solutions, and advantages of this application clearer, the application will be further described in detail below with reference to the accompanying drawings. The described embodiments should not be regarded as limitations on this application. All other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0015] In the following description, references are made to “some embodiments,” which describe a subset of all possible embodiments. However, it is understood that “some embodiments” may be the same subset or different subsets of all possible embodiments and may be combined with each other without conflict.

[0016] It is understood that, in the embodiments of this application, data related to the mini-program is involved. When the embodiments of this application are applied to specific products or technologies, user permission or consent is required, and the collection, use and processing of related data must comply with the relevant laws, regulations and standards of the relevant countries and regions.

[0017] In the following description, the terms "first, second, third" are used merely to distinguish similar objects and do not represent a specific ordering of objects. It is understood that "first, second, third" may be interchanged in a specific order or sequence where permitted, so that the embodiments of this application described herein can be implemented in an order other than that illustrated or described herein.

[0018] In the following description, the term "multiple" means at least two.

[0019] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application belongs. The terminology used herein is for the purpose of describing embodiments of this application only and is not intended to limit this application.

[0020] Before providing a further detailed description of the embodiments of this application, the nouns and terms involved in the embodiments of this application will be explained, and the nouns and terms involved in the embodiments of this application shall be interpreted as follows.

[0021] 1) Attribute value: Defines the specific characteristics or parameters of an attribute. For example, if the attribute name is volume, the value of the attribute is 40CM; or if the attribute is color, the value of the attribute is red. For ease of description, this application embodiment refers to the attribute and the corresponding value as attribute value.

[0022] 2) A mini program, also known as a web program, is a program developed using a front-end-oriented language (such as JavaScript) that provides services within a Hyper Text Markup Language (HTML) page. It is downloaded by a client (such as a browser or any client with an embedded browser engine) via a network (such as the Internet) and interpreted and executed in the client's browser environment. Unlike ordinary programs, it does not require installation.

[0023] 3) Components are functional modules of the view in a mini-program, also known as front-end components. These include buttons, titles, tables, sidebars, content, and footers on the page. Components include modular code so that they can be reused in different pages of the mini-program.

[0024] 4) Template: The structure and style of the data to be rendered in the mini program. It is used to fill different data and then render it in the rendering environment, so as to realize the reuse of structure and style.

[0025] For example, the templates for mini-program pages use Extensible Markup Language (XML) files to describe the structure and Cascading Style Sheets (CSS) files to describe the styles of components. This allows for the reuse of layout and styles for mini-program pages, and the templates for components can be used to reuse layout and styles for components.

[0026] 5) Class Name: The name of the class selector, used to specify the class selector. Class selectors allow styles to be specified in a way independent of document elements, describing the style of a group of elements, and can be used in multiple elements. For example: Given the class selector `.center {text-align: center}`, the following code exists in the `h1` element: <h1 class="center"> This heading will be center-aligned < / h1> center is the class name.

[0027] 6) Single-file components, also known as .vue files, are standalone components. A .vue file encapsulates the component's code and consists of three parts: the Template block, the Script block, and the Style block. The Template block sets the content the component will display. The Script block exports the component object. The Style block sets the style.

[0028] When implementing mini-program compression, related technologies mainly rely on manual processing to simplify the mini-program's style code. For example, all class names in the components are collected; style fragments corresponding to the class names referenced by the components are extracted from the referenced style files based on the class names, and these fragments are copied into the HTML page; after manually determining that the style fragments corresponding to the class names referenced by all components have been written into the HTML page, the referenced style files are deleted; and the simplification of the component's style is terminated.

[0029] The applicant found that in the technical solutions of the relevant technologies, the results cannot be absolutely accurate due to the fact that manual processing has a high error rate. Furthermore, when the mini-program uses a large number of styles, the workload of simplification of styles increases, and manual processing alone takes a long time.

[0030] To address the aforementioned issues, embodiments of this application provide a method, apparatus, electronic device, computer-readable storage medium, and computer program product for compressing mini-programs. This method improves both the efficiency of mini-program compression and the accuracy of the matched class names. The mini-program compression method provided in this application can be applied to various terminals, such as smartphones, tablets, laptops, desktop computers, smart voice interaction devices, smart home appliances, and in-vehicle terminals—all types of terminal devices with code editing capabilities (hereinafter referred to as terminals).

[0031] The following example uses an electronic device as a terminal for developers to develop mini-programs to illustrate an exemplary application system architecture for implementing the mini-program compression method provided in this application. See [link to relevant documentation]. Figure 1 , Figure 1 This is a schematic diagram of the architecture of the mini-program compression system 100 provided in this application embodiment, as shown below. Figure 1 As shown, the mini-program compression system 100 includes: a terminal 401 for developers to develop mini-programs, a terminal 402 for ordinary users to use mini-programs, a software repository 200, and a network 300. The network 300 can be a wide area network (WAN), a local area network (LAN), or a combination of both.

[0032] In some embodiments, developers use the human-computer interaction interface (e.g., instant messaging client, live streaming client, electronic map client, etc.) of terminal 401 to complete the development process of the mini-program using the mini-program development tool in terminal 401. After developing the mini-program, they use the mini-program compression tool in terminal 401 to compress it, resulting in a compressed mini-program. Next, developers can further operate the human-computer interaction interface of terminal 401 to upload the compressed mini-program to the software repository 200 via network 300. Then, ordinary users can download and run the client through terminal 402. The client downloads the compressed mini-program from the software repository 200, and the mini-program runs within the client's browser environment. After the mini-program runs, ordinary users can use it to perform corresponding operations.

[0033] In some embodiments, the embodiments of this application can be implemented with the aid of cloud technology, which refers to a hosting technology that unifies a series of resources such as hardware, software, and networks within a wide area network or local area network to realize the computation, storage, processing, and sharing of data.

[0034] Cloud technology is a general term encompassing network technology, information technology, integration technology, management platform technology, and application technology based on the cloud computing business model. It can form resource pools, allowing for on-demand use with flexibility and convenience. Cloud computing technology will become a crucial support. The backend services of cloud computing systems require substantial computing and storage resources.

[0035] The structure of the electronic device provided in the embodiments of this application will be described below. As mentioned above, the electronic device provided in the embodiments of this application can be... Figure 1 The terminal 401 or terminal 402 shown is illustrated. When the electronic device is terminal 401, terminal 401 includes a mini-program compression tool for performing mini-program compression processing. The mini-program compression tool can be integrated into the client of terminal 401, or it can be an application independent of the client in terminal 401. The following description uses the example of the mini-program compression tool being integrated into the client of terminal 401 to illustrate the terminal 401 provided in this application embodiment. See also... Figure 2A , Figure 2A This is a schematic diagram of the structure of terminal 401 provided in an embodiment of this application. Figure 2A The terminal 401 shown includes: a hardware layer 410, an operating system layer 420, and an application layer 430.

[0036] In some embodiments, the hardware layer 410 includes a processor 411, a user interface 412, a memory 413, and a network interface 414.

[0037] Processor 411 can be an integrated circuit chip with signal processing capabilities, such as a general-purpose processor, a digital signal processor (DSP), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. Among them, the general-purpose processor can be a microprocessor or any conventional processor, etc.

[0038] User interface 412 includes one or more output devices that enable the presentation of media content, including one or more speakers and / or one or more visual displays. User interface 412 also includes one or more input devices, including user interface components that facilitate user input, such as a keyboard, mouse, microphone, touch screen display, camera, other input buttons and controls.

[0039] Memory 413 may include volatile memory or non-volatile memory, or both. Non-volatile memory may be read-only memory (ROM), and volatile memory may be random access memory (RAM). The memory 413 described in this application embodiment is intended to include any suitable type of memory. Memory 413 may optionally include one or more storage devices physically located away from processor 411. Memory 413 is used to store various types of data to support the operation of terminal 401. Examples of this data include any programs used to operate on terminal 401, such as operating system layer 420 and application layer 430.

[0040] Network interface 414 includes Bluetooth, WiFi, and Universal Serial Bus (USB).

[0041] In some embodiments, the operating system layer 420 includes system programs for handling various basic system services and performing hardware-related tasks, such as the framework layer 421, driver layer 422, graphics library layer 423, and core library layer 424, for implementing various basic services and handling hardware-based tasks.

[0042] In some embodiments, the application layer 430 may include various applications built into the operating system, such as desktop launchers and system setup programs; it may also include third-party applications, such as media players, browsers, social / instant messaging applications, etc., which need to display views and receive and respond to various touch events through the views to implement various services. Programs that implement the methods of the embodiments of this application may be included in the applications; unless otherwise specified, the client 432 described herein may be any of the system's native applications and third-party applications.

[0043] The application layer 430 includes a mini-program development tool 431, which is used for mini-program development. The mini-program development tool 431 can be an application independent of the client 432. The client 432 included in the application layer 430 includes a mini-program compression tool 4321, which includes a mini-program compression processing device 43211. The mini-program compression processing device 43211 can be software in the form of programs and plugins, including the following software modules: a parsing module 432111, a matching module 432112, and a generation module 432113. These modules can be logical functional modules, and therefore can be arbitrarily combined or further split according to the implemented functions.

[0044] See Figure 2B , Figure 2B This is a schematic diagram of the structure of terminal 402 provided in an embodiment of this application. Figure 2B The terminal 402 shown includes: a hardware layer 440, an operating system layer 450, and an application layer 460.

[0045] In some embodiments, the hardware layer 440 includes a processor 441, a user interface 442, a memory 443, and a network interface 444.

[0046] Processor 441 can be an integrated circuit chip with signal processing capabilities, such as a general-purpose processor, a digital signal processor (DSP), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. Among them, the general-purpose processor can be a microprocessor or any conventional processor.

[0047] User interface 442 includes one or more output devices that enable the presentation of media content, including one or more speakers and / or one or more visual displays. User interface 442 also includes one or more input devices, including user interface components that facilitate user input, such as a keyboard, mouse, microphone, touch screen display, camera, other input buttons and controls.

[0048] Memory 443 may include volatile memory or non-volatile memory, or both. Non-volatile memory may be read-only memory (ROM), and volatile memory may be random access memory (RAM). The memory 443 described in this application embodiment is intended to include any suitable type of memory. Memory 443 may optionally include one or more storage devices physically located away from processor 441. Memory 443 is used to store various types of data to support the operation of terminal 402. Examples of this data include any programs that operate on terminal 402, such as operating system layer 450 and application layer 460.

[0049] Network interface 444 includes Bluetooth, WiFi, and Universal Serial Bus (USB).

[0050] In some embodiments, the operating system layer 450 includes system programs for handling various basic system services and performing hardware-related tasks, such as the framework layer 451, driver layer 452, graphics library layer 453, and core library layer 454, for implementing various basic services and handling hardware-based tasks.

[0051] In some embodiments, the application layer 460 may include various applications built into the operating system, such as desktop launchers and system settings programs; it may also include third-party applications, such as media players, browsers, social / instant messaging applications, etc., which require displaying views and receiving and responding to various touch events through the views to implement various business functions. Programs implementing the methods of the embodiments of this application may be included in the applications. Unless otherwise specified, the client 461 described herein can be any of the system's native applications and third-party applications. The client 461 includes a base library 4611 and an applet 4612.

[0052] The compression method for mini-programs provided in this application will be described below with reference to exemplary applications and implementations of the electronic devices provided in the embodiments of this application. It can be understood that the following method can be executed by the mini-program compression tool in the terminal 401 described above.

[0053] See Figure 3A , Figure 3A This is a flowchart illustrating the compression method for a mini-program provided in this application embodiment, which will be combined with... Figure 3A The steps shown are explained.

[0054] In step 101, each single-file component in the mini-program is subjected to syntax parsing to obtain the syntax tree corresponding to each single-file component.

[0055] In some embodiments, when developers develop a mini-program, they write multiple single-file components in the mini-program's source (Source, Src) directory. The styles required for each single-file component may be the same or different. Therefore, to obtain all the styles needed for the mini-program to run, it is necessary to perform syntax parsing on all single-file components. For example, the vue-Template-Compiler module in the mini-program compression tool can be used to perform syntax parsing on each single-file component. The vue-Template-Compiler module is used to compile .vue files; passing a .vue file to this module automatically returns the abstract syntax tree corresponding to the .vue file.

[0056] For example, see Figure 4A , Figure 4A This is a schematic diagram of a single-file component provided in an embodiment of this application. Figure 4A The code for a single-file component is shown. The code for a single-file component consists of three parts: a Template block, a Script block, and a Style block. The Template block is used to define the content the component will display; the Script block is used to export objects; and the Style block is used to define styles.

[0057] See Figure 4B , Figure 4B This is a schematic diagram of the parsing result of the single-file component provided in the embodiments of this application. It should be noted that... Figure 4B What is shown is the Figure 4A The parsing result obtained by parsing the single-file component shown. For example... Figure 4B As shown, parsing the single-file component yields the corresponding syntax tree, which includes multiple Document Object Model (DOM) nodes. Among them, the nodes with the keyword "Class:" are nodes containing class names.

[0058] In step 102, the syntax tree corresponding to each single-file component is parsed to obtain a set of class names.

[0059] The class name set includes the first class name of the style file referenced by each single-file component.

[0060] In some embodiments, all content presented in an HTML page is a node of the DOM. For example, each HTML tag, tag attribute, content, and comment can be considered a DOM node. In a mini-program, the syntax tree corresponding to each single-file component includes multiple DOM nodes. Therefore, by parsing the syntax tree corresponding to a single-file component, the nodes containing class names among the multiple DOM nodes included in the syntax tree can be determined. In this way, the class names corresponding to all styles required for the mini-program to run can be known. These class names are collected to obtain a class name set, and the class names in the class name set are named the first class name.

[0061] In some embodiments, see Figure 3B , Figure 3B This is a flowchart illustrating the compression method for mini-programs provided in this application embodiment. Figure 3A Step 102 shown can be achieved through Figure 3B Steps 1021 to 1022 are implemented, and will be explained below.

[0062] In step 1021, each node in the syntax tree is traversed, and the target node including the first class name is determined based on multiple nodes.

[0063] As an example, the first category is the class name corresponding to the style file referenced by each single-file component included in the mini-program.

[0064] For example, see Figure 4B The syntax tree corresponding to a single-file component includes multiple DOM nodes, such as the "type:1" node and the "attrsList:[]" node. Among them, the node with the keyword Class is a node containing a class name, and the name after the keyword Class is called the first class name.

[0065] like Figure 4B As shown, the names following the Class are mps-real-authentication-agreements (abbreviated as mrag) and tea-checkbox (abbreviated as tc), therefore, Figure 4B In this context, both "mrag" and "tc" are first-class names, and nodes with the class name "mrag" and nodes with the class name "tc" are collectively referred to as target nodes.

[0066] In some embodiments, see Figure 3C , Figure 3C This is a flowchart illustrating the compression method for mini-programs provided in this application embodiment. Figure 3B Step 1021 shown can be achieved through Figure 3C Steps 10211 to 10212 are implemented, and will be explained below.

[0067] In step 10211, each node in the syntax tree is traversed, and the first node containing the first style class name is determined from the multiple nodes.

[0068] In some embodiments, since the parsed syntax tree may include nodes with multiple style class names and there may be a hierarchical relationship between the nodes, in order to facilitate the explanation of the style relationship between the levels, the nodes that include style class names are collectively referred to as the first node, and the class name corresponding to the first node is referred to as the first style class name.

[0069] Example, reference Figure 4B , Figure 4B The node includes a parent node with the class name mrag and a child node with the class name tc. In step 10211, the node containing the class name mrag and the node containing the class name tc are collectively referred to as the first node, and the class name mrag and the class name tc are collectively referred to as the first style class name.

[0070] In step 10212, if the parent node of the first node has a second style class name, the first node and the parent node of the first node are merged to obtain a merged node, and the first node, the parent node of the first node and the merged node are taken as the target node.

[0071] In some embodiments, if the first node has a parent node, and the parent node includes a second style class name, then the first node and the corresponding parent node are merged to obtain a merged node. The first style class name and the second style class name may be the same or different. For example, if a first node with class name 'tc' has a parent node with second style class name 'mrag', then the 'tc' node and the 'mrag' node are merged to obtain a merged node with class name 'mrag.tc'.

[0072] In some embodiments, the first class name includes a single style class name and a combined style class name. The first node and its parent node correspond to the single style class name, and the merged node corresponds to the combined style class name. The combined style class name is represented in a combined form. For example, the first node with the class name 'tc' and its corresponding parent node with the class name 'mrag' are single style class names; the merged node with the class name 'mrag.tc' is a combined style class name. As an example, the first node with the class name 'tc', its corresponding parent node with the class name 'mrag', and the merged node with the class name 'mrag.tc' can all be considered as target nodes.

[0073] In some embodiments, see Figure 3D , Figure 3D This is a flowchart illustrating the compression method for mini-programs provided in this application embodiment. Figure 3D The method shown is the same as Figure 3C The method shown is the parallel method. Figure 3B Step 1021 shown can also be achieved through Figure 3D Steps 10213 to 10214 are implemented, and will be explained below.

[0074] In step 10213, each node in the syntax tree is traversed, and the first node containing the first style class name is determined from the multiple nodes.

[0075] In step 10214, if the first node does not have a parent node, or the parent node of the first node does not have a second style class name, the first node is taken as the target node.

[0076] In some embodiments, if the first node does not have a parent node, or if it has a parent node but the parent node does not contain a second style class name (i.e., the syntax tree only contains nodes that include the first style class name and there are no merge nodes), then the first node is directly used as the target node.

[0077] In step 1022, the first class names corresponding to the multiple target nodes are clustered to obtain a set of class names.

[0078] In some embodiments, after obtaining multiple target nodes, the first class names corresponding to the obtained target nodes are aggregated together and written into a class name set to achieve clustering. Of course, during the clustering process, duplicate first class names can be deleted to save space resources. For example, when using a Set collection to store all first class names, based on the characteristics of the Set collection, duplicate first class names will be deleted during the process of writing the first class names into the set. This is because the Set collection does not allow duplicate elements; if you try to add two identical elements to the same Set collection, the addition operation will fail.

[0079] In step 103, each style file in the mini-program is parsed to obtain the target data structure.

[0080] In some embodiments, the CSSJSON module in the mini-program compression tool can be used to parse the style file to obtain the target data structure. The CSSJSON module, also known as the CSS-JSON converter, is used to convert the style file into JSON format. The style file is a CSS file. The style file contains multiple styles, which define how elements are displayed; for example, they can set the element's background, font size, color, border, etc.

[0081] To keep the code concise and easy to maintain, most styles are placed in CSS files. For example, when an external CSS file is imported using the Import method, the CSS file is considered an external style file. In a .vue file, the style file is imported in the Style section. Since the style file contains multiple styles for different elements, the styles corresponding to the class names used in the Template section of the .vue file are the styles required for the mini-program to run. Class names and their corresponding properties in the style file that are not used in the Template section of the .vue file are redundant styles.

[0082] As an example, parsing each style file in the mini-program yields the target data structure. This target data structure is the JSON data structure obtained after parsing the CSS file using the CSSJSON module. The target data structure includes the second class name of each style file and the corresponding attribute values ​​for that second class name.

[0083] For example, see Figure 4C , Figure 4C This is a schematic diagram illustrating the parsing results of the style file provided in this application embodiment. This style file is a common style file referenced by all components. For each component, there will be many redundant styles. Figure 4C The JSON data structure shown includes a second class name and the attribute values ​​corresponding to the second class name. For example, mps-link and mps-real-authentication represent the second class name, and Object represents the attribute value corresponding to the second class name.

[0084] In some embodiments, see continue to see Figure 3B , Figure 3A Step 103 shown can be achieved through Figure 3B Steps 1031 to 1033 are implemented, and will be explained below.

[0085] In step 1031, each style file referenced in the mini-program is parsed to obtain the first data structure corresponding to each style file.

[0086] As an example, we can parse the style files imported in the Style block of each single-file component in the mini-program. For example, we can use the CSSJSON module in the mini-program compression tool to convert the style files into JSON format, thereby obtaining the JSON data structure corresponding to the style file in each single-file component, which is the first data structure.

[0087] In step 1032, the second class name and the attribute value corresponding to the second class name in each first data structure are deduplicated to obtain the second data structure corresponding to each style file.

[0088] In some embodiments, since there may be duplicate styles in multiple style files, after obtaining the first data structure corresponding to multiple style files, it is necessary to perform deduplication on the duplicate second class names in each first data structure to obtain the second data structure corresponding to each first data structure, so as to optimize the size of the style package.

[0089] It should be noted that "first" and "second" here are only used to distinguish the data structures, not to refer to any specific data structures.

[0090] In step 1033, the target data structure is obtained based on the second data structure corresponding to each style file.

[0091] As an example, after obtaining the second data structure corresponding to each style file, the second data structures corresponding to each style file are merged to obtain the target data structure.

[0092] In some embodiments, see Figure 3E , Figure 3E This is a flowchart illustrating the compression method for mini-programs provided in this application embodiment. Figure 3B The illustrated step 1033 can be achieved through Figure 3E Steps 10331 to 10334 are implemented, and will be explained below.

[0093] In step 10331, each second class name and the attribute value corresponding to the second class name in each second data structure are written into a list.

[0094] As an example, since step 1032 involves internal deduplication of each first data structure to obtain the corresponding second data structure, it is also necessary to confirm whether there is any pattern duplication among the second data structures.

[0095] As an example, each second class name and its corresponding attribute value in each second data structure are written into a list. At this time, the second class names included in the list contain duplicate class names. For example, the second data structure A contains the second class names [a, b, c], and the second data structure B contains the second class names [c, d]. Writing the second data structure A and the second data structure B into a list will result in [a, b, c, c, d], where the second class name c is duplicated.

[0096] In step 10332, the list is traversed using the t-th second-class name as an identifier.

[0097] In some embodiments, a traversal approach can be used to find duplicate second-category names in the list, where T represents the number of second-category names in the list. For example, in the example above, =5, when the traversal begins, randomly select a second category name from the list and use that second category name as the first second category name in the list, and then use the first second category name as the identifier to traverse the list.

[0098] In step 10333, if there is a second class name in the list that is the same as the t-th second class name, delete the same second class name and the attribute value corresponding to the same second class name from the list.

[0099] In some embodiments, if there are other second class names in the list that are the same as the first second class name, it means that there are other second class names in the list that are the same as the first second class name. Therefore, the same second class name and the attribute value corresponding to the same second class name are deleted from the list to achieve deduplication. For example, in the example above, the result of deduplication is [a, b, c, d].

[0100] In step 10334, the list obtained after the iteration is used as the target data structure.

[0101] In some embodiments, since there are no duplicate style files in the list obtained after iteration, the list obtained after iteration can be directly used as the target data structure.

[0102] In step 104, each second class name in the target data structure is matched with each first class name in the class name set, and the matched target class name and the attribute value corresponding to the target class name are saved to the object file.

[0103] In some embodiments, since the style file contains a large number of redundant styles, the target data structure obtained by parsing the style file will also contain a large amount of redundancy. In order to remove the redundancy in the target data structure, each second class name in the target data structure is matched with each first class name in the class name set. The successfully matched second class name is taken as the target class name, that is, the class name corresponding to the style required for the mini program to run. The style required for the mini program to run is the style that can play a rendering role during the operation of the mini program. This part of the style can beautify the components in the mini program, such as adding borders, setting font colors, etc. The unmatched class name is taken as the class name corresponding to the redundant style. The redundant style is the style that does not play a rendering role during the operation of the mini program. This part of the style does not play any role in the functional implementation or style presentation of the mini program.

[0104] After matching multiple target class names, the target class names and their corresponding attribute values ​​are saved to an object file. The styles saved in this object file are all the styles required for the mini-program to run. The object file is a separate class file stored in JSON format.

[0105] In some embodiments, see continue to see Figure 3B, Figure 3A Step 104 shown can be achieved through Figure 3B Steps 1041 to 1043 are implemented, and will be explained below.

[0106] In step 1041, the set of class names is searched using each second class name as an index.

[0107] In some embodiments, at the start of the search, a second category name in the target data structure is randomly selected as an index to search the set of category names. As explained above, the target data structure is a list. After the first second category name has been searched, the next second category name is selected as an index to search the set of category names in list order, and the search operation ends after every second category name has been selected.

[0108] In step 1042, if there is a first class name in the class name set that is the same as the second class name, the second class name is used as the target class name.

[0109] In step 1043, the target class name and the corresponding attribute values ​​are saved to the object file.

[0110] In some embodiments, if the second class name matches the first class name in the class name set, it indicates that the second class name is the class name corresponding to the style required for the mini program to run. The attribute value corresponding to the second class name will complete the rendering of the mini program. The second class name is used as the target class name, and the second class name and the attribute value corresponding to the second class name are saved to the object file for preservation.

[0111] If the second class name does not match the first class name in the class name set, it means that the second class name is a redundant style that is not needed during the operation of the mini program. The second class name and the attribute value corresponding to the second class name will not be saved to the object file.

[0112] In step 105, a compressed mini-program is generated based on the object file.

[0113] As an example, a mini-program package mainly consists of three parts: functional code, styles, and static resources. The functional code implements the specific functions of the mini-program, such as filling out forms and sharing content. Static resources are fixed resources that do not require database queries or program processing, such as images used in the mini-program.

[0114] In some embodiments, a mini-program compression tool can be used to compress only the styles to obtain a compressed mini-program.

[0115] See Figure 4D , Figure 4DThis is a schematic diagram illustrating the style compression effect provided in this application embodiment. The style file size before compression is 6kb, and the style file size after compression is 942b. Since the styles stored in the object file are all the styles required for the mini-program to run, there is no style redundancy. Therefore, compared with the original mini-program package, the package size of the mini-program, which is composed of functional code, object file, and static resources, will be reduced. Thus, a compressed mini-program can be generated based on the package with reduced size.

[0116] In some embodiments, the functional code, styles, and static resources can all be compressed using a mini-program compression tool to obtain a compressed mini-program. The compression method for styles has been explained above and will not be repeated here. The compression method for functional code and static resources will be explained below with reference to the accompanying drawings.

[0117] In some embodiments, see continue to see Figure 3B , Figure 3A Step 105 shown can be achieved through Figure 3B Steps 1051 to 1052 are implemented, and will be explained below.

[0118] In step 1051, the functional code and static resources in the mini-program are compressed.

[0119] As an example, see Figure 3F , Figure 3F This is a flowchart illustrating the compression method for mini-programs provided in this application embodiment. Figure 3B The illustrated step 1051 can be achieved through Figure 3F Steps 10511 to 10514 are implemented, and will be explained below.

[0120] In step 10511, the dependencies imported by the function code are detected, and the dependencies not used by the mini program are identified.

[0121] As an example, compressing the functional code of a mini-program can be achieved through tree-shaking optimization. The dependencies of a mini-program form a tree structure, where each node represents a dependency. These dependencies provide different functionalities to the mini-program. Reducing the number of nodes in the tree by eliminating unnecessary dependencies is called tree-shaking. Tree-shaking optimization can discard unused code during packaging, retaining only the code that is used, thereby eliminating dead code.

[0122] Dependencies are defined as the projects that a given project depends on, determining the compilation order of projects when generating a specific solution. For example, if there are three projects A, B, and C, and project A references projects B and C, then A depends on B and C; B and C are dependencies of A. During compilation, B and C will be compiled first, followed by A. In a mini-program, there may be useless dependencies—dependencies that do not contribute to the implementation of the mini-program's functionality. In this embodiment, all dependencies corresponding to the functional code are detected, and the role of each dependency in the mini-program is examined to identify unused dependencies.

[0123] In step 10512, unused dependencies in the mini-program are removed.

[0124] As an example, after identifying the unused dependencies of the mini-program, these unused dependencies are deleted, thereby achieving the compression of the functional code.

[0125] In step 10513, the volume of the static resource is obtained.

[0126] In step 10514, the static resource is replaced with the network path corresponding to the static resource.

[0127] In some embodiments, since static resources are typically large in size, such as an image that may be 1MB, when compressing a mini-program, the static resources are directly replaced with the network path corresponding to the static resources, thus achieving compression of static resources.

[0128] As an example, developers can pre-set a first volume threshold for the static resources that a mini-program can store during development. When the volume of a static resource exceeds the first volume threshold, the static resource will be replaced with the network path corresponding to the static resource, thereby reducing the space occupied by the static resource.

[0129] In some embodiments, see Figure 3G , Figure 3G This is a flowchart illustrating the compression method for mini-programs provided in this application embodiment. Figure 3F Step 10514 shown can be achieved through Figure 3G Steps 105141 to 105142 are implemented, and will be explained below.

[0130] In step 105141, the static resources are sent to the content delivery network so that the content delivery network can allocate the static resources to the cache server.

[0131] Here, a Content Delivery Network (CDN) is an intelligent virtual network built on top of the existing network infrastructure. It relies on servers deployed in various locations and uses the load balancing, content distribution, and scheduling functions of a central platform to enable users to obtain the content they need from the nearest location.

[0132] In some embodiments, when a content delivery network is in use, it can allocate static resources to the service node closest to the sender, i.e., the cache server, in real time based on comprehensive information such as network traffic, the connection and load status of each service node, the distance to the sender, and the response time, through load balancing technology.

[0133] In step 105142, the network path corresponding to the static resource returned by the cache server is received.

[0134] In some embodiments, when the cache server receives static resources allocated by the content delivery network, it returns the network path corresponding to the static resources to the terminal where the sender is located, i.e. the terminal used to develop the mini-program. In this way, when the mini-program needs to use static resources, it can directly obtain the static resources stored on the cache server according to the network path.

[0135] In step 1052, the compressed functional code, static resources, and object files are combined to form a compressed mini-program.

[0136] In some embodiments, after the functional code, static resources and styles of the mini-program are compressed, the package size of the mini-program based on these three parts will be reduced compared to the original mini-program package, so that a compressed mini-program can be generated based on the package with reduced size.

[0137] In some embodiments, developers can select the type to be compressed through the terminal's human-computer interaction interface. The terminal responds to the developer's selection by invoking the mini-program compression tool to compress the selected type. In some cases, if the developer's selected type does not include styles, the mini-program compression tool can automatically compress styles in addition to the selected type, and generate a smaller mini-program package based on all the compression results, and then generate a compressed mini-program based on the smaller mini-program package.

[0138] In some embodiments, if the size of the mini-program package exceeds the second volume threshold, the styles in the mini-program package can be automatically compressed using a mini-program compression tool. If the size of the mini-program package still exceeds the second volume threshold after compressing the styles, other types can be compressed using the mini-program compression tool until the size of the mini-program package after processing is less than the second volume threshold. Based on the mini-program package obtained at this time, a compressed mini-program is generated.

[0139] In this embodiment, by parsing the single-file components of the mini-program and each style file, the corresponding set of class names and target data structure are obtained respectively. Each second class name in the target data structure is matched with each first class name in the set of class names, and a compressed mini-program is generated based on the matched target class names. This achieves automated compression of the mini-program's style without the need for manual cleanup of redundant styles of components, thereby significantly improving the compression efficiency of the mini-program. In addition, the matched target class names are all class names corresponding to the styles required in the actual operation of the mini-program, thereby improving the accuracy of the matched class names.

[0140] The following describes an exemplary application of the embodiments of this application in a real-world scenario.

[0141] See Figure 5 , Figure 5 This is a schematic diagram of the mini-program upload interface provided in this application embodiment. Developers develop mini-programs using the mini-program development tools displayed on the human-computer interaction interface (e.g., instant messaging client, live streaming client, electronic map client, etc.) of the operating terminal. When the mini-program is uploaded to the software repository after development, the terminal's human-computer interaction interface will display something like this. Figure 5 The various controls shown respond to the developer's selection of the code compression and upload control, calling the mini-program compression tool in the terminal to compress the mini-program. After obtaining the compressed mini-program, it is uploaded to the software repository for ordinary users to download and use from the software repository.

[0142] See Figure 6 , Figure 6 This is a schematic diagram of the compression method for mini-programs provided in the embodiments of this application, which will be combined with... Figure 6 Please provide an explanation.

[0143] In step 201, the mini-program compression tool in the terminal scans all .vue files in the mini-program's Src directory.

[0144] As an example, after developers complete the development process of the mini-program using the mini-program development tool in the terminal, they call the mini-program compression tool in the terminal to compress the mini-program. When performing compression, the mini-program compression tool in the terminal first scans multiple single-file components in the Src directory. The styles required by each single-file component may be the same or different. Therefore, in order to understand all the styles required for the mini-program to run, it first needs to scan all the .vue files in the Src directory.

[0145] In step 202, the mini-program compression tool in the terminal parses the style file from the Style block.

[0146] As an example, a mini-program contains multiple single-file components. A .vue file consists of three parts: a Template block, a Script block, and a Style block. The Template block is used to define the content to be displayed by the component; the Script block is used to export objects; and the Style block is used to set styles. Parsing the .vue file specifically involves parsing the Template and Style blocks. In step 201, the mini-program compression tool parses the Style block to obtain the style file.

[0147] As an example, the CSSJSON module in the mini-program compression tool can be used to parse the style files imported by the Style block and obtain the data structure corresponding to each style file. The data structure includes the class name and the attribute value corresponding to the class name. The CSSJSON module is also called the CSS-JSON converter, which is used to convert style files into JSON format.

[0148] In step 203, the mini-program compression tool in the terminal merges the parsed style files together to obtain the target data structure.

[0149] As an example, a single-file component corresponds to a style file. The style files referenced by multiple single-file components may have the same features. When merging the parsed style files together, the duplicate results obtained from the parsing can be merged to obtain the target data structure.

[0150] In step 204, the mini-program compression tool in the terminal determines whether there are any unparsed style files.

[0151] As an example, if the mini-program compression tool determines that there are still unparsed style files, then repeat steps 202 and 203 until it is determined that there are no unparsed style files.

[0152] Once all the style files in the mini-program are parsed, the resulting target data structure consists of all the class names and their corresponding attribute values ​​introduced by the mini-program, which includes a large number of redundant style class names.

[0153] In step 205, the mini-program compression tool in the terminal parses the DOM structure from the Template block.

[0154] As an example, the vue-Template-Compiler block in the mini-program compression tool is used to parse the template block in each single-file component to obtain the syntax tree corresponding to each single-file component. The syntax tree includes multiple DOM nodes, including nodes containing class names.

[0155] In step 206, the mini-program compression tool in the terminal extracts all class names from the DOM structure to obtain a set of class names.

[0156] As an example, the mini-program compression tool finds nodes containing class names in the DOM structure, extracts the class names from the nodes, and obtains a set of class names. The styles corresponding to the class names in the set of class names are the styles required by the mini-program.

[0157] In step 207, the mini-program compression tool in the terminal matches the second class name in the target data structure with the first class name in the class name set, and writes the successfully matched second class name as the target class name into the class file.

[0158] As an example, since there are a large number of redundant styles corresponding to the second category names in the target data structure, it is necessary to remove the redundant styles corresponding to the second category names. The styles corresponding to the first category names in the category name set are the styles required for the mini program to run. Therefore, the second category names that can be matched and the attribute values ​​corresponding to the second category names are the styles required for the mini program to run. The unmatched ones are the second category names corresponding to the redundant styles and need to be removed.

[0159] In step 208, the mini-program compression tool in the terminal determines whether all matches have been completed.

[0160] As an example, if the mini-program compression tool determines that not all matches have been completed, step 207 is repeated until the mini-program compression tool determines that all matches have been completed.

[0161] In step 209, the mini-program compression tool in the terminal determines the simplified style file.

[0162] As an example, after the mini-program compression tool determines that all matching has been completed, the mini-program compression tool can identify the obtained class files as simplified style files.

[0163] As an example, after obtaining the simplified style file, you can build a mini-program package based on the simplified style file, functional code, and static resources, and then generate a compressed mini-program based on the built mini-program package.

[0164] In some embodiments, the applet compression tool in the terminal, in addition to having Figure 2A Besides the module division method shown, another module division method is also possible: the mini-program compression tool can be divided into a main module, a file management module, a style simplification module, a DOM parsing module, and a merging and decomposition module, according to the data processing and interaction flow of the mini-program compression tool. These modules work together to enable the mini-program compression tool to compress the mini-program. The following will describe the mini-program compression method provided in this application embodiment based on this other module division method. See [link to documentation] Figure 7 , Figure 7 This is a schematic diagram illustrating the compression method for a mini-program provided in an embodiment of this application. The following will be combined with... Figure 7 Please provide an explanation.

[0165] In step 301, the terminal receives a request from the developer to invoke the mini-program compression tool.

[0166] As an example, the mini-program compression tool in the terminal can be a plugin or code snippet with code implementation functionality. After receiving a call request from the developer to use the mini-program compression tool, the terminal adds a hook function to trigger the mini-program compression tool, causing it to start the compression operation.

[0167] like Figure 7 As shown, the mini-program compression tool in the terminal includes a main module, a file management module, a style simplification module, a DOM parsing module, and a merge / decompose module.

[0168] In step 302, the main module in the mini-program compression tool sends a file collection instruction to the file management module.

[0169] As an example, after receiving a request from the developer to invoke the mini-program compression tool, the terminal invokes the mini-program compression tool and starts the compression operation. After the mini-program compression tool starts the compression operation, the main module in the mini-program compression tool sends a file collection instruction to the file management module to collect the .vue files in the mini-program.

[0170] In step 303, the file management module in the mini-program compression tool collects .vue files.

[0171] As an example, the file management module in the mini-program compression tool will load all .vue files (single-file components) in the Src directory, including both pages and components.

[0172] In step 304, the file management module in the mini-program compression tool sends a file processing task to the style simplification module.

[0173] As an example, once the file management module in the mini-program compression tool has collected all the .vue files in the mini-program, it will send a file processing task to the style simplification module. This task is used to instruct the style simplification module to start the style simplification task.

[0174] In step 305, the style simplification module in the mini-program compression tool parses each .vue file.

[0175] In step 306, the DOM parsing module in the mini-program compression tool parses each .vue file.

[0176] As an example, after the style simplification module triggers compilation and parsing, the DOM parsing module will use vue-Template-Compiler to perform syntax parsing on all .vue files in the mini-program. After syntax parsing, the syntax tree corresponding to each .vue file will be obtained. The process of parsing the syntax tree is a recursive process. When the syntax tree is parsed, the next syntax tree will be parsed. This process is a loop.

[0177] In step 307, the style simplification module in the mini-program compression tool parses the DOM nodes in the syntax tree.

[0178] As an example, parsing the DOM nodes in the syntax tree yields the set of class names required for the mini-program to run.

[0179] When parsing, the style simplification module first traverses the syntax tree from its root node, using a recursive level-wise traversal. Then, it finds nodes containing class names. If this node has a parent node that also contains a class name, it concatenates the class name of the current node with the class name of its parent node to obtain the composite class name. For example, consider the following code in a component: <div class=""a”"> <div class=""b”"> I am element b, and my parent node is a. I am element aIn this DOM structure, the class name of the outer div tag is "a", and the class name of the inner div tag is "ab". The class name "b" is a concatenation of the parent node's class name information, but it can also be an independent style, so "b" is also a valid output. The recursion ends when all DOM nodes have been traversed. Finally, all node information containing class names is written to a list collection. However, to remove duplicates, it's best to use a Set collection. After traversing all DOM nodes, the final class name collection in the .vue file is: [".a", ".ab", ".b"].

[0180] In step 308, the merge and decompose module in the mini-program compression tool parses the imported style file.

[0181] As an example, the Style block of the .vue file imports the style file. First, the style file is located according to the import path of the single-file component. Then, CSSJSON is used to load the file. After loading, the JSON data structure corresponding to the style file is obtained. The JSON data structure includes the class name and the corresponding property value of the class name in the style file.

[0182] In step 309, the style simplification module in the mini-program compression tool extracts the class names and corresponding attribute values ​​required for the mini-program to run from the JSON data structure.

[0183] As an example, the class names in the JSON data structure are matched with the class names in the class name set. If a match is successful, it means that the class name in the JSON data structure is the class name corresponding to the style required for the mini program to run. The successfully matched class name and the attribute value corresponding to the class name are extracted.

[0184] In step 310, the style simplification module in the mini-program compression tool merges the extracted class names and their corresponding attribute values.

[0185] As an example, the style simplification module in the mini-program compression tool merges all extracted class names and their corresponding attribute values ​​together to obtain all the styles required for the mini-program to run.

[0186] In step 311, the file management module in the mini-program compression tool writes the extracted class names and their corresponding attribute values ​​to a separate class file.

[0187] As an example, this type of file stores the class name and the corresponding attribute value of the class name, which are all the styles required for the mini program to run, and there is no style redundancy.

[0188] In step 312, the file management module in the mini-program compression tool sends the processing result to the main module of the tool.

[0189] In step 313, the terminal outputs the compressed style file obtained after compression by the mini-program compression tool.

[0190] On mobile devices, a smaller app size means faster loading speed, and the same applies to mini-programs. Furthermore, mini-programs have a 2MB size limit, making package optimization a crucial part of daily work. The package size of a mini-program generally consists of three parts: functional code, styles, and static resources. Related technologies often use manual methods to analyze and remove redundancy in mini-program page styles, achieving the goal of simplifying styles and optimizing package size. However, existing solutions require manual processing in several places during the removal of redundant styles, such as: 1. Collect all class names in the component.

[0191] 2. Extract the style fragments referenced by the components from the referenced style files and aggregate these fragments into a temporary style file.

[0192] 3. Manually determine if all style fragments referenced by the component are written to a temporary file, and terminate the simplification of the component's style.

[0193] Existing technologies rely on manual processing to compress mini-programs, resulting in low efficiency and a high probability of error, leading to inaccurate style simplification results. However, the mini-program compression method provided in this application automates the compression of mini-program styles by parsing the mini-program's single-file components and each style file to obtain corresponding class name sets and target data structures. Each second class name in the target data structure is matched with each first class name in the class name set, and a compressed mini-program is generated based on the matched target class names. This achieves automated style compression of the mini-program, eliminating the need for manual cleanup of redundant styles in components and significantly improving compression efficiency. Furthermore, the matched target class names correspond to the styles required during the actual operation of the mini-program, thus improving the accuracy of the matched class names.

[0194] The following description continues to illustrate the exemplary structure of the applet compression processing device 43211 provided in the embodiments of this application as a software module. In some embodiments, such as Figure 2AAs shown, the software modules in the mini-program compression processing device 43211 may include: a parsing module 432111, a matching module 432112, and a generation module 432113; the parsing module 432111 is used to perform syntax parsing processing on each single-file component in the mini-program to obtain a syntax tree corresponding to each single-file component; the parsing module 432111 is also used to parse the syntax tree corresponding to each single-file component to obtain a set of class names, wherein the set of class names includes the first class name of the style file referenced by each single-file component; the parsing module 432111 is also used to parse each style file in the mini-program to obtain a target data structure, wherein the target data structure includes the second class name of each style file and the attribute value corresponding to the second class name; the matching module 432112 is used to match each second class name in the target data structure with each first class name in the set of class names, and save the matched target class name and the attribute value corresponding to the target class name to an object file; the generation module 432113 is used to generate the compressed mini-program based on the object file.

[0195] In some embodiments, the parsing module 432111 is further configured to traverse the nodes included in each syntax tree and determine the target node including the first class name based on multiple nodes; the parsing module 432111 is further configured to cluster the first class names corresponding to the multiple target nodes respectively to obtain a set of class names.

[0196] In some embodiments, the parsing module 432111 is further configured to traverse the nodes included in each syntax tree and determine the first node including the first style class name from multiple nodes; the parsing module 432111 is further configured to merge the first node and the parent node of the first node to obtain a merged node if the parent node of the first node has a second style class name, and take the first node, the parent node of the first node and the merged node as the target node.

[0197] In some embodiments, the first class name includes a single style class name and a combined style class name, the first node and the parent node of the first node correspond to the single style class name, and the merged node corresponds to the combined style class name.

[0198] In some embodiments, the parsing module 432111 is further configured to traverse the nodes included in each syntax tree and determine the first node including the first style class name from multiple nodes; the parsing module 432111 is further configured to take the first node as the target node if the first node does not have a parent node, or if the parent node of the first node does not have a second style class name.

[0199] In some embodiments, the parsing module 432111 is further configured to parse each style file referenced in the mini-program to obtain a first data structure corresponding to each style file. The parsing module 432111 is further configured to perform deduplication on the second class name and the attribute value corresponding to the second class name in each first data structure to obtain a second data structure corresponding to each style file. The parsing module 432111 is further configured to obtain a target data structure based on the second data structure corresponding to each style file.

[0200] In some embodiments, the parsing module 432111 is further configured to write each second class name and the attribute value corresponding to the second class name in each second data structure into a list; the parsing module 432111 is further configured to use the t-th second class name as an identifier to traverse the list, wherein, T represents the number of second-class names in the list; if a second-class name exists in the list that is the same as the t-th second-class name, the same second-class name and its corresponding attribute value are deleted from the list. The parsing module 432111 is also used to use the list obtained after iteration as the target data structure.

[0201] In some embodiments, the matching module 432112 is further configured to search the class name set with each second class name as an index; the matching module 432112 is further configured to use the second class name as the target class name if there is a first class name in the class name set that is the same as the second class name; the matching module 432112 is further configured to save the target class name and the attribute value corresponding to the target class name to the object file.

[0202] In some embodiments, the generation module 432113 is further configured to compress the functional code and static resources in the mini-program; the generation module 432113 is further configured to combine the compressed functional code and static resources, as well as the object file, into a compressed mini-program.

[0203] In some embodiments, the generation module 432113 is further configured to detect the dependencies imported by the functional code and determine the dependencies not used by the mini program; the generation module 432113 is further configured to delete the dependencies not used in the mini program; the generation module 432113 is further configured to obtain the volume of the static resources; the generation module 432113 is further configured to replace the static resources with the network path corresponding to the static resources.

[0204] In some embodiments, the generation module 432113 is further configured to send the static resource to the content delivery network so that the content delivery network allocates the static resource to the cache server; the generation module 432113 is further configured to receive the network path corresponding to the static resource returned by the cache server.

[0205] This application provides a storage medium storing executable instructions. When these executable instructions are executed by a processor, they cause the processor to execute the applet compression method provided in this application. For example, ... Figures 3A to 3G The compression method for the mini-program is shown.

[0206] In some embodiments, the storage medium may be a memory such as FRAM, ROM, PROM, EPROM, EEPROM, flash memory, magnetic surface memory, optical disk, or CD-ROM; or it may be a variety of devices including one or any combination of the above-mentioned memories.

[0207] In some embodiments, executable instructions may take the form of a program, software, software module, script, or code, written in any form of programming language (including compiled or interpreted languages, or declarative or procedural languages), and may be deployed in any form, including as a standalone program or as a module, component, subroutine, or other unit suitable for use in a computing environment.

[0208] As an example, executable instructions may, but do not necessarily, correspond to files in a file system. They may be stored as part of a file that holds other programs or data, for example, in one or more scripts in an HTML document, in a single file dedicated to the program in question, or in multiple collaborating files (e.g., a file that stores one or more modules, subroutines, or code sections).

[0209] As an example, executable instructions can be deployed to execute on a single electronic device, or on multiple electronic devices located in one location, or on multiple electronic devices distributed across multiple locations and interconnected via a communication network.

[0210] The above are merely embodiments of the present invention and are not intended to limit the scope of protection of the present invention. Any modifications, equivalent substitutions, and improvements made within the spirit and scope of the present invention are included within the scope of protection of the present invention.

Claims

1. A method for compressing a mini-program, characterized in that, The method includes: Each single-file component in the mini-program is subjected to syntax parsing to obtain a syntax tree corresponding to each single-file component; Parse the syntax tree corresponding to each single-file component to obtain a set of class names, wherein the set of class names includes the first class name of the style file referenced by each single-file component; Each style file referenced in the mini-program is parsed to obtain a first data structure corresponding to each style file; the second class name and the attribute value corresponding to the second class name in each first data structure are deduplicated to obtain a second data structure corresponding to each style file. Write each second category name and its corresponding attribute value in each second data structure into a list; perform the following processing in iteration t: traverse the list using the t-th second category name as an identifier, where 1≤t≤T, and T represents the number of second category names in the list; if there is a second category name in the list that is the same as the t-th second category name, delete the same second category name and its corresponding attribute value from the list; use the list obtained after iteration as the target data structure; wherein, the target data structure includes the second category name of each style file and its corresponding attribute value; Search the class name set using each of the second class names as an index; if a first class name with the same second class name exists in the class name set, use the second class name as the target class name; save the target class name and the attribute value corresponding to the target class name to an object file; The compressed version of the mini-program is generated based on the object file.

2. The method as described in claim 1, characterized in that, The parsing of the syntax tree corresponding to each single-file component yields a set of class names, including: Traverse each node included in the syntax tree, and determine the target node including the first class name based on multiple nodes; Cluster the first class names corresponding to the multiple target nodes respectively to obtain a set of class names.

3. The method as described in claim 2, characterized in that, The traversal of each node in the syntax tree, and the determination of a target node including a first class name based on multiple nodes, includes: Traverse each node included in the syntax tree, and determine the first node including the first style class name from the plurality of nodes; If the parent node of the first node has a second style class name, the first node and the parent node of the first node are merged to obtain a merged node, and the first node, the parent node of the first node, and the merged node are taken as the target node.

4. The method as described in claim 3, characterized in that, The first class name includes a single style class name and a combined style class name. The first node and the parent node of the first node correspond to the single style class name, and the merged node corresponds to the combined style class name.

5. The method as described in claim 2, characterized in that, The traversal of each node in the syntax tree, and the determination of a target node including a first class name based on multiple nodes, includes: Traverse each node included in the syntax tree, and determine the first node including the first style class name from the plurality of nodes; If the first node does not have a parent node, or if the parent node of the first node does not have a second style class name, the first node will be used as the target node.

6. The method according to any one of claims 1 to 5, characterized in that, The process of generating the compressed mini-program based on the object file includes: The functional code and static resources in the mini-program are compressed; The compressed functional code, static resources, and object files are combined to form the compressed mini-program.

7. The method as described in claim 6, characterized in that, The compression of functional code and static resources in the mini-program includes: Detect the dependencies imported by the function code and identify the dependencies that are not used by the mini-program; Remove any unused dependencies from the aforementioned mini-program; Obtain the volume of the static resource; Replace the static resource with the network path corresponding to the static resource.

8. The method as described in claim 7, characterized in that, The step of replacing the static resource with the network path corresponding to the static resource includes: The static resource is sent to the content delivery network so that the content delivery network allocates the static resource to the cache server; Receive the network path corresponding to the static resource returned by the cache server.

9. A compression processing device for a mini-program, characterized in that, The device includes: The parsing module is used to perform syntax parsing on each single-file component in the mini-program to obtain a syntax tree corresponding to each single-file component. The parsing module is further configured to parse the syntax tree corresponding to each single-file component to obtain a set of class names, wherein the set of class names includes the first class name of the style file referenced by each single-file component; The parsing module is further configured to parse each style file referenced in the mini-program to obtain a first data structure corresponding to each style file; perform deduplication processing on the second class name and the attribute value corresponding to the second class name in each first data structure to obtain a second data structure corresponding to each style file; write each second class name and the attribute value corresponding to the second class name in each second data structure into a list; iterate t and perform the following processing: traverse the list with the t-th second class name as an identifier, where 1≤t≤T, and T represents the number of second class names in the list; if there is a second class name in the list that is the same as the t-th second class name, delete the same second class name and the attribute value corresponding to the same second class name from the list; use the list obtained after iteration as the target data structure; wherein, the target data structure includes the second class name and the attribute value corresponding to the second class name of each style file; The matching module is used to search the class name set with each second class name as an index; if there is a first class name in the class name set that is the same as the second class name, the second class name is used as the target class name; the target class name and the attribute value corresponding to the target class name are saved to an object file; The generation module is used to generate the compressed version of the mini-program based on the object file.

10. The apparatus according to claim 9, characterized in that, The parsing module is also used to traverse each node included in the syntax tree and determine the target node including the first class name based on multiple nodes; Cluster the first class names corresponding to the multiple target nodes respectively to obtain a set of class names.

11. The apparatus according to claim 10, characterized in that, The parsing module is further configured to traverse each node included in the syntax tree and determine a first node including the first style class name from among the multiple nodes; If the parent node of the first node has a second style class name, the first node and the parent node of the first node are merged to obtain a merged node, and the first node, the parent node of the first node, and the merged node are taken as the target node.

12. The apparatus according to claim 11, characterized in that, The first class name includes a single style class name and a combined style class name. The first node and the parent node of the first node correspond to the single style class name, and the merged node corresponds to the combined style class name.

13. The apparatus according to claim 10, characterized in that, The parsing module is further configured to traverse each node included in the syntax tree and determine a first node including the first style class name from among the multiple nodes; If the first node does not have a parent node, or if the parent node of the first node does not have a second style class name, the first node will be used as the target node.

14. The apparatus according to any one of claims 9 to 13, characterized in that, The generation module is also used to compress the functional code and static resources in the mini-program; The compressed functional code, static resources, and object files are combined to form the compressed mini-program.

15. The apparatus according to claim 14, characterized in that, The generation module is also used to detect the dependencies imported by the function code and to determine the dependencies that are not used by the mini program; Remove any unused dependencies from the aforementioned mini-program; Obtain the volume of the static resource; Replace the static resource with the network path corresponding to the static resource.

16. The apparatus according to claim 15, characterized in that, The generation module is further configured to send the static resources to the content delivery network so that the content delivery network allocates the static resources to the cache server; Receive the network path corresponding to the static resource returned by the cache server.

17. An electronic device, characterized in that, The electronic device includes: Memory, used to store executable instructions; A processor, when executing executable instructions stored in the memory, implements the applet compression method according to any one of claims 1 to 8.

18. A computer-readable storage medium, characterized in that, It stores executable instructions for implementing the applet compression method according to any one of claims 1 to 8 when executed by a processor.

19. A computer program product comprising a computer program or instructions, characterized in that, When the computer program or instructions are executed by the processor, they implement the applet compression processing method according to any one of claims 1 to 8.

Images