代码文件分析方法、工具、装置、设备和存储介质

技术领域

本发明涉及计算机技术领域，尤其涉及一种代码文件分析方法、工具、装置、设备和存储介质。

背景技术

随着互联网的发展，网站设计、网页制作以及应用程序开发等代码开发任务包含的功能越来越丰富，该任务对应的代码文件也越来越复杂。目前，现有方法通常会对任务进行自上而下的拆分，把通用的、可复用的代码文件编写成一套组件库，该组件库中包含不同类型的组件。其中，组件可以认为是页面的基本组成部分，其具体可以包括弹窗、业务条、按钮、复选框、标签、输入框、卡片中的任一种。

并且组件的实现方式可以直接影响页面代码文件的复杂度，其中，组件的实现方式可以包括从基础组件库调用，或者直接在任务对应的代码文件中编写。因此，如何准确地确定组件的实现方式就成为一个亟待解决的问题。

发明内容

有鉴于此，本发明实施例提供一种代码文件分析方法、工具、装置、设备和存储介质，用以准确地确定组件的实现方式。

第一方面，本发明实施例提供一种代码文件分析方法，包括：

获取页面代码文件，页面包含目标组件在内的至少一个类型的组件；

响应于对所述页面代码文件中目标代码的编译，确定所述目标代码的目标路径以及所述目标代码描述的所述目标组件的类型；

根据所述目标路径，确定所述目标组件的实现方式，所述实现方式包括从预设组件库中调用或者在所述页面代码文件中编写；

响应于所述页面代码文件的编译完成，统计所述页面中同一类组件各自的实现方式。

第二方面，本发明实施例提供一种代码编译工具，包括：

所述编译组件，用于编译页面代码文件，页面包含至少一个类型的组件；

所述统计组件，用于响应于对所述页面代码文件中目标代码的编译，确定所述目标代码的目标路径以及所述目标代码描述的所述目标组件的类型；

根据所述目标路径，确定所述目标组件的实现方式，所述实现方式包括从预设组件库中调用或者在所述页面代码文件中编写；

响应于所述页面代码文件的编译完成，统计所述页面中同一类组件各自的实现方式。

第三方面，本发明实施例提供一种代码文件分析装置，包括：

代码文件获取模块，用于获取页面代码文件，页面包含目标组件在内的至少一个类型的组件；

目标代码信息确定模块，用于响应于对所述页面代码文件中目标代码的编译，确定所述目标代码的目标路径以及所述目标代码描述的所述目标组件的类型；

组件实现方式确定模块，用于根据所述目标路径，确定所述目标组件的实现方式，所述实现方式包括从预设组件库中调用或者在所述页面代码文件中编写；

统计模块，用于响应于所述页面代码文件的编译完成，统计所述页面中同一类组件各自的实现方式。

第四方面，本发明实施例提供一种电子设备，包括处理器和存储器，所述存储器用于存储一条或多条计算机指令，其中，所述一条或多条计算机指令被所述处理器执行时实现上述第一方面中的代码文件分析方法。该电子设备还可以包括通信接口，用于与其他设备或通信系统通信。

第五方面，本发明实施例提供了一种非暂时性机器可读存储介质，所述非暂时性机器可读存储介质上存储有可执行代码，当所述可执行代码被电子设备的处理器执行时，使所述处理器至少可以实现如上述第一方面中的代码文件分析方法。

本发明实施例提供的代码文件分析方法中，获取页面代码文件，页面包含目标组件在内的至少一个类型的组件。然后，响应于对页面代码文件中目标代码的编译，确定目标代码的目标路径以及目标代码描述的目标组件的类型，并根据目标路径，确定目标组件的实现方式。其中，实现方式包括从预设组件库中调用或者在页面代码文件中编写。最终，响应于页面代码文件的编译完成，统计页面中同一类组件各自的实现方式。

页面代码文件对应于代码开发任务。而在实际中，在执行代码开发任务的过程中会产生很多文件，有的是需要编译的文件，有的是不需要被编译的文件，比如被开发人员注释掉的文件或者是执行任务过程中产生的中间文件。如果直接遍历代码开发任务的全部文件并对其进行组件实现方式的统计，不需要编译的文件中的组件会对统计结果造成干扰。而上述方法中，采用的是一边编译一边统计的方式，即进行统计的页面代码文件都是需要编译的文件，从而能够改善上述问题，准确地确定出组件的实现方式。

附图说明

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

图1为本发明实施例提供的一种代码文件分析方法的流程图；

图2为本发明实施例提供的另一种代码文件分析方法的流程图；

图3为本发明实施例提供的又一种代码文件分析方法的流程图；

图4为本发明实施例提供的又一种代码文件分析方法的流程图；

图5为本发明实施例提供的一种组件实现方式的占比统计方法的流程图；

图6为本发明实施例提供的一种代码编译工具的结构示意图；

图7为本发明实施例提供的一种租房应用程序开发场景下的代码文件分析过程的示意图；

图8为本发明实施例提供的一种代码文件分析装置的结构示意图；

图9为与图8所示实施例提供的代码文件分析装置对应的电子设备的结构示意图。

具体实施方式

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

在本发明实施例中使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本发明。在本发明实施例和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义，“多种”一般包含至少两种，但是不排除包含至少一种的情况。

应当理解，本文中使用的术语“和/或”仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中字符“/”，一般表示前后关联对象是一种“或”的关系。

取决于语境，如在此所使用的词语“如果”、“若”可以被解释成为“在……时”或“当……时”或“响应于确定”或“响应于识别”。类似地，取决于语境，短语“如果确定”或“如果识别(陈述的条件或事件)”可以被解释成为“当确定时”或“响应于确定”或“当识别(陈述的条件或事件)时”或“响应于识别(陈述的条件或事件)”。

需要说明的有，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的商品或者系统不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种商品或者系统所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的商品或者系统中还存在另外的相同要素。

需要说明的还有，本发明所涉及的用户信息(包括但不限于用户设备信息、用户个人信息等)和数据(包括但不限于用于分析的数据、存储的数据、展示的数据等)，均为经用户授权或者经过各方充分授权的信息和数据，并且相关数据的收集、使用和处理需要遵守相关国家和地区的相关法律法规和标准，并提供有相应的操作入口，供用户选择授权或者拒绝。

下面结合附图对本发明的一些实施方式作详细说明。在各实施例之间不冲突的情况下，下述的实施例及实施例中的特征可以相互组合。另外，下述各方法实施例中的步骤时序仅为一种举例，而非严格限定。

图1为本发明实施例提供的一种代码文件分析方法的流程图。本发明实施例提供的代码文件分析方法可以由代码编译工具执行。如图1所示，该方法可以包括如下步骤：

S101，获取页面代码文件，页面包含目标组件在内的至少一个类型的组件。

代码编译工具可以从预设的代码开发任务的入口点开始解析，以得到该任务包含的页面代码文件。该页面代码文件可以是代码开发任务中需要编译的文件，即页面代码文件不包括开发人员被注释掉的文件或者不需要被编译的文件。并且响应于对页面代码文件中目标代码的编译，代码编译工具可以确定目标代码所在的路径以及目标代码描述的目标组件的类型。其中，页面可以包含目标组件在内的至少一个类型。

可选地，代码开发任务可以是背景技术中提及的网站设计、网页制作以及应用程序开发等任务。页面代码文件可以是网站中任一页面所对应的代码文件，或者可以是应用程序中任一页面对所对应的代码文件，在此不对页面代码文件的类型做具体的限定。以应用程序开发任务为例，页面包含的组件的类型可以是弹窗、业务条、按钮、复选框、标签、输入框、卡片等等。

可选地，代码编译工具可以是具有插件机制的webpack，还可以是其他具有插件机制的编译器，比如微软推出的轻量级代码编辑器(Visual Studio Code，简称VS Code)。

S102，响应于对页面代码文件中目标代码的编译，确定目标代码的目标路径以及目标代码描述的目标组件的类型。

在代码编译工具获取到页面代码文件之后，在对页面代码文件中的代码进行编译的过程中，代码编译工具可以确定页面代码文件中的目标代码。

可选地，一种方式是，代码编译工具可以对该页面代码文件进行解析，以找到页面代码文件中的目标代码。另一种方式是，可以通过人工筛选的方式找到页面代码文件中包含的目标代码。其中，目标代码可以是页面代码文件用于描述一个组件即目标组件，目标代码能够反映目标组件的类型以及目标组件的目标路径。

S103，根据目标路径，确定目标组件的实现方式，实现方式包括从预设组件库中调用或者在页面代码文件中编写。

接着，代码编译工具可以判断目标路径是预设组件库的路径还是页面代码文件的路径，从而确定目标组件的实现方式。即当目标路径与预设组件库的路径相同时，代码编译工具可以确定目标组件的实现方式是从预设组件库中调用。当目标路径与页面代码文件的路径相同时，代码编译工具可以确定目标组件的实现方式是在页面代码文件中编写。

可选地，预设组件库可以是由一些常用的基础组件构成的基础组件库，也可以是由代码开发任务团队成员根据任务的实际需求编写的一套自定义组件库。

S104，响应于页面代码文件的编译完成，统计页面中同一类组件各自的实现方式。

