一种降低web端文件体积的方法装置及系统制造方法及图纸

本申请涉及计算机计算领域，具体涉及一种降低web端文件体积的方法，通过接收图片类文件的打包命令，图片类文件包括图标文件，和/或，图片文件；响应图片类文件打包命令，将图标转换为外链css格式文件，和/或，将图片文件转换为外链url格式文件；按照预设规则对css格式文件或url格式文件进行命名；存储经过命名的css格式文件，和/或，url格式文件，经过命名的css格式文件，和/或，url格式文件包括文件的引用路径，以便对图片类文件进行调用。本申请将图片以外链url的形式，icon以外链css的形式存储在服务器上，降低icon及图片体积，保持web端包体健康。包体健康。包体健康。

【技术实现步骤摘要】
一种降低web端文件体积的方法装置及系统


[0001]本申请属于计算机
，具体涉及一种降低web端文件体积的方法、装置及系统。

技术介绍

[0002]随着互联网生态的不断发展，用户体验、web端性能及用户体验越来越重要；但业务增长是持续的，小程序的功能也越做越复杂，其中不免会使用大量的图片及图标；在缩减体积大小的优化中，最大的阻碍便是图片及图标的体积。
[0003]现有项目中针对图标的解决方案，基本思路分为三种。第一种是将图标上传至外部服务，同时将图标的地址引入小程序进行渲染，此种方案的问题是会增加小程序内http的调用数量，增加web端性能负载。第二种是将图标编译为base64，然后放入本地的css文件中，此种方案对web端体积优化力度不足，不会明显减少体积。第三种则是将图标文件直接放入项目文件夹，此种方案最原始，是造成文件体积庞大的根本原因。
[0004]基于以上，如何提供一种能够降低web端文件体积的方法是亟需解决的问题。

技术实现思路

