页面打包方法、装置、电子设备及存储介质

技术领域

本发明实施例涉及计算机软件技术，尤其涉及一种页面打包方法、装置、电子设备及存储介质。

背景技术

目前，开发互联网应用时，通常可以将需要的代码文件导入程序打包工具中，将这些代码文件都打包至最终的资源包中。

在实际业务的互联网应用开发时，同一个功能在不同的业务场景中，可以使用不同的页面来实现，例如：在场景A中使用页面A，在场景B中使用页面B等。为了保证功能的正常实现，将各页面所对应的页面文件都导入程序打包工具中，以生成资源包。

然而，在某一个单一的业务场景中，资源包中包含一些与该业务场景无关的冗余代码。这样会导致资源包占用的存储空间较大，也会影响互联网应用的性能和访问速度。

发明内容

本发明实施例提供了一种页面打包方法、装置、电子设备及存储介质，以实现根据业务场景需求打包页面文件，进而节省资源包的存储空间，以提高互联网应用的性能和访问速度。

第一方面，本发明实施例提供了一种页面打包方法，该方法包括：

获取当前环境变量，并识别待配置程序中的目标环境字段；

将所述目标环境字段替换为所述当前环境变量，生成页面文件打包请求；

根据所述页面文件打包请求，获取所述当前环境变量所对应的目标页面文件；

基于程序打包工具对所述目标页面文件进行打包。

第二方面，本发明实施例还提供了一种页面打包装置，该装置包括：

识别模块，用于获取当前环境变量，并识别待配置程序中的目标环境字段；

请求生成模块，用于将所述目标环境字段替换为所述当前环境变量，生成页面文件打包请求；

文件获取模块，用于根据所述页面文件打包请求，获取所述当前环境变量所对应的目标页面文件；

打包模块，用于基于程序打包工具对所述目标页面文件进行打包。

第三方面，本发明实施例还提供了一种电子设备，所述电子设备包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如本发明实施例任一所述的页面打包方法。

第四方面，本发明实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本发明实施例任一所述的页面打包方法。

本发明实施例的技术方案，通过获取当前环境变量，并识别待配置程序中的目标环境字段，进而，将目标环境字段替换为当前环境变量，生成页面文件打包请求，以获取目标页面文件，根据页面文件打包请求，获取当前环境变量所对应的目标页面文件，并基于程序打包工具对目标页面文件进行打包，解决了由于资源包中存储了与当前业务场景不匹配的冗余的页面文件，而导致的资源包占用存储空间大的问题，实现了节省资源包的存储空间，以提高互联网应用的性能和访问速度的技术效果。

附图说明

为了更加清楚地说明本发明示例性实施例的技术方案，下面对描述实施例中所需要用到的附图做一简单介绍。显然，所介绍的附图只是本发明所要描述的一部分实施例的附图，而不是全部的附图，对于本领域普通技术人员，在不付出创造性劳动的前提下，还可以根据这些附图得到其他的附图。

图1为本发明实施例一所提供的一种页面打包方法的流程示意图；

图2为本发明实施例二所提供的一种页面打包方法的流程示意图；

图3为本发明实施例二所提供的另一种页面打包方法的流程示意图；

图4为本发明实施例三所提供的一种页面打包装置的结构示意图；

图5为本发明实施例四所提供的一种电子设备的结构示意图。

具体实施方式

下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本发明，而非对本发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部结构。

实施例一

图1为本发明实施例一所提供的一种页面打包方法的流程示意图，本实施例可适用于互联网应用开发时，对页面文件进行打包的情况，该方法可以由页面打包装置来执行，该装置可以通过软件和/或硬件的形式实现，该硬件可以是电子设备，可选的，电子设备可以是PC端等。

如图1所述，本实施例的方法具体包括如下步骤：

S110、获取当前环境变量，并识别待配置程序中的目标环境字段。

其中，当前环境变量可以是用于衡量当前的具体业务场景的变量，不同的业务场景可以用不同的环境变量进行标识。待配置程序可以是用于打包页面文件的程序。目标环境字段可以是待配置程序中预先设置的用于表示环境变量的字段。

具体的，可以通过获取用户输入的当前环境变量或通过自动化脚本来获取当前环境变量。并且，针对待识别配置程序，识别其中用于表示环境变量的目标环境字段，以用于后续进行环境变量配置。

