CN116643791A - 一种冗余数据清理方法、装置、电子设备及存储介质 - Google Patents

Abstract

本申请公开了一种冗余数据清理方法、装置、电子设备及存储介质，涉及数据处理技术领域。本申请中，通过目标页面关联的源文件，获取目标页面对应的.vue文件，再对.vue文件包含的template文本进行符号正则匹配，获得相应的初始符号名单，从而基于初始符号名单中，各个函数名称各自关联的符号调用信息，对初始符号名单进行多次修改，直至获得符合预设名单修改要求的目标符号名单为止，进而基于目标符号名单，对.vue文件包含的逻辑交互文本进行冗余数据清理，获得清理后的逻辑交互文本。采用这种方式，根据获得的目标符号名单，对.vue文件包含的逻辑交互文本进行冗余数据清理，提升了借助.vue文件进行页面渲染的速度。

Description

一种冗余数据清理方法、装置、电子设备及存储介质

技术领域

本申请涉及数据处理技术领域，尤其涉及一种冗余数据清理方法、装置、电子设备及存储介质。

背景技术

目前，随着互联网技术(Internet Technology，IT)的快速发展，在程序开发等任务中，已涌现出了各式各样的软件框架。

其中，Vue基于标准的超文本标记语言(Hyper Text Mark-up Language，HTML)、层叠样式表(Cascading Style Sheets，CSS)和JavaScript构建用户界面(User Interface，UI)，并且，还提供了一套声明式的和组件化的编程模型。

故而，Vue具备简洁化、轻量级、数据驱动和模块友好等特点，因此，也被广泛应用于前端页面(即用户页面)的开发中。

然而，在借助Vue进行前端页面的开发过程中，一旦前端页面的开发不规范或者不绝对规范，便会出现大量未使用的冗余数据(比如，冗余代码)；并且，如果不清理这些冗余数据，将会造成页面内存占用过高、资源阻塞等问题。

虽然用户可在开发数据中，手动筛查并清理冗余数据，但如果开发数据的数据量较大，将需要花费大量的时间，才能完成对冗余数据的筛查和清理，从而降低了页面渲染的速度。

因此，采用上述借助Vue进行前端页面开发的冗余数据清理方法，页面渲染的速度较低。

发明内容

本申请实施例提供了一种冗余数据清理方法、装置、电子设备及存储介质，用于清理在借助Vue进行前端页面开发中产生的冗余数据，从而提升页面渲染的速度。

第一方面，本申请实施例提供了一种冗余数据清理方法，所述方法包括：

基于目标页面关联的源文件，获取目标页面对应的.vue文件；其中，.vue文件表征目标页面对应的vue单文件组件；

对.vue文件包含的template文本进行符号正则匹配，获得相应的初始符号名单；其中，template文本表征vue单文件组件的模板结构，模板结构用于展示渲染目标页面包含的各个元素，初始符号名单包括：template文本中的各个函数名称和各个变量名称；

基于初始符号名单中，各个函数名称各自关联的符号调用信息，对初始符号名单进行多次迭代修改，直至获得符合预设名单修改要求的目标符号名单为止；

基于目标符号名单，对.vue文件包含的逻辑交互文本进行冗余数据清理，获得清理后的逻辑交互文本。

第二方面，本申请实施例还提供了一种冗余数据清理装置，所述装置包括：

获取模块，用于基于目标页面关联的源文件，获取目标页面对应的.vue文件；其中，.vue文件表征目标页面对应的vue单文件组件；

匹配模块，用于对.vue文件包含的template文本进行符号正则匹配，获得相应的初始符号名单；其中，template文本表征vue单文件组件的模板结构，模板结构用于展示渲染目标页面包含的各个元素，初始符号名单包括：template文本中的各个函数名称和各个变量名称；

修改模块，用于基于初始符号名单中，各个函数名称各自关联的符号调用信息，对初始符号名单进行多次迭代修改，直至获得符合预设名单修改要求的目标符号名单为止；

清理模块，用于基于目标符号名单，对.vue文件包含的逻辑交互文本进行冗余数据清理，获得清理后的逻辑交互文本。

在一种可选的实施例中，在基于目标页面关联的源文件，获取目标页面对应的.vue文件时，所述获取模块具体用于：

对源文件包含的文件内容进行解析，并基于文件内容的解析结果，获得.vue文件的路由索引；其中，路由索引用于指示.vue文件的访问地址；

基于路由索引和设定的.vue文件查询方式，获取目标页面对应的.vue文件。

在一种可选的实施例中，在基于文件内容的解析结果，获得.vue文件的路由索引时，所述获取模块具体用于：

若解析结果包含的路由配置文件中，存在目标页面的前端路由信息，则基于前端路由信息，生成路由索引；

若解析结果表征目标页面引入路由插件，则从路由插件关联的路由配置信息中，获得与预设的路由配置关键字相匹配的前端路由信息，并基于前端路由信息，生成路由索引；

若解析结果表征目标页面未引入路由插件，则对目标页面进行访问测试，并基于访问测试结果中的统一资源定位符，生成路由索引。

在一种可选的实施例中，在对.vue文件包含的template文本进行符号正则匹配，获得相应的初始符号名单时，所述匹配模块具体用于：

基于预设的交互事件使用指令集和预设的变量特性集，对template文本进行符号正则匹配，获得至少一个交互事件和至少一个变量配置信息；

对至少一个交互事件进行解析，获得多个函数名称，以及对至少一个变量配置信息进行解析，获得多个变量名称；

基于多个函数名称和多个变量名称，构建初始符号名单。

在一种可选的实施例中，在基于多个函数名称和多个变量名称，构建初始符号名单时，所述匹配模块具体用于：

分别将多个函数名称标记为各自对应函数的函数类型，以及分别将多个变量名称标记为各自对应变量的变量类型；