最终，代码编译工具可以按照步骤S101～步骤S103的方式确定出页面代码文件中不同组件各自的实现方式，则代码编译工具响应于页面代码文件的编译完成，也即是在页面代码文件编译后，则可以实现对页面中同一类组件各自的实现方式进行统计，即统计出从预设组件库中调用的组件的数量和在页面代码文件中编写的组件的数量。其中，统计结果可以认为是页面代码文件的分析结果。

本发明实施例提供的代码文件分析方法中，获取页面代码文件，页面包含目标组件在内的至少一个类型的组件。然后，响应于对页面代码文件中目标代码的编译，确定目标代码的目标路径以及目标代码描述的目标组件的类型，并根据目标路径，确定目标组件的实现方式。其中，实现方式包括从预设组件库中调用或者在页面代码文件中编写。最终，响应于页面代码文件的编译完成，统计页面中同一类组件各自的实现方式。

页面代码文件对应于代码开发任务。而在实际中，在执行代码开发任务的过程中会产生很多文件，有的是需要编译的文件，有的是不需要被编译的文件，比如被开发人员注释掉的文件或者是执行任务过程中产生的中间文件。如果直接遍历代码开发任务的全部文件并对其进行组件实现方式的统计，不需要编译的文件中的组件会对统计结果造成干扰。而上述方法中，采用的是一边编译一边统计的方式，即进行统计的页面代码文件都是需要编译的文件，从而能够改善上述问题，准确地确定出组件的实现方式。

图1所示实施例中已经提及代码编译工具可以统计出页面中同一类组件各自的实现方式，在得到统计结果之后，代码编译工具还可以根据统计结果，进一步调整组件的实现方式。

具体来说，代码编译工具可以根据统计结果，将页面中同一类组件的实现方式统一为从预设组件库中调用，这样可以减少页面代码文件的数量，从而降低页面代码文件的复杂度。

举例来说，假设组件的类型为按钮，在代码编译工具获取到的统计结果中，从预设组件库中调用的按钮的数量为1，在页面代码文件中编写的按钮的数量为3，则代码编译工具可以将在页面代码文件中编写的3个按钮都调整为从预设组件库中调用的按钮，最终使得4个按钮都从预设组件库中调用。

图1所示实施例已经公开了可以由代码编译工具判断目标路径是预设组件库的路径还是页面代码文件的路径，从而确定目标组件的实现方式。具体地，代码编译工具可以利用正则算法进行路径匹配，再根据匹配路径确定目标组件的实现方式。基于此种方式，图1所示的方法还可以进一步细化为图2所示的方法。则图2为本发明实施例提供的另一种代码文件分析方法的流程图。如图2所示，该方法可以包括以下步骤：

S201，获取页面代码文件，页面包含目标组件在内的至少一个类型的组件。

S202，响应于对页面代码文件中目标代码的编译，确定目标代码的目标路径以及目标代码描述的目标组件的类型。

上述步骤S201～S202的具体实现过程可以参见图1所示实施例中相关步骤的具体描述，在此不再赘述。

S203，读取预设组件库的第一路径以及页面代码文件的第二路径。

代码编译工具可以响应于页面代码文件中预设代码的编译，找到预设组件库的第一路径以及页面代码文件的第二路径，并将第一路径和第二路径传入代码编译工具中的预设函数，以由预设函数读取预设组件库的第一路径以及页面代码文件的第二路径。其中，预设代码可以是根据寻找路径命令编写在页面代码文件中的语句，预设函数可以是代码编译工具中的回调函数。

S204，若目标路径与第一路径匹配，则确定目标组件的实现方式为从预设组件库中调用。

S205，若目标路径与第二路径匹配，则确定目标组件的实现方式为在页面代码文件中编写。

接着，代码编译工具根据读取到的第一路径和第二路径，可以利用正则算法先将目标路径与第一路径进行匹配。若目标路径与第一路径匹配，则可以确定目标组件的实现方式为从预设组件库中调用。

若目标路径与第一路径不匹配，则可以再将目标路径与第二路径进行匹配。若目标路径与第二路径匹配，则可以确定目标组件的实现方式为在页面代码文件中编写。

若目标路径与第一路径不匹配并且目标路径与第二路径也不匹配，则可以判定此种组件的实现方式并不是本方案想要统计分析的数据，也无需进行后续的统计过程。在实际中，不需要分析的组件具体可以是除预设组件库外的其他组件库中的组件。

S206，响应于页面代码文件的编译完成，统计页面中同一类组件各自的实现方式。

上述步骤S206的具体实现过程可以参见图1所示实施例中相关步骤的具体描述，在此不再赘述。