由于待配置程序中的部分代码是固定不变的，在进行页面文件获取时，需要识别和替换待配置程序中的目标环境字段。可选的，待配置程序包括文件导入字段和文件名称字段，文件名称字段中包括目标环境字段。

其中，文件导入字段可以是待识别程序中用于导入页面文件的字段，文件名称字段可以是用于指示页面文件的字段。

具体的，当识别到待配置程序中的文件导入字段和文件名称字段时，可以确定这两个字段组合成的代码的含义是导入目标文件以进行后续打包。进而，可以从文件名称字段中获取与环境变量相关的目标环境字段。

示例性的，文件导入字段可以是import等导入文件时使用的字段，文件名称字段可以是类似于file.$env.js的字段，其中，$env就可以表示目标环境字段。

可选的，可以通过下述任一种方式来准确的获取当前环境变量：

方式一、获取用户输入的当前环境变量。

具体的，若用户明确的知道当前环境变量或知道要将哪一个业务场景的页面文件进行打包，则用户可以直接输入当前环境变量，以用于后续配置。

方式二、通过环境识别脚本确定与当前业务场景相对应的当前环境变量。

其中，环境识别脚本可以是预先编写的用于识别业务场景和环境变量的脚本代码程序。当前业务场景可以是当前使用时所对应的业务场景。业务场景与环境变量可以具有对应关系。

具体的，执行环境识别脚本可以确定当前业务场景，进而，根据业务场景与环境变量的对应关系，可以确定与当前业务场景相对应的当前环境变量，以用于后续配置。

S120、将目标环境字段替换为当前环境变量，生成页面文件打包请求。

其中，页面文件打包请求可以是用于打包页面文件的指令或代码等。

具体的，在确定当前环境变量以及待配置程序中的目标环境字段后，可以将目标环境字段替换为当前环境变量，以针对当前环境变量所对应的页面文件进行打包。进而，可以执行替换后的待配置程序，生成页面文件打包请求，以获取当前环境变量所对应的页面文件，并对页面文件进行打包。

S130、根据页面文件打包请求，获取当前环境变量所对应的目标页面文件。

其中，目标页面文件可以是需要被打包的页面文件，即当前业务场景下的资源包中所需要的页面文件。

具体的，在接收到页面文件打包请求时，可以对页面文件打包请求进行解析，确定页面文件打包请求所对应的页面文件，并将该页面文件作为与当前环境变量相对应的目标页面文件，以用于后续打包成资源包。

S140、基于程序打包工具对目标页面文件进行打包。

其中，程序打包工具可以是程序开发过程中对程序进行打包压缩的工具。可选的，程序打包工具可以是Webpack(模块打包器)。

具体的，在确定目标页面文件之后，可以通过程序打包工具将目标页面文件打包进资源包中，以使资源包中的程序能够适配当前业务场景的页面配置。

需要说明的是，若程序打包工具为Webpack，则Webpack的主要目标是将JavaScript文件打包在一起。进而，打包后生成的资源包文件可以在浏览器中使用。同时，Webpack也能够胜任转换(transform)、打包(bundle)或包裹(package)任何资源的工作。

还需要说明的是，互联网应用(web应用)的性能和访问速度都与资源包的大小有一定关系。在其他条件相同的情况下，资源包越小，应用性能越好，访问速度也越快。

在上述实施例的基础上，若存在无法获取当前环境变量的情况，则为了保证资源包能够适配当前业务场景，可以将全部的页面文件都打包至资源包中。

具体可以根据下述步骤实现：

步骤一、若未获取到当前环境变量，则确定与待配置程序相对应的至少一个可配置环境变量。

其中，可配置环境变量可以是各业务场景所对应的环境变量，可以是全部的可以进行配置的环境变量。

具体的，若未获取到当前环境变量，则需要将全部环境变量所对应的页面文件都进行打包。因此，确定待配置程序中可以配置的全部可配置环境变量，以便于确定各环境变量所对应的页面文件。

步骤二、识别待配置程序中的目标环境字段，并分别将目标环境字段替换为各可配置环境变量，生成页面文件打包请求。

