CN105224314B - A kind of method and system for realizing front-end code Automatic Optimal - Google Patents
A kind of method and system for realizing front-end code Automatic Optimal Download PDFInfo
- Publication number
- CN105224314B CN105224314B CN201510573611.XA CN201510573611A CN105224314B CN 105224314 B CN105224314 B CN 105224314B CN 201510573611 A CN201510573611 A CN 201510573611A CN 105224314 B CN105224314 B CN 105224314B
- Authority
- CN
- China
- Prior art keywords
- resource
- file
- module
- optimization
- css
- 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.)
- Active
Links
Landscapes
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
- Compression Of Band Width Or Redundancy In Fax (AREA)
- Document Processing Apparatus (AREA)
Abstract
The present invention relates to a kind of method and system for realizing front-end code Automatic Optimal, including server end, and pending resource file and demo files are carried out specific scanning；The resource file optimizes processing respectively；The picture resource carries out the operations such as compression optimization renaming respectively, and corresponds to replace reference all in css and js, html file one by one；Css, js resource carries out on-demand, merging compression in order, and replaces reference all in html files one by one；The redundant resource file is removed automatically；Quoting resource Automatic Optimal loading sequence in the html files；It ultimately generates compressed package and carries out version management；The present invention substantially increases front-end code quality, realizes that resource unifies Automatic Optimal, promotes the unified management of version, substantially increase development efficiency and greatly reduce the docking complexity with rear end developer.
Description
Technical field
The present invention relates to a kind of method and system for realizing front-end code Automatic Optimal, belong to computer realm.
Background technology
In the prior art, generally use manual mode carries out resource file optimization during web front end code development, manually
Carry out version management.Aforesaid operations method has a disadvantage that：1, code optimization result is not necessarily unified, 2, repeat manual operation frequency
It is numerous, be easy error, 3, html code contents repeat replace heavy workload, efficiency is low, 4, version management missing.
Invention content
The technical problem to be solved by the present invention is to for the deficiency of the prior art and flow, providing one kind can improve
The method and system of the realization front-end code Automatic Optimal of front-end code quality.
The technical solution that the present invention solves above-mentioned technical problem is as follows：A method of realizing front-end code Automatic Optimal,
Specifically include following steps：
Step 1：Obtain a resource bundle for including multiple resources file；
Step 2：Automatically scanning is carried out to all resource files in the resource bundle, extracts the money wherein used
Source file, resource file to be used are recorded as different arrays respectively according to different classes of；
Step 3：Same type optimization and renaming are carried out to different classes of array respectively, obtain optimization file；
Step 4：A variety of tests, and the report that outputs test result are carried out to optimization file, generated according to test result report
Resource optimization scheme；
Step 5：Redundant resource in resource bundle is removed, calls resource optimization schemes generation mapping table, and will be after processing
Resource bundle carry out compression generate resource compressed package；
Step 6：Resource compressed package is docked with Version, realizes and version management is carried out by mapping table.
The beneficial effects of the invention are as follows：The present invention substantially increases front-end code quality, realizes that resource unifies Automatic Optimal,
The unified management for promoting version substantially increases development efficiency and greatly reduces and the docking of rear end developer complexity
Degree.
Based on the above technical solution, the present invention can also be improved as follows.
Further, the resource bundle in the step 1 includes the resource text of the types such as css, js, html and image
Part, and have specific directory hierarchy between the multiple resources file.
Further, the step 3 specifically includes following steps：
Step 3.1：Judge whether be corresponding picture resource array, if so, execute step 3.2；Otherwise, step is executed
3.3；
Step 3.2：Same type optimization and renaming are carried out to the array；It replaces in css, js, html to the picture
Reference；
Step 3.3：Css, js file associated by html files are scanned, and merges compression with required in order, is replaced
Change the reference to css, js file in html files；And the loading sequence of css and js is adjusted, obtain optimization file.
Further, the optimization file packet html files, css files and js files.
Further, the test in the step 4 includes normative testing, performance test and safety detection etc..
Further, the mapping table generated in the step 5 includes caching mapping table and resource mapping table etc..
The technical solution that the present invention solves above-mentioned technical problem is as follows：A kind of system for realizing front-end code Automatic Optimal,
Including acquisition module, scan module, optimization module, test module, compression module and to connection module；
The acquisition module is for obtaining a resource bundle for including multiple resources file；
The scan module is used to carry out automatically scanning to all resource files in the resource bundle, and extraction is wherein
The resource file used, resource file to be used are recorded as different arrays respectively according to different classes of；
The optimization module obtains optimization text for carrying out same type optimization and renaming to different classes of array respectively
Part；
The test module is used to carry out a variety of tests, and the report that outputs test result to optimization file, is tied according to test
Fruit report generation resource optimization scheme；
The compression module is used to remove redundant resource in resource bundle, calls resource optimization schemes generation mapping table,
And resource bundle carries out compression generation resource compressed package by treated；
It is described that connection module is used to dock resource compressed package with Version, it realizes and version is carried out by mapping table
Management.
The beneficial effects of the invention are as follows：The present invention substantially increases front-end code quality, realizes that resource unifies Automatic Optimal,
The unified management for promoting version substantially increases development efficiency and greatly reduces and the docking of rear end developer complexity
Degree.
Based on the above technical solution, the present invention can also be improved as follows.
Further, the resource bundle in the acquisition module includes the resource of the types such as css, js, html and image
File, and have specific directory hierarchy between the multiple resources file.
Further, the optimization module includes judgment module, renamer module and scanning replacement module；
The judgment module be used for judge whether be corresponding picture resource array, if so, triggering renamer module；It is no
Then, driver sweep replacement module；
The renamer module is used to carry out same type optimization and renaming to the array；It replaces in css, js, html
Reference to the picture；
Css, js file associated by the scanning replacement module scanning html files, and merged in order with required
The reference to css, js file in html files is replaced in compression；And the loading sequence of css and js is adjusted, obtain optimization file.
Further, the optimization file packet html files, css files and js files.
Further, the test in the test module includes normative testing, performance test and safety detection etc..
Further, the mapping table generated in the compression module includes caching mapping table and resource mapping table etc..
The present invention includes that pending resource file and demo files are carried out specific scanning by server end；The resource text
Part optimizes processing respectively；The picture resource carries out the operations such as compression optimization renaming, and corresponding replacement css one by one respectively
With reference all in js, html file；Css, js resource carries out on-demand, merging compression in order, and replaces one by one
All references in html files；The redundant resource file is removed automatically；Quoting resource is automatic in the html files
Optimized loading sequence；It ultimately generates compressed package and carries out version management.
Description of the drawings
Fig. 1 is a kind of method flow diagram for realizing front-end code Automatic Optimal described in the embodiment of the present invention；
Fig. 2 is a kind of system structure diagram for realizing front-end code Automatic Optimal described in the embodiment of the present invention.
In attached drawing, parts list represented by the reference numerals are as follows：
1, acquisition module, 2, scan module, 3, optimization module, 4, test module, 5, compression module, 6, to connection module, 31,
Judgment module, 32, renamer module, 33, scanning replacement module.
Specific implementation mode
The principle and features of the present invention will be described below with reference to the accompanying drawings, and the given examples are served only to explain the present invention, and
It is non-to be used to limit the scope of the present invention.
As shown in Figure 1, for a kind of method for realizing front-end code Automatic Optimal described in the embodiment of the present invention, specifically include
Following steps：
Step 1：Obtain a resource bundle for including multiple resources file；
Step 2：Automatically scanning is carried out to all resource files in the resource bundle, extracts the money wherein used
Source file, resource file to be used are recorded as different arrays respectively according to different classes of；
Step 3：Judge whether be corresponding picture resource array, if so, execute step 4；Otherwise, step 5 is executed；
Step 4：Same type optimization and renaming are carried out to the array；It replaces in css, js, html to the picture
Reference；
Step 5：Css, js file associated by html files are scanned, and merges compression with required in order, is replaced
To the reference of css, js file in html files；And the loading sequence of css and js is adjusted, obtain optimization file；
Step 6：A variety of tests, and the report that outputs test result are carried out to optimization file, generated according to test result report
Resource optimization scheme；
Step 7：Redundant resource in resource bundle is removed, calls resource optimization schemes generation mapping table, and will be after processing
Resource bundle carry out compression generate resource compressed package；
Step 8：Resource compressed package is docked with Version, realizes and version management is carried out by mapping table.
Further, the resource bundle in the step 1 includes the resource text of the types such as css, js, html and image
Part, and have specific directory hierarchy between the multiple resources file.
The optimization file packet html files, css files and js files.
Test in the step 6 includes normative testing, performance test and safety detection etc..
The mapping table generated in the step 7 includes caching mapping table and resource mapping table etc..
As shown in Fig. 2, for a kind of system for realizing front-end code Automatic Optimal described in the embodiment of the present invention, including obtain
Module 1, scan module 2, optimization module 3, test module 4, compression module 5 and to connection module 6；
The acquisition module 1 is for obtaining a resource bundle for including multiple resources file；
The scan module 2 is used to carry out automatically scanning to all resource files in the resource bundle, extracts it
The middle resource file used, resource file to be used are recorded as different arrays respectively according to different classes of；
The optimization module 3 is optimized for carrying out same type optimization and renaming to different classes of array respectively
File；
The test module 4 is used to carry out a variety of tests, and the report that outputs test result to optimization file, is tied according to test
Fruit report generation resource optimization scheme；
The compression module 5 is used to remove redundant resource in resource bundle, calls resource optimization schemes generation mapping table,
And resource bundle carries out compression generation resource compressed package by treated；
It is described that connection module 6 is used to dock resource compressed package with Version, it realizes and version is carried out by mapping table
This management.
Resource bundle in the acquisition module 1 includes the resource file of the types such as css, js, html and image,
And has specific directory hierarchy between the multiple resources file.
The optimization module 3 includes judgment module 31, renamer module 32 and scanning replacement module 33；
The judgment module 31 be used for judge whether be corresponding picture resource array, if so, triggering renamer module
32；Otherwise, driver sweep replacement module 33；
The renamer module 32 is used to carry out same type optimization and renaming to the array；Replace css, js, html
In reference to the picture；
The scanning replacement module 33 scans css, js file associated by html files, and is closed in order with required
And compress, replace the reference to css, js file in html files；And the loading sequence of css and js is adjusted, obtain optimization file.
The optimization file packet html files, css files and js files.
Test in the test module 4 includes normative testing, performance test and safety detection etc..
The mapping table generated in the compression module 5 includes caching mapping table and resource mapping table etc..
The foregoing is merely presently preferred embodiments of the present invention, is not intended to limit the invention, it is all the present invention spirit and
Within principle, any modification, equivalent replacement, improvement and so on should all be included in the protection scope of the present invention.
Claims (8)
1. a kind of method for realizing front-end code Automatic Optimal, which is characterized in that specifically include following steps：
Step 1：Obtain a resource bundle for including multiple resources file；
Step 2：Automatically scanning is carried out to all resource files in the resource bundle, extracts the resource text wherein used
Part, resource file to be used are recorded as different arrays respectively according to different classes of；
Step 3：Same type optimization and renaming are carried out to different classes of array respectively, obtain optimization file；
Step 4：A variety of tests, and the report that outputs test result are carried out to optimization file, resource is generated according to test result report
Prioritization scheme；
Step 5：Remove resource bundle in redundant resource, call resource optimization schemes generation mapping table, and will treated money
Source file packet carries out compression and generates resource compressed package；
Step 6：Resource compressed package is docked with Version, realizes and version management is carried out by mapping table；
Wherein, the step 3 specifically includes following steps：
Step 3.1：Judge whether be corresponding picture resource array, if so, execute step 3.2；Otherwise, step 3.3 is executed；
Step 3.2：Same type optimization and renaming are carried out to the array；It replaces and the picture is drawn in css, js, html
With；
Step 3.3：Css, js file associated by html files are scanned, and merges compression with required in order, is replaced
To the reference of css, js file in html files；And the loading sequence of css and js is adjusted, obtain optimization file.
2. a kind of method for realizing front-end code Automatic Optimal according to claim 1, which is characterized in that the step 1
In resource bundle include css, js, html and image type resource file, and between the multiple resources file
Has specific directory hierarchy.
3. according to a kind of method for realizing front-end code Automatic Optimal of claim 1-2 any one of them, which is characterized in that institute
It includes html files, css files and js files to state optimization file.
4. a kind of method for realizing front-end code Automatic Optimal according to claim 3, which is characterized in that the step 4
In test include normative testing, performance test and safety detection.
5. a kind of method for realizing front-end code Automatic Optimal according to claim 3, which is characterized in that the step 5
The mapping table of middle generation includes caching mapping table and resource mapping table.
6. a kind of system for realizing front-end code Automatic Optimal, which is characterized in that including acquisition module, scan module, optimization mould
Block, test module, compression module and to connection module；
The acquisition module is for obtaining a resource bundle for including multiple resources file；
The scan module is used to carry out automatically scanning to all resource files in the resource bundle, and extraction is wherein made
Resource file, resource file to be used are recorded as different arrays respectively according to different classes of；
The optimization module obtains optimization file for carrying out same type optimization and renaming to different classes of array respectively；
The test module is used to carry out a variety of tests, and the report that outputs test result to optimization file, according to test result report
It accuses and generates resource optimization scheme；
The compression module calls resource optimization schemes generation mapping table, and will for removing redundant resource in resource bundle
Resource bundle that treated carries out compression and generates resource compressed package；
It is described that connection module is used to dock resource compressed package with Version, it realizes and version pipe is carried out by mapping table
Reason；
Wherein, the optimization module includes judgment module, renamer module and scanning replacement module；
The judgment module be used for judge whether be corresponding picture resource array, if so, triggering renamer module；Otherwise,
Driver sweep replacement module；
The renamer module is used to carry out same type optimization and renaming to the array；It replaces in css, js, html to institute
State the reference of picture；
Css, js file associated by the scanning replacement module scanning html files, and in order pressure is merged with required
The reference to css, js file in html files is replaced in contracting；And the loading sequence of css and js is adjusted, obtain optimization file.
7. a kind of system for realizing front-end code Automatic Optimal according to claim 6, which is characterized in that the acquisition mould
Resource bundle in the block includes the resource file of css, js, html and image type, and the multiple resources file it
Between have specific directory hierarchy.
8. according to a kind of system for realizing front-end code Automatic Optimal of claim 6-7 any one of them, which is characterized in that institute
It includes html files, css files and js files to state optimization file.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510573611.XA CN105224314B (en) | 2015-09-09 | 2015-09-09 | A kind of method and system for realizing front-end code Automatic Optimal |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510573611.XA CN105224314B (en) | 2015-09-09 | 2015-09-09 | A kind of method and system for realizing front-end code Automatic Optimal |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN105224314A CN105224314A (en) | 2016-01-06 |
| CN105224314B true CN105224314B (en) | 2018-07-17 |
Family
ID=54993311
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201510573611.XA Active CN105224314B (en) | 2015-09-09 | 2015-09-09 | A kind of method and system for realizing front-end code Automatic Optimal |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN105224314B (en) |
Families Citing this family (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108241902A (en) * | 2016-12-23 | 2018-07-03 | 南京壹进制信息技术股份有限公司 | A kind of Web projects and performance optimization method |
| CN107291474A (en) * | 2017-06-23 | 2017-10-24 | 郑州云海信息技术有限公司 | A kind of front end engineering automates constructing system |
| CN107577465B (en) * | 2017-09-21 | 2021-04-27 | 国云科技股份有限公司 | Method for correcting webpage code |
| CN109558548B (en) * | 2017-09-25 | 2021-05-25 | 北京国双科技有限公司 | Method for eliminating CSS style redundancy and related product |
| CN108536463B (en) * | 2018-04-09 | 2021-12-21 | 深圳市腾讯网络信息技术有限公司 | Method, device and equipment for acquiring resource package and computer readable storage medium |
| CN108959455B (en) * | 2018-06-15 | 2020-12-04 | 未鲲(上海)科技服务有限公司 | Single-page Web application implementation method and device, computer equipment and storage medium |
| CN109344277B (en) * | 2018-08-31 | 2020-10-20 | 网易传媒科技（北京）有限公司 | Picture processing method, device, medium and computing equipment |
| CN110704101A (en) * | 2019-09-06 | 2020-01-17 | 平安普惠企业管理有限公司 | Code file construction method, device, equipment and computer readable storage medium |
| CN111506363B (en) * | 2020-04-21 | 2022-06-14 | 福建天晴在线互动科技有限公司 | Source code management method and system based on unity engine |
| CN114065703A (en) * | 2021-11-08 | 2022-02-18 | 武汉联影医疗科技有限公司 | File processing method and device, computer equipment and storage medium |
| CN113835740B (en) * | 2021-11-29 | 2022-02-22 | 山东捷瑞数字科技股份有限公司 | Search engine optimization-oriented automatic front-end code repairing method |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102799640A (en) * | 2012-06-27 | 2012-11-28 | 用友软件股份有限公司 | Page loading device and page loading method |
| CN104133685A (en) * | 2014-08-05 | 2014-11-05 | 广州唯品会网络技术有限公司 | Method and system for front-end development of website |
| CN104408178A (en) * | 2014-12-12 | 2015-03-11 | 用友软件股份有限公司 | Device and method for WEB control loading |
-
2015
- 2015-09-09 CN CN201510573611.XA patent/CN105224314B/en active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102799640A (en) * | 2012-06-27 | 2012-11-28 | 用友软件股份有限公司 | Page loading device and page loading method |
| CN104133685A (en) * | 2014-08-05 | 2014-11-05 | 广州唯品会网络技术有限公司 | Method and system for front-end development of website |
| CN104408178A (en) * | 2014-12-12 | 2015-03-11 | 用友软件股份有限公司 | Device and method for WEB control loading |
Also Published As
| Publication number | Publication date |
|---|---|
| CN105224314A (en) | 2016-01-06 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN105224314B (en) | A kind of method and system for realizing front-end code Automatic Optimal | |
| CN110704518B (en) | Business data processing method and device based on Flink engine | |
| CN105701195A (en) | Method and system for implementing automatic sorted storing according to file types | |
| CN105491395B (en) | Server video management method and system | |
| CN1767453A (en) | Automatic test method and system | |
| CN104516732A (en) | Application crash report method and system | |
| CN104991860A (en) | WEB front-end automated development method and system | |
| CN111177193A (en) | Flink-based log streaming processing method and system | |
| CN107247582A (en) | It is a kind of to automatically generate the method that CAN sends and receives code | |
| CN104765721A (en) | Makeup handling method and device | |
| CN105142035A (en) | Video stream slice transmitting system and method | |
| CN104469431A (en) | Method and system for reporting abnormal operation of set top box and set top box | |
| CN104410799A (en) | Distributed technical review method | |
| CN111814906B (en) | Express delivery face list recognition model transplanting method, device, equipment and storage medium | |
| CN113489791B (en) | Image uploading method, image processing method and related devices | |
| CN101751260B (en) | Business object persistence processing method based on dynamic labels | |
| CN108965295A (en) | A kind of compressing file merging method and relevant apparatus | |
| CN107959662B (en) | Website security detection method and system | |
| CN105893521A (en) | Reading-and-writing separation HBase warehousing method | |
| CN113570443B (en) | Method for fusing tax business system and device for fusing business system | |
| CN103560976B (en) | A kind of method, apparatus and system that control data are sent | |
| CN104866255A (en) | Order processing method and order processing system | |
| CN106020821B (en) | Data processing method and device and terminal equipment | |
| CN104506935A (en) | Audio-video file synthesis method based on fragmentation technique | |
| CN109840244A (en) | A kind of image type conversion method and device |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |