CN117348880A - Compression processing method and device for applet, electronic equipment and storage medium - Google Patents

Compression processing method and device for applet, electronic equipment and storage medium Download PDF

Info

Publication number
CN117348880A
CN117348880A CN202210758143.3A CN202210758143A CN117348880A CN 117348880 A CN117348880 A CN 117348880A CN 202210758143 A CN202210758143 A CN 202210758143A CN 117348880 A CN117348880 A CN 117348880A
Authority
CN
China
Prior art keywords
class name
applet
style
node
file
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202210758143.3A
Other languages
Chinese (zh)
Inventor
张勇
李可先
杨师
李少华
刘波
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Tencent Cloud Computing Beijing Co Ltd
Original Assignee
Tencent Cloud Computing Beijing Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Tencent Cloud Computing Beijing Co Ltd filed Critical Tencent Cloud Computing Beijing Co Ltd
Priority to CN202210758143.3A priority Critical patent/CN117348880A/en
Publication of CN117348880A publication Critical patent/CN117348880A/en
Pending legal-status Critical Current

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/40Transformation of program code
    • G06F8/41Compilation
    • G06F8/42Syntactic analysis
    • G06F8/427Parsing
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/36Software reuse
    • YGENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02DCLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Stored Programmes (AREA)

Abstract

The application provides a compression processing method and device for an applet, electronic equipment and a storage medium; the method comprises the following steps: carrying out grammar analysis processing on each single file component in the applet to obtain a grammar tree corresponding to each single file component; analyzing the grammar tree corresponding to each single file component to obtain a class name set; analyzing each style file in the applet 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 storing the matched target class names and attribute values corresponding to the target class names into an object file; a compressed applet is generated based on the object file. By the method and the device, the compression processing efficiency of the applet can be improved.

Description