具体的，针对待识别配置程序，识别其中用于表示环境变量的目标环境字段。进而，可以分别将目标环境字段替换为各可配置环境变量，以针对各可配置环境变量所对应的页面文件进行打包。执行替换后的待配置程序，生成页面文件打包请求，以获取各可配置环境变量所对应的页面文件，并对各页面文件进行打包。

步骤三、根据页面文件打包请求，获取各可配置环境变量所对应的各目标页面文件，并基于程序打包工具对各目标页面文件进行打包。

具体的，在接收到页面文件打包请求时，可以对页面文件打包请求进行解析，确定页面文件打包请求所对应的各页面文件，即确定各可配置环境变量所对应的页面文件。进而，将这些页面文件作为与各可配置环境变量相对应的目标页面文件，并通过程序打包工具将目标页面文件打包进资源包中，以使资源包中的程序能够适配各业务场景的页面配置。

本发明实施例的技术方案，通过获取当前环境变量，并识别待配置程序中的目标环境字段，进而，将目标环境字段替换为当前环境变量，生成页面文件打包请求，以获取目标页面文件，根据页面文件打包请求，获取当前环境变量所对应的目标页面文件，并基于程序打包工具对目标页面文件进行打包，解决了由于资源包中存储了与当前业务场景不匹配的冗余的页面文件，而导致的资源包占用存储空间大的问题，实现了节省资源包的存储空间，以提高互联网应用的性能和访问速度的技术效果。

实施例二

图2为本发明实施例二所提供的一种页面打包方法的流程示意图，本实施例在上述各实施例的基础上，针对页面文件打包请求的生成方式以及目标页面文件的获取方式可参见本实施例的技术方案。其中，与上述各实施例相同或相应的术语的解释在此不再赘述。

如图2所述，本实施例的方法具体包括如下步骤：

S210、获取当前环境变量，并识别待配置程序中的目标环境字段。

S220、将目标环境字段替换为所述当前环境变量。

S230、基于预先设置的环境变量与页面文件的对应关系，确定与当前环境变量相对应的目标页面文件名称和目标页面文件存储路径。

其中，环境变量与页面文件的对应关系可以是一对一的对应关系，也可以是一对多或多对一的对应关系。例如：环境变量A对应页面文件X，环境变量B对应页面文件Y和Z，环境变量C和环境变量D都对异性页面文件R等。目标页面文件名称可以是目标页面文件的文件名，还可以包括文档格式后缀等。目标页面文件存储路径可以是存储目标页面文件的路径信息，用于确定目标文件的存储位置。

具体的，根据预先设置的环境变量与页面文件的对应关系可以确定与当前环境变量相对应的目标页面文件，即可以确定目标页面文件名称，并且还可以确定目标页面文件的存储路径。

S240、基于当前环境变量，目标页面文件名称和目标页面文件存储路径生成页面文件打包请求。

具体的，可以根据预先设置的页面文件打包请求的形式或程序代码，生成包含当前环境变量，目标页面文件名称和目标页面文件存储路径的页面文件打包请求。

S250、对页面文件打包请求进行解析，确定页面文件打包请求对应的目标页面文件名称和目标页面文件存储路径。

具体的，在接收到页面文件打包请求时，可以对页面文件打包请求进行解析，确定页面文件打包请求所对应的目标页面文件名称和目标页面文件存储路径，以从目标页面文件存储路径处获取与目标页面文件名称相对应的目标页面文件，以用于后续打包成资源包。

S260、根据目标页面文件名称和目标页面文件存储路径，获取当前环境变量所对应的目标页面文件。

具体的，可以根据目标页面文件存储路径确定目标页面文件的所在位置，进而，根据目标页面名称可以获取当前环境变量所对应的目标页面文件。

S270、基于程序打包工具对目标页面文件进行打包。

作为上述各实施例的可选实施方案，图3为本发明实施例二所提供的另一种页面打包方法的流程示意图。其中，与上述各实施例相同或相应的术语的解释在此不再赘述。

具体的，通过Webpack进行资源包打包的最初阶段，可以对待配置程序进行识别。如果识别到文件导入字段和文件名称字段，文件名称字段中包括目标环境字段，并且获取到当前环境变量，可以将待配置程序中的目标环境字段替换为当前环境变量。根据替换完成的待配置程序可以获取目标页面文件，并对目标页面文件进行打包处理。

示例性的，如果识别到语句：import file.$env.js，其中，import可以看作是文件导入字段，file.$env.js可以看作是文件名称字段，$env可以看作是目标环境字段。当获取到某个业务场景的环境变量，即当前环境变量时，可以将上述语句中的$env替换为当前环境变量。例如：业务场景A对应的环境变量是A，业务场景B对应的环境变量是B。若需要进行打包的是业务场景A所对应的页面文件，那么，确定当前环境变量为A，进而可以将语句import file.$env.js中的$env替换为A，得到语句import file.A.js。类似的，若需要进行打包的是业务场景B所对应的页面文件，那么，可以得到语句import file.B.js。通用的，若$env＝N，则得到语句import file.N.js，其中，N为任一环境变量。进而，通过上述语句可以获取目标页面文件，并将目标页面文件打包至最终的资源包中。

需要说明的是，通过上述方式打包得到的业务场景A的资源包中，不会出现file.B的代码文件，也不会出现其他业务场景所对应的页面文件，并且，业务场景B的资源包中，不会出现file.A的代码文件，也不会出现其他业务场景所对应的页面文件。因此，可以根据不同的业务场景，打包不同的目标页面文件，以剔除无效的冗余页面文件的代码，可以减少最终代码对应的资源包的大小，提高互联网应用的性能。

本发明实施例的技术方案，通过获取当前环境变量，并识别待配置程序中的目标环境字段，将目标环境字段替换为当前环境变量，进而，基于预先设置的环境变量与页面文件的对应关系，确定与当前环境变量相对应的目标页面文件名称和目标页面文件存储路径，以便获取确定目标页面文件的存储位置和名称，基于当前环境变量，目标页面文件名称和目标页面文件存储路径生成页面文件打包请求，并对页面文件打包请求进行解析，确定页面文件打包请求对应的目标页面文件名称和目标页面文件存储路径，以准确的获取目标页面文件，进而，根据目标页面文件名称和目标页面文件存储路径，获取当前环境变量所对应的目标页面文件，并基于程序打包工具对目标页面文件进行打包，解决了难以准确确定当前业务场景所需的页面文件，以及资源包占用存储空间大的问题，实现了准确确定目标页面文件，并节省资源包的存储空间，以提高互联网应用的性能和访问速度的技术效果。

实施例三

图4为本发明实施例三所提供的一种页面打包装置的结构示意图，该装置包括：识别模块310，请求生成模块320，文件获取模块330和打包模块340。

其中，识别模块310，用于获取当前环境变量，并识别待配置程序中的目标环境字段；请求生成模块320，用于将所述目标环境字段替换为所述当前环境变量，生成页面文件打包请求；文件获取模块330，用于根据所述页面文件打包请求，获取所述当前环境变量所对应的目标页面文件；打包模块340，用于基于程序打包工具对所述目标页面文件进行打包。

可选的，识别模块310，还用于获取用户输入的当前环境变量；或者，通过环境识别脚本确定与当前业务场景相对应的当前环境变量。

可选的，请求生成模块320，还用于将所述目标环境字段替换为所述当前环境变量；基于预先设置的环境变量与页面文件的对应关系，确定与所述当前环境变量相对应的目标页面文件名称和目标页面文件存储路径；基于所述当前环境变量，所述目标页面文件名称和所述目标页面文件存储路径生成页面文件打包请求。

可选的，文件获取模块330，还用于对所述页面文件打包请求进行解析，确定所述页面文件打包请求对应的目标页面文件名称和目标页面文件存储路径；根据所述目标页面文件名称和所述目标页面文件存储路径，获取所述当前环境变量所对应的目标页面文件。

可选的，所述装置还包括：各页面文件打包模块，用于若未获取到所述当前环境变量，则确定与所述待配置程序相对应的至少一个可配置环境变量；识别所述待配置程序中的目标环境字段，并分别将所述目标环境字段替换为各可配置环境变量，生成页面文件打包请求；根据所述页面文件打包请求，获取所述各可配置环境变量所对应的各目标页面文件，并基于所述程序打包工具对所述各目标页面文件进行打包。

可选的，所述待配置程序包括文件导入字段和文件名称字段；其中，所述文件名称字段中包括目标环境字段。

可选的，所述程序打包工具为Webpack。

本发明实施例的技术方案，通过获取当前环境变量，并识别待配置程序中的目标环境字段，进而，将目标环境字段替换为当前环境变量，生成页面文件打包请求，以获取目标页面文件，根据页面文件打包请求，获取当前环境变量所对应的目标页面文件，并基于程序打包工具对目标页面文件进行打包，解决了由于资源包中存储了与当前业务场景不匹配的冗余的页面文件，而导致的资源包占用存储空间大的问题，实现了节省资源包的存储空间，以提高互联网应用的性能和访问速度的技术效果。

本发明实施例所提供的页面打包装置可执行本发明任意实施例所提供的页面打包方法，具备执行方法相应的功能模块和有益效果。

值得注意的是，上述装置所包括的各个单元和模块只是按照功能逻辑进行划分的，但并不局限于上述的划分，只要能够实现相应的功能即可；另外，各功能单元的具体名称也只是为了便于相互区分，并不用于限制本发明实施例的保护范围。

实施例四

图5为本发明实施例四所提供的一种电子设备的结构示意图。图5示出了适于用来实现本发明实施例实施方式的示例性电子设备40的框图。图5显示的电子设备40仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图5所示，电子设备40以通用计算设备的形式表现。电子设备40的组件可以包括但不限于：一个或者多个处理器或者处理单元401，系统存储器402，连接不同系统组件(包括系统存储器402和处理单元401)的总线403。

总线403表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器，外围总线，图形加速端口，处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说，这些体系结构包括但不限于工业标准体系结构(ISA)总线，微通道体系结构(MAC)总线，增强型ISA总线、视频电子标准协会(VESA)局域总线以及外围组件互连(PCI)总线。

电子设备40典型地包括多种计算机系统可读介质。这些介质可以是任何能够被电子设备40访问的可用介质，包括易失性和非易失性介质，可移动的和不可移动的介质。

系统存储器402可以包括易失性存储器形式的计算机系统可读介质，例如随机存取存储器(RAM)404和/或高速缓存存储器405。电子设备40可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机系统存储介质。仅作为举例，存储系统406可以用于读写不可移动的、非易失性磁介质(图5未显示，通常称为“硬盘驱动器”)。尽管图5中未示出，可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器，以及对可移动非易失性光盘(例如CD-ROM,DVD-ROM或者其它光介质)读写的光盘驱动器。在这些情况下，每个驱动器可以通过一个或者多个数据介质接口与总线403相连。系统存储器402可以包括至少一个程序产品，该程序产品具有一组(例如至少一个)程序模块，这些程序模块被配置以执行本发明各实施例的功能。

具有一组(至少一个)程序模块407的程序/实用工具408，可以存储在例如系统存储器402中，这样的程序模块407包括但不限于操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块407通常执行本发明所描述的实施例中的功能和/或方法。

电子设备40也可以与一个或多个外部设备409(例如键盘、指向设备、显示器410等)通信，还可与一个或者多个使得用户能与该电子设备40交互的设备通信，和/或与使得该电子设备40能与一个或多个其它计算设备进行通信的任何设备(例如网卡，调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口411进行。并且，电子设备40还可以通过网络适配器412与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器412通过总线403与电子设备40的其它模块通信。应当明白，尽管图5中未示出，可以结合电子设备40使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

处理单元401通过运行存储在系统存储器402中的程序，从而执行各种功能应用以及数据处理，例如实现本发明实施例所提供的页面打包方法。

实施例五

本发明实施例五还提供一种包含计算机可执行指令的存储介质，所述计算机可执行指令在由计算机处理器执行时用于执行一种页面打包方法，该方法包括：

获取当前环境变量，并识别待配置程序中的目标环境字段；

将所述目标环境字段替换为所述当前环境变量，生成页面文件打包请求；

根据所述页面文件打包请求，获取所述当前环境变量所对应的目标页面文件；

基于程序打包工具对所述目标页面文件进行打包。

本发明实施例的计算机存储介质，可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本文件中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。

计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括——但不限于无线、电线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言或其组合来编写用于执行本发明实施例操作的计算机程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言——诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。