本实施例中，代码编译工具利用正则算法，将目标路径与预设组件库的第一路径以及将目标路径与页面代码文件的第二路径分别进行匹配，能够准确的确定出目标组件的实现方式。

另外，本实施例中未详细描述的内容以及所能实现的技术效果均可以参见上述各实施例中的相关描述，在此不再赘述。

代码编译工具在获取页面代码文件之前，还可以预先注册统计组件，则上述各实施例中提供的分析方法具体可以由代码编译工具中的统计组件执行。可选地，除了图1所示实施例提及的确定目标代码的方式，还可以利用代码编译工具中预先建立的调用关系确定目标代码。则图3为本发明实施例提供的又一种代码文件分析方法的流程图。如图3所示，该方法可以包括以下步骤：

S301，响应于代码编译工具中统计组件的注册，执行代码编译工具中的应用函数。

代码编译工具可以响应于统计组件的注册，执行统计组件内的应用(apply)函数。正如上述各实施例中提及的代码编译工具可以是具有插件机制的webpack，则统计组件可以认为是webpack中的一个插件。具体地，统计组件可以看作是一个插入到webpack的生命周期中的功能即统计功能，用于在特定的时机对webpack获取到的代码做统计处理，应用函数可以配置在统计组件中。

S302，响应于应用函数的执行，在代码编译工具的生命周期到达初始化阶段时，建立起始语句与代码编译工具中第一钩子函数之间的第一调用关系，第一钩子函数上注册有第一回调函数，起始语句作为组件的入口。

然后，应用函数执行并且代码编译工具的生命周期到达初始化阶段时，代码编译工具建立起始语句与代码编译工具中第一钩子函数之间的第一调用关系。利用此调用关系，代码编译工具在编译到页面代码文件中任一组件的起始语句时，根据第一调用关系可以触发第一钩子函数，第一钩子函数上注册有第一回调函数，代码编译工具中的统计组件可以通过执行第一回调函数，以完成后续统计。

其中，起始语句可以作为组件的入口，其具体可以为页面代码文件中表明组件的实现方式的代码语句，比如import A from“B”，其中，“B”为预设组件库的名称。

另外，可选地，一个页面代码文件可以包括至少一段目标代码，一段目标代码对应一个目标组件。则代码编译工具中的统计组件可以获取多段目标代码，在页面代码文件编译过程中逐个确定各目标代码描述的目标组件的实现方式，具体过程可以参见下述步骤中的描述。

S303，获取页面代码文件，页面包含目标组件在内的至少一个类型的组件。

上述步骤S303的具体实现过程可以参见图1所示实施例中相关步骤的具体描述，在此不再赘述。

S304，响应于对目标代码的起始语句的编译，执行第一调用关系，以由第一回调函数确定目标路径和目标组件的名称。

S305，根据名称确定目标组件的类型。

接着，统计组件可以响应于对页面代码文件中任一段目标代码的起始语句的编译，执行第一调用关系以触发第一钩子函数。并且在第一钩子函数触发的同时，执行第一回调函数，以利用第一回调函数的逻辑确定出该目标组件对应的目标路径和目标组件的名称，再根据目标组件的名称确定目标组件的类型。

举例来说，假设一个页面代码文件包括2段目标代码，即目标代码1和目标代码2。此时，代码编译工具可以先响应于对目标代码1的起始语句的编译，执行第一调用关系，以由第一回调函数确定目标代码1对应的目标路径1以及目标代码1描述的目标组件1的名称和类型，比如目标组件1的名称为提交按钮，其名称就能反映出组件的类型，即提交按钮所属的类型为按钮。然后，代码编译工具可以再响应于对目标代码2的起始语句的编译，执行第一调用关系，以由第一回调函数确定目标代码2对应的目标路径2以及目标代码2描述的目标组件2的名称和类型，比如确定出目标组件2的名称为重置按钮，则根据该名称可知，目标组件2的类型也为按钮。

S306，根据目标路径，确定目标组件的实现方式，实现方式包括从预设组件库中调用或者在页面代码文件中编写。

接着，代码编译工具可以根据目标路径，确定相同类型的目标组件的实现方式是从预设组件库中调用还是在页面代码文件中编写。

承接上述举例，假设代码编译工具可以根据目标路径1确定出按钮类型的目标组件1的实现方式是从预设组件库中调用，还可以根据目标路径2确定出按钮类型的目标组件2的实现方式是在页面代码文件中编写。即将从预设组件库中调用的目标组件1的数量设置为1，将在页面代码文件中编写的目标组件2的数量设置为1。另外，需要说明的是，当页面代码文件中同一类型、同一实现方式的组件出现多次时，可以按照数量依次累加进行统计。