Compression processing method and device for applet, electronic equipment and storage medium
Technical Field
The present disclosure relates to the field of internet technologies, and in particular, to a compression processing method and apparatus for an applet, an electronic device, and a storage medium.
Background
With the saturation of APP market, applets are popular as an application that can be used without downloading and installing, and optimizing the package volume of an applet is a very important part of the work of developers because of the requirement that the package volume be limited to a small volume (e.g., 2M) during development of the applet.
The package of the applet mainly comprises three parts, namely functional codes, styles and local static resources, in the process of compressing the applet, the styles in the applet are compressed in a manual processing mode in the prior art, and when the applet uses more styles, the workload of simplifying the styles is increased, and the manual processing mode is inefficient and needs to consume a long time.
The related art has no effective solution for improving the efficiency of the applet compression process.
Disclosure of Invention
The embodiment of the application provides a compression processing method and device for an applet, electronic equipment, a computer readable storage medium and a computer program product, which can improve the compression processing efficiency of the applet.
The technical scheme of the embodiment of the application is realized as follows:
the embodiment of the application provides a compression processing method of an applet, which comprises the following steps:
carrying out grammar analysis processing on each single file component in the applet to obtain a grammar tree corresponding to each single file component;
analyzing the grammar tree corresponding to each single file component to obtain a class name set, wherein the class name set comprises a first class name of a style file referenced by each single file component;
Analyzing each style file in the applet to obtain a target data structure, wherein the target data structure comprises a second class name of each style file and an attribute value corresponding to the second class name;
matching each second class name in the target data structure with each first class name in the class name set, and storing the matched target class name and the attribute value corresponding to the target class name into an object file;
and generating the compressed applet based on the object file.
The embodiment of the application provides a compression processing device of an applet, comprising:
the parsing module is used for performing syntax parsing processing on each single file component in the applet 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 class name set, where the class name set includes a first class name of a style file referenced by each single file component;
the analysis module is further configured to analyze each style file in the applet to obtain a target data structure, where the target data structure includes a second class name of each style file and an attribute value corresponding to the second class name;
The matching module is used for matching each second class name in the target data structure with each first class name in the class name set, and storing the matched target class name and the attribute value corresponding to the target class name into an object file;
and the generation module is used for generating the compressed applet based on the object file.
An embodiment of the present application provides an electronic device, including:
a memory for storing executable instructions;
and the processor is used for realizing the compression processing method of the applet provided by the embodiment of the application when executing the executable instructions stored in the memory.
The embodiment of the application provides a computer readable storage medium, which stores executable instructions for implementing the compression processing method of the applet provided by the embodiment of the application when the executable instructions are executed by a processor.
The embodiment of the application provides a computer program product, which comprises a computer program or instructions, and is used for realizing the compression processing method of the applet provided by the embodiment of the application when the computer program or instructions are executed by a processor.
The embodiment of the application has the following beneficial effects:
the corresponding class name set and the target data structure are respectively obtained through analyzing the applet list file assembly and each style file, each second class name in the target data structure is matched with each first class name in the class name set, and a compressed applet is generated based on the matched target class names, so that automatic compression of the styles of the applet is realized, redundant styles of the assemblies are not required to be cleaned manually, and the compression processing efficiency of the applet is greatly improved; in addition, the target class names obtained by matching are class names corresponding to the patterns required by the actual running process of the applet, so that the accuracy of the class names obtained by matching is improved.
Drawings
FIG. 1 is a schematic architecture diagram of an applet compression processing system 100 provided in an embodiment of the present application;
fig. 2A is a schematic structural diagram of a terminal 401 provided in an embodiment of the present application;
fig. 2B is a schematic structural diagram of a terminal 402 according to an embodiment of the present application;
fig. 3A to 3G are schematic flow diagrams of a compression processing method of an applet according to an embodiment of the present application.
FIG. 4A is a schematic diagram of a single file component provided by an embodiment of the present application;
FIG. 4B is a schematic diagram of the parsing result of a single file component according to an embodiment of the present disclosure;
fig. 4C is a schematic diagram of an analysis result of a style file according to an embodiment of the present application;
FIG. 4D is a schematic diagram of a style compression effect provided by an embodiment of the present application;
FIG. 5 is a schematic diagram of an applet uploading interface provided in an embodiment of the present application;
FIG. 6 is a schematic diagram of a compression processing method of an applet provided in an embodiment of the present application;
fig. 7 is a schematic diagram of a compression processing method of an applet according to an embodiment of the present application.
Detailed Description
For the purpose of making the objects, technical solutions and advantages of the present application more apparent, the present application will be described in further detail with reference to the accompanying drawings, and the described embodiments should not be construed as limiting the present application, and all other embodiments obtained by those skilled in the art without making any inventive effort are within the scope of the present application.
In the following description, reference is made to "some embodiments" which describe a subset of all possible embodiments, but it is to be understood that "some embodiments" can be the same subset or different subsets of all possible embodiments and can be combined with one another without conflict.
It will be appreciated that in embodiments of the present application, related data relating to applets, when the embodiments of the present application are applied to a particular product or technology, user approval or consent is required, and the collection, use and processing of related data is required to comply with relevant laws and regulations and standards in the relevant countries and regions.
In the following description, the terms "first", "second", "third" and the like are merely used to distinguish similar objects and do not represent a specific ordering of the objects, it being understood that the "first", "second", "third" may be interchanged with a specific order or sequence, as permitted, to enable embodiments of the application described herein to be practiced otherwise than as illustrated or described herein.
In the following description, the term "plurality" refers to at least two.
Unless defined otherwise, 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 the present application only and is not intended to be limiting of the present application.
Before further describing embodiments of the present application in detail, the terms and expressions that are referred to in the embodiments of the present application are described, and are suitable for the following explanation.
1) An attribute value defining a particular feature or parameter of the attribute, for example, the attribute name being volume, the value of the attribute being 40CM; for another example, the attribute is color, the value of the attribute is red, and for convenience of description, the attribute and the value corresponding to the attribute are collectively referred to as an attribute value in the embodiment of the present application.
2) A applet (Mini Program), also called a Web Program (Web Program), is a Program developed based on a front-end oriented language (e.g., javaScript) that implements services in hypertext markup language (HTML, hyper Text Markup Language) pages, is downloaded by a client (e.g., a browser or any client with an embedded browser core) via a network (e.g., the internet), and is interpreted and executed in the browser environment of the client, without installation compared to a general Program.
3) Components (components), which are functional modules of the view of the applet, also called front-end components, buttons, headings, tables, sidebars, content and footers in the page, etc., include modular code to facilitate reuse in different pages of the applet.
4) And the Template (Template) is used for rendering the structure and the style of the data to be rendered in the applet after filling different data, so that the multiplexing of the structure and the style can be realized.
For example, a cascading style sheet (CSS, cascading Style Sheets) file description style in extensible markup language (XML, xtensible Markup Language) file description structure in a template of an applet page to describe a component style may be used to multiplex the layout and style of the applet page, and a template of a component may be used to multiplex the layout and style of the component.
5) Class name, class selector name, for specifying class selector that allows specification of styles in a manner independent of document elements, styles for describing a set of elements, which may be used in multiple elements. For example: a class selector is defined, center { text-align: center }, there is code in the h1 element,
<h1 Class="center">
This heading will be center-aligned
</h1>
the center is the class name.
6) A single file component, also called the. vue file, a. vue file is a single component, within which component-related code is encapsulated, and a. vue file includes three parts, a Template block, a Script block, and a Style block. Template block: for setting the content to be displayed by the component. Script block: for exporting objects. Style block: for setting a pattern.
When the related technology realizes the compression of the applet, the purpose of simplifying the applet style codes is mainly achieved by a manual processing mode, for example, all class names in the assembly are collected; extracting style fragments corresponding to the class names of the component references from the referenced style files according to the class names, and copying the style fragments into an HTML page; manually judging that style segments corresponding to class names quoted by all components are written into an HTML page, and deleting the quoted style files; the compaction of the component style is terminated.
The applicant finds that in the technical scheme of the related art, the result is absolutely accurate due to the fact that manual processing cannot be performed, so that the processing error rate is high, and when the patterns used by the applet are more, the workload of pattern simplification is increased, and a long time is consumed by manual processing alone.
In view of the above problems, embodiments of the present application provide a compression processing method, apparatus, electronic device, computer readable storage medium, and computer program product for an applet, which can improve accuracy of class names obtained by matching while improving efficiency of compression processing of the applet. The compression processing method of the applet provided by the embodiment of the application can be applied to various terminals, for example, various types of terminal devices (hereinafter also simply referred to as terminals) with a code editing function, such as smart phones, tablet computers, notebook computers, desktop computers, intelligent voice interaction devices, intelligent home appliances, vehicle-mounted terminals and the like.
In the following, taking an electronic device as a terminal for developing an applet as an example, an exemplary application system architecture for implementing the compression processing method of the applet provided in the embodiment of the application is described, referring to fig. 1, fig. 1 is an architecture schematic diagram of the compression processing system 100 of the applet provided in the embodiment of the application, as shown in fig. 1, where the compression processing system 100 of the applet includes: a terminal 401 for developing an applet by a developer, a terminal 402 for using an applet by an ordinary user, a software warehouse 200, and a network 300. The network 300 may be a wide area network or a local area network, or a combination of both.
In some embodiments, a developer uses an applet development tool in the terminal 401 to complete the development process of the applet through a man-machine interaction interface (e.g., an instant messaging client, a live client, an electronic map client, etc.) of the operation terminal 401, and after the applet is developed, an applet compression tool in the terminal 401 is called to compress the applet to obtain a compressed applet. The developer may then further operate the man-machine interface of terminal 401 to upload the compressed applet to software warehouse 200 via network 300. Then, the general user downloads and runs the client through the operation terminal 402, downloads the compressed applet from the software warehouse 200 through the client, the applet is attached to the browser environment of the client to run, and after the applet is run, the general user can use the applet to perform corresponding operations.
In some embodiments, the embodiments of the present application may be implemented by means of Cloud Technology (Cloud Technology), which refers to a hosting Technology that unifies serial resources such as hardware, software, networks, etc. in a wide area network or a local area network, so as to implement calculation, storage, processing, and sharing of data.
The cloud technology is a generic term of network technology, information technology, integration technology, management platform technology, application technology and the like based on cloud computing business model application, can form a resource pool, and is flexible and convenient as required. Cloud computing technology will become an important support. Background services of technical network systems require a large amount of computing and storage resources.
Next, the structure of the electronic device provided in the embodiment of the present application is described, and as described above, the electronic device provided in the embodiment of the present application may be the terminal 401 or the terminal 402 shown in fig. 1. In the case where the electronic device is the terminal 401, the terminal 401 includes an applet compression tool for performing compression processing of an applet, and the applet compression tool may be integrated in a client of the terminal 401 or may be an application in the terminal 401 independent of the client, and the terminal 401 provided in the embodiment of the present application will be described below by taking the integration of the applet compression tool in the client of the terminal 401 as an example. Referring to fig. 2A, fig. 2A is a schematic structural diagram of a terminal 401 provided in an embodiment of the present application, and the terminal 401 shown in fig. 2A includes: a hardware layer 410, an operating system layer 420, and an application layer 430.
In some embodiments, hardware layer 410 includes a processor 411, a user interface 412, a memory 413, and a network interface 414.
The processor 411 may be an integrated circuit chip with signal processing capabilities such as a general purpose processor, such as a microprocessor or any conventional processor, a digital signal processor (DSP, digital Signal Processor), or other programmable logic device, discrete gate or transistor logic, discrete hardware components, or the like.
The user interface 412 includes one or more output devices that enable presentation of media content, including one or more speakers and/or one or more visual displays. The 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.
Memory 413 includes volatile memory or nonvolatile memory, and may also include both volatile and nonvolatile memory. The nonvolatile Memory may be a Read Only Memory (ROM), and the volatile Memory may be a random access Memory (RAM, random Access Memory). The memory 413 described in the embodiments of the present application is intended to comprise any suitable type of memory. Memory 413 optionally includes one or more storage devices physically located remote from processor 411. The memory 413 is used to store various types of data to support the operation of the terminal 401. Examples of such data include: any program for operating on terminal 401, such as operating system layer 420 and application layer 430.
The network interface 414 includes bluetooth, wireless compatibility authentication (WiFi), universal serial bus (USB, universal Serial Bus), and the like.
In some embodiments, operating system layer 420 includes system programs for handling various basic system services and performing hardware-related tasks, such as framework layer 421, driver layer 422, graphics library layer 423, and core library layer 424, among others, for implementing various basic services and handling hardware-based tasks.
In some embodiments, the application layer 430 may contain various applications built into the operating system, such as desktop launchers and system setup programs; and may further include third party applications, such as Media Player (Media Player), browser, social/instant messaging application, etc. that need to display views and receive and respond to various touch events through the views, and for implementing various services, a program implementing the method of the embodiment of the present application may be included in the application; the client 432 described herein may be any of a system-native application and a third-party application, unless otherwise specified.
The application layer 430 contains an applet development tool 431, where the applet development tool 431 is used to perform applet development processing, and the applet development tool 431 may be an application independent of the client 432; the client 432 included in the application layer 430 includes an applet compression tool 4321, where the applet compression tool 4321 includes an applet compression device 43211. The compression processing device 43211 of the applet may be software in the form of a program, plug-in, etc., including the following software modules: a parsing module 432111, a matching module 432112, and a generating module 432113. These modules may be logical functional modules, and thus may be arbitrarily combined or further split depending on the functionality implemented.
Referring to fig. 2B, fig. 2B is a schematic structural diagram of a terminal 402 provided in an embodiment of the present application, and the terminal 402 shown in fig. 2B includes: a hardware layer 440, an operating system layer 450, and an application layer 460.
In some embodiments, hardware layer 440 includes a processor 441, a user interface 442, a memory 443, and a network interface 444.
The processor 441 may be an integrated circuit chip with signal processing capabilities such as a general purpose processor, which may be a microprocessor or any conventional processor, or the like, a digital signal processor (DSP, digital Signal Processor), or other programmable logic device, discrete gate or transistor logic, discrete hardware components, or the like.
The user interface 442 includes one or more output devices that enable presentation of media content, including one or more speakers and/or one or more visual displays. The 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.
Memory 443 includes volatile memory or nonvolatile memory, and may also include both volatile and nonvolatile memory. The nonvolatile Memory may be a Read Only Memory (ROM), and the volatile Memory may be a random access Memory (RAM, random Access Memory). The memory 443 described in the embodiments herein is intended to comprise any suitable type of memory. The memory 443 optionally includes one or more storage devices physically located remote from the processor 441. The memory 443 is used to store various types of data to support the operation of the terminal 402. Examples of such data include: any program for operating on the terminal 402, such as an operating system layer 450 and an application layer 460.
The network interface 444 includes bluetooth, wireless compatibility authentication (WiFi), universal serial bus (USB, universal Serial Bus), and the like.
In some embodiments, operating system layer 450 includes system programs for handling various basic system services and performing hardware-related tasks, such as framework layer 451, driver layer 452, graphics library layer 453, and core library layer 454, among others, for implementing various basic services and handling hardware-based tasks.
In some embodiments, the application layer 460 may contain various applications built into the operating system, such as desktop launchers and system setup programs; and may further include third party applications, such as Media Player (Media Player), browser, social/instant messaging application, etc. that need to display views and receive and respond to various touch events through the views, and for implementing various services, a program implementing the method of the embodiment of the present application may be included in the application; the client 461 described herein may be any of a system-native application and a third-party application, unless otherwise specified. Wherein the client 461 comprises a base library 4611 and applets 4612.
The compression processing method of the applet provided in the embodiment of the present application will be described below in connection with exemplary applications and implementations of the electronic device provided in the embodiment of the present application. It will be appreciated that the methods described below may be performed by the applet compression tool in the terminal 401 described above.
Referring to fig. 3A, fig. 3A is a schematic flow chart of a compression processing method of an applet according to an embodiment of the present application, and will be described with reference to the steps shown in fig. 3A.
In step 101, syntax parsing is performed on each single file component in the applet, so as to obtain a syntax tree corresponding to each single file component.
In some embodiments, when a developer develops an applet, a plurality of single file components are written under the Source (Src) directory of the applet, and the required styles in each single file component may be the same or different, so to obtain all styles required by the applet operation, syntax parsing is required for all single file components. For example, each single file component may be parsed by a vue-Template-Compiler module in the applet compression tool, where vue-Template-Compiler module is used to compile the. vue file, and the. vue file is automatically returned to the abstract syntax tree corresponding to the. vue file after being imported into the module.
For example, referring to fig. 4A, fig. 4A is a schematic diagram of a single file component provided in an embodiment of the present application, and fig. 4A illustrates code of one single file component. The code of the single file component includes three parts, namely a Template block, a Script block, and a Style block. Wherein, template block: for setting content to be displayed by the component; script block: for exporting objects; style block: for setting a pattern.
Referring to fig. 4B, fig. 4B is a schematic diagram of an analysis result of a single file component provided in the embodiment of the present application, and it should be noted that fig. 4B illustrates an analysis result obtained by performing an analysis process on the single file component illustrated in fig. 4A. As shown in fig. 4B, parsing the single file component results in a syntax tree corresponding to the single file component, the syntax tree including a plurality of document object model (DOM, document Object Model) nodes, wherein the keywords are "Class: "is a node containing a class name.
In step 102, the syntax tree corresponding to each single file component is parsed to obtain a class name set.
The set of class names includes a first class name of the style file referenced by each single file component.
In some embodiments, all of the rendered content in the HTML page is one node of the DOM, e.g., each HTML tag, tag attribute, content, annotation, etc. can be considered a DOM node. In the applet, the grammar tree corresponding to each single file component comprises a plurality of DOM nodes, so that the nodes containing class names in the plurality of DOM nodes contained in the grammar tree can be determined by analyzing the grammar tree corresponding to the single file component, so that class names corresponding to all patterns required by the applet operation can be known, the class names are collected to obtain a class name set, and the class names of the class name set are named as first class names.
In some embodiments, referring to fig. 3B, fig. 3B is a schematic flow chart of a compression processing method of an applet provided in an embodiment of the present application, and step 102 shown in fig. 3A may be implemented by steps 1021 to 1022 in fig. 3B, which are respectively described below.
In step 1021, the nodes included in each syntax tree are traversed and a target node including a first class name is determined based on the plurality of nodes.
As an example, the first class name is a class name corresponding to a style file referenced by each single file component included in the applet.
For example, referring to FIG. 4B, the syntax tree corresponding to the single file component includes a plurality of DOM nodes, such as "type:1" nodes, "attrsList: [ ]" nodes, and the like, where the node with the keyword being a Class is the node containing the Class name, and the name following the keyword Class is referred to as the first Class name.
As shown in FIG. 4B, the names of the Class-real-authentication-information (abbreviated as mrag) and the tea-checkbox (abbreviated as tc) follow, so mrag and tc in FIG. 4B are both the first Class names, and the node with Class name mrag and the node with Class name tc are collectively referred to as target nodes.
In some embodiments, referring to fig. 3C, fig. 3C is a schematic flow chart of a compression processing method of an applet provided in an embodiment of the present application, and step 1021 shown in fig. 3B may be implemented by steps 10211 to 10212 in fig. 3C, which are described below.
In step 10211, the nodes included in each syntax tree are traversed and a first node including a first style class name is determined from the plurality of nodes.
In some embodiments, since the parsed syntax tree may include nodes of multiple style class names, and hierarchical relationships may exist between the nodes, for convenience in describing the style relationships between the hierarchies, the nodes including the style class names in the nodes are collectively referred to as a first node, and the class name corresponding to the first node is referred to as a first style class name.
For example, referring to fig. 4B, in fig. 4B, a parent node with a class name of mrag and a child node with a class name of tc are included, and in step 10211, the node containing the mrag class name and the node containing the tc class name are collectively referred to as a first node, and the class name mrag and the class name tc are collectively referred to as a first type class name.
In step 10212, if the parent node of the first node has the second style class name, the first node and the parent node of the first node are combined to obtain a combined node, and the first node, the parent node of the first node and the combined node are used as target nodes.
In some embodiments, if the first node has a parent node and the parent node includes a second style class name, the first node and the corresponding parent node are merged to obtain a merged node. Wherein the first style class name may be the same or different from the second style class name. For example, a first node with a class name tc has a parent node with a second style class name mrag, and at this time, the tc node is merged with the mrag node to obtain a merged node with a class name mrag.
In some embodiments, the first class name includes a single style class name and a combination style class name, the first node and a parent node of the first node correspond to the single style class name, the merge node corresponds to the combination style class name, and the combination style class name is represented in a combination form. For example, a first node with a class name tc and a parent node with a class name mrag corresponding to the first node are single-style class names; the merging node with the class name mrag.tc is the combined style class name. As an example, a first node with a class name tc, a parent node with a class name mrag corresponding to the first node, and a merge node with a class name mrag.
In some embodiments, referring to fig. 3D, fig. 3D is a flow chart of a compression processing method of an applet provided in an embodiment of the present application, and the method shown in fig. 3D and the method shown in fig. 3C are parallel methods. Step 1021 shown in fig. 3B can also be implemented by steps 10213 to 10214 in fig. 3D, respectively, as described below.
In step 10213, the nodes included in each syntax tree are traversed and a first node including a first style class name is determined from the plurality of nodes.
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.
In some embodiments, if the first node does not have a parent node, or there is a parent node, but there is no second style class name in the parent node (i.e., there is only a node in the syntax tree that includes the first style class name, there is no merge node), then the first node is directly the target node.
In step 1022, the first class names corresponding to the plurality of target nodes are clustered to obtain a class name set.
In some embodiments, after obtaining the plurality of target nodes, the obtained first class names corresponding to the plurality of target nodes are summarized together and written into the class name set to realize clustering, and of course, in the clustering process, the same first class names can be deleted to save space resources. For example, when a Set of class names, a Set of sets, is used to store all of the first class names, duplicate first class names are deleted during writing of the first class names to the Set based on the characteristics of the Set, because the Set is not allowed to contain the same element, and the add operation fails if two identical elements are attempted to be added to the same Set.
In step S103, each style file in the applet is parsed to obtain a target data structure.
In some embodiments, the style file may be parsed by a CSSJSON module in the applet compression tool to obtain a target data structure, where the CSSJSON module is also called a CSS-JSON converter, and is configured to convert the style file into a JSON format, where the style file is a CSS file. Wherein a plurality of styles are included in the style file, the styles are used to define how the elements are displayed, e.g., the background of the element, font size color, borders, etc. can be set.
For code brevity and maintenance convenience, styles are mostly placed in CSS files. For example, when an external CSS file is introduced by the Import method, the CSS file is an external style file. In the vue file, the Style file is introduced in the Style part, and because the Style file comprises multiple styles for different elements, the Style corresponding to the class name used in the Template part of the vue file is the Style required by the running of the applet, and the attribute corresponding to the class name and the class name in the Style file which are not used in the Template part of the vue file are redundant styles.
As an example, parsing each style file in the applet may result in a target data structure. The target data structure is a CSS data structure obtained by analyzing a CSS file through a CSS JSON module. The target data structure comprises a second class name of each style file and an attribute value corresponding to the second class name.
For example, referring to fig. 4C, fig. 4C is a schematic diagram of an parsing result of a style file provided in the embodiment of the present application, where the style file is a style file commonly referred to by all components, for each component, there may be many redundant styles, and the JSON data structure shown in fig. 4C includes a second class name and attribute values corresponding to the second class name, for example, mps-link, mps-real-authentication, etc. represent the second class name, and Object represents an attribute value corresponding to the second class name.
In some embodiments, with continued reference to fig. 3B, step 103 shown in fig. 3A may be implemented by steps 1031 to 1033 in fig. 3B, respectively, as described below.
In step 1031, each style file referenced in the applet is parsed to obtain a first data structure corresponding to each style file.
As an example, a Style file introduced in a Style block in each single file component of the applet is parsed, for example, the Style file may be converted into JSON format by a CSSJSON module in the applet compression tool, so as to obtain a JSON data structure corresponding to the Style file in each single file component, i.e. the first data structure.
In step 1032, the second class name and the attribute value corresponding to the second class name in each first data structure are subjected to deduplication processing, so as to obtain a second data structure corresponding to each style file.
In some embodiments, since there may be pattern repetition in the plurality of pattern files, after obtaining the first data structures corresponding to the plurality of pattern files, a duplicate second class name in each first data structure needs to be subjected to a duplicate removal process, so as to obtain a second data structure corresponding to each first data structure, so as to optimize the volume of the style package.
It should be noted that the first and second are merely for distinguishing the data structures, and are not specific.
In step 1033, a target data structure is obtained based on the second data structure corresponding to each style file.
As an example, after obtaining the second data structure corresponding to each style file, the second data structures corresponding to each style file are combined, thereby obtaining the target data structure.
In some embodiments, referring to fig. 3E, fig. 3E is a schematic flow chart of a compression processing method of an applet provided in an embodiment of the present application, and step 1033 shown in fig. 3B may be implemented by steps 10331 to 10334 in fig. 3E, which are respectively described below.
In step 10331, each second class name in each second data structure and the attribute value corresponding to the second class name are written into the list.
As an example, in step 1032, an internal deduplication process is performed on each first data structure to obtain a corresponding second data structure, so that it is further required to confirm whether pattern repetition exists between the second data structures.
As an example, each second class name in each second data structure and the attribute value corresponding to the second class name are written into the list, and at this time, the second class name included in the list has a duplicate class name, for example, the second class name included in the second data structure a is [ a, B, c ], the second class name included in the second data structure B is [ c, d ], and writing the second data structure a and the second data structure B into the list results in [ a, B, c, c, d ], where there is a duplicate second class name c.
In step 10332, the list is traversed with the t second category as the identification.
In some embodiments, the repeated second class names in the list may be found in a traversal manner, with T representing the number of second class names in the list, 1.ltoreq.t.ltoreq.T. For example, in the example, t=5, when the traversal starts, a second class name is randomly selected from the list, and the second class name is used as the first second class name in the list, and then the first second class name is used as the identification to traverse the list.
In step 10333, if there is a second class name identical to the t second class name in the list, deleting the identical second class name and the attribute value corresponding to the identical second class name in the list.
In some embodiments, if there is another second class name in the list that is the same as the first second class name, it indicates that there is another second class name in the list that is the same as the first second class name, so that the same second class name and the attribute value corresponding to the same second class name are deleted from the list, and the deduplication process is implemented, for example, in the above example, the result of deduplication is [ a, b, c, d ].
In step 10334, the list obtained after the iteration is completed is used as a target data structure.
In some embodiments, since there is no duplicate pattern file in the list obtained after the iteration is completed, the list after the iteration is completed may be directly used as the target data structure.
In step S104, 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 names and the attribute values corresponding to the target class names are saved in the object file.
In some embodiments, since a large number of redundant patterns are included in the pattern file, a large number of redundancies also exist in a target data structure obtained by parsing the pattern file, in order to remove the redundancies 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 used as a target class name, that is, a class name corresponding to a pattern required by the operation of the applet, the pattern required by the operation of the applet is a pattern capable of playing a rendering role in the operation process of the applet, and the part of patterns can beautify components in the applet, such as adding frames, setting font colors and the like; and using the unmatched class name as a class name corresponding to a redundant pattern, wherein the redundant pattern is a pattern which does not play a rendering role in the running process of the applet, and the partial pattern has no effect on the function realization of the applet or the pattern presentation of the applet.
After a plurality of target class names are obtained through matching, the target class names and attribute values corresponding to the target class names are stored in an object file, and the stored styles in the object file are all styles required by the running of the applet. The object file is a separate class file stored in JSON format.
In some embodiments, with continued reference to fig. 3B, step 104 shown in fig. 3A may be implemented by steps 1041 to 1043 in fig. 3B, respectively, as described below.
In step 1041, a set of class names is searched with each second class name as an index.
In some embodiments, at the beginning of a search, a second class name in the target data structure is randomly selected as an index, searching the set of class names. Since the above has described that the target data structure is a list, when the first second class name is used as the search, the second class name is selected as the index search class name set according to the list order until each second class name is selected, and the search operation is ended.
In step 1042, if the first class name identical to the second class name exists in the class name set, the second class name is used as the target class name.
In step 1043, the target class name and the attribute value corresponding to the target class name are saved in the object file.
In some embodiments, if the second class name is successfully matched with the first class name in the class name set, the second class name is indicated to be a class name corresponding to a style required by the applet operation, the attribute value corresponding to the second class name finishes rendering the applet, the second class name is used as a target class name, and the second class name and the attribute value corresponding to the second class name are saved in the object file for reservation.
If the second class name is not successfully matched with the first class name in the class name set, the second class name is a class name corresponding to a redundant pattern which is not needed in the running process of the applet, and the second class name and an attribute value corresponding to the second class name are not stored in the object file.
In step S105, a compressed applet is generated based on the object file.
As an example, the package of applets mainly includes three parts, namely, function code, style, and static resources. The function codes are used for realizing specific functions of the applet, such as filling in forms, dialogue sharing and the like; static resources are fixed resources that do not require database queries or program processing, such as pictures used in applets, etc.
In some embodiments, only the style may be compressed by the applet compression tool, resulting in a compressed applet.
Referring to fig. 4D, fig. 4D is a schematic diagram of a style compression effect provided in the embodiment of the present application, where the volume of the style file before compression is 6kb, and the volume of the style file after compression is 942b. Since the styles stored in the object file are all styles required by the running of the applet, no style redundancy exists, the volume of the package of the applet based on the function code, the object file and the static resource is reduced compared with the package of the original applet, and thus the compressed applet can be generated based on the package after the volume reduction.
In some embodiments, the function code, style, and static resources may be compressed by an applet compression tool to obtain a compressed applet. The compression mode of the style has been described above, and will not be described here again, and the compression mode of the function code and the static resource will be described below with reference to the accompanying drawings.
In some embodiments, with continued reference to fig. 3B, step 105 shown in fig. 3A may be implemented by steps 1051 through 1052 in fig. 3B, each of which is described below.
In step 1051, the function code and static resources in the applet are compressed.
As an example, referring to fig. 3F, fig. 3F is a schematic flow chart of a compression processing method of an applet provided in an embodiment of the present application, and step 1051 shown in fig. 3B may be implemented by steps 10511 to 10514 in fig. 3F, and will be described below.
In step 10511, dependencies of the function code importation are detected and dependencies that are not used by the applet are determined.
As an example, compressing the function code of the applet may be implemented by a method of shake-tree optimization. The dependency items corresponding to the applet are tree-like structures, each node of the tree representing a dependency item that provides different functions for the applet, and the nodes of the tree are reduced by eliminating unwanted dependency items, a process called rocking the tree. The shake-tree optimization can discard codes which are not used in the applet when the codes are packed, and only the used codes are reserved, so that dead codes can be eliminated.
Wherein, the dependent item is the item on which the setting item depends, and is used for determining the compiling order of the items when the solution is specifically generated. If the A, B and C items are included, the A item refers to the B and C items, then the A depends on the B and C, and the B and C are the dependent items of the A, and the B and C are compiled first and then the A is compiled at the compiling time. In the applet, there may be useless dependent items, i.e. dependent items that do not have any contributing effect on the implementation of the applet function. In the embodiment of the application, all the dependent items corresponding to the function codes are detected, and the action of each dependent item on the applet is checked, so that the unused dependent items of the applet are determined.
In step 10512, the unused dependent items in the applet are deleted.
As an example, after determining the dependency term not used by the applet, the part of the dependency term not used is deleted, thereby realizing the compression processing of the function code.
In step 10513, a volume of static resources is acquired.
In step 10514, the static resources are replaced with network paths corresponding to the static resources.
In some embodiments, since the volume of the static resource is usually larger, for example, the volume of a picture may be 1M, when the applet is compressed, the static resource is directly replaced by the network path corresponding to the static resource, so that the compression of the static resource can be realized.
As an example, a developer may preset a first volume threshold of the static resource allowed to be stored by the applet during development, and replace the static resource with a network path corresponding to the static resource when the volume of the static resource exceeds the first volume threshold, thereby reducing the space occupied by the static resource.
In some embodiments, referring to fig. 3G, fig. 3G is a schematic flow chart of a compression processing method of an applet provided in an embodiment of the present application, and step 10514 shown in fig. 3F may be implemented by steps 105141 to 105142 in fig. 3G, which are described below.
In step 105141, the static resources are sent to the content distribution network such that the content distribution network allocates the static resources to the cache server.
Here, the content delivery network (CDN, content Delivery Network) is an intelligent virtual network built on the basis of the existing network, and by means of servers deployed in various places, users can obtain required content nearby through load balancing, content delivery, scheduling and other functional modules of the central platform.
In some embodiments, when the content distribution network is used, static resources can be distributed to the service node closest to the sender, namely the cache server, through a load balancing technology according to network traffic and comprehensive information such as connection of each service node, load condition, distance between the service node and the sender, response time and the like in real time.
In step 105142, a network path corresponding to the static resource returned by the cache server is received.
In some embodiments, when the cache server receives the static resource allocated by the content distribution network, the network path corresponding to the static resource is returned to the terminal where the sender is located, that is, the terminal for developing the applet, so that when the applet needs to use the static resource, the static resource stored in the cache server can be directly obtained according to the network path.
In step 1052, the compressed function code and static resources, and object files are formed into a compressed applet.
In some embodiments, when compression of the applet including the function code, static resources, and style is completed, the volume of the applet based on the three parts after compression is reduced compared to the original applet package, so that the compressed applet can be generated based on the reduced volume package.
In some embodiments, a developer can select a type to be compressed through a man-machine interaction interface of an operation terminal, and the terminal responds to the selection operation of the developer to call an applet compression tool to compress the type selected by the developer. In some cases, if the type selected by the developer does not include a style, the applet compression tool may automatically compress the style in addition to the type selected by the developer, generate a reduced volume package of the applet based on all compression results, and generate a compressed applet based on the reduced volume package of the applet.
In some embodiments, the patterns in the applet package may be automatically compressed by the applet compression tool upon detecting that the volume of the applet package exceeds a second volume threshold; if the volume of the applet package still exceeds the second volume threshold after the style is compressed, the other types are continued to be compressed by the applet compression tool until the volume of the applet package after processing is less than the second volume threshold, and the compressed applet is generated based on the applet package obtained at this time.
In the embodiment of the application, the corresponding class name set and the corresponding target data structure are respectively obtained through analyzing the applet list file assembly and each style file, each second class name in the target data structure is matched with each first class name in the class name set, and the compressed applet is generated based on the matched target class names, so that automatic compression of the styles of the applet is realized, redundant styles of the assemblies are not required to be cleaned manually, and the compression processing efficiency of the applet is greatly improved; in addition, the target class names obtained by matching are class names corresponding to the patterns required by the actual running process of the applet, so that the accuracy of the class names obtained by matching is improved.
In the following, an exemplary application of the embodiments of the present application in one practical scenario is described.
Referring to fig. 5, fig. 5 is a schematic diagram of an applet uploading interface provided in an embodiment of the present application. The developer develops the applet by operating the applet development tool displayed on the man-machine interaction interface (e.g., instant messaging client, live broadcast client, electronic map client, etc.) of the terminal, and when the applet is uploaded to the software warehouse after the applet development is completed, various controls as shown in fig. 5 are displayed on the man-machine interaction interface of the terminal, and in response to the selection operation of the developer on the code compression uploading control, the applet compression tool in the terminal is called to compress the applet, and after the compressed applet is obtained, the compressed applet is uploaded to the software warehouse for the common user to download and use the applet from the software warehouse.
Referring to fig. 6, fig. 6 is a schematic diagram of a compression processing method of an applet provided in an embodiment of the present application, which will be described with reference to fig. 6.
In step 201, the applet compression tool in the terminal scans all of the vue files under the Src directory of the applet.
As an example, after the developer completes the development process of the applet through the applet development tool in the terminal, the applet compression tool in the terminal is invoked to compress the applet. When the compression processing is performed by the applet compression tool in the terminal, a plurality of single file components are firstly scanned under the Src catalog, and the required patterns in each single file component can be the same or different, so that in order to know all the patterns required by the applet operation, all the vue files under the Src catalog are firstly required to be scanned.
In step 202, the applet compression tool in the terminal parses out the Style file from the Style block.
By way of example, an applet contains a number of single file components, one vue file consists of three parts, namely a Template block, a Script block, and a Style block. Wherein, template block: for setting content to be displayed by the component; script block: for exporting objects; style block: for setting a pattern. The parsing of the vue file specifically includes parsing of two parts, namely a Template block and a Style block, and in step 201, the applet compression tool parses the Style block to obtain a Style file.
As an example, a Style file introduced by a Style block may be parsed by a CSSJSON module in an applet compression tool to obtain a data structure corresponding to each Style file, where the data structure includes a class name and an attribute value corresponding to the class name, and the CSSJSON module is also called a CSS-JSON converter, and is configured to convert the Style file into a JSON format.
In step 203, the applet compression tool in the terminal merges the parsed style files together to obtain the target data structure.
As an example, one single file component corresponds to one style file, and there may be a common point in style files cited among multiple single file components, and when the parsed style files are combined together, repeated results obtained by parsing may be combined to obtain the target data structure.
In step 204, the applet compression tool in the terminal determines if there is an unresolved style file.
As an example, if the applet compression tool determines that there is still an unresolved style file, steps 202 and 203 are repeatedly performed until it is determined that there is no unresolved style file.
After all the style files in the applet are analyzed, the obtained target data structure is all the class names and the attribute values corresponding to the class names introduced by the applet, wherein the class names corresponding to a large number of redundant styles are contained.
In step 205, the applet compression tool in the terminal parses the DOM structure from the Template block.
By way of example, the Template block in each single file component is parsed by the vue-Template-Compiler block in the applet compression tool to obtain a corresponding syntax tree for each single file component, the syntax tree comprising a plurality of DOM nodes including nodes containing class names.
In step 206, the applet compression tool in the terminal extracts all class names from the DOM structure, resulting in a set of class names.
As an example, the applet compression tool searches for a node containing a class name from the DOM structure, and extracts the class name in the node to obtain a class name set, where a style corresponding to the class name in the class name set is a style required by the applet.
In step 207, the applet 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.
As an example, since there are a large number of second class names corresponding to redundant patterns in the target data structure, the second class names corresponding to the redundant patterns need to be removed, and the patterns corresponding to the first class names in the class name set are patterns required by the applet operation, so that the second class names and attribute values corresponding to the second class names which are successfully matched are patterns required by the applet operation, and the class names corresponding to the redundant patterns which are not successfully matched need to be removed.
In step 208, the applet compression tool in the terminal determines if all matches are complete.
As an example, if the applet compression tool determines that all matches have not been completed, step 207 is repeated until the applet compression tool determines that all matches have been completed.
In step 209, the applet compression tool in the terminal determines the reduced style file.
As an example, after the applet compression tool determines that all matches have been completed, the applet compression tool may determine the resulting class file as a reduced style file.
As an example, after the reduced style file is obtained, a package of applets may be constructed based on the reduced style file, the function code, and the static resources, and a compressed applet may be generated based on the constructed package of applets.
In some embodiments, the applet compression tool in the terminal may have another module division manner besides the module division manner shown in fig. 2A, that is, the applet compression tool may be divided into a main body module, a file management module, a style compaction module, a DOM parsing module and a merging and decomposing module according to the data processing and interaction flow of the applet compression tool. The modules cooperatively process to make the applet compressing tool realize the compression of the applet. The method for compressing the applet provided in the embodiment of the present application will be described below based on another module division manner of the applet compressing tool. Referring to fig. 7, fig. 7 is a schematic diagram of a compression processing method of an applet according to an embodiment of the present application. This will be described below with reference to fig. 7.
In step 301, the terminal receives a developer initiated invocation request of an applet compression tool.
As an example, the applet compression tool in the terminal may be a plug-in or code segment with code implementation functionality. After receiving a call request of the applet compression tool initiated by a developer, the terminal adds a hook function to trigger the applet compression tool, so that the applet compression tool starts compression operation.
As shown in fig. 7, the applet compression tool in the terminal includes a main body module, a file management module, a style compaction module, a DOM parsing module, and a merge decomposition module.
In step 302, a subject module in the applet compression tool sends a file collection instruction to a file management module.
As an example, after receiving a call request of an applet compression tool initiated by a developer, the terminal calls the applet compression tool and starts a compression operation through the applet compression tool. After the applet compression tool initiates the compression operation, a main body module in the applet compression tool sends file collection instructions to the file management module to collect the vue files in the applet.
In step 303, a file management module in the applet compression tool gathers vue files.
By way of example, the file management module in the applet compression tool would load all of the vue files (single file components) under the Src directory, with pages and components included under the Src directory.
In step 304, the file management module in the applet compression tool sends a file handling task to the style compaction module.
As an example, after the file management module in the applet compression tool gathers all of the vue files in the applet, a file handling task is sent to the style reduction module, which is used to instruct the style reduction module to turn on the style reduction task.
In step 305, the style reduction module in the applet compression tool parses the. vue files.
In step 306, the DOM parsing module in the applet compression tool parses the. vue files.
As an example, after the style reduction module triggers compiling and parsing, the DOM parsing module parses all the. vue files in the applet by using vue-Template-Compiler, and obtains syntax trees corresponding to the respective. vue files after the syntax parsing, wherein the process of parsing the syntax trees is a recursive process, and when one syntax tree is parsed, the next syntax tree is continuously parsed, and the process is loop circulation.
In step 307, the style reduction module in the applet compression tool parses the DOM node in the grammar tree.
As an example, parsing DOM nodes in the syntax tree results in a set of class names required for applet execution.
When the pattern simplifying module analyzes, the tree is traversed from the root node of the grammar tree, and hierarchical traversal is performed by a recursion method. Then find the node comprising class name from the node traversed, if the node has father node, and contain class name in father node, splice the class name of the node and class name of father node, get the combined class name, for example, there is the following code in a assembly: < div class= "a" > < div class= "b" > -i is b element, my parent node is a </div > i is a element </div >, in the DOM structure, the Class name of the peripheral div tag is "a", the Class name of the inner peripheral div tag is "ab", because the Class name "b" splices the Class name information of the parent node, but may be an independent style itself, so "b" is also a legal output. The condition for the end of the recursion is that all DOM nodes are traversed, and finally all node information containing class names is written into a list Set, but for the purpose of deduplication, a Set is preferably used, and after all DOM nodes are traversed, the last class name Set of the vue file is: ", a", a.b ", b" ].
In step 308, the merge decomposition module in the applet compression tool parses the imported style file.
As an example, style files are introduced into Style blocks of the vue file, the Style files are first located according to a path introduced by a single file component, then the file is loaded by CSSJSON, and a JSON data structure corresponding to the Style files is obtained after the loading, where the JSON data structure includes class names and attribute values corresponding to the class names included in the Style files.
In step 309, the style reduction module in the applet compression tool extracts the class name and the attribute value corresponding to the class name required for applet operation from the JSON data structure.
As an example, various kinds of names in the JSON data structure and various kinds of names in the class name set are matched, if the matching is successful, the class names in the JSON data structure are the class names corresponding to the styles required by the operation in the applet, and the class names which are successfully matched and the attribute values corresponding to the class names are extracted.
In step 310, the style reduction module in the applet compression tool merges the extracted class name and the attribute value corresponding to the class name.
As an example, the style reduction module in the applet compression tool merges all extracted class names and attribute values corresponding to the class names together to obtain all styles required for applet operation.
In step 311, the file management module in the applet compression tool writes the extracted class name and the attribute value corresponding to the class name to the independent class file.
As an example, the class name and the attribute value corresponding to the class name stored in the class file are all styles required by the running of the applet, and no style redundancy exists.
In step 313, the file management module in the applet compression tool sends the processing results to the tool body module.
In step 313, the terminal outputs a compressed style file obtained by the compression process performed by the applet compression tool.
On the mobile end, the smaller the volume of the App, the faster the loading speed, the same is applicable to the applet, and the applet itself has the requirement of limiting the package volume to 2M, so optimizing the package volume is a very important ring in daily work, and the package volume of the applet is roughly divided into 3 pieces of content, namely functional codes, styles and static resources. In the related technology, the redundancy of the small program page style is analyzed by adopting a manual processing mode, and redundant parts are removed, so that the purposes of simplifying the style and optimizing the volume of the package are achieved. However, the existing scheme has a plurality of places needing manual processing in the process of removing the redundant patterns, such as:
1. All class names in the component are collected.
2. The style segments referenced by the component are extracted from the referenced style file and the segments are assembled into a temporary style file.
3. And manually judging that all the style fragments referenced by the component are written into the temporary file, and terminating the simplifying work of the component style.
The related art realizes the compression processing of the applet in a manual processing mode, so that the compression processing efficiency is low, and the accuracy of a style simplifying result is low due to the high possibility of errors in the manual processing. In the compression processing method of the applet provided by the embodiment of the application, the corresponding class name set and target data structure are respectively obtained through analysis of the applet single file component and each style file, each second class name in the target data structure is matched with each first class name in the class name set, and the compressed applet is generated based on the matched target class names, so that automatic compression of the style of the applet is realized, redundant styles of the component are not required to be cleaned manually, and the compression processing efficiency of the applet is greatly improved; in addition, the target class names obtained by matching are class names corresponding to the patterns required by the actual running process of the applet, so that the accuracy of the class names obtained by matching is improved.
Continuing with the description below of an exemplary architecture of the applet compression processing device 43211 provided in embodiments of the present application implemented as a software module, in some embodiments, as shown in fig. 2A, the software module in the applet compression processing device 43211 may include: a parsing module 432111, a matching module 432112, and a generating module 432113; the parsing module 432111 is used for performing syntax parsing on each single file component in the applet to obtain a syntax tree corresponding to each single file component; the parsing module 432111 is further configured to parse the syntax tree corresponding to each single file component to obtain a class name set, where the class name set includes a first class name of the style file referenced by each single file component; the parsing module 432111 is further configured to parse each style file in the applet to obtain a target data structure, where the target data structure includes a second class name of each style file and an attribute value corresponding to the second class name; the matching module 432112 is configured to match each second class name in the target data structure with each first class name in the class name set, and store the matched target class name and an attribute value corresponding to the target class name in the object file; the generating module 432113 is configured to generate a compressed applet based on the object file.
In some embodiments, the parsing module 432111 is further configured to traverse the nodes included in each syntax tree, determine a target node including a first class name based on the plurality of nodes; the parsing module 432111 is further configured to cluster the first class names corresponding to the plurality of target nodes, to obtain a class name set.
In some embodiments, the parsing module 432111 is further configured to traverse the nodes included in each syntax tree, determine a first node including a first style class name from the plurality of nodes; the parsing module 432111 is further configured to, if the parent node of the first node has the second style class name, combine the first node and the parent node of the first node to obtain a combined node, and use the first node, the parent node of the first node, and the combined node as the target node.
In some embodiments, the first class name includes a single style class name and a combined style class name, the first node and a parent node of the first node correspond to the single style class name, and the merge node corresponds to the combined style class name.
In some embodiments, the parsing module 432111 is further configured to traverse the nodes included in each syntax tree, determine a first node including a first style class name from the plurality of 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 the parent node of the first node does not have a second style class name.
In some embodiments, the parsing module 432111 is further configured to parse each style file referenced in the applet to obtain a first data structure corresponding to each style file. The parsing module 432111 is further configured to perform deduplication processing on the second class name and the attribute value corresponding to the second class name in each first data structure, so as 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.
In some embodiments, the parsing module 432111 is further configured to write each second class name in each second data structure and an attribute value corresponding to the second class name into the list; the parsing module 432111 is further configured to use the T second class name as a mark to traverse the list, where T is greater than or equal to 1 and less than or equal to T, and T represents the number of the second class names in the list; and if the second class name which is the same as the t second class name exists in the list, deleting the same second class name and the attribute value corresponding to the same second class name in the list. The parsing module 432111 is further configured to use the list obtained after the iteration is completed as a target data structure.
In some embodiments, the matching module 432112 is further configured to search the set of class names with each second class name as an index; the matching module 432112 is further configured to, if a first class name identical to a second class name exists in the class name set, use the second class name as a target class name; the matching module 432112 is further configured to store the target class name and an attribute value corresponding to the target class name in the object file.
In some embodiments, the generating module 432113 is further configured to compress the function code and the static resources in the applet; the generating module 432113 is further configured to form the compressed function code, the static resource, and the object file into a compressed applet.
In some embodiments, the generating module 432113 is further configured to detect a dependency of the function code import and determine an unused dependency of the applet; the generation module 432113 is further configured to delete unused dependent items in the applet; the generation module 432113 is further configured to obtain a volume of the static resource; the generating module 432113 is further configured to replace the static resource with a network path corresponding to the static resource.
In some embodiments, the generating module 432113 is further configured to send the static resource to the content distribution network, such that the content distribution network allocates the static resource to the cache server; the generating module 432113 is further configured to receive a network path corresponding to the static resource returned by the cache server.
The present embodiment provides a storage medium storing executable instructions, in which the executable instructions are stored, which when executed by a processor, cause the processor to perform the compression processing method of the applet provided in the present embodiment, for example, the compression processing method of the applet as shown in fig. 3A to 3G.
In some embodiments, the storage medium may be FRAM, ROM, PROM, EPROM, EEPROM, flash, magnetic surface memory, optical disk, or CD-ROM; but may be a variety of devices including one or any combination of the above memories.
In some embodiments, the executable instructions may be in the form of programs, software modules, scripts, or code, written in any form of programming language (including compiled or interpreted languages, or declarative or procedural languages), and they may be deployed in any form, including as stand-alone programs or as modules, components, subroutines, or other units suitable for use in a computing environment.
As an example, the executable instructions may, but need not, correspond to files in a file system, may be stored as part of a file that holds other programs or data, e.g., in one or more scripts in an HTML document, in a single file dedicated to the program in question, or in multiple coordinated files (e.g., files that store one or more modules, sub-programs, or portions of code).
As an example, executable instructions may be deployed to be executed on one electronic device or on multiple electronic devices located at one site or, alternatively, on multiple electronic devices distributed across multiple sites and interconnected by a communication network.
The above is merely an example of the present invention and is not intended to limit the scope of the present invention. Any modification, equivalent replacement, improvement, etc. made within the spirit and scope of the present invention are included in the protection scope of the present invention.

