一种web项目的缩减样式表体积处理方法及处理终端与流程

1.本发明涉及计算机技术领域，具体是一种web项目的缩减样式表体积处理方法及处理终端。


背景技术：

2.web的使用场景越发广泛，相应的基于web项目的需求也很广泛。像常见的大数据看板功能往往是现在的一个基础功能，其功能丰富、组件样式繁多，其一般是基于web项目开发实现的。像这一类的web项目，会使用到大量的css样式表和图片，但目前的现有技术中，大部分还是使用scss或者less来进行编写样式。采用这种处理方法，在面对具有大量组件、组件内需要用的大量的css样式表和图片倾斜，不可避免会第增大样式表的体积，自然会增加整个web项目的代码量和文件体积，而这反馈到用户端，则意味着加载这些文件变得缓慢，给用户带来不好的体验，特别是对于可视化项目来说，由于加载这些组件和图片变得缓慢而给用户体验差的感受更加明显。


技术实现要素：

3.针对现有技术的不足，本发明的目的之一是提供一种web项目的缩减样式表体积处理方法，其能够解决背景技术所描述的问题；
4.本发明的目的之二是提供一种处理终端，其能够解决背景技术所描述的问题。
5.实现本发明的目的之一的技术方案为：一种web项目的缩减样式表体积处理方法，包括如下步骤：
6.步骤1：扫描目标web项目中的vue文件，vue文件内包括css文件、less文件和scss文件中的一种或多种，并解析出vue文件内的所有style标签；
7.步骤2：调用unocss引擎，以将vue文件转换为unocss代码，从而实现将css文件和/或less文件和/或scss文件的样式代码处理为原子css样式代码，并将转换后的unocss代码中的style标签的样式代码删除，从而得到表征vue文件的第一unocss代码，将第一unocss代码插入到目标web项目的html文件中；
8.步骤3：在将目标web项目的代码打包过程中，调用unocss引擎将相同的css样式表进行复用，以在目标web项目中最小化css代码量；
9.步骤4：将所述步骤1-步骤3形成可安装在web客户端上的插件，以供用户使用。
10.进一步地，在步骤2中，unocss引擎集成到所述目标web项目中。
11.进一步地，在步骤3中，还包括，
12.通过调用t inypng插件进一步对css样式表进行压缩，以完成css样式表和图片的体积减小及优化。
13.进一步地，在执行完步骤3之后，还包括步骤4：
14.步骤4：将所述步骤1-步骤3形成可安装在web客户端上的插件，以供用户使用。
15.实现本发明的目的之二的技术方案为：一种处理终端，其包括：
16.存储器，用于存储程序指令；
17.处理器，用于运行所述程序指令，以执行所述web项目的缩减样式表体积处理方法的步骤。
18.本发明的有益效果为：本发明相比于传统使用scss或者less来写的代码完成原子化css的重构，重构时间更少，速度更快，能够有效减小web项目的体积。
附图说明
19.图1为本发明的流程示意图；
20.图2为处理终端的结构示意图。
具体实施方式
21.下面，结合附图以及具体实施方案，对本发明做进一步描述：
22.如图1所示，一种web项目的缩减样式表体积处理方法，包括如下步骤：
23.步骤1：扫描目标web项目中的vue文件，vue文件内包括css文件、less文件和scss文件中的一种或多种，并解析出vue文件内的所有style标签。
24.在本步骤中，也即是扫描css文件和/或less文件和/或scss文件，从而从这些文件中解析出style标签。
25.步骤2：调用unocss引擎，将vue文件中的style标签在目标web项目的所占部分转换为unocss代码后，也即是将css文件和/或less文件和/或scss文件的样式代码处理为原子css样式代码，并将转换后的unocss代码中的style标签的样式代码删除，从而得到表征vue文件的第一unocss代码，将第一unocss代码插入到目标web项目的template模板中，也即将第一unocss代码插入到html片段中。
26.在本步骤中，unocss引擎集成到目标web项目中，从而在开发web项目过程中可以直接调用该引擎，unocss引擎可以将css样式代码处理为原子css样式代码，然后可以将原子css样式代码插入到对应的html代码中。
27.步骤3：在将目标web项目的代码打包过程中，调用unocss引擎将相同的css样式表进行复用，以在目标web项目中最小化css代码量，也即减少目标web项目的文件体积。
28.在本步骤中，对于web项目来说，其包含很多vue文件，每个vue文件均会包括若干css样式表，而有相当多的css样式表是完全相同的，这导致对整个web项目而言，其会使用到大量相同的css样式表，增加了web项目体积。而通过复用这些相同的css样式表，能够大大减少代码量和文件体积。
29.在一个可选的实施方式中，在本步骤中，还包括，通过调用t inypng插件进一步对css样式表进行压缩，以完成css样式表和图片的体积减小及优化。
30.步骤4：将所述步骤1-步骤3形成可安装在web客户端上的插件，以使得插件安装在web客户端上来供用户使用。
31.在本步骤中，也即是将步骤1-步骤3的处理过程开发成插件形式，通过插件安装在web客户端的方式实现对目标web项目的css样式表进行体积缩减。
32.对于使用者(用户)来说，其无需懂得如何使用unocss引擎，不需要学习原子化css，只需要直接调用该插件即可将css代码转换为原子化css代码，从而减小web项目的体
积。
33.本发明相比于传统使用scss或者less来写的代码完成原子化css的重构，重构时间更少，速度更快，能够有效减小web项目的体积。
34.如图2所示，本发明还提供一种处理终端100，其包括：
35.存储器101，用于存储程序指令；
36.处理器102，用于运行所述程序指令，以执行所述web项目的缩减样式表体积处理方法的步骤。
37.本说明书所公开的实施例只是对本发明单方面特征的一个例证，本发明的保护范围不限于此实施例，其他任何功能等效的实施例均落入本发明的保护范围内。对于本领域的技术人员来说，可根据以上描述的技术方案以及构思，做出其它各种相应的改变以及变形，而所有的这些改变以及变形都应该属于本发明权利要求的保护范围之内。


