Web application performance optimization method and device

Abstract

The invention relates to the technical field of computer software, in particular to a web application performance optimization method and equipment, which can set an entry point of a web application program according to a user instruction, and set a position and a naming rule of an output file; acquiring a configuration file, defining a task for processing the file according to the configuration file, specifying an input file of the task and an output position of the file after the task is executed, and automatically constructing a task process; javascript packaging is carried out according to an entry point of a web application program, the position of an output file and a naming rule, task packaging is carried out according to the task, the input file and the output position, and therefore web application packaging is achieved. According to the technical scheme, module packaging and task packaging are automatically carried out, clear organization and maintenance of codes are achieved, the application size is reduced, and the loading speed and the operation efficiency are improved; and the task process can be automatically constructed, the development steps are simplified, the development period is shortened, and the project is easier to manage and subsequently maintain.

Description

Technical Field

[0001] The present invention relates to the technical field of computer software, and particularly to a method and device for optimizing the performance of web applications. Background Art

[0002] Currently, web applications have been widely penetrated into all walks of life and become an important platform for enterprises to interact with users, provide services, and disseminate information. From online shopping on e-commerce platforms to information sharing on social media, and then to various online office systems, web applications are everywhere, greatly changing people's lifestyles and working methods.

[0003] However, with the continuous development of web applications, there will be a situation where the code structure is chaotic and difficult to maintain. The codes of different functional modules are intertwined, which not only makes it difficult for developers to read and understand the code, but also increases the maintenance cost during subsequent function expansion and modification.

[0004] In terms of performance optimization, the loading speed of web applications directly affects the user experience, and the existing technology for performance optimization is insufficient. In terms of development efficiency, the existing technology usually manually processes resource packaging and optimization tasks, resulting in an extended development cycle and reduced efficiency. Summary of the Invention

[0005] In view of this, the purpose of the present invention is to provide a method and device for optimizing the performance of web applications to solve the problems in the prior art, such as unclear organization of web application codes, insufficient performance optimization, low development efficiency, and poor maintainability.

[0006] According to the first aspect of the embodiments of the present invention, a method for optimizing the performance of web applications is provided, including:

[0007] Setting the entry point of the web application program according to the user instruction, and setting the location and naming rule of the output file;

[0008] Obtaining a configuration file, defining tasks for processing files according to the configuration file, specifying the input file of the task and the output location of the file after the task is executed, and automatically constructing a task process;

[0009] Performing JavaScript packaging according to the entry point of the web application program, the location and naming rule of the output file, and performing task packaging according to the task, the input file, and the output location to achieve web application packaging.

[0010] Preferably, when performing JavaScript packaging in the method for optimizing the performance of web applications, it further includes:

[0011] If the web application contains dependent packages, it will not be packaged, and the dependent packages will be compressed and merged.

[0012] Preferably, for the web application performance optimization method, after obtaining the configuration file, it further includes: configuring a plurality of plugins according to the configuration file;

[0013] When performing task packaging, it further includes:

[0014] According to the task, call the pre-configured plugin to process the input file.

[0015] Preferably, for the web application performance optimization method, when processing the input file, it further includes:

[0016] If the input file is greater than 1, process multiple files simultaneously.

[0017] Preferably, the web application performance optimization method further includes:

[0018] Adopt the webpack-stream plugin in combination with webpack and gulp;

[0019] Use webpack to perform Javascript packaging and use gulp to perform task packaging.

[0020] According to the second aspect of the embodiments of the present invention, there is provided a web application performance optimization device, including:

[0021] A main controller, and a memory connected to the main controller;

[0022] The memory stores program instructions;

[0023] The main controller is used to execute the program instructions stored in the memory and execute the method described in any one of the above.

[0024] The technical solutions provided by the embodiments of the present invention may include the following beneficial effects:

[0025] It can be understood that the technical solution shown in the present invention can set the entry point of a web application according to a user instruction, and set the location and naming rule of an output file; obtain a configuration file, define a task for processing a file according to the configuration file, specify an input file of the task and an output location of the file after the task is executed, and automatically construct a task process; perform JavaScript packaging according to the entry point of the web application, the location and naming rule of the output file, and perform task packaging according to the task, the input file, and the output location, so as to implement web application packaging. The technical solution shown in the present invention automatically performs module packaging and task packaging, realizes clear organization and maintenance of code, reduces the application volume, improves the loading speed and running efficiency; and can automatically construct a task process, simplifies development steps, shortens the development cycle, and makes the project easier to manage and maintain subsequently.

[0026] It should be understood that the above general description and the following detailed description are only exemplary and explanatory, and cannot limit the present invention. BRIEF DESCRIPTION OF THE DRAWINGS

[0027] The drawings herein are incorporated into the specification and form a part of the specification, showing embodiments consistent with the present invention, and are used together with the specification to explain the principles of the present invention.

[0028] Figure 1 is a schematic diagram of steps of a web application performance optimization method shown according to an exemplary embodiment. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0029] Here, the exemplary embodiments will be described in detail, and the examples are shown in the drawings. When the following description refers to the drawings, unless otherwise indicated, the same numbers in different drawings represent the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with the present invention. On the contrary, they are merely examples of devices and methods consistent with some aspects of the present invention as detailed in the appended claims.

[0030] In one embodiment, a web application performance optimization method is provided, including:

[0031] Step S11: Set the entry point of the web application according to a user instruction, and set the location and naming rule of the output file;

[0032] Step S12: Obtain a configuration file, define a task for processing a file according to the configuration file, specify an input file of the task and an output location of the file after the task is executed, and automatically construct a task process;

[0033] Step S13: Perform JavaScript packaging according to the entry point of the web application, the location and naming rules of the output file, and perform task packaging according to the task, the input file, and the output location to achieve web application packaging.

[0034] It can be understood that the technical solution shown in the present invention can set the entry point of the web application according to the user instruction, and set the location and naming rules of the output file; obtain the configuration file, define the task of processing the file according to the configuration file, specify the input file of the task and the output location of the file after the task is executed, and automate the construction of the task process; perform JavaScript packaging according to the entry point of the web application, the location and naming rules of the output file, and perform task packaging according to the task, the input file, and the output location to achieve web application packaging. The technical solution shown in the present invention automates module packaging and task packaging, realizes clear organization and maintenance of the code, reduces the application volume, improves the loading speed and running efficiency; and can automate the construction of the task process, simplify the development steps, shorten the development cycle, and make the project easier to manage and maintain subsequently.

[0035] In specific practice, first configure the JavaScript packaging. Preferably, webpack can be used for modular packaging. Webpack is a widely used module packaging tool in the field of front-end development, mainly used for the static resource management and packaging of modern JavaScript applications. It can regard various types of resources in the project, such as JavaScript, CSS, pictures, etc., as individual modules, and finally generate static files that can run efficiently in the browser by processing, optimizing, and merging these modules.

[0036] First, in step S11, configure the JavaScript packaging, including configuring the entry and exit, and configuring the naming rules. When configuring the entry, the entry point of the application can be defined according to the user instruction. This entry point is usually the main file of the application, such as app.js, which is the starting point for the entire application to start and load. When configuring the exit, it is necessary to specify the location and naming rules of the output file according to the user instruction. For example, save the output file in the dist / directory and name it bundle.js to facilitate the subsequent management and call of the packaged file.

[0037] It should be noted that if the web application contains dependent packages, they will not be packaged, but compressed and merged. Dependent packages are essentially encapsulated code that implements specific functions. Developers can directly reference them in their own projects without having to write the code for these functions from scratch. For example, in a web application development, it may depend on packages for handling dates, packages for implementing network requests, etc.

[0038] In step S12, a packaging task is defined. Gulp can be used for task packaging. Gulp is a stream-based automated build system that is widely used in the front-end development field. It is mainly used to automate repetitive tasks in a project to improve development efficiency and code quality.

[0039] First, task definition is carried out. A series of tasks need to be defined to process files, which can be defined using the pre-obtained configuration file. The defined content is, for example:

[0040] gulp.task('styles',function(){}), which defines a task named'styles' using the gulp.task() method. The relevant logic for processing CSS files can be written in this task.

[0041] After that, the input files of the task and the output location of the files after the task execution need to be specified. To specify the input files of the task, for example, gulp.src('src / ** / *.css'), which means to select all CSS files in the src directory and its subdirectories as the processing objects. To specify the output location of the processed files, for example: gulp.dest('dist / '), the processed files will be output to the dist directory for unified management and deployment.

[0042] It should be noted that after obtaining the configuration file, it also includes: configuring multiple plugins according to the configuration file; when performing task packaging, being able to call the pre-configured plugins to process the input files according to the task.

[0043] In specific practice, a series of plugins can be used to process the source files. Taking the processing of CSS files as an example, the gulp-sass plugin is used to compile SCSS files into CSS files, and then the gulp-minify-css plugin is used to compress the CSS files to achieve preprocessing and optimization of the files.

[0044] According to the above content, the task flow can be automatically built. When executing the task, the defined task will be automatically run to process the input files.

[0045] When integrating plugins, multiple plugins can be integrated to meet the processing requirements of different types of files, enriching the functions and flexibility of task processing.

[0046] It should be noted that when the task is executed, if the input file is greater than 1, multiple files are processed simultaneously. Gulp uses streams to process files, allowing multiple files to be processed simultaneously to improve efficiency.

[0047] After configuring JavaScript packaging and task packaging, the webpack-stream plugin can be used to combine webpack and gulp; webpack is used for JavaScript packaging, and gulp is used for task packaging. By combining webpack and gulp through the webpack-stream plugin, modular packaging and resource optimization of the project can be achieved.

[0048] In another embodiment, a web application performance optimization device is provided, including:

[0049] A main controller and a memory connected to the main controller;

[0050] The memory stores program instructions;

[0051] The main controller is used to execute the program instructions stored in the memory and execute the method described in any one of the above.

[0052] It can be understood that the same or similar parts in the above embodiments can be referred to each other, and the content not detailed in some embodiments can be seen in the same or similar content of other embodiments.

[0053] It should be noted that in the description of the present invention, terms such as "first" and "second" are only used for descriptive purposes and cannot be understood as indicating or implying relative importance. In addition, in the description of the present invention, unless otherwise specified, the meaning of "multiple" refers to at least two.

[0054] Any process or method description in the flowchart or described in other ways herein can be understood as representing a module, segment, or part of code including one or more executable instructions for implementing a specific logical function or process, and the scope of the preferred embodiments of the present invention includes additional implementations, where the functions can be executed in a substantially simultaneous manner or in the reverse order according to the involved functions, rather than in the order shown or discussed, which should be understood by those skilled in the technical field to which the embodiments of the present invention belong.

[0055] It should be understood that the various parts of the present invention can be implemented by hardware, software, firmware, or a combination thereof. In the above embodiments, multiple steps or methods can be implemented by software or firmware stored in a memory and executed by a suitable instruction execution system. For example, if implemented by hardware, as in another embodiment, any one or a combination of the following techniques well known in the art can be used: discrete logic circuits with logic gate circuits for implementing logic functions on data signals, application specific integrated circuits with appropriate combinational logic gate circuits, programmable gate arrays (PGAs), field programmable gate arrays (FPGAs), etc.

[0056] Those of ordinary skill in the art can understand that all or part of the steps carried by the method of the above embodiments can be completed by instructing relevant hardware through a program, and the program can be stored in a computer-readable storage medium. When the program is executed, it includes one or a combination of the steps of the method embodiments.

[0057] In addition, in each embodiment of the present invention, the functional units can be integrated into a processing module, or each unit can exist physically alone, or two or more units can be integrated into one module. The above integrated module can be implemented in the form of hardware or in the form of a software functional module. When the above integrated module is implemented in the form of a software functional module and sold or used as an independent product, it can also be stored in a computer-readable storage medium.

[0058] The above-mentioned storage medium can be a read-only memory, a magnetic disk, an optical disk, etc.

[0059] In the description of this specification, the description with reference to the terms "one embodiment", "some embodiments", "example", "specific example", or "some examples", etc. means that the specific features, structures, materials, or characteristics described in connection with the embodiment or example are included in at least one embodiment or example of the present invention. In this specification, the schematic representations of the above terms do not necessarily refer to the same embodiment or example. Moreover, the specific features, structures, materials, or characteristics described can be combined in a suitable manner in any one or more embodiments or examples.

[0060] Although the embodiments of the present invention have been shown and described above, it can be understood that the above embodiments are exemplary and should not be construed as limiting the present invention. Those of ordinary skill in the art can make changes, modifications, substitutions, and variations to the above embodiments within the scope of the present invention.

Claims

1. A method for optimizing web application performance, characterized in that, Including: Set the entry point of the web application according to the user's instruction, and set the location and naming rule of the output file; Obtain the configuration file, define the task of processing the file according to the configuration file, specify the input file of the task and the output location of the file after the task execution, and automate the construction of the task process; Perform JavaScript packaging according to the entry point of the web application, the location and naming rule of the output file, and perform task packaging according to the task, the input file and the output location to achieve web application packaging.

2. The web application performance optimization method according to claim 1, wherein When performing JavaScript packaging, it further includes: If there are dependent packages in the web application, do not package them, but perform compression and merging operations on the dependent packages.

3. The web application performance optimization method according to claim 1, wherein After obtaining the configuration file, it further includes: configuring multiple plugins according to the configuration file; When performing task packaging, it further includes: According to the task, call the pre-configured plugin to process the input file.

4. The web application performance optimization method according to claim 3, wherein When processing the input file, it further includes: If the input file is greater than 1, process multiple files simultaneously.

5. The web application performance optimization method according to claim 1, wherein It further includes: Adopt the webpack-stream plugin in combination with webpack and gulp; Use webpack for JavaScript packaging and use gulp for task packaging.

6. A web application performance optimization device, characterized in that, Including: A main controller and a memory connected to the main controller; The memory stores program instructions therein; The main controller is used to execute the program instructions stored in the memory and execute the method according to any one of claims 1 to 5.

Images