基于函数类型标记后的多个函数名称，以及变量类型标记后的多个变量名称，构建初始符号名单。

在一种可选的实施例中，在基于初始符号名单中，各个函数名称各自关联的符号调用信息，对初始符号名单进行多次迭代修改时，所述修改模块具体用于：

在一次迭代修改的过程中，针对初始符号名单中，各个函数名称各自关联的符号调用信息，分别执行以下操作：

若第一函数名称关联的符号调用信息中，存在至少一个符号名称，则基于至少一个符号名称对初始符号名单进行修改，获得修改后的初始符号名单；其中，第一函数名称为各个函数名称中的任意一个，每个符号名称为函数名称或者变量名称；

或者，

分别将至少一个符号名称标记为各自对应符号的符号类型，并基于符号类型标记后的至少一个符号名称对初始符号名单进行修改，获得修改后的初始符号名单。

在一种可选的实施例中，在基于目标符号名单，对.vue文件包含的逻辑交互文本进行冗余数据清理时，所述清理模块具体用于：

若逻辑交互文本中，存在目标符号名单不包含的函数，则将函数作为冗余数据从逻辑交互文本中清除；

若逻辑交互文本中，存在目标符号名单不包含的变量，则将变量作为冗余数据从逻辑交互文本中清除。

第三方面，本申请提供了一种电子设备，其包括处理器和存储器，其中，所述存储器存储有程序代码，当所述程序代码被所述处理器执行时，使得所述处理器执行上述第一方面所述的冗余数据清理方法的步骤。

第四方面，本申请提供了一种计算机可读存储介质，其包括程序代码，当所述程序代码在电子设备上运行时，所述程序代码用于使所述电子设备执行上述第一方面所述的冗余数据清理方法的步骤。

第五方面，本申请提供了一种计算机程序产品，所述计算机程序产品在被计算机调用时，使得所述计算机执行如第一方面所述的冗余数据清理方法步骤。

本申请有益效果如下：

在本申请实施例所提供的冗余数据清理方法中，根据目标页面关联的源文件，获得目标页面对应的.vue文件的路由索引之后，便可对.vue文件包含的template文本进行符号正则匹配，获得相应的初始符号名单；这样，由于template文本的内容主要涉及页面渲染，故而，获得的初始符号名单便可将其用于后续的页面渲染；并且，基于初始符号名单中，各个函数名称各自关联的符号调用信息，对初始符号名单进行多次迭代修改，获得符合预设名单修改要求的目标符号名单，可以确保能够获得完整的用于页面渲染的符号名单；进一步地，基于获得的目标符号名单，对.vue文件包含的逻辑交互文本进行冗余数据清理，获得清理后的逻辑交互文本，这样，便可及时地完成对.vue文件中冗余数据的筛查和清理，以提高后续借助.vue文件进行页面渲染的速度。

采用这种方式，在进行冗余数据清理的过程中，根据获得的目标符号名单，对.vue文件包含的逻辑交互文本进行冗余数据清理，也避免了相关技术中，通过手动筛查并清理冗余数据，在开发数据的数据量较大的情况下，需要花费大量的时间，才能完成对冗余数据的筛查和清理的技术弊端。

此外，本申请的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者，通过实施本申请而了解。本申请的目的和其他优点可通过在所写的说明书、权利要求书、以及附图中所特别指出的结构来实现和获得。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简要介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域的普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。在附图中：

图1为本申请实施例适用的一种可选的系统架构示意图；

图2为本申请实施例提供的一种冗余数据清理方法的实施流程示意图；

图3为本申请实施例提供的一种可选的前端页面的示意图；

图4为本申请实施例提供的一种可选的前端路由信息的示意图；

图5为本申请实施例提供的一种构建初始符号名单的逻辑示意图；

图6为本申请实施例提供的一种优化.vue文件的具体应用场景示意图；

图7为本申请实施例提供的一种基于图2的逻辑示意图；

图8为本申请实施例提供的一种冗余数据清理装置的结构示意图；

图9为本申请实施例提供的一种电子设备的结构示意图。

具体实施方式

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请技术方案的一部分实施例，而不是全部的实施例。基于本申请文件中记载的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请技术方案保护的范围。

需要说明的是，在本申请的描述中“多个”理解为“至少两个”。“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。A与B连接，可以表示：A与B直接连接和A与B通过C连接这两种情况。另外，在本申请的描述中，“第一”、“第二”等词汇，仅用于区分描述的目的，而不能理解为指示或暗示相对重要性，也不能理解为指示或暗示顺序。

此外，本申请技术方案中，对数据的采集、传播、使用等，均符合国家相关法律法规要求。

以下对本申请实施例中的部分技术用语进行解释说明，以便于本领域技术人员理解。

(1)页面渲染：其本质上就是从一个网页的URL开始，根据URL所对应的网页各项资源，输出可视化的结果的过程；其中，重绘(repaint)和回流(reflow)是影响渲染速度的两个因素。

(2)组件：组件是一种视图+交互逻辑的抽象数据类型，包含：HTML模板、CSS样式和JavaScript逻辑代码片段。

(3).vue单文件组件：是指在Vue项目中提供的一种代码组织方式，即在单文件组件中编写HTML模板、CSS样式和JavaScript逻辑，它们在一个文件中，天然的内聚，通过webpack的vueloader加载器在编译时，解析单文件组件，转换成可以运行的代码；在本申请实施例中，代码编辑器可以为vscode。

(4)webpack：打包时通过配置vue.config.js对console.log、注释等宽泛情况进行打包压缩。

(5)vscode自带插件eslint/vetur/prettier：主要用于修复语法错误，比如：双引号、单引号、函数和括号之间是否有间隔或者是否清楚函数，或者，变量后面的逗号分号等。

其中，eslint是代码检测工具，用来检测代码中的不规范，可以统一vue项目的代码规范，vetur主要针对vue文件，有代码高亮、错误检查、格式化、debugger以及一些vue文件的定制功能，prettier是代码格式化工具，以某种规则来格式化代码。

(6)源(Source，Src)文件夹：该文件夹下存放的是Vue项目的源文件，主要包括：.java后缀与配置文件。

(7)router文件夹：在源文件夹下创建router文件夹，这个文件夹放的路由配置文件(即前端路由信息)。

进一步的，基于上述名词及相关术语解释，下面对本申请实施例的设计思想进行简要介绍：

Vue.js作为热门的前端开发框架，以简洁化，轻量级，数据驱动，模块友好等优势，广受前端开发者的喜爱，成为前端开发人员必备的技能之一，被大量科技公司使用，例如，被广泛应用于前端页面(即用户页面)的开发中。

由于Vue.js受众广泛，因此开发者水平参差不齐，尤其是互联网行业更新迭代极其快速，当处理一个开发不规范或者不是绝对规范的项目时，大量未使用到的冗余代码(即冗余数据)，经常需要在海量代码中手动查找，故而，通常需要耗费大量的时间；并且，如果不清理这些冗余代码，将会导致网页内存占用过高，渲染不及时，页面掉帧，资源阻塞，影响使用者的观感等问题。

可见，虽然用户可以在前端页面的开发数据中，手动筛查并清理冗余数据，但如果开发数据的数据量较大，将需要花费大量的时间，才能完成对冗余数据的筛查和清理，从而无法保证页面渲染的速度。

有鉴于此，为了便于清理Vue项目里出现的冗余函数与变量，以及提升(前端)页面的渲染速度，在本申请实施例中，提出了一种冗余数据清理方法，具体包括：基于目标页面关联的源文件，获取目标页面对应的.vue文件；其中，.vue文件表征目标页面对应的vue单文件组件；接着，对.vue文件包含的template文本进行符号正则匹配，获得相应的初始符号名单；其中，template文本表征vue单文件组件的模板结构，模板结构用于展示渲染目标页面包含的各个元素，初始符号名单包括：template文本中的各个函数名称和各个变量名称；进一步地，基于初始符号名单中，各个函数名称各自关联的符号调用信息，对初始符号名单进行多次迭代修改，直至获得符合预设名单修改要求的目标符号名单为止；最终，基于目标符号名单，对.vue文件包含的逻辑交互文本进行冗余数据清理，获得清理后的逻辑交互文本。

特别地，以下结合说明书附图对本申请的优选实施例进行说明，应当理解，此处所描述的优选实施例仅用于说明和解释本申请，并不用于限定本申请，并且在不冲突的情况下，本申请实施例及实施例中的特征可以相互组合。

参阅图1所示，其为本申请实施例适用的一种系统架构示意图，该系统架构包括：目标终端101和服务器102。目标终端101和服务器102之间可通过通信网络进行信息交互，其中，通信网络采用的通信方式可包括：无线通信方式和有线通信方式。

示例性的，目标终端101可通过蜂窝移动通信技术接入网络，与服务器102进行通信，其中，所述蜂窝移动通信技术，比如，包括第五代移动通信(5th Generation MobileNetworks，5G)技术。

可选的，目标终端101可通过短距离无线通信方式接入网络，与服务器102进行通信，其中，所述短距离无线通信方式，比如，包括无线保真(Wireless Fidelity，Wi-Fi)技术。

本申请实施例对上述系统架构中涉及的通信设备的数量不做任何限制，例如，可以更多目标终端，或者没有目标终端，或者还包括其他网络设备，如图1所示，仅以目标终端101和服务器102为例进行描述，下面对上述各设备及其各自的功能进行简要介绍。

目标终端101，是一种可以向用户提供语音和/或数据连通性的设备，可以是支持有线和/或无线连接方式的设备。

示例性的，目标终端101包括但不限于：手机、平板电脑、笔记本电脑、掌上电脑、移动互联网设备(Mobile Internet Device，MID)、可穿戴设备，虚拟现实(Virtual Reality，VR)设备、增强现实(Augmented Reality，AR)设备、工业控制中的无线终端设备、无人驾驶中的无线终端设备、智能电网中的无线终端设备、运输安全中的无线终端设备、智慧城市中的无线终端设备，或智慧家庭中的无线终端设备等。

此外，目标终端101上可以安装有相关的客户端，该客户端可以是软件，例如，应用程序(Application，APP)、浏览器、短视频软件等，也可以是网页、小程序等。在本申请实施例中，目标终端101可以使上述与前端页面相关的客户端，接收服务器102发送的冗余数据清理后的.vue文件，从而根据冗余数据清理后的.vue文件对前端页面进行渲染。

服务器102可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、内容分发网络(Content Delivery Network，CDN)、以及大数据和人工智能平台等基础云计算服务的云服务器。

值得提出的是，在本申请实施例中，服务器102用于基于目标页面关联的源文件，获取目标页面对应的.vue文件；接着，对.vue文件包含的template文本进行符号正则匹配，获得相应的初始符号名单；进一步地，基于初始符号名单中，各个函数名称各自关联的符号调用信息，对初始符号名单进行多次迭代修改，直至获得符合预设名单修改要求的目标符号名单为止；最终，基于目标符号名单，对.vue文件包含的逻辑交互文本进行冗余数据清理，获得清理后的逻辑交互文本。

下面结合上述的系统架构，以及参考附图来描述本申请示例性实施方式提供的冗余数据清理方法，需要注意的是，上述系统架构仅是为了便于理解本申请的精神和原理而示出，本申请的实施方式在此方面不受任何限制。

参阅图2所示，其为本申请实施例提供的一种冗余数据清理方法的实施流程示意图，执行主体以服务器为例，该方法的具体实施流程如下：

S201：基于目标页面关联的源文件，获取目标页面对应的.vue文件。

其中，.vue文件表征：目标页面对应的vue单文件组件；需要说明的是，在本申请实施例中，参阅图3所示，目标页面可以为前端页面，该前端页面中可以包括多种业务模块的业务标志。

在一种可选的实现方式中，在执行步骤S201时，服务器可以对源文件包含的文件内容进行解析，并基于文件内容的解析结果，获得.vue文件的路由索引，其中，路由索引用于指示.vue文件的访问地址，从而基于路由索引和设定的.vue文件查询方式，获取目标页面对应的.vue文件；这样，在根据源文件获取.vue文件时，通过.vue文件的路由索引，可以快速且准确地找到.vue文件。

需要说明的是，在本申请实施例中，并不对服务器根据源文件所包含的文件内容的解析结果，获得.vue文件的路由索引的方式做任何具体限定，可选的，服务器可采用如下3种路由索引的获取方式：

方式A：若解析结果包含的路由配置文件中，存在目标页面的前端路由信息，则基于前端路由信息，生成路由索引。

示例性的，在本申请实施例中，路由配置文件可为router文件，故而，作为单页面应用主要通过路由展示不同的页面，一般目标页面(前端页面)的前端路由信息主要放在router文件内，因此，从router文件内，便可寻找到前端路由信息，根据获得的前端路由信息，生成相应的.vue文件的路由索引。

需要说明的是，上述前端路由信息里最基础的字段有path、name、component和meta；其中，path为跳转时浏览器显示的路径，name为标识，component为该path对应的组件路径，meta为路由携带的信息，里面可以定义任意的字段；因此，参阅图4所示，在确定前端路由信息时，服务器可以统计路由配置的关键字(如，path/name/component/children/meta等)出现的频次来定位前端路由信息(即路由配置核心文件)。

方式B：若解析结果表征目标页面引入路由插件，则从路由插件关联的路由配置信息中，获得与预设的路由配置关键字相匹配的前端路由信息，并基于前端路由信息，生成路由索引。

示例性的，上述路由插件可以为vue-router，若解析结果中出现语句：importRouter from‘vue-router’，则可判定目标页面引入了路由插件，从而可以从路由插件关联的路由配置信息中，获得与预设的路由配置关键字相匹配的前端路由信息(即路由配置核心文件)，进而根据获得的前端路由信息，生成相应的.vue文件的路由索引；需要说明的是，上述预设的路由配置关键字可以包括但不限于：path/name/component/children/meta等。

方式C：若解析结果表征目标页面未引入路由插件，则对目标页面进行访问测试，并基于访问测试结果中的统一资源定位符，生成路由索引。

示例性的，若解析结果中未出现：import Router from‘vue-router’，则可判定目标页面并未引入路由插件，从而可通过对目标网页进行访问测试，收集访问测试结果中的统一资源定位符URL，进而根据获得的统一资源定位符，生成相应的.vue文件的路由索引。

可选的，统一资源定位符可为：http：//localhost:8081/project/project-index。

显而易见，服务器可以采用多种路由索引的获取方式，分别获得相应场景下.vue文件的路由索引，即可确保能够获得.vue文件的路由索引。

还需说明的是，示例性的，上述预设的.vue文件查询方式可以为：component:()＝>import("../views/xx/xx.vue")，其中，views文件夹主要存放路由跳转的文件，xx/xx为前端路由信息或者统一资源定位符的部分内容；故而，若已知端路由信息或者统一资源定位符(的部分内容)，则可根据基于路由索引和设定的.vue文件查询方式，获取目标页面对应的.vue文件。

S202：对.vue文件包含的template文本进行符号正则匹配，获得相应的初始符号名单。

其中，template文本表征：vue单文件组件的模板结构，模板结构用于展示渲染目标页面包含的各个元素，初始符号名单包括：template文本中的各个函数名称和各个变量名称。

需要说明的是，.vue文件通常都由三种顶层语言块构成：<template>、<script>和<style>，以及一些其他的自定义块组成；其中，template主要负责渲染的元素展示，script负责逻辑交互，style负责页面布局与美化。

在一种可选的实现方式中，参阅图5所示，在执行步骤S202时，服务器在获得.vue文件之后，便可基于预设的交互事件使用指令集和预设的变量特性集，对template文本进行符号正则匹配，获得至少一个交互事件和至少一个变量配置信息；接着，对至少一个交互事件进行解析，获得多个函数名称，以及对至少一个变量配置信息进行解析，获得多个变量名称；最终，基于获得的多个函数名称和多个变量名称，构建初始符号名单。

其中，上述预设的交互事件使用指令集即是vue事件使用的指令集合，示例性的，预设的交互事件使用指令集包括但不限于：@/on-/before-upload/before Created/prevent/.stop/.once/.capture等，预设的变量特性集包括但不限于：/:data/:/v-loading/v-model/:model/.sync/{{}}等。

故而，服务器根据预设的交互事件使用指令集，对template文本进行符号正则匹配(即通过对关键字进行匹配)，便可获取到template文本包含的至少一个交互事件，例如，交互事件：@keyup.enter.native＝“getlist”；同理，根据预设的变量特性集，对template文本进行符号正则匹配，便可获取到template文本包含的至少一个变量配置信息，例如，变量名称所在的变量配置信息：v-model.trim＝“listQuery.modelName”；需要说明的是，变量名称通常在上述预设的变量特性集包含的各个关键字后面或关键字{{}}包含的内容中。

此外，由于template文本的内容主要涉及页面渲染，故而，采用上述初始符号名单构建方式，获得的初始符号名单便可将其用于后续的页面渲染，即可以确定页面渲染所需的各个符号(变量和函数)。

可选的，服务器在基于多个函数名称和多个变量名称，构建初始符号名单的过程中，可以对获得函数名称的函数和获得变量名称的变量进行标记，即获得相应函数的函数类型和变量的变量类型，再根据确定函数类型的函数名称和变量类型的变量名称，构建初始符号名单；这样，通过对函数和变量进行类型标定，有利于对函数和变量进行分类处理，也在一定程度上，提高了后续页面渲染，以及函数或/和变量查询的效率。

示例性的，服务器可根据获得的函数名称和变量名称，对相应函数和变量进行标记，获得函数的函数类型和变量的变量类型，再根据函数类型标记后的多个函数名称，以及变量类型标记后的多个变量名称，构建初始符号名单；具体方式为：分别将多个函数名称标记为各自对应函数的函数类型，以及分别将多个变量名称标记为各自对应变量的变量类型，基于函数类型标记后的多个函数名称，以及变量类型标记后的多个变量名称，构建初始符号名单。

S203：基于初始符号名单中，各个函数名称各自关联的符号调用信息，对初始符号名单进行多次迭代修改，直至获得符合预设名单修改要求的目标符号名单为止。

其中，上述预设名单修改要求表征：目标符号名单包含template文本中，直接调用和间接调用的所有函数和变量。

在一种可选的实现方式中，在执行步骤S203时，服务器在获得初始符号名单之后，便可对初始符号名单进行多次迭代修改；其中，在一次迭代修改的过程中，针对初始符号名单中，各个函数名称各自关联的符号调用信息，分别执行以下操作：若第一函数名称关联的符号调用信息中，存在至少一个符号名称，则基于至少一个符号名称对初始符号名单进行修改，获得修改后的初始符号名单；其中，第一函数名称为各个函数名称中的任意一个，每个符号名称为函数名称或者变量名称；或者，分别将至少一个符号名称标记为各自对应符号的符号类型，并基于符号类型标记后的至少一个符号名称对初始符号名单进行修改，获得修改后的初始符号名单。

示例性的，假定上述初始符号名单为白名单，函数名称关联的符号调用信息为函数名称对应函数体的信息，第一函数名称对应的函数为A函数，故而，服务器对A函数的符号调用信息进行解析，若A函数调用了B函数，则将B函数标记为函数类型并放入白名单，如果A函数存在变量(如，全局变量)也可以在标记后放入白名单，因此，通过这种方式，递归进入B函数内，继续读取函数体并标记放入白名单，便可完整地获取template文本中，直接调用和间接调用的所有函数和变量。

故而，参阅图6所示，服务器可以遍历源文件下router文件，生成项目路由索引，并找到对应的.vue文件；接着，分析vue语法特性，获取函数调用规则与变量使用规则，通过对.vue文件中template部分进行正则匹配获取变量和函数并进行类型标记并放入白名单；进一步地，遍历第2步白名单里的函数A，并匹配其函数体，获取其体内调用的其他函数B与全局变量C，并打上标记放入白名单，继续递归调用函数B获取B函数体调用的函数与变量，即遍历函数体的调用链，标记调用函数链和白名单；最终，对整个.vue文件标记完毕，将script和setup()(即逻辑交互文本)中，未进入白名单且未标记的变量函数进行清除，从而完成对.vue文件的优化。

S204：基于目标符号名单，对.vue文件包含的逻辑交互文本进行冗余数据清理，获得清理后的逻辑交互文本。

其中，在本申请实施例中，上述逻辑交互文本主要包含Vue项目中用于负责逻辑交互的数据信息，可选的，逻辑交互文本包含script或者script和setup()。

具体的，在执行步骤S204时，服务器在获得目标符号名单之后，便可通过判断逻辑交互文本中，是否存在目标符号名单不包含的函数或变量，来进行冗余数据清理；具体来说：若逻辑交互文本中，存在目标符号名单不包含的函数，则将函数作为冗余数据从逻辑交互文本中清除；若逻辑交互文本中，存在目标符号名单不包含的变量，则将变量作为冗余数据从逻辑交互文本中清除。

在一种可选的实现方式中，基于上述S201～S204的冗余数据清理方法步骤，参阅图7所示，其为本申请实施例提供的一种冗余数据清理的逻辑示意图，服务器基于目标页面关联的源文件，获取目标页面对应的.vue文件之后，便可对.vue文件包含的template文本进行符号正则匹配，获得相应的初始符号名单，从而基于初始符号名单中，各个函数名称各自关联的符号调用信息，对初始符号名单进行多次迭代修改，直至获得符合预设名单修改要求的目标符号名单为止；最终，基于目标符号名单，对.vue文件包含的逻辑交互文本进行冗余数据清理，获得清理后的逻辑交互文本。

综上所述，在本申请实施例所提供的冗余数据清理方法中，根据目标页面关联的源文件，获得目标页面对应的.vue文件的路由索引之后，便可对.vue文件包含的template文本进行符号正则匹配，获得相应的初始符号名单；这样，由于template文本的内容主要涉及页面渲染，故而，获得的初始符号名单便可将其用于后续的页面渲染；并且，基于初始符号名单中，各个函数名称各自关联的符号调用信息，对初始符号名单进行多次迭代修改，获得符合预设名单修改要求的目标符号名单，可以确保能够获得完整的用于页面渲染的符号名单；进一步地，基于获得的目标符号名单，对.vue文件包含的逻辑交互文本进行冗余数据清理，获得清理后的逻辑交互文本，这样，便可及时地完成对.vue文件中冗余数据的筛查和清理，以提高后续借助.vue文件进行页面渲染的速度。

采用这种方式，在进行冗余数据清理的过程中，根据获得的目标符号名单，对.vue文件包含的逻辑交互文本进行冗余数据清理，也避免了相关技术中，通过手动筛查并清理冗余数据，在开发数据的数据量较大的情况下，需要花费大量的时间，才能完成对冗余数据的筛查和清理的技术弊端。

进一步地，基于相同的技术构思，本申请实施例提供了一种冗余数据清理装置，该冗余数据清理装置用以实现本申请实施例的上述方法流程。参阅图8所示，该冗余数据清理装置包括：获取模块801、匹配模块802、修改模块803以及清理模块804，其中：

获取模块801，用于基于目标页面关联的源文件，获取目标页面对应的.vue文件；其中，.vue文件表征目标页面对应的vue单文件组件；

匹配模块802，用于对.vue文件包含的template文本进行符号正则匹配，获得相应的初始符号名单；其中，template文本表征vue单文件组件的模板结构，模板结构用于展示渲染目标页面包含的各个元素，初始符号名单包括：template文本中的各个函数名称和各个变量名称；

修改模块803，用于基于初始符号名单中，各个函数名称各自关联的符号调用信息，对初始符号名单进行多次迭代修改，直至获得符合预设名单修改要求的目标符号名单为止；

清理模块804，用于基于目标符号名单，对.vue文件包含的逻辑交互文本进行冗余数据清理，获得清理后的逻辑交互文本。

在一种可选的实施例中，在基于目标页面关联的源文件，获取目标页面对应的.vue文件时，所述获取模块801具体用于：

对源文件包含的文件内容进行解析，并基于文件内容的解析结果，获得.vue文件的路由索引；其中，路由索引用于指示.vue文件的访问地址；

基于路由索引和设定的.vue文件查询方式，获取目标页面对应的.vue文件。

在一种可选的实施例中，在基于文件内容的解析结果，获得.vue文件的路由索引时，所述获取模块801具体用于：

若解析结果包含的路由配置文件中，存在目标页面的前端路由信息，则基于前端路由信息，生成路由索引；

若解析结果表征目标页面引入路由插件，则从路由插件关联的路由配置信息中，获得与预设的路由配置关键字相匹配的前端路由信息，并基于前端路由信息，生成路由索引；

若解析结果表征目标页面未引入路由插件，则对目标页面进行访问测试，并基于访问测试结果中的统一资源定位符，生成路由索引。

在一种可选的实施例中，在对.vue文件包含的template文本进行符号正则匹配，获得相应的初始符号名单时，所述匹配模块802具体用于：

基于预设的交互事件使用指令集和预设的变量特性集，对template文本进行符号正则匹配，获得至少一个交互事件和至少一个变量配置信息；

对至少一个交互事件进行解析，获得多个函数名称，以及对至少一个变量配置信息进行解析，获得多个变量名称；

基于多个函数名称和多个变量名称，构建初始符号名单。

在一种可选的实施例中，在基于多个函数名称和多个变量名称，构建初始符号名单时，所述匹配模块802具体用于：

分别将多个函数名称标记为各自对应函数的函数类型，以及分别将多个变量名称标记为各自对应变量的变量类型；

基于函数类型标记后的多个函数名称，以及变量类型标记后的多个变量名称，构建初始符号名单。

在一种可选的实施例中，在基于初始符号名单中，各个函数名称各自关联的符号调用信息，对初始符号名单进行多次迭代修改时，所述修改模块803具体用于：

在一次迭代修改的过程中，针对初始符号名单中，各个函数名称各自关联的符号调用信息，分别执行以下操作：

若第一函数名称关联的符号调用信息中，存在至少一个符号名称，则基于至少一个符号名称对初始符号名单进行修改，获得修改后的初始符号名单；其中，第一函数名称为各个函数名称中的任意一个，每个符号名称为函数名称或者变量名称；

或者，

分别将至少一个符号名称标记为各自对应符号的符号类型，并基于符号类型标记后的至少一个符号名称对初始符号名单进行修改，获得修改后的初始符号名单。

在一种可选的实施例中，在基于目标符号名单，对.vue文件包含的逻辑交互文本进行冗余数据清理时，所述清理模块804具体用于：

若逻辑交互文本中，存在目标符号名单不包含的函数，则将函数作为冗余数据从逻辑交互文本中清除；

若逻辑交互文本中，存在目标符号名单不包含的变量，则将变量作为冗余数据从逻辑交互文本中清除。

基于相同的技术构思，本申请实施例还提供了一种电子设备，该电子设备可实现本申请上述实施例提供的冗余数据清理方法流程。在一种实施例中，该电子设备可以是服务器，也可以是终端设备或其他电子设备。如图9所示，该电子设备可包括：

至少一个处理器901，以及与至少一个处理器901连接的存储器902，本申请实施例中不限定处理器901与存储器902之间的具体连接介质，图9中是以处理器901和存储器902之间通过总线900连接为例。总线900在图9中以粗线表示，其它部件之间的连接方式，仅是进行示意性说明，并不引以为限。总线900可以分为地址总线、数据总线、控制总线等，为便于表示，图9中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。或者，处理器901也可以称为控制器，对于名称不做限制。

在本申请实施例中，存储器902存储有可被至少一个处理器901执行的指令，至少一个处理器901通过执行存储器902存储的指令，可以执行前文论述的一种冗余数据清理方法。处理器901可以实现图8所示的装置中各个模块的功能。

其中，处理器901是该装置的控制中心，可以利用各种接口和线路连接整个该控制设备的各个部分，通过运行或执行存储在存储器902内的指令以及调用存储在存储器902内的数据，该装置的各种功能和处理数据，从而对该装置进行整体监控。

在一种可能的设计中，处理器901可包括一个或多个处理单元，处理器901可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器901中。在一些实施例中，处理器901和存储器902可以在同一芯片上实现，在一些实施例中，它们也可以在独立的芯片上分别实现。

处理器901可以是通用处理器，例如CPU、数字信号处理器、专用集成电路、现场可编程门阵列或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件，可以实现或者执行本申请实施例中公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者任何常规的处理器等。结合本申请实施例所公开的一种冗余数据清理方法的步骤可以直接体现为硬件处理器执行完成，或者用处理器中的硬件及软件模块组合执行完成。

存储器902作为一种非易失性计算机可读存储介质，可用于存储非易失性软件程序、非易失性计算机可执行程序以及模块。存储器902可以包括至少一种类型的存储介质，例如可以包括闪存、硬盘、多媒体卡、卡型存储器、随机访问存储器(Random AccessMemory，RAM)、静态随机访问存储器(Static Random Access Memory，SRAM)、可编程只读存储器(Programmable Read Only Memory，PROM)、只读存储器(Read Only Memory，ROM)、带电可擦除可编程只读存储器(Electrically Erasable Programmable Read-Only Memory，EEPROM)、磁性存储器、磁盘、光盘等等。存储器902是能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质，但不限于此。本申请实施例中的存储器902还可以是电路或者其它任意能够实现存储功能的装置，用于存储程序指令和/或数据。

通过对处理器901进行设计编程，可以将前述实施例中介绍的一种冗余数据清理方法所对应的代码固化到芯片内，从而使芯片在运行时能够执行图2所示的实施例的一种冗余数据清理方法的步骤。如何对处理器901进行设计编程为本领域技术人员所公知的技术，这里不再赘述。

基于同一发明构思，本申请实施例还提供一种存储介质，该存储介质存储有计算机指令，当该计算机指令在计算机上运行时，使得计算机执行前文论述的一种冗余数据清理方法。

在一些可能的实施方式中，本申请还提供了一种冗余数据清理方法的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当程序产品在装置上运行时，程序代码用于使该控制设备执行本说明书上述描述的根据本申请各种示例性实施方式的一种冗余数据清理方法中的步骤。

应当注意，尽管在上文详细描述中提及了装置的若干单元或子单元，但是这种划分仅仅是示例性的并非强制性的。实际上，根据本申请的实施方式，上文描述的两个或更多单元的特征和功能可以在一个单元中具体化。反之，上文描述的一个单元的特征和功能可以进一步划分为由多个单元来具体化。

此外，尽管在附图中以特定顺序描述了本申请方法的操作，但是，这并非要求或者暗示必须按照该特定顺序来执行这些操作，或是必须执行全部所示的操作才能实现期望的结果。附加地或备选地，可以省略某些步骤，将多个步骤合并为一个步骤执行，和/或将一个步骤分解为多个步骤执行。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个服务器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

可使用一种或多种程序设计语言的任意组合来编写用于执行本申请操作的程序代码，程序设计语言包括面向对象的程序设计语言，诸如Java、C++等，还包括常规的过程式程序设计语言，诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算装置上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算装置上部分在远程计算装置上执行、或者完全在远程计算装置或服务器上执行。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

显然，本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的精神和范围。这样，倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内，则本申请也意图包含这些改动和变型在内。

Claims (16)

1.一种冗余数据清理方法，其特征在于，包括：

基于目标页面关联的源文件，获取所述目标页面对应的.vue文件；其中，所述.vue文件表征所述目标页面对应的vue单文件组件；

对所述.vue文件包含的template文本进行符号正则匹配，获得相应的初始符号名单；其中，所述template文本表征所述vue单文件组件的模板结构，所述模板结构用于展示渲染所述目标页面包含的各个元素，所述初始符号名单包括：所述template文本中的各个函数名称和各个变量名称；

基于所述初始符号名单中，各个函数名称各自关联的符号调用信息，对所述初始符号名单进行多次迭代修改，直至获得符合预设名单修改要求的目标符号名单为止；

基于所述目标符号名单，对所述.vue文件包含的逻辑交互文本进行冗余数据清理，获得清理后的逻辑交互文本。

2.如权利要求1所述的方法，其特征在于，所述基于目标页面关联的源文件，获取所述目标页面对应的.vue文件，包括：

对所述源文件包含的文件内容进行解析，并基于所述文件内容的解析结果，获得所述.vue文件的路由索引；其中，所述路由索引用于指示所述.vue文件的访问地址；

基于所述路由索引和设定的.vue文件查询方式，获取所述目标页面对应的.vue文件。

3.如权利要求2所述的方法，其特征在于，所述基于所述文件内容的解析结果，获得所述.vue文件的路由索引，包括：

若所述解析结果包含的路由配置文件中，存在所述目标页面的前端路由信息，则基于所述前端路由信息，生成所述路由索引；

若所述解析结果表征所述目标页面引入路由插件，则从所述路由插件关联的路由配置信息中，获得与预设的路由配置关键字相匹配的前端路由信息，并基于所述前端路由信息，生成所述路由索引；

若所述解析结果表征所述目标页面未引入路由插件，则对所述目标页面进行访问测试，并基于访问测试结果中的统一资源定位符，生成所述路由索引。

4.如权利要求1所述的方法，其特征在于，所述对所述.vue文件包含的template文本进行符号正则匹配，获得相应的初始符号名单，包括：

基于预设的交互事件使用指令集和预设的变量特性集，对所述template文本进行符号正则匹配，获得至少一个交互事件和至少一个变量配置信息；

对所述至少一个交互事件进行解析，获得多个函数名称，以及对所述至少一个变量配置信息进行解析，获得多个变量名称；

基于所述多个函数名称和所述多个变量名称，构建所述初始符号名单。

5.如权利要求4所述的方法，其特征在于，所述基于所述多个函数名称和所述多个变量名称，构建所述初始符号名单，包括：

分别将所述多个函数名称标记为各自对应函数的函数类型，以及分别将所述多个变量名称标记为各自对应变量的变量类型；

基于函数类型标记后的多个函数名称，以及变量类型标记后的多个变量名称，构建所述初始符号名单。

6.如权利要求1-5中任一项所述的方法，其特征在于，所述基于所述初始符号名单中，各个函数名称各自关联的符号调用信息，对所述初始符号名单进行多次迭代修改，包括：

在一次迭代修改的过程中，针对所述初始符号名单中，各个函数名称各自关联的符号调用信息，分别执行以下操作：

若第一函数名称关联的符号调用信息中，存在至少一个符号名称，则基于所述至少一个符号名称对所述初始符号名单进行修改，获得修改后的初始符号名单；其中，所述第一函数名称为所述各个函数名称中的任意一个，每个符号名称为函数名称或者变量名称；

或者，

分别将所述至少一个符号名称标记为各自对应符号的符号类型，并基于符号类型标记后的至少一个符号名称对所述初始符号名单进行修改，获得所述修改后的初始符号名单。

7.如权利要求1-5中任一项所述的方法，其特征在于，所述基于所述目标符号名单，对所述.vue文件包含的逻辑交互文本进行冗余数据清理，包括：

若所述逻辑交互文本中，存在所述目标符号名单不包含的函数，则将所述函数作为冗余数据从所述逻辑交互文本中清除；

若所述逻辑交互文本中，存在所述目标符号名单不包含的变量，则将所述变量作为冗余数据从所述逻辑交互文本中清除。

8.一种冗余数据清理装置，其特征在于，包括：

获取模块，用于基于目标页面关联的源文件，获取所述目标页面对应的.vue文件；其中，所述.vue文件表征所述目标页面对应的vue单文件组件；

匹配模块，用于对所述.vue文件包含的template文本进行符号正则匹配，获得相应的初始符号名单；其中，所述template文本表征所述vue单文件组件的模板结构，所述模板结构用于展示渲染所述目标页面包含的各个元素，所述初始符号名单包括：所述template文本中的各个函数名称和各个变量名称；

修改模块，用于基于所述初始符号名单中，各个函数名称各自关联的符号调用信息，对所述初始符号名单进行多次迭代修改，直至获得符合预设名单修改要求的目标符号名单为止；

清理模块，用于基于所述目标符号名单，对所述.vue文件包含的逻辑交互文本进行冗余数据清理，获得清理后的逻辑交互文本。

9.如权利要求8所述的装置，其特征在于，在所述基于目标页面关联的源文件，获取所述目标页面对应的.vue文件时，所述获取模块具体用于：

对所述源文件包含的文件内容进行解析，并基于所述文件内容的解析结果，获得所述.vue文件的路由索引；其中，所述路由索引用于指示所述.vue文件的访问地址；

基于所述路由索引和设定的.vue文件查询方式，获取所述目标页面对应的.vue文件。

10.如权利要求9所述的装置，其特征在于，在所述基于所述文件内容的解析结果，获得所述.vue文件的路由索引时，所述获取模块具体用于：

若所述解析结果包含的路由配置文件中，存在所述目标页面的前端路由信息，则基于所述前端路由信息，生成所述路由索引；

若所述解析结果表征所述目标页面引入路由插件，则从所述路由插件关联的路由配置信息中，获得与预设的路由配置关键字相匹配的前端路由信息，并基于所述前端路由信息，生成所述路由索引；

若所述解析结果表征所述目标页面未引入路由插件，则对所述目标页面进行访问测试，并基于访问测试结果中的统一资源定位符，生成所述路由索引。

11.如权利要求8所述的装置，其特征在于，在所述对所述.vue文件包含的template文本进行符号正则匹配，获得相应的初始符号名单时，所述匹配模块具体用于：

基于预设的交互事件使用指令集和预设的变量特性集，对所述template文本进行符号正则匹配，获得至少一个交互事件和至少一个变量配置信息；

对所述至少一个交互事件进行解析，获得多个函数名称，以及对所述至少一个变量配置信息进行解析，获得多个变量名称；

基于所述多个函数名称和所述多个变量名称，构建所述初始符号名单。

12.如权利要求11所述的装置，其特征在于，在所述基于所述多个函数名称和所述多个变量名称，构建所述初始符号名单时，所述匹配模块具体用于：

分别将所述多个函数名称标记为各自对应函数的函数类型，以及分别将所述多个变量名称标记为各自对应变量的变量类型；

基于函数类型标记后的多个函数名称，以及变量类型标记后的多个变量名称，构建所述初始符号名单。

13.如权利要求8-12中任一项所述的装置，其特征在于，在所述基于所述初始符号名单中，各个函数名称各自关联的符号调用信息，对所述初始符号名单进行多次迭代修改时，所述修改模块具体用于：

在一次迭代修改的过程中，针对所述初始符号名单中，各个函数名称各自关联的符号调用信息，分别执行以下操作：

若第一函数名称关联的符号调用信息中，存在至少一个符号名称，则基于所述至少一个符号名称对所述初始符号名单进行修改，获得修改后的初始符号名单；其中，所述第一函数名称为所述各个函数名称中的任意一个，每个符号名称为函数名称或者变量名称；

或者，

分别将所述至少一个符号名称标记为各自对应符号的符号类型，并基于符号类型标记后的至少一个符号名称对所述初始符号名单进行修改，获得所述修改后的初始符号名单。

14.如权利要求8-12中任一项所述的装置，其特征在于，在所述基于所述目标符号名单，对所述.vue文件包含的逻辑交互文本进行冗余数据清理时，所述清理模块具体用于：

若所述逻辑交互文本中，存在所述目标符号名单不包含的函数，则将所述函数作为冗余数据从所述逻辑交互文本中清除；

若所述逻辑交互文本中，存在所述目标符号名单不包含的变量，则将所述变量作为冗余数据从所述逻辑交互文本中清除。

15.一种电子设备，包括存储器，处理器及存储在存储器上并可在处理器运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1-7中任一项所述的方法。

16.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1-7中任一所述方法的步骤。