1.本发明涉及计算机测试领域，尤其涉及一种编译过程中的筛选前端无用图片资源的方法及系统。
背景技术：2.目前因为前端使用javascript编程，vscode编辑器无法识别未使用的图片标示出的情况，如果随着项目ui的版本更新迭代，项目里会有很多无用的图片存在项目中，或者前端某个需求下线，图片没有被一起删除，导致图片留存到本地开发环境中，导致项目体积变大。
3.cn113051230a提出了一种laya项目清理ui图片资源的方法、存储介质。但一方面laya项目是游戏引擎，与本技术的前端项目不同，而且laya项目是维护一个资源使用数据库表，需要要手动增删改查表，并没有解决本技术所述的技术问题。因此，本发明提出了一种筛选前端无用图片资源的方法及系统，在打包编译过程中通过删除无用图片，将项目代码体积缩小，增加了代码编译速度，扩大项目的服务器空间。
技术实现要素：4.为解决现有状况的不足，本技术针对以上背景技术的缺陷，本发明第一方面提出了一种筛选前端无用图片资源的方法，其特征在于，包括：
5.s1、对编译打包工具进行第一配置；
6.s2、执行第一脚本指令，生成前端项目使用中的图片；
7.s3、获取所述前端项目使用中图片的图片信息，将所述前端项目使用中的图片信息存入第一图片信息数组；
8.s4、建立第二图片信息数组，所述第二图片信息数组包括所有前端项目的图片信息；
9.s5、比较所述第一图片信息数组与第二图片信息数组唯一性的图片信息，将第二图片信息数组多于第一图片信息数组的图片信息定义为无用图片信息，删除所述无用图片信息对应的工程目录下的图片文件。
10.优选地，所述图片信息包括图片的文件名、图片编号、图片大小、图片格式之一或二者以上的组合。
11.优选地，所述步骤s3包括：
12.s301、读取所述前端项目使用中图片的图片名称；
13.s302、将所述图片名称存入第一图片信息数组。
14.优选地，所述方法还包括：将所述前端项目使用中的图片文件储存到工程目录。
15.优选地，所述步骤s3还包括：
16.s311、系统文件管理模块读取储存到工程目录下的所述前端项目使用中的图片文件；
17.s312、将所述前端项目使用中的图片文件储存到新建的第一图片信息数组。
18.优选地，所述步骤s4包括：
19.s41、系统文件管理模块在项目中的工程目录下执行查找图片；
20.s42、利用正则规则寻找目录下的图片；
21.s43、获取满足所述正则规则的图片的图片信息，将所述满足所述正则规则图片的图片信息存储到第二图片信息数组。
22.优选地，所述比较第一图片信息数组与第二图片信息数组的图片信息包括；通过javascript数组的findindex方法比较所述第二图片信息数组与第一图片信息数组的图片名称。
23.优选地，所述第一图片信息数组和第二图片信息数组包括图片的集合、图片名称的集合、图片名称对应表格的集合或二者以上的结合。
24.本发明第二方面提出了一种筛选前端无用图片资源的系统，其特征在于，包括：
25.图片生成模块，用于对编译打包工具进行第一配置，执行第一脚本指令，生成前端项目使用中的图片；
26.第一图片信息数组建立模块，用于获取所述前端项目使用中的图片的图片信息，将所述图片信息存入第一图片信息数组；
27.第二图片信息数组建立模块，用于建立第二图片信息数组，所述第二图片信息数组包括所有前端项目的图片信息；
28.图片处理模块，用于比较第一图片信息数组与第二图片信息数组唯一性的图片信息，将第二图片信息数组多于第一图片信息数组的的图片信息对应储存在工程目录下的图片删除。
29.本发明第三方面提出了一种计算机可读存储介质，其特征在于，所述存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现本技术所述的方法。
30.本发明的有益效果为：通过编译打包工具，在项目编译打包过程中就会产生第一图片信息数组，通过第一图片信息数组与项目所有的图片信息进行比较，能在项目中去除未使用的图片，将项目代码体积缩小，扩大项目发版服务器空间，增加了代码编译速度。
附图说明
31.图1为本发明的一种筛选前端无用图片资源的方法的流程示意图。
32.图2为本发明的一种筛选前端无用图片资源的系统的结构框图。
具体实施方式
33.为了更清楚的理解本发明的内容，将结合附图和实施例详细说明。
34.但是应该理解，这些描述只是示例性的，而并非要限制本发明的范围。此外，在以下说明中，省略了对公知结构和技术的描述，以避免不必要地混淆本发明的概念。在此使用的术语仅仅是为了描述具体实施例，而并非意在限制本发明。这里使用的词语“一”、“一个(种)”和“该”等也应包括“多个”、“多种”的意思，除非上下文另外明确指出。此外，在此使用的术语“包括”、“包含”等表明了所述特征、步骤、操作和/或部件的存在，但是并不排除存在或添加一个或多个其他特征、步骤、操作或部件。
35.在此使用的所有术语(包括技术和科学术语)具有本领域技术人员通常所理解的含义，除非另外定义。应注意，这里使用的术语应解释为具有与本说明书的上下文相一致的含义，而不应以理想化或过于刻板的方式来解释。本发明是已有专利技术的改进，所以对于本技术未描述的部分以现有技术来实现。
36.图1为本发明的一种筛选前端无用图片资源的方法的流程示意图：
37.本发明第一方面提出了一种筛选前端无用图片资源的方法，其特征在于，包括：
38.s1、对编译打包工具进行第一配置；
39.具体的，因为前端使用js编程，vscode编辑器无法识别未使用的图片，而如果所述编译打包工具如果是webpack，默认将项目中4kb以下使用中的图片转成base64，4kb以上的图片存储时会加上hash值，而对编译打包工具进行第一配置就是改变图片的默认配置，如将编译打包工具设置为0kb以上图片格式统一，改变4kb以上的图片名称中加hash值的设置。
40.优选地，可以对图片的生成名称进行配置，以确保生成的图片名称具有唯一性。
41.s2、执行第一脚本指令，生成前端项目使用中的图片；
42.将项目执行npm run build打包后，就会生成未经base64处理、去除图片的hash值的图片。bulid命令可在package.json中scripts增加"build":"cross-env vue-cli-service build"。
43.优选地，所述方法还包括：将所述前端项目使用中的图片文件储存到工程目录。
44.s3、获取所述前端项目使用中图片的图片信息，将所述前端项目使用中的图片信息存入第一图片信息数组；
45.优选地，所述图片信息包括图片的文件名、图片编号、图片大小、图片格式之一或二者以上的组合。由于生成图片的默认设置，可以将生成的每一个图片名称具有唯一性，或者其他的图片信息具有唯一性。
46.优选地，所述步骤s3包括：
47.s301、读取所述前端项目使用中图片的图片名称；
48.s302、将所述图片名称存入第一图片信息数组。
49.具体的，利用node的fs模块(系统文件管理模块)读取存入工程目录的前端项目使用中的图片，提取前端项目使用中图片的图片名称，将所述图片名称存入第一图片信息数组，存入的方式可以是直接存入，也可以将图片名称存入第一图片信息数组的各种表格，例如excel表格，存入的顺序可以人为设置，例如存入按照时间、名称、大小等排序。
50.优选地，所述步骤s3还包括：
51.s311、系统文件管理模块读取储存到工程目录下的所述前端项目使用中的图片文件；
52.s312、将所述前端项目使用中的图片文件储存到新建的第一图片信息数组。
53.具体的，原理同上，与之不同的是读取与存入的是图片文件。
54.s4、建立第二图片信息数组，所述第二图片信息数组包括所有前端项目的图片信息；
55.优选地，所述步骤s4包括：
56.s41、系统文件管理模块在项目中的工程目录下执行查找图片；
57.s42、利用正则规则寻找目录下的图片；
58.s43、获取满足所述正则规则的图片的图片信息，将所述满足所述正则规则图片的图片信息存储到第二图片信息数组。
59.具体的，建立第二图片信息数组的过程包括：
60.利用node中的系统文件管理模块(fs)递归遍历方式，将项目中的工程目录(src目录)下执行查找图片；
61.利用正则/\.(png|jpe？g|gif|webp)(\？.*)？$/寻找目录下的图片；
62.将满足正则规则的图片，即以.png，.jpg，.jpeg，gif，webp为结尾的项目中的图片文件，从图片的路径存储到第二图片信息数组或对所述满足正则规则的图片的图片进行获取图片信息后存储到第二图片信息数组。
63.优选地，所述第一图片信息数组和第二图片信息数组包括图片的集合、图片名称的集合、图片名称对应表格的集合或二者以上的结合。但第一图片信息数组和第二图片信息数组必然包括图片唯一性的信息，例如，图片名称具有唯一性。如果第一图片信息数组中为图片的名称集合，相应的也需要对第二图片信息数组的图片进行提取图片名称的处理，第二图片信息数组也为图片名称的集合。最终保持第一图片信息数组与第二图片信息数组的可比性，采用优选地提取图片属性信息的方式，例如提取图片名称可以少占用项目的储存空间，增加项目的编译速度。在项目图片的生成阶段就设置图片名称的生成方式，确保图片名称的唯一性，其他的图片信息生成及处理也是同理。
64.s5、比较所述第一图片信息数组与第二图片信息数组唯一性的图片信息，将第二图片信息数组多于第一图片信息数组的图片信息定义为无用图片信息，删除所述无用图片信息对应的工程目录下的图片文件。
65.优选地，所述比较第一图片信息数组与第二图片信息数组的图片信息包括；通过javascript数组的findindex方法比较所述第二图片信息数组与第一图片信息数组的图片名称。
66.例如，以webpack作为编译打包工具的实施例中，遍历第二图片信息数组，查找第一图片信息数组的名称是否在第二图片信息数组中不存在，由于对编译打包工具进行了设置，生成的图片名称具有唯一性，利用js数组方法[].findindex()函数进行比对，如果获取到的第二图片信息数组.indexof()下角标是-1，即在第二图片信息数组中不存在当前图片，即第二图片信息数组中具有的项目未使用的图片，即为无用图片，通过fs.unlink将对应的第二图片信息数组中的无用图片对应的工程目录下的图片文件删除。相应的也可以在第一图片信息数组、第二图片信息数组生成后进行统一的处理，使生成的图片信息具有唯一性。
[0067]
具体地，也可以利用获取的第一图片信息数组与第二图片信息数组的图片名称进行一一对比的方式寻找第二图片信息数组多于第一图片信息数组中的图片，例如对照第一图片信息数组与第二图片信息数组的图片名称表，系统文件管理模块之后基于多余(无用)图片的名称，寻找对应存储在工程目录下的图片并将其删除。
[0068]
本发明第二方面提出了一种筛选前端无用图片资源的系统，其特征在于，包括：
[0069]
图片生成模块，用于对编译打包工具进行第一配置，执行第一脚本指令，生成前端项目使用中的图片；
[0070]
第一图片信息数组建立模块，用于获取所述前端项目使用中的图片的图片信息，将所述图片信息存入第一图片信息数组；
[0071]
第二图片信息数组建立模块，用于建立第二图片信息数组，所述第二图片信息数组包括所有前端项目的图片信息；
[0072]
图片处理模块，用于比较第一图片信息数组与第二图片信息数组唯一性的图片信息，将第二图片信息数组多于第一图片信息数组的的图片信息对应储存在工程目录下的图片删除。
[0073]
优选地，所述编译打包工具包括webpack。
[0074]
本发明第三方面提出了一种计算机可读存储介质，其特征在于，所述存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现本技术所述的方法。
[0075]
本发明的有益效果为：通过编译打包工具，在项目编译打包过程中就会产生第一图片信息数组，通过第一图片信息数组与项目所有的图片进行比较，能在项目中去除未使用的图片，将项目代码体积缩小，扩大项目发版服务器空间，增加了代码编译速度。在项目的项目编译打包过程中就删除了无用图片。
[0076]
本领域技术人员可以进一步意识到，结合本文的实施例的算法步骤，能够以电子硬件、计算机软件或二者结合的方式实现，且这些功能究竟以硬件还是软件的方式执行，取决于技术方案的特定应用和设计约束条件，本领域技术人员可以对每个特定的应用使用不同方法实现所描述的功能，但是这种实现不应认为超出本发明的范围。
[0077]
尽管已描述了本发明的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。
[0078]
以上所述仅为本发明较佳的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到的变化或替换等都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应该以权利要求书的保护范围为准。
技术特征：1.一种筛选前端无用图片资源的方法，其特征在于，包括：s1、对编译打包工具进行第一配置；s2、执行第一脚本指令，生成前端项目使用中的图片；s3、获取所述前端项目使用中的图片的图片信息，将所述前端项目使用中的图片信息存入第一图片信息数组；s4、建立第二图片信息数组，所述第二图片信息数组包括所有前端项目的图片信息；s5、比较所述第一图片信息数组与第二图片信息数组唯一性的图片信息，将第二图片信息数组多于第一图片信息数组的图片信息定义为无用图片信息，删除所述无用图片信息对应的工程目录下的图片文件。2.如权利要求1所述的筛选前端无用图片资源的方法，其特征在于，所述图片信息包括图片的文件名、图片编号、图片大小、图片格式之一或二者以上的组合。3.如权利要求2所述的筛选前端无用图片资源的方法，其特征在于，所述步骤s3包括：s301、读取所述前端项目使用中图片的图片名称；s302、将所述图片名称存入第一图片信息数组。4.如权利要求2所述的筛选前端无用图片资源的方法，其特征在于，所述方法还包括：将所述前端项目使用中的图片文件储存到工程目录。5.如权利要求4所述的筛选前端无用图片资源的方法，其特征在于，所述步骤s3还包括：s311、系统文件管理模块读取储存到工程目录下的所述前端项目使用中的图片文件；s312、将所述前端项目使用中的图片文件储存到新建的第一图片信息数组。6.如权利要求1所述的筛选前端无用图片资源的方法，其特征在于，所述步骤s4包括：s41、系统文件管理模块在项目中的工程目录下执行查找图片；s42、利用正则规则寻找目录下的图片；s43、获取满足所述正则规则的图片的图片信息，将所述满足所述正则规则图片的图片信息存储到第二图片信息数组。7.如权利要求2所述的筛选前端无用图片资源的方法，其特征在于，所述比较第一图片信息数组与第二图片信息数组的图片信息包括；通过javascript数组的findindex方法比较所述第二图片信息数组与第一图片信息数组的图片名称。8.如权利要求1所述的一种筛选前端无用图片资源的方法，其特征在于，所述第一图片信息数组和第二图片信息数组包括图片的集合、图片名称的集合、图片名称对应表格的集合或二者以上的结合。9.一种筛选前端无用图片资源的系统，其特征在于，包括：图片生成模块，用于对编译打包工具进行第一配置，执行第一脚本指令，生成前端项目使用中的图片；第一图片信息数组建立模块，用于获取所述前端项目使用中的图片的图片信息，将所述图片信息存入第一图片信息数组；第二图片信息数组建立模块，用于建立第二图片信息数组，所述第二图片信息数组包括所有前端项目的图片信息；图片处理模块，用于比较第一图片信息数组与第二图片信息数组唯一性的图片信息，
将第二图片信息数组多于第一图片信息数组的的图片信息对应储存在工程目录下的图片删除。10.一种计算机可读存储介质，其特征在于，所述存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现权利要求1至8中任一项所述的方法。
技术总结本发明涉及一种筛选前端无用图片资源的方法及系统，其特征在于，包括：S1、对编译打包工具进行第一配置；S2、执行第一脚本指令，生成前端项目使用中的图片；S3、获取所述前端项目使用中的图片的图片信息，将所述前端项目使用中的图片信息存入第一图片信息数组；S4、建立第二图片信息数组，所述第二图片信息数组包括所有前端项目的图片信息；S5、比较所述第一图片信息数组与第二图片信息数组唯一性的图片信息，将第二图片信息数组多于第一图片信息数组的图片信息定义为无用图片信息，删除所述无用图片信息对应的工程目录下的图片文件。采用本发明能够在项目编译打包过程中去除未使用的图片，将项目代码体积缩小，扩大项目发版服务器空间，增加了代码编译速度。增加了代码编译速度。增加了代码编译速度。
技术研发人员：李永顺 祝彬彬
受保护的技术使用者：中信百信银行股份有限公司
技术研发日：2022.07.26
技术公布日：2022/11/1