技术特征：
1.一种web项目的缩减样式表体积处理方法，其特征在于，包括如下步骤：步骤1：扫描目标web项目中的vue文件，vue文件内包括css文件、less文件和scss文件中的一种或多种，并解析出vue文件内的所有style标签；步骤2：调用unocss引擎，以将vue文件中的style标签转换为unocss代码，从而实现将css文件和/或less文件和/或scss文件的样式代码处理为原子css样式代码，并将转换后的unocss代码中的style标签的样式代码删除，从而得到表征vue文件的第一unocss代码，将第一unocss代码插入到目标web项目的template模板中；步骤3：在将目标web项目的代码打包过程中，调用unocss引擎将相同的css样式表进行复用，以在目标web项目中最小化css代码量。2.根据权利要求1所述的web项目的缩减样式表体积处理方法，其特征在于，在步骤2中，unocss引擎集成到所述目标web项目中。3.根据权利要求2所述的web项目的缩减样式表体积处理方法，其特征在于，在步骤3中，还包括，通过调用tinypng插件进一步对css样式表进行压缩，以完成css样式表和图片的体积减小及优化。4.根据权利要求3所述的web项目的缩减样式表体积处理方法，其特征在于，在执行完步骤3之后，还包括步骤4：步骤4：将所述步骤1-步骤3形成可安装在web客户端上的插件，以供用户使用。5.一种处理终端，其特征在于，其包括：存储器，用于存储程序指令；处理器，用于运行所述程序指令，以执行如权利要求1-4任一项所述web项目的缩减样式表体积处理方法的步骤。

技术总结
本发明公开一种web项目的缩减样式表体积处理方法及处理终端，所述方法包括：步骤1：扫描目标web项目中的vue文件，并解析出vue文件内的所有style标签；步骤2：调用unocss引擎将style部分转换为unocss代码，删除style标签的样式代码，将转换后的unocss代码插入到template模板中；步骤3：在打包过程中，借助unocss将相同的css样式表进行复用；步骤4：将所述步骤1-步骤3形成可安装在web客户端上的插件，以供用户使用。本发明相比于传统使用scss或者less来写的代码完成原子化css的重构，重构时间更少，速度更快，能够有效减小web项目的体积。项目的体积。项目的体积。


技术研发人员：朱开 朱正辉 明德 赵定金
受保护的技术使用者：广东保伦电子股份有限公司
技术研发日：2023.04.06
技术公布日：2023/7/25