一种实现前端代码自动优化的方法及系统的制作方法
【技术领域】
[0001]本发明涉及一种实现前端代码自动优化的方法及系统，属于计算机领域。
【背景技术】
[0002]现有技术中，Web前端代码开发过程中通常采用手工方式进行资源文件优化，手动进行版本管理。上述操作方法有如下缺点:1、代码优化结果不一定统一，2、重复手动操作频繁，容易出错，3、html代码内容重复替换工作量大，效率低，4、版本管理缺失。
【发明内容】
[0003]本发明所要解决的技术问题是，针对现有技术和流程的不足，提供一种可以提高前端代码质量的实现前端代码自动优化的方法及系统。
[0004]本发明解决上述技术问题的技术方案如下:一种实现前端代码自动优化的方法，具体包括以下步骤:
[0005]步骤1:获取一个包含多种资源文件的资源文件包；
[0006]步骤2:对所述资源文件包中的所有资源文件进行自动扫描，提取其中被使用的资源文件，将被使用的资源文件按照不同类别分别记录成不同数组；
[0007]步骤3:分别对不同类别的数组进行同类型优化并重命名，获得优化文件；
[0008]步骤4:对优化文件进行多种测试，并输出测试结果报告，根据测试结果报告生成资源优化方案；
[0009]步骤5:移除资源文件包中冗余资源，调用资源优化方案生成映射表，并将处理后的资源文件包进行压缩生成资源压缩包；
[0010]步骤6:将资源压缩包与版本管理工具对接，实现通过映射表进行版本管理。
[0011]本发明的有益效果是:本发明大大提高了前端代码质量，实现资源统一自动优化，促进版本的统一管理，大大提高了开发效率以及大大降低了和后端开发人员的对接复杂度。
[0012]在上述技术方案的基础上，本发明还可以做如下改进。
[0013]进一步，所述步骤I中的资源文件包中包括css、js、html和image等类型的资源文件，并且所述多种资源文件之间具备特定的目录层级结构。
[0014]进一步，所述步骤3具体包括以下步骤:
[0015]步骤3.1:判断是否是对应图片资源的数组，如果是，执行步骤3.2 ;否则，执行步骤 3.3 ；
[0016]步骤3.2:对所述数组进行同类型优化并重命名；替换css、js、html中对所述图片的引用；
[0017]步骤3.3:扫描html文件所关联的css、js文件，并按顺序和所需进行合并压缩，替换html文件中对css、js文件的引用；并调整css和js的载入顺序，得到优化文件。
[0018]进一步，所述优化文件包html文件、css文件和js文件。
[0019]进一步，所述步骤4中的测试包括规范测试、性能测试和安全检测等。
[0020]进一步，所述步骤5中生成的映射表包括缓存映射表和资源映射表等。
[0021]本发明解决上述技术问题的技术方案如下:一种实现前端代码自动优化的系统，包括获取模块、扫描模块、优化模块、测试模块、压缩模块和对接模块；
[0022]所述获取模块用于获取一个包含多种资源文件的资源文件包；
[0023]所述扫描模块用于对所述资源文件包中的所有资源文件进行自动扫描，提取其中被使用的资源文件，将被使用的资源文件按照不同类别分别记录成不同数组；
[0024]所述优化模块用于分别对不同类别的数组进行同类型优化并重命名，获得优化文件；
[0025]所述测试模块用于对优化文件进行多种测试，并输出测试结果报告，根据测试结果报告生成资源优化方案；
[0026]所述压缩模块用于移除资源文件包中冗余资源，调用资源优化方案生成映射表，并将处理后的资源文件包进行压缩生成资源压缩包；
[0027]所述对接模块用于将资源压缩包与版本管理工具对接，实现通过映射表进行版本管理。
[0028]本发明的有益效果是:本发明大大提高了前端代码质量，实现资源统一自动优化，促进版本的统一管理，大大提高了开发效率以及大大降低了和后端开发人员的对接复杂度。
[0029]在上述技术方案的基础上，本发明还可以做如下改进。
[0030]进一步，所述获取模块中的资源文件包中包括css、js、html和image等类型的资源文件，并且所述多种资源文件之间具备特定的目录层级结构。
[0031]进一步，所述优化模块包括判断模块、重命名模块和扫描替换模块；
[0032]所述判断模块用于判断是否是对应图片资源的数组，如果是，触发重命名模块；否贝IJ，触发扫描替换模块；
[0033]所述重命名模块用于对所述数组进行同类型优化并重命名；替换css、js.html中对所述图片的引用；
[0034]所述扫描替换模块扫描html文件所关联的css、js文件，并按顺序和所需进行合并压缩，替换html文件中对css、js文件的引用；并调整css和js的载入顺序，得到优化文件。
[0035]进一步，所述优化文件包html文件、css文件和js文件。
[0036]进一步，所述测试模块中的测试包括规范测试、性能测试和安全检测等。
[0037]进一步，所述压缩模块中生成的映射表包括缓存映射表和资源映射表等。
[0038]本发明包括服务器端将待处理的资源文件和demo文件进行特定扫描；所述资源文件分别进行优化处理；所述图片资源分别进行压缩优化重命名等操作，并逐一对应替换CSS和js、html文件中所有的引用；所述css、js资源进行按需、按顺序合并压缩，并逐一替换html文件中所有的引用；所述冗余资源文件进行自动清除；所述html文件中资源引用自动优化加载顺序；最终生成压缩包进行版本管理。
【附图说明】
[0039]图1为本发明实施例所述的一种实现前端代码自动优化的方法流程图；
[0040]图2为本发明实施例所述的一种实现前端代码自动优化的系统结构框图。
[0041]附图中，各标号所代表的部件列表如下:
[0042]1、获取模块，2、扫描模块，3、优化模块，4、测试模块，5、压缩模块，6、对接模块，31、判断模块，32、重命名模块，33、扫描替换模块。
【具体实施方式】
[0043]以下结合附图对本发明的原理和特征进行描述，所举实例只用于解释本发明，并非用于限定本发明的范围。
[0044]如图1所示，为本发明实施例所述的一种实现前端代码自动优化的方法，具体包括以下步骤:
[0045]步骤1:获取一个包含多种资源文件的资源文件包；
[0046]步骤2:对所述资源文件包中的所有资源文件进行自动扫描，提取其中被使用的资源文件，将被使用的资源文件按照不同类别分别记录成不同数组；
[0047]步骤3:判断是否是对应图片资源的数组，如果是，执行步骤4 ;否则，执行步骤5 ;
[0048]步骤4:对所述数组进行同类型优化并重命名；替换css、js、html中对所述图片的引用；
[0049]步骤5:扫描html文件所关联的css、js文件，并按顺序和所需进行合并压缩，替换html文件中对css、js文件的引用；并调整css和js的载入顺序，得到优化文件；
[0050]步骤6:对优化文件进行多种测试，并输出测试结果报告，根据测试结果报告生成资源优化方案；
[0051]步骤7:移除资源文件包中冗余资源，调用资源优化方案生成映射表，并将处理后的资源文件包进行压缩生成资源压缩包；
[005