Claims (15)

1. A method of compression processing of an applet, the method comprising:
carrying out grammar analysis processing on each single file component in the applet to obtain a grammar tree corresponding to each single file component;
analyzing the grammar tree corresponding to each single file component to obtain a class name set, wherein the class name set comprises a first class name of a style file referenced by each single file component;
analyzing each style file in the applet to obtain a target data structure, wherein the target data structure comprises a second class name of each style file and an attribute value corresponding to the second class name;
matching each second class name in the target data structure with each first class name in the class name set, and storing the matched target class name and the attribute value corresponding to the target class name into an object file;
And generating the compressed applet based on the object file.
2. The method of claim 1, wherein parsing the syntax tree corresponding to each single file component to obtain a class name set comprises:
traversing nodes included in each grammar tree, and determining a target node comprising a first class name based on a plurality of nodes;
clustering the first class names respectively corresponding to the target nodes to obtain a class name set.
3. The method of claim 2, wherein traversing the nodes included in each of the syntax trees, determining a target node including a first class name based on a plurality of the nodes, comprises:
traversing nodes included in each grammar tree, and determining a first node including a first style class name from a plurality of nodes;
if the father node of the first node has the second style name, merging the first node and the father node of the first node to obtain a merged node, and taking the first node, the father node of the first node and the merged node as the target node.
4. The method of claim 3, wherein,
The first class name comprises a single style class name and a combined style class name, the first node and a father node of the first node correspond to the single style class name, and the combined node corresponds to the combined style class name.
5. The method of claim 2, wherein traversing the nodes included in each of the syntax trees, determining a target node from a plurality of the nodes that includes a first class name, comprises:
traversing nodes included in each grammar tree, and determining a first node including a first style class name from a plurality of nodes;
and if the first node does not have a father node or the father node of the first node does not have a second style class name, the first node is used as the target node.
6. The method of claim 1, wherein said parsing each of said style files in said applet results in a target data structure comprising:
analyzing each style file referenced in the applet to obtain a first data structure corresponding to each style file;
performing de-duplication 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;
And obtaining a target data structure based on the second data structure corresponding to each style file.
7. The method of claim 6, wherein the obtaining a target data structure based on the second data structure corresponding to each style file comprises:
writing each second class name in each second data structure and the attribute value corresponding to the second class name into a list;
the iteration t performs the following process: traversing the list by taking the T second class name as a mark, wherein T is more than or equal to 1 and less than or equal to T, and the number of the second class names in the list is represented by T; if the second class name which is the same as the t second class name exists in the list, deleting the same second class name and the attribute value corresponding to the same second class name in the list;
and taking the list obtained after the iteration is completed as a target data structure.
8. The method of claim 1, wherein said matching each of said second class names in said target data structure with each of said first class names in said set of class names and saving the matched target class name and said attribute value corresponding to said target class name to an object file comprises:
Searching the class name set by taking each second class name as an index;
if the class name set has the same first class name as the second class name, the second class name is used as the target class name;
and storing the attribute value corresponding to the target class name into an object file.
9. The method of any of claims 1 to 8, wherein the generating the compressed applet based on the object file comprises:
compressing the function codes and static resources in the applet;
and forming the compressed function code, the static resource and the object file into the compressed applet.
10. The method of claim 9, wherein,
the compressing the function code and the static resource in the applet comprises the following steps:
detecting a dependency of the function code import and determining the dependency not used by the applet;
deleting the unused dependent items in the applet;
acquiring the volume of the static resource;
and replacing the static resource with a network path corresponding to the static resource.
11. The method of claim 10, wherein the replacing the static resource with the network path to which the static resource corresponds comprises:
Transmitting the static resources to a content distribution network, so that the content distribution network distributes the static resources to a cache server;
and receiving a network path corresponding to the static resource returned by the cache server.
12. An applet compression processing apparatus, said apparatus comprising:
the parsing module is used for performing syntax parsing processing on each single file component in the applet 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 class name set, where the class name set includes a first class name of a style file referenced by each single file component;
the analysis module is further configured to analyze each style file in the applet to obtain a target data structure, where the target data structure includes a second class name of each style file and an attribute value corresponding to the second class name;
the matching module is used for matching each second class name in the target data structure with each first class name in the class name set, and storing the matched target class name and the attribute value corresponding to the target class name into an object file;
And the generation module is used for generating the compressed applet based on the object file.
13. An electronic device, the electronic device comprising:
a memory for storing executable instructions;
a processor for implementing the method of compression processing of the applet according to any one of claims 1 to 11 when executing executable instructions stored in said memory.
14. A computer-readable storage medium storing executable instructions for implementing the method of compression processing of an applet according to any one of claims 1 to 11 when executed by a processor.
15. A computer program product comprising a computer program or instructions which, when executed by a processor, performs the method of compression processing of the applet according to any one of claims 1 to 11.
CN202210758143.3A 2022-06-29 2022-06-29 Compression processing method and device for applet, electronic equipment and storage medium Pending CN117348880A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202210758143.3A CN117348880A (en) 2022-06-29 2022-06-29 Compression processing method and device for applet, electronic equipment and storage medium

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210758143.3A CN117348880A (en) 2022-06-29 2022-06-29 Compression processing method and device for applet, electronic equipment and storage medium

Publications (1)

Publication Number Publication Date
CN117348880A true CN117348880A (en) 2024-01-05

Family

ID=89365614

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210758143.3A Pending CN117348880A (en) 2022-06-29 2022-06-29 Compression processing method and device for applet, electronic equipment and storage medium

Country Status (1)

Country Link
CN (1) CN117348880A (en)

Similar Documents

Publication Publication Date Title
CN115617327A (en) Low code page building system, method and computer readable storage medium
CN111666526A (en) Page generation method, device, equipment and storage medium
US9952835B2 (en) Generation of hybrid enterprise mobile applications in cloud environment
CN103631601A (en) Code generation method and code generation device
CN113986241B (en) Configuration method and device of business rules based on knowledge graph
CN110688118B (en) Webpage optimization method and device
CN111143403B (en) SQL conversion method and device and storage medium
CN113448562B (en) Automatic logic code generation method and device and electronic equipment
CN111068328A (en) Game advertisement configuration table generation method, terminal device and medium
CN107391528B (en) Front-end component dependent information searching method and equipment
CN114064601B (en) Storage process conversion method, device, equipment and storage medium
CN114005055A (en) Method, device and equipment for generating algorithm application element and computer readable storage medium
CN113360385A (en) Test method, device, equipment and medium
CN116483850A (en) Data processing method, device, equipment and medium
CN113987337A (en) Search method, system, equipment and storage medium based on componentized dynamic arrangement
CN115794214B (en) Application module metadata management method, device, storage medium and apparatus
CN117008920A (en) Engine system, request processing method and device, computer equipment and storage medium
CN112287266A (en) Processing method and device for webpage configuration, equipment and storage medium
CN116028108A (en) Method, device, equipment and storage medium for analyzing dependent package installation time
CN112632113B (en) Operator management method and operator management system
CN117348880A (en) Compression processing method and device for applet, electronic equipment and storage medium
CN114816364A (en) Method, device and application for dynamically generating template file based on Swagger
CN116756184B (en) Database instance processing method, device, equipment, storage medium and program product
CN117251231B (en) Animation resource processing method, device and system and electronic equipment
CN114398073B (en) Application updating method and device based on RN

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination