A genetic algorithm-based optimized front-end subcontracting and packaging method

Abstract

This invention provides a method for optimizing front-end sub-packaging based on a genetic algorithm, comprising the following steps: modifying a target micro-front-end project and extracting relevant data; optimizing target parameters using a genetic algorithm; and outputting the optimized parameters and a quantitative report of the optimization process. This method addresses the inability of existing methods to effectively coordinate and optimize the packaging of multiple independent sub-webpack projects. By applying this method, a genetic algorithm-based method for optimizing multi-project parameters, the loading speed of the resulting front-end package is significantly improved.

Description

Technical Field

[0001] The present invention relates to the field of production and manufacturing execution technology, and in particular to an optimized front-end subcontracting and packaging method based on a genetic algorithm. Background Art

[0002] Micro-frontends are a technical means and methodological strategy for multiple teams to jointly build modern web applications by independently releasing functions. Micro-frontends draw on the architectural concept of microservices, splitting a large front-end application into multiple independent and flexible small applications. Each application can be independently developed, run, and deployed, and then these small applications are combined into a complete application. Micro-frontends can not only integrate multiple projects into one, but also reduce the coupling between projects and improve project scalability. Compared with a monolithic front-end repository, the front-end repository under the micro-frontend architecture tends to be smaller and more flexible. With the maturity of technology and the complexity of business scenarios, the application of micro-frontends is becoming more and more extensive. Alibaba provides the Qiankun solution, and JD also provides a micro-app micro-frontend solution.

[0003] At present, the main process of micro-frontend packaging is to package each micro-frontend project separately. For packages larger than a certain threshold, they are split. During the subcontracting process, only the reuse of the current project package is considered. Even with manual intervention and optimization, some larger packages may be manually processed to achieve sharing among multiple packages, but it still cannot change the situation where each project is fighting alone. In particular, when each sub-project has different business logic and different loading order, it becomes difficult to optimize it as a whole. It lacks a universal and quantifiable method. Summary of the Invention

[0004] The purpose of the present invention is to provide an optimized front-end sub-packaging method based on genetic algorithm, in order to solve the problems existing in the background technology.

[0005] In order to achieve the above object, the present invention adopts the following technical solutions:

[0006] A genetic algorithm-based optimized front-end subcontracting and packaging method comprises the following steps:

[0007] Transform the target micro-frontend project and extract relevant data;

[0008] Optimize target parameters through genetic algorithms;

[0009] Output the optimized parameters and a quantitative report of the optimization process.

[0010] In some embodiments, the step of modifying the target micro-frontend project and extracting relevant data includes:

[0011] Read the package.json file of the sub-projects of the target micro-frontend project to obtain information about the third-party packages that each project depends on;

[0012] Modify the commands of the sub-projects of the target micro-frontend project so that webpack packaging-related parameters can be input through the command line or other means, and can be automatically deployed to the test server;

[0013] Define the business loading scenarios of the target micro-frontend project, define several common business scenarios, simulate user behavior through test software, and specify the weight of each scenario.

[0014] In some embodiments, the optimizing the target parameter by a genetic algorithm comprises:

[0015] Step 21: Use the parameters of each sub-project of the target micro-frontend project as the genetic composition of the algorithm and randomly initialize the initial values;

[0016] Step 22: Pass the current gene of the algorithm, that is, the parameters of each sub-project, into the package command after the sub-project transformation;

[0017] Step 23: Package each sub-project and automatically deploy it to the test server;

[0018] Step 24: On the test client, access or operate relevant business pages based on the business scenario, record the loading speed parameters, and calculate the final score based on the weights.

[0019] Step 25: Pass the score back to the algorithm as the fitness of the genetic algorithm;

[0020] Step 26: The genetic algorithm performs an iteration based on the fitness to evolve new genes;

[0021] Step 27: Repeat steps 22 to 26 until a satisfactory result is obtained or there is no significant progress within the specified iteration period.

[0022] The beneficial effects of the genetic algorithm-based optimized front-end subcontracting and packaging method provided in this application include but are not limited to:

[0023] It can significantly improve the page loading speed under the micro-frontend service framework and significantly reduce the package size.

[0024] In the example of a micro-frontend page consisting of three sub-projects, the main project is a React+Antd package, and the two sub-projects are React+Antd and Vue+Element packages. Without this optimization technology, the total size of the three packages is 2.2MB (after compression, there are 10 packages, and the optimized size is 1.4MB). The final release package size is reduced by more than 40%, with a total of 6 sub-packages, which can fully utilize the concurrency limit of the target Chrome browser and improve the loading speed by nearly 50% under the same network conditions. BRIEF DESCRIPTION OF THE DRAWINGS

[0025] Figure 1 It is a core algorithm flow chart of an embodiment of the invention. DETAILED DESCRIPTION

[0026] In order to make the purpose, technical solutions and advantages of this application more clearly understood, the present application is further described in detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain this application and are not intended to limit this application.

[0027] On the contrary, this application covers any alternatives, modifications, equivalents, and solutions made within the spirit and scope of this application as defined by the claims. Furthermore, to facilitate a better understanding of this application, certain specific details are described in detail below in the detailed description of this application. Those skilled in the art will be able to fully understand this application without these details.

[0028] The following will be combined Figure 1 A genetic algorithm-based optimized front-end sub-packaging method according to an embodiment of the present application is described in detail. It should be noted that the following embodiments are only used to explain the present application and do not constitute a limitation of the present application.

[0029] like Figure 1 As shown in the figure, a front-end subcontracting and packaging method based on genetic algorithm is proposed. For the convenience of explanation, we first assume that the front-end project to be optimized is driven by a micro-front-end architecture and includes a main project A and two sub-projects B and C. Projects A, B, and C are all packaged with webpack and are based on react and antd.

[0030] The steps include:

[0031] S1. Modify projects A, B, and C so that they can be packaged and deployed by inputting packaging parameters through the command line.

[0032] The above step S1 specifically includes the following steps:

[0033] S101. Read the package.json file of each project through code, and stipulate that all packages to be used at runtime are placed under the dependencies directory to obtain all parameter items that can be optimized.

[0034] S102: Modify the command lines of projects A, B, and C so that they can be packaged and subpackaged according to the parameters entered on the command line, and ultimately automatically deployed to the target test server. To accelerate algorithm iteration, this can support concurrent packaging of multiple sets of parameters and concurrent deployment to multiple ports on the target server. Once the release is complete, the algorithm main program described in S2 can be notified.

[0035] S103. Define the business scenarios that need to be used to verify the speed, record the loading speed of different routes of the pages released by the project, and optimize. For pages with lazy loading, use software similar to Selenium to simulate user behavior, record the loading speed of lazy loading components, and return it to the main algorithm program described in S2.

[0036] S2. Run a program based on a genetic algorithm to iteratively search for the best approach.

[0037] The above step S2 specifically includes the following steps:

[0038] S201. Based on the parameter items extracted from the project in S101, a plurality of groups of parameter values ​​are randomly generated as initial values ​​of the genetic algorithm. Each group of parameter values ​​serves as an individual in the population of the genetic algorithm. For example, the parameter items extracted from the project in S101 can be used as array indexes, and the array values ​​can be used as indexes of the packages generated in the final packaging. In particular, the index of some packages indicates packaging into the common package of each sub-project.

[0039] S202, converting the population genes generated in S101 into parameters of the packaging commands of each sub-project in accordance with the rules;

[0040] S203: Pass the parameters generated in S202 into each sub-project, run the packaging command, and automatically deploy to the test server;

[0041] S204. Under the business scenario described in S103, test the loading speed of the page on the test server described in S203, record the value, and calculate a value as the fitness of each individual of the algorithm based on the business scenario weight of the business scenario described in S103, and record the fitness of the individual with the highest fitness in this round of population;

[0042] S205. Based on the fitness described in S204, the existing genetic algorithm population is iterated once. According to the genetic algorithm, individuals with low fitness are eliminated, and excellent individuals are selected for reproduction, mutation, and gene exchange to calculate a new generation population.

[0043] S206. Repeat steps S201 to S205 above until an individual with satisfactory fitness is found. If there is no quantitative expectation for the individual with the best fitness, the end condition can be that the best fitness in the population has not improved significantly in the last 10 rounds.

[0044] S3. The genes of the best individual obtained in step S2 are used as the final result of this optimization and converted into parameters of each sub-project. The fitness changes during the optimization process can be output as a reference for the optimal value for developers to review.

[0045] Based on the above steps, the resulting packaging parameters for each sub-project effectively balance browser concurrency, reasonably arrange the size of each package, and reasonably merge common packages. This also achieves a relatively good loading experience in multiple specified business scenarios. This also eliminates the need for developers to constantly debug manually, achieving excellent results in terms of both development costs and final loading speed.

[0046] The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. Any modifications, equivalent substitutions and improvements made within the spirit and principles of the present invention should be included in the scope of protection of the present invention.

Claims

1. A front-end subcontracting and packaging method based on genetic algorithm, characterized in that: The following steps are involved: Transform the target micro-frontend project and extract relevant data; Optimize target parameters through genetic algorithm; Output optimized parameters and a quantitative report of the optimization process; The target micro-frontend project is transformed and relevant data is extracted, including: Read the package.json file of the sub-project of the target micro-frontend project to obtain information about the third-party packages that each project depends on; Modify the commands of the sub-projects of the target micro-frontend project so that webpack packaging-related parameters can be input through the command line or other means, and can be automatically deployed to the test server; Define the business loading scenarios of the target micro-frontend project, define several common business scenarios, simulate user behavior through test software, and specify the weight of each scenario; The target parameters are optimized by genetic algorithm; comprising: Step 21: Use the parameters of each sub-project of the target micro-frontend project as the genetic composition of the algorithm and randomly initialize the initial values; Step 22: Pass the current gene of the algorithm, that is, the parameters of each sub-project, into the package command after the sub-project transformation; Step 23: Package each sub-project and automatically deploy it to the test server; Step 24: On the test client, access or operate relevant business pages based on the business scenario, record the loading speed parameters, and calculate the final score based on the weights; Step 25: Pass the score back to the algorithm as the fitness of the genetic algorithm; Step 26: The genetic algorithm performs an iteration based on the fitness to evolve new genes; Step 27: Repeat steps 22 to 26 until a satisfactory result is obtained or there is no significant progress within the specified iteration period.

Images