[0005]为至少在一定程度上克服相关技术中存在的问题，本申请提供一种降低web端文件体积的方法，以保持web端包体健康。
[0006]为实现以上目的，本申请采用如下技术方案：
[0007]第一方面，一种降低web端文件体积的方法，所述方法包括：
[0008]接收图片类文件的打包命令，所述图片类文件包括图标文件，和/或，图片文件；
[0009]响应所述图片类文件打包命令，将所述图标转换为外链css格式文件，和/或，将所述图片文件转换为外链url格式文件；
[0010]按照预设命名规则对所述css格式文件或所述url格式文件进行命名；
[0011]存储经过命名的css格式文件，和/或，url格式文件，所述经过命名的css格式文件，和/或，url格式文件包括所述图片类文件的引用路径，以便对所述图片类文件进行调用。
[0012]进一步地，所述预设命名规则为项目
‑
模块
‑
图标名称或所述预设命名规则为项目
‑
模块
‑
图片名称。
[0013]进一步地，将所述图标转换为外链css格式文件，和/或，将所述图片文件转换为外链url格式文件，包括：
[0014]将不少于一个所述图标文件转换为外链css格式文件，和/或，将不少于一个所述图片文件转换为外链url格式文件。
[0015]进一步地，将所述图标转换为外链css格式文件，和/或，将所述图片文件转换为外链url格式文件，包括：
[0016]调用sprites插件将所述图标文件转换为外链css格式文件；
[0017]调用sprites插件将所述图片文件转换为外链url格式文件。
[0018]进一步地，在接收所述图片类文件打包命令前，所述方法还包括：
[0019]将所述图片类文件上传至服务器。
[0020]第二方面，一种降低web端文件体积的装置，所述装置包括：
[0021]接收模块，用于接收图片类文件的打包命令，所述图片类文件包括图标文件，和/或，图片文件；
[0022]打包模块，用于响应所述图片类文件打包命令，将所述图标转换为外链css格式文件，和/或，将所述图片文件转换为外链url格式文件；
[0023]命名模块，用于按照预设规则对所述css格式文件或所述url格式文件进行命名；
[0024]存储模块，用于存储经过命名的css格式文件，和/或，url格式文件，所述经过命名的css格式文件，和/或，url格式文件包括所述图片类文件的引用路径，以便对所述图片类文件进行调用。
[0025]第三方面，一种降低web端文件体积的系统，所述系统包括存储器和处理器；
[0026]所述存储器用于存储应用程序；
[0027]所述处理器用于运行所述应用程序，执行如权利要求1
‑
5任一项所述的降web端文件体积的方法。
[0028]本申请采用以上技术方案，至少具备以下有益效果：
[0029]一种降低web端文件体积的方法，通过接收图片类文件的打包命令，图片类文件包括图标文件，和/或，图片文件；响应图片类文件打包命令，将图标转换为外链css格式文件，和/或，将图片文件转换为外链url格式文件；按照预设规则对css格式文件或url格式文件进行命名；存储经过命名的css格式文件，和/或，url格式文件，经过命名的css格式文件，和/或，url格式文件包括图片类文件的引用路径，以便对图片类文件进行调用。本申请将图片以外链url的形式，icon以外链css的形式存储在服务器上，降低了icon及图片体积，保持web端包体健康。
[0030]应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本申请。
附图说明
[0031]为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
[0032]图1是根据一示例性实施例示出的一种降低web端文件体积的方法步骤流程图。
[0033]图2是根据一示例性实施例示出的一种降低web端文件体积的装置结构示意图。
[0034]图3是根据一示例性实施例示出的文件管理示意图。
具体实施方式
[0035]为使本申请的目的、技术方案和优点更加清楚，下面将对本申请的技术方案进行详细的描述。显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基
于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所得到的所有其它实施方式，都属于本申请所保护的范围。
[0036]随着互联网生态的不断发展，用户体验、web端性能及用户体验越来越重要；但业务增长是持续的，小程序的功能也越做越复杂，其中不免会使用大量的图片及图标；在缩减体积大小的优化中，最大的阻碍便是图片及图标的体积。基于此，本申请提供一种降低web端文件体积的方法
[0037]请参阅图1，图1是根据一示例性实施例示出的一种降低web端文件体积的方法步骤流程图。
[0038]如图1所示，所述方法包括：
[0039]步骤S11、接收图片类文件的打包命令，所述图片类文件包括图标文件，和/或，图片文件；
[0040]步骤S12、响应所述图片类文件打包命令，将所述图标转换为外链css格式文件，和/或，将所述图片文件转换为外链url格式文件；
[0041]步骤S13、按照预设规则对所述css格式文件或所述url格式文件进行命名；
[0042]其中，所述预设命名规则为项目
‑
模块
‑
图标名称。
[0043]步骤S14、存储本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种降低web端文件体积的方法，其特征在于，所述方法包括：接收图片类文件的打包命令，所述图片类文件包括图标文件，和/或，图片文件；响应所述图片类文件打包命令，将所述图标转换为外链css格式文件，和/或，将所述图片文件转换为外链url格式文件；按照预设命名规则对所述css格式文件或所述url格式文件进行命名；存储经过命名的css格式文件，和/或，url格式文件，所述经过命名的css格式文件，和/或，url格式文件包括所述图片类文件的引用路径，以便对所述文件进行调用。2.根据权利要求1所述的方法，其特征在于，所述预设命名规则为项目
‑
模块
‑
图标名称或所述预设命名规则为项目
‑
模块
‑
图片名称。3.根据权利要求1所述的方法，其特征在于，将所述图标转换为外链css格式文件，和/或，将所述图片文件转换为外链url格式文件，包括：将不少于一个所述图标文件转换为外链css格式文件，和/或，将不少于一个所述图片文件转换为外链url格式文件。4.根据权利要求1
‑
3任意一项所述的方法，其特征在于，将所述图标转换为外链css格式文件，...

【专利技术属性】
技术研发人员：何万钰，
申请(专利权)人：上海中通吉网络技术有限公司，
类型：发明
国别省市：