根据上述步骤S303～步骤S306中的描述可知，第一调用关系的本质作用是使代码编译组件在准确的时机开启实现方式的确定。

S307，响应于页面代码文件的编译完成，统计页面中同一类组件各自的实现方式。

最终，代码编译工具响应于该页面代码文件编译的完成，可以对页面中同一类组件各自的实现方式进行统计。其中，统计结果可以认为是页面代码文件的分析结果。承接上述举例，即代码编译工具可以统计出该页面代码文件中，从预设组件库中调用的按钮的数量为1，从页面代码文件中编写的按钮的数量也为1。

本实施例中，代码编译工具在获取页面代码文件之前，还可以预先建立第一调用关系，借助该第一调用关系可以在编译到组件的入口时才开始确定组件的实现方式，以避免文件中其他代码对实现方式统计的影响。

另外，本实施例中未详细描述的内容以及所能实现的技术效果均可以参见上述各实施例中的相关描述，在此不再赘述。

在第一调用关系的基础上，可选地，代码编译组件在响应于应用函数的执行之后，还可以建立第二调用关系，并根据第二调用关系统计页面中同一类组件各自的实现方式。则图4为又一种代码文件分析方法的流程图。如图4所示，该方法可以包括以下步骤：

S401，响应于代码编译工具中统计组件的注册，执行代码编译工具中的应用函数。

上述步骤S401的具体实现过程可以参见上述图3所示实施例中相关步骤的具体描述，在此不再赘述。

S402，响应于应用函数的执行，在代码编译工具的生命周期到达初始化阶段时，建立起始语句与代码编译工具中第一钩子函数之间的第一调用关系，第一钩子函数上注册有第一回调函数；以及建立结束语句与代码编译工具中第二钩子函数之间的第二调用关系，第二钩子函数上注册有第二回调函数。

然后，应用函数执行并且代码编译工具的生命周期到达初始化阶段时，代码编译工具建立起始语句与代码编译工具中第一钩子函数之间的第一调用关系。与此同时，代码编译工具还可以建立结束语句与代码编译工具中第二钩子函数之间的第二调用关系。利用第二调用关系，代码编译工具在编译到结束语句时，根据第二调用关系可以触发第二钩子函数，第二钩子函数上注册有第二回调函数。即步骤S402和步骤S302可以一并执行。

其中，结束语句作为代码开发任务的出口，可选地，其具体可以为代码开发任务包括的页面代码文件中的最后一句代码。

S403，获取页面代码文件，页面包含目标组件在内的至少一个类型的组件。

可选地，上述各实施例提及的页面代码文件可以是一个，也可以是多个。在实际中，一个代码开发任务可以包括多个页面代码文件，则代码编译工具可以从代码开发任务的入口点开始对该任务进行解析，以得到该任务包含的全部页面代码文件。其中，每个页面包含至少一个类型的组件。

S404，响应于对目标代码的起始语句的编译，执行第一调用关系，以由第一回调函数确定目标路径和目标组件的名称。

S405，根据名称确定目标组件的类型。

S406，根据目标路径，确定目标组件的实现方式，实现方式包括从预设组件库中调用或者在页面代码文件中编写。

上述步骤S404～S406的具体实现过程可以参见上述图3所示实施例中相关步骤的具体描述，在此不再赘述。

S407，响应于对页面代码文件的结束语句的编译，执行第二调用关系，以由第二回调函数统计页面中同一类组件各自的实现方式，页面代码文件包括代码开发任务对应的全部文件。

然后，代码编译工具可以响应于页面代码文件的结束语句的编译，执行第二调用关系，即触发第二钩子函数，以执行第二钩子函数上的第二回调函数，利用该第二回调函数的统计逻辑统计分析出同一类组件各自的实现方式的情况。其中，页面代码文件可以包括代码开发任务对应的全部文件。结束语句可以是全部文件中最后一个被编译的页面代码文件中的最后一句代码。举例来说，假设一个代码开发任务包括3个页面代码文件，此时，结束语句具体可以是代码开发任务中的第三个页面代码文件的最后一句代码。

第二回调函数可以获取第一回调函数统计出的页面中包括的所有组件的实现方式，并进一步统计出同一类组件中有多少组件是从预设组件库中调用的，又有多少组件是在页面代码文件中编写的。

根据上述步骤中的描述可知，第二调用关系的本质作用是使代码编译组件在准确的时机结束实现方式的确定。

本实施例中，响应于应用函数的执行，在代码编译工具的生命周期到达初始化阶段时，建立第一调用关系和第二调用关系。执行第一调用关系能够使代码编译工具在合适的时机开始确定组件的实现方式，执行第二调用关系能够使代码编译工具在合适的时机停止确定组件的实现方式，并进一步对组件实现方式进行统计。

另外，本实施例中未详细描述的内容以及所能实现的技术效果均可以参见上述各实施例中的相关描述，在此不再赘述。

上述各实施例已经提及代码编译工具可以对页面中同一类组件各自的实现方式进行统计的过程。可选地，在得到上述统计结果之后，代码编译工具还可以进一步分析页面中同一类组件各自实现方式的占比情况。则图5为一种组件实现方式的占比统计方法的流程图。如图5所示，该方法可以包括以下步骤：

S501，在页面包含的同一类组件中，确定实现方式为从预设组件库中调用的组件的第一数量以及实现方式为在页面代码文件中编写的组件的第二数量。

S502，根据第一数量和第二数量，统计页面中同一组件各自实现方式的占比。

其中，同一类组件中还可以包括多个组件，这多个组件各自对应的实现方式可能并不相同。举例来说，假设按钮包括有提交按钮、重置按钮和普通按钮，其中，提交按钮的实现方式是从预设组件库中调用，重置按钮和普通按钮的实现方式是在页面代码文件中编写。

则代码编译工具可以在页面包含的同一类组件中，先分别确定出实现方式为从预设组件库中调用的组件的第一数量以及实现方式为在页面代码文件中编写的组件的第二数量。然后，再根据第一数量和第二数量，利用预设占比公式统计页面中同一类组件各自实现方式的占比。

可选地，预设占比公式可以为第一数量/(第一数量+第二数量)，也即是计算实现方式为从预设组件库中调用的组件的占比情况。预设占比公式还可以为第二数量/(第一数量+第二数量)，也即是计算实现方式为在页面代码文件中编写的组件的占比情况。需要说明的是，预设占比公式可以根据任务的实际需求进行选择。

承接上述按钮的举例，从预设组件库中调用的按钮的第一数量为1，在页面代码文件中编写的按钮的第二数量为2。若预设占比公式为第一数量/(第一数量+第二数量)，则从预设组件库中调用的按钮的占比为1/3。若预设占比公式为第二数量/(第一数量+第二数量)，则在页面代码文件中编写的按钮的占比为2/3。

本实施例中，通过统计页面包含的同一类组件的不同实现方式对应的数量，能够进一步分析出同一类组件的占比情况，即能够准确的分析出同一类组件中有多少组件是从预设组件库中调用的，又有多少组件是在页面代码文件中编写的，以便于后续技术人员能够根据此占比情况，更好地了解同一类型组件的使用情况。

可选地，为了节约成本，降低调整过程中所耗费的人力资源，代码编译工具还可以根据预设要求，将在页面代码文件中编写的组件部分调整为从预设组件库中调用。可选地，预设要求可以是不同实现方式中的组件的数量要求。举例来说，假设统计结果中包括6个在页面代码文件中编写的按钮，4个从预设组件库中调用的按钮。则预设要求可以是将4个在页面代码文件中编写的按钮调整为从预设组件库中调用的按钮。

可选地，预设要求还可以是任一实现方式中的组件的占比要求，比如将从预设组件库中调用的按钮的占比设置为3/5。承接上述举例，则代码编译工具可以根据该占比要求，将2个在页面代码文件中编写的按钮调整为从预设组件库中调用的按钮。

另外，在上述调整组件实现方式的过程中，通过将一部分在页面代码文件中编写的组件调整为从预设组件中调用的组件，还能够降低页面代码文件中代码的数量，从而降低页面代码文件的复杂度。

图6为本发明实施例提供的一种代码编译工具的结构示意图，如图6所示，该代码编译工具包括：编译组件和统计组件。

其中，编译组件可以用于编译页面代码文件，页面包含至少一个类型的组件。其中，页面可以包含目标组件在内的至少一个类型的组件，目标组件的类型可以是弹窗、业务条、按钮、复选框、标签、输入框、卡片等等。对于页面代码文件的获取，代码编译工具可以从预设的代码开发任务的入口点开始解析，以得到该任务包含的页面代码文件。可选地，代码开发任务可以是背景技术中提及的网站设计、网页制作以及应用程序开发等任务。

代码编译工具中的统计组件可以先响应于对页面代码文件中目标代码的编译，确定目标代码的目标路径以及目标代码描述的目标组件的类型。然后，统计组件可以根据目标代码的目标路径，确定目标组件的实现方式。其中，实现方式包括从预设组件库中调用或者在页面代码文件中编写。最终，统计组件可以响应于页面代码文件的编译完成，统计页面中同一类组件各自的实现方式，即分别统计出从预设组件库中调用的同一类组件的数量和在页面代码文件中编写的同一类组件的数量。

本发明实施例提供的代码文件分析方法中，获取页面代码文件，页面包含目标组件在内的至少一个类型的组件。然后，响应于对页面代码文件中目标代码的编译，确定目标代码的目标路径以及目标代码描述的目标组件的类型，并根据目标路径，确定目标组件的实现方式。其中，实现方式包括从预设组件库中调用或者在页面代码文件中编写。最终，响应于页面代码文件的编译完成，统计页面中同一类组件各自的实现方式。

页面代码文件对应于代码开发任务。而在实际中，在执行代码开发任务的过程中会产生很多文件，有的是需要编译的文件，有的是不需要被编译的文件，比如被开发人员注释掉的文件或者是执行任务过程中产生的中间文件。如果直接遍历代码开发任务的全部文件并对其进行组件实现方式的统计，不需要编译的文件中的组件会对统计结果造成干扰。而上述方法中，采用的是一边编译一边统计的方式，即进行统计的页面代码文件都是需要编译的文件，从而能够改善上述问题，准确地确定出组件的实现方式。

另外，本实施例中未详细描述的内容以及所能实现的技术效果均可以参见上述各实施例中的相关描述，在此不再赘述。

为了便于理解，当代码开发任务具体为租房应用程序，代码编译工具具体为webpack时，可以结合图7对以上提供的代码文件分析方法的具体实现过程进行示例性说明。则图7为本发明实施例提供的一种租房应用程序开发场景下的代码文件分析过程的示意图，该过程具体如下；

在页面代码文件编译之前，webpack可以预先注册统计组件，执行统计组件内的应用函数。然后，应用函数执行并且代码编译工具的生命周期到达初始化阶段时，webpack可以建立第一调用关系和第二调用关系。

之后，webpack可以获取租房应用程序包含的全部3个页面代码文件，比如页面代码文件1对应的是首页，页面代码文件2对应的是房屋详情页，页面代码文件3对应的是房屋成交页。假设页面代码文件1包括2段目标代码。则此时，webpack可以先响应于对页面代码文件1中第一段目标代码即目标代码1的起始语句的编译，执行第一调用关系，以利用该关系中的第一回调函数确定组件类型为按钮。然后，响应于对页面代码文件1中第二段目标代码即目标代码2的起始语句的编译，执行第一调用关系，以利用该关系中的第一回调函数确定组件类型为输入框。其中，第一调用关系的本质作用是使代码编译组件在准确的时机开启实现方式的确定。

接着，webpack可以将目标代码1的目标路径1先与基础组件库的第一路径进行正则匹配，若目标路径1与第一路径匹配，则可以确定组件从基础组件库中调用。若目标路径1与第一路径不匹配，则可以再将目标路径1与页面代码文件的第二路径进行正则匹配。若目标路径1与第二路径匹配，则可以确定组件在页面代码文件中编写。即通过上述方法，可以确定出目标代码1描述的按钮的实现方式，按照此方法还可以确定出目标代码2描述的输入框的实现方式。其中，基础组件库可以是由所有基础组件共同构成的组件库，具体可以包括弹窗、业务条、按钮、复选框、标签、输入框、卡片等等。

对于页面代码文件2和页面代码文件3中组件的实现方式的确定过程与上述对页面代码文件1中组件的实现方式的确定过程相同，可以参见上述描述，在此不再赘述。

最终，webpack可以响应于对3个页面代码文件中的最后一个页面代码文件比如页面代码文件3的最后一句代码的编译，执行第二调用关系，以利用该关系中的第二回调函数的统计逻辑统计分析出同一类组件各自的实现方式的情况，比如统计出4个实现方式为从基础组件库中调用的按钮以及6个实现方式为在页面代码文件中编写的按钮。其中，第二调用关系的本质作用是使代码编译组件在准确的时机结束实现方式的确定。

进一步地，在得到统计结果即页面代码文件的分析结果之后，webpack还可以根据占比公式4/(4+6)计算出按钮从基础组件库调用的占比为2/5，以分析出基础组件库的实际使用情况。

另外，在得到统计结果之后，webpack还可以将6个在页面代码文件中编写的按钮都调整为从基础组件库中调用的按钮，以减少页面代码文件中与按钮相关的代码数量，从而降低页面代码文件的复杂度。可选地，为了节约成本，降低调整过程中所耗费的人力资源，webpack还可以只将2个从页面代码文件中编写的按钮调整为从基础组件库中调用的按钮。

另外，本实施例中未详细描述的内容以及所能实现的技术效果均可以参见上述各实施例中的相关描述，在此不再赘述。

以下将详细描述本发明的一个或多个实施例的代码文件分析装置。本领域技术人员可以理解，这些代码文件分析装置均可使用市售的硬件组件通过本方案所教导的步骤进行配置来构成。

图8为本发明实施例提供的一种代码文件分析装置的结构示意图，如图8所示，该装置包括：

代码文件获取模块11，用于获取页面代码文件，页面包含目标组件在内的至少一个类型的组件。

目标代码信息确定模块12，用于响应于对所述页面代码文件中目标代码的编译，确定所述目标代码的目标路径以及所述目标代码描述的所述目标组件的类型。

组件实现方式确定模块13，用于根据所述目标路径，确定所述目标组件的实现方式，所述实现方式包括从预设组件库中调用或者在所述页面代码文件中编写。

统计模块14，用于响应于所述页面代码文件的编译完成，统计所述页面中同一类组件各自的实现方式。

可选地，所述组件实现方式确定模块13，用于读取所述预设组件库的第一路径以及所述页面代码文件的第二路径；若所述目标路径与所述第一路径匹配，则确定所述目标组件的实现方式为从所述预设组件库中调用；若所述目标路径与所述第二路径匹配，则确定所述目标组件的实现方式为在所述页面代码文件中编写。

可选地，所述装置还包括：执行模块15，用于响应于所述代码编译工具中统计组件的注册，执行所述代码编译工具中的应用函数。

调用关系建立模块16，用于响应于所述应用函数的执行，在所述代码编译工具的生命周期到达初始化阶段时，建立起始语句与所述代码编译工具中第一钩子函数之间的第一调用关系，所述第一钩子函数上注册有第一回调函数，所述起始语句作为组件的入口。

所述目标代码信息确定模块12，用于响应于对所述目标代码的起始语句的编译，执行所述第一调用关系，以由所述第一回调函数确定所述目标路径和所述目标组件的名称；根据所述名称确定所述目标组件的类型。

可选地，所述调用关系建立模块16，还用于响应于所述应用函数的执行，在所述代码编译工具的生命周期到达初始化阶段时，建立结束语句与所述代码编译工具中第二钩子函数之间的第二调用关系，所述第二钩子函数上注册有第二回调函数。

所述统计模块14，用于响应于对所述页面代码文件的结束语句的编译，执行所述第二调用关系，以由所述第二回调函数统计所述页面中同一类组件各自的实现方式，所述页面代码文件包括代码开发任务对应的全部文件。

可选地，所述统计模块14，用于在所述页面包含的同一类组件中，确定实现方式为从预设组件库中调用的组件的第一数量以及实现方式为在页面代码文件中编写的组件的第二数量；根据所述第一数量和所述第二数量，统计所述页面中同一组件各自实现方式的占比。

可选地，所述装置还包括：调整模块17，用于将所述页面中同一类组件的实现方式统一为从所述预设组件库中调用。

图8所示装置可以执行图1至图5所示实施例的方法，本实施例未详细描述的部分，可参考对图1至图5所示实施例的相关说明。该技术方案的执行过程和技术效果参见图1至图5所示实施例中的描述，在此不再赘述。

在一个可能的设计中，代码文件分析装置的结构可实现为一电子设备，如图9所示，该电子设备可以包括：处理器21和存储器22。其中，所述存储器22用于存储支持该电子设备执行上述图1至图5所示实施例中提供的代码文件分析方法的程序，所述处理器21被配置为用于执行所述存储器22中存储的程序。

所述程序包括一条或多条计算机指令，其中，所述一条或多条计算机指令被所述处理器21执行时能够实现如下步骤：

获取页面代码文件，页面包含目标组件在内的至少一个类型的组件；

响应于对所述页面代码文件中目标代码的编译，确定所述目标代码的目标路径以及所述目标代码描述的所述目标组件的类型；

根据所述目标路径，确定所述目标组件的实现方式，所述实现方式包括从预设组件库中调用或者在所述页面代码文件中编写；

响应于所述页面代码文件的编译完成，统计所述页面中同一类组件各自的实现方式。

可选地，所述处理器21还用于执行前述图1至图5所示实施例中的全部或部分步骤。

其中，所述电子设备的结构中还可以包括通信接口23，用于该电子设备与其他设备或通信网络通信。

另外，本发明实施例提供了一种计算机存储介质，用于储存上述电子设备所用的计算机软件指令，其包含用于执行上述图1至图5所示方法实施例中代码文件分析方法所涉及的程序。

本发明实施例还提供了一种计算机程序产品，该计算机程序产品包括计算机程序指令，这些计算机程序指令被处理器读取并运行时，执行上述图1至图5所示方法实施例中的代码文件分析方法。

最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。