一种web前端首页的白屏优化系统、方法及设备

摘要

本说明书实施例公开了一种web前端首页的白屏优化系统、方法及设备，系统包括：可视单元、webpack功能单元、资源获取单元、白屏反馈单元、性能监控单元、优化策略单元；资源获取单元，用于在web前端页面的首页文件中插入对应的链接，以通过对应的链接获取到所述首页文件的VUE资源；白屏反馈单元用于确定白屏状态数据；可视单元用于构成可视化界面；webpack功能单元用于对待加载数据进行压缩打包，获得目标打包文件；性能监控模块用于获取web前端页面加载过程中组件间的依赖；优化策略模块用于确定所述系统的待优化组件，根据组件间的依赖关系与预设组件的依赖关系确定待调整组件，基于待优化组件与待调整组件生成待优化信息，对待优化组件与待调整组件进行调整。

说明书

技术领域

本说明书涉及计算机应用领域，尤其涉及一种web前端首页的白屏优化系统、方法及设备。

背景技术

随着互联网技术的不断发展，网络速度越来越快，web网站的内容和交互也越来越丰富，用户的需求也越来越多。技术人员可配置的功能模块增加，支撑运行的代码也逐渐增加，使得传输给用户的文件大小在增加，从而容易导致页面加载异常、加载速度过慢出现首页白屏的问题。

由于用户需要web站点提供较快的访问速度，当用户访问某个web前端页面时，如果长时间没有得到回应处于白屏界面，那么用户将会放弃本次访问，使得网站的用户流失造成经济损失和流量损失。

因此现需要一种可以优化web前端首页白屏的系统。

发明内容

本说明书一个或多个实施例提供了一种web前端首页的白屏优化系统、方法及设备，用于解决如下技术问题：如何提供一种可优化的web前端首页白屏的系统。

本说明书一个或多个实施例采用下述技术方案：

本说明书一个或多个实施例提供一种web前端首页的白屏优化系统，系统包括：资源获取单元、白屏反馈单元、可视单元、webpack功能单元、性能监控单元、优化策略单元；其中，所述资源获取单元、所述白屏反馈单元、所述可视单元、所述webpack功能单元、所述性能监控单元、所述优化策略单元依次通过相对应的数据传输链路进行通信；

所述资源获取单元，用于在web前端页面的首页文件中插入对应的链接，以通过所述对应的链接获取到所述首页文件的VUE资源；

所述白屏反馈单元，用于根据页面响应数据，确定与当前web前端页面的白屏状态相对应的白屏状态数据；其中，所述白屏状态包括：正常白屏响应，异常白屏响应；

所述可视单元基于所述白屏反馈单元确定的所述web前端页面的首页状态，用于根据接收的页面请求与所述首页状态提供对应的骨架屏，或将所述前端建构系统的可视模块填充于所述骨架屏，构成可视化界面；

所述webpack功能单元用于根据所述白屏状态获取所述首页文件的VUE资源，并对所述首页文件的VUE资源与所述可视化界面对应的待打包项目文件中的待加载数据进行压缩打包，获得目标打包文件；

所述性能监控单元用于监控所述目标打包文件在所述web前端页面中的运行数据，以获取web前端页面加载过程中组件间的依赖关系；

所述优化策略单元用于根据所述白屏状态数据、所述加载时间与所述页面的渲染时间，确定所述系统的中待优化组件，并基于所述组件间的依赖关系与预设组件的依赖关系确定待调整组件，基于所述待优化组件与所述待调整组件生成待优化信息，以对所述待优化组件与所述待调整组件进行优化调整。

可选的，本说明书一个或多个实施例中，所述系统还包括：组件缓存单元；

所述组件缓存单元与所述可视化单元基于相应的数据传输链路进行通信，用于根据所述页面请求判定预设缓存数据库中是否存在与所述页面请求相对应的目标组件；

若是，则根据所述目标组件确定对应的目标打包文件，以将所述目标打包文件加载到所述web前端页面进行渲染；

若否，则根据所述页面请求获取对应的骨架屏与页面组件，并根据所述页面请求所对应的用户历史请求获取所述页面请求对应的历史数据；

基于所述页面请求对应的初始数据与所述历史数据确定所述页面请求的目标数据，将所述页面组件与所述目标数据加载到所述骨架屏中，以获得与所述页面请求相对应的可视化界面。

可选的，在本说明书一个或多个实施例中，所述系统还包括：组件缓存单元；

所述组件缓存单元与所述可视化单元基于相应的数据传输链路进行通信，用于根据所述页面请求判定预设缓存数据库中是否存在与所述页面请求相对应的目标组件；

若是，则根据所述目标组件确定对应的目标打包文件，以将所述目标打包文件加载到所述web前端页面进行渲染；

若否，则根据所述页面请求获取对应的骨架屏与页面组件，并根据所述页面请求所对应的用户历史请求获取所述页面请求对应的历史数据；

基于所述页面请求对应的初始数据与所述历史数据确定所述页面请求的目标数据，将所述页面组件与所述目标数据加载到所述骨架屏中，以获得与所述页面请求相对应的可视化界面。

在本说明书一个或多个实施例中，所述系统还包括：懒加载单元、等待单元；

所述懒加载单元，用于根据VUE异步组件技术获取所述web前端首页的可视模块，并基于预设导入方式将所述可视模块导入与所述页面请求相对应的组件路径中；

所述等待模块与所述白屏反馈单元基于对应的数据传输联络进行通信，用于获取所述白屏状态，若所述等待模块获取所述白屏状态为异常白屏响应，则将预设等待效果加入index.html，以填充所述web前端页面。

可选地，在本说明书一个或多个实施例中，所述白屏反馈单元具体包括：第一轨迹监测单元、第二轨迹监测单元、画面截取单元、状态判定单元；

所述第一轨迹监测单元，用于监测所述web前端页面的网页滚动，获取所述web前端页面在预设时间内的滚动轨迹，并确定当前web前端页面的可视区间；

所述第二轨迹监测单元，用于监测所述鼠标的移动轨迹，根据所述鼠标的移动轨迹与所述页面的滚动轨迹确定所述页面的异常白屏响应概率；

所述画面截取单元，用于若确定所述web页面的异常白屏响应概率大于预设阈值，则截取所述web页面的可视区间的画面，获取所述可视区间的画面内包含的像素点以及所述像素点的像素信息；

所述状态判定单元，用于根据所述像素点的像素信息确定所述可知区间画面的白屏区域，若各所述白屏区域的面积和与所述可视区间的画面的面积比大于预设比值，则确定当前web页面的白屏状态为异常白屏响应。

在本说明书一个或多个实施例中，所述第二轨迹监测单元，具体包括：轨迹点采集单元、局部特征提取单元、多尺度特征提取单元、特征选取单元、模型分析单元；

所述轨迹点采集单元，用于分别获取所述鼠标的移动轨迹与所述页面的滚动轨迹对应的多个轨迹点数据；其中，各所述轨迹点数据包括：所述轨迹点的坐标数据与所述轨迹点的采集时间；

所述局部特征提取单元，用于获取所述轨迹点数据中起始点的特征与所述轨迹点数据中终点的特征，作为所述轨迹点数据的局部特征数据；其中所述起始点为预设第一采集时间段的轨迹点，所述终点为二采集时间段的轨迹点，所述第一采集时间段位于所述轨迹点采集时间的前端，所述第二采集时间段位于所述轨迹点采集时间的后端；

所述多尺度特征提取单元，用于对所述运动轨迹与所述滚动轨迹基于多尺度进行划分，获得多个轨迹点多尺度数据集，以根据所述多尺度数据集获取所述轨迹点的多尺度特征数据；其中所述多尺度特征数据包括：移动速度、移动角度、移动距离、移动时间；

所述特征选取单元，用于基于遗传算法获取所述局部特征数据与所述多尺度特征数据中预设数量的待分析特征数据；

所述模型分析单元，用于将所述待分析特征数据输入预设神经网络模型，以对所述轨迹点进行分析，获得所述页面的异常白屏响应概率。

在本说明书一个或多个实施例中，所述基于遗传算法获取所述局部特征数据与所述多尺度特征数据中预设数量的待分析特征数据，具体包括：

基于预设数值对所述局部特征数据与所述多尺度特征数据进行随机排序，获得多个初始特征数据集合；

根据所述多个初始特征数据集合中的特征数据进行排序，分别模拟所述初始特征数据集合的评估因子，以根据所述评估因子获得符合要求的初始特征数据集合，并将所述符合要求的初始特征数据对应的所述评估因子的归一化均值，作为初始最佳适应度；其中，所述评估因子用于评估白屏状态；

确定所述符合要求的初始特征数据集合对应的特征数据的顺序为第一迭代序列；

并基于所述滚动轨迹与所述移动轨迹中各轨迹点的预设权重值与所述对应的特征数据的顺序，确定所述第一迭代序列的权重值；

对所述多个初始特征数据集合进行交叉迭代，获得第二迭代序列，并根据所述第二迭代序列计算获得所述交叉迭代后的最佳适应度；

若所述交叉迭代后的最佳适应度小于所述初始最佳适应度，且所述第二迭代序列的权重值大于所述第一迭代序列的权重值，则将所述第二迭代序列对应的特征数据作为待分析特征数据。

在本说明书一个或多个实施例中，所述可视单元，具体用于：

基于预设UI库获取与所述页面请求相对应的骨架屏组件；

若基于所述白屏反馈单元确定所述web前端首页处于异常白屏响应的状态，则将所述骨架屏组件对应的骨架屏的图形，填充于所述可视区间的画面中对所述可视区间进行占位；

若基于所述性能监控模块获取的运行数据，确定所述web前端首页的目标打包文件加载完成，则获取所述目标打包文件对应的加载页面，将所述加载页面替换所述骨架屏的图形。

在本说明书一个或多个实施例中，所述webpack功能单元具体用于：

获取所述白屏反馈单元获取的白屏状态，确定所述web前端首页的可视化组件，获取所述可视化组件所对应的首页文件，以基于所述首页文件确定各所述可视化组件对应的VUE资源；其中，所述VUE资源资源包括：vue、vue-router、vuex、axios；

获取与所述可视化界面对应的待打包项目文件，并对所述带打包项目文件进行打包分析以获取分析结果；

根据所述分析结果确定所述打包项目文件中的可优化打包项目文件，若存在则基于预设打包优化工具对所述可优化打包项目文件进行压缩打包，获得第一打包文件；

获取所述打包项目文件中剩余文件的代加载数据进行打包，获得第二打包文件；

基于所述第一打包文件与所述第二打包文件的并集作为所述目标打包文件。

本说明书一个或多个实施例提供一种web前端首页的白屏优化方法，所述方法包括：

在web前端页面的首页文件中插入对应的链接，以通过所述对应的链接获取到所述首页文件的VUE资源；

根据页面响应数据，确定与当前web前端页面的白屏状态相对应的白屏状态数据；其中，所述白屏状态包括：正常白屏响应，异常白屏响应；

根据接收的页面请求与所述首页状态提供对应的骨架屏，或将所述前端建构系统的可视模块填充于所述骨架屏，构成可视化界面；

根据所述白屏状态获取所述首页文件的VUE资源，并对所述首页文件的VUE资源与所述可视化界面对应的待打包项目文件中的待加载数据进行压缩打包，获得目标打包文件；

监控所述目标打包文件在所述web前端页面中的运行数据，以获取web前端页面加载过程中组件间的依赖关系；

根据所述白屏状态数据、所述加载时间与所述页面的渲染时间，确定所述系统的中待优化组件，并基于所述组件间的依赖关系与预设组件的依赖关系确定待调整组件，基于所述待优化组件与所述待调整组件生成待优化信息，以对所述待优化组件与所述待调整组件进行优化调整。

本说明书一个或多个实施例提供一种web前端首页的白屏优化设备，包括：

至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够：

在web前端页面的首页文件中插入对应的链接，以通过所述对应的链接获取到所述首页文件的VUE资源；

根据页面响应数据，确定与当前web前端页面的白屏状态相对应的白屏状态数据；其中，所述白屏状态包括：正常白屏响应，异常白屏响应；

根据接收的页面请求与所述首页状态提供对应的骨架屏，或将所述前端建构系统的可视模块填充于所述骨架屏，构成可视化界面；

根据所述白屏状态获取所述首页文件的VUE资源，并对所述首页文件的VUE资源与所述可视化界面对应的待打包项目文件中的待加载数据进行压缩打包，获得目标打包文件；

监控所述目标打包文件在所述web前端页面中的运行数据，以获取web前端页面加载过程中组件间的依赖关系；

根据所述白屏状态数据、所述加载时间与所述页面的渲染时间，确定所述系统的中待优化组件，并基于所述组件间的依赖关系与预设组件的依赖关系确定待调整组件，基于所述待优化组件与所述待调整组件生成待优化信息，以对所述待优化组件与所述待调整组件进行优化调整。

本说明书实施例采用的上述至少一个技术方案能够达到以下有益效果：

本申请中通过资源获取单元在web前端页面的首页文件中插入对应的链接，以通过所述对应的链接获取到所述首页文件的VUE资源，避免了单页面应用的页面只要是靠js生成，使得首屏需要加载很大的文件，造成加载时间相对较长影响用户对于网站体验感的问题。基于可视单元在异常白屏状态下导入骨架屏进行图形占位，提高了用户的体验感，降低了白屏现象的不良体验。通过对组件进行优化调整提高了首页加载的效率，降低了白屏的存在时间提高了用户的体验度。

附图说明

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

图1为本说明书实施例提供的一种web前端首页的白屏优化系统的内部结构示意图；

图2为本说明书实施例提供的一种web前端首页的白屏优化方法的方法流程示意图；

图3为本说明书实施例提供的一种web前端首页的白屏优化设备的内部结构示意图。

具体实施方式

本说明书实施例提供一种web前端首页的白屏优化系统、方法及设备。

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

如图1所示，本说明书一个或多个实施例中提高了一种web前端首页的白屏优化系统，系统包括：资源获取单元、白屏反馈单元、可视单元、webpack功能单元、性能监控单元、优化策略单元；其中，资源获取单元、白屏反馈单元、可视单元、webpack功能单元、性能监控单元、优化策略单元依次通过相对应的数据传输链路进行通信；

资源获取单元，用于在web前端页面的首页文件中插入对应的链接，以通过所述对应的链接获取到所述首页文件的VUE资源；

白屏反馈单元，用于根据页面响应数据，确定与当前web前端页面的白屏状态相对应的白屏状态数据；其中，白屏状态包括：正常白屏响应，异常白屏响应；

可视单元基于所述白屏反馈单元确定的web前端页面的首页状态，用于根据接收的页面请求与首页状态提供对应的骨架屏，或将前端建构系统的可视模块填充于所述骨架屏，构成可视化界面；

所述webpack功能单元用于根据所述白屏状态获取所述首页文件的VUE资源，并对所述首页文件的VUE资源与所述可视化界面对应的待打包项目文件中的待加载数据进行压缩打包，获得目标打包文件；

所述性能监控单元用于监控目标打包文件在所述web前端页面中的运行数据，以获取web前端页面加载过程中组件间的依赖关系；

优化策略单元用于根据白屏状态数据、加载时间与页面的渲染时间，确定系统的中待优化组件，并基于组件间的依赖关系与预设组件的依赖关系确定待调整组件，基于待优化组件与所述待调整组件生成待优化信息，以对待优化组件与所述待调整组件进行优化调整。

上述技术方案中的工作原理为：资源获取单元CDN资源优化时，通过在web前端页面的首页文件中插入对应的链接，以通过该对应的链接获取到首页文件的VUE资源。其中，需要说明的是，CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率，CDN的关键技术主要有内容存储和分发技术。在本说明书一个或多个实施例中通过在一个可选的配置文件vue.config.js中配置externals属性，表示这些文件可以被引用。白屏反馈模块根据页面响应的数据，确定出当前web前端页面的白屏状态相对应的白屏状态数据，可以理解的是，白屏状态数据包括白屏显示在预设响应时间范围之内的由于加载导致的正常白屏响应，以及在预设响应时间范围之外的由于加载异常，或者显示异常而导致的长时间的异常白屏响应。可视单元在获取首页状态后，根据接收到的页面请求以及首页的状态提供对应的骨架屏，或者将前端建构系统的可视模块填充到骨架屏中，构成基于骨架屏填充的可视化界面。webpack功能单元根据白屏状态获取首页文件的VUE资源，并对首页文件的VUE资源与可视化界面对应的待打包项目文件中的待加载数据进行压缩打包，获得目标打包文件。通过性能监控单元对目标打包文件在web前端页面的运行进行监控获得依赖关系，以及与优化策略单元对于依赖关系进行分析确定待调整的组件，实现web前端页面对于出现白屏现象的系统优化过程。

上述技术方案的技术效果为：基于资源优化单元，将vue资源改为基于链接获取，方便了用户就近获取所需内容，从而降低网络拥塞，提高用户访问速度和命中率。基于可视化单元在出现异常白屏响应时基于骨架屏对页面进行图形占位，从而减小了在异常白屏响应时，用户由于页面白屏导致的不再对该页面感兴趣使得用户流量流失的问题，通过前端页面中，骨架屏的相关图形带给用户页面内容逐步加载的体验感，减少异常白屏响应现象造成的用户流失问题。基于性能监控单元获取各个组件之间的依赖关系，以便于在需要对系统进行优化时，可以基于组件之间的依赖关系对需要进行优化的组件进行有效的调整，实现高效率的优化处理过程，实现了全面的web前端页面的白屏优化处理，并通过不断的迭代处理使得系统的性能不断调优。

在本发明的一个实施例中，系统还包括：组件缓存单元；组件缓存单元与可视化单元通过相应的数据传输链路进行通信，用于根据页面请求判定预设缓存数据库中是否存在与页面请求相对应的目标组件。如果存在，那么就根据目标组件确定出对应的目标打包文件，从而把目标打包文件加载到所述web前端页面进行渲染。避免了每次接收到页面请求后重新下载该页面的所有组件所造成的不必要的开销，提高了响应的速度。如果组件缓存单元中不存在目标组件，那么就根据页面请求获取对应的骨架屏与页面组件，并根据与页面请求所对应的用户历史请求，获取页面请求对应的历史数据。基于页面请求对应的初始数据与历史数据确定出页面请求的目标数据，将页面组件与目标数据加载到骨架屏中，以获得与所述页面请求相对应的可视化界面。

在本说明书的一个实施例中，系统还包括有：懒加载模块和等待模块。懒加载模块用于根据VUE异步组件技术获取所述web前端首页的可视模块，以便于优先对可视模块进行加载，对于其他不可见模块实时懒加载，实现组件以及路由等按需加载。在获取到可视模块之后，根据预先设置的导入方式将可视模块导入到与页面请求相对应的组件路径中完成加载。其中，需要说明的是导入方式例如：基于webpack功能单元提供的require.ensure(),或者基于“const组件名＝()＝>import('组件路径')”进行导入。等待模块和白屏反馈单元基于对应的数据传输链路进行通信，用于获取白屏的状态，如果登台模块获取到白屏状态为长时间的持续白屏即异常白屏响应，那么将预先设定的等待效果loadingcss效果加入到index.html中，以使用户感知到内容正在逐渐加载降低用户对于白屏现象的不良体验。

在本说明书一个实施例中，白屏反馈单元具体包括：第一轨迹监测单元、第二轨迹监测单元、画面截取单元、状态判定单元.第一轨迹监测单元，用于监测web前端页面的网页滚动，获取web前端页面在预设时间内的滚动轨迹，并确定当前web前端页面的可视区间。第二轨迹监测单元，用于监测鼠标的移动轨迹，根据鼠标的移动轨迹与页面的滚动轨迹确定页面的异常白屏响应概率。画面截取单元，用于如果确定出web页面的异常白屏响应概率大于预设阈值，那么为了准确确认白屏现象，通过截取web页面的可视区间的画面，获取到可视区间的画面内包含的像素点以及所述像素点的像素信息。通过状态判定单元实现对于像素点信息的确定获得白屏状态，具体的，根据像素点的像素信息确定可知区间画面的白屏区域，如果各个白屏子区域的面积和与可视区间的画面的面积比大于预设比值，则确定当前web页面的白屏状态处于异常白屏响应。

在本说明书一个实施例中，第二轨迹监测单元，具体包括：轨迹点采集单元、局部特征提取单元、多尺度特征提取单元、特征选取单元、模型分析单元，以通过对轨迹特征点的分析确定异常白屏响应的概率。其中，轨迹点采集单元，用于分别获取鼠标的移动轨迹与页面的滚动轨迹对应的多个轨迹点数据；其中，各轨迹点数据包括有轨迹点的坐标数据与轨迹点的采集时间。而局部特征提取单元，用于获取轨迹点数据中起始点的特征与轨迹点数据中终点的特征，作为轨迹点数据的局部特征数据；其中起始点为预设第一采集时间段的轨迹点，终点为二采集时间段的轨迹点，第一采集时间段位于所述轨迹点采集时间的前端，所述第二采集时间段位于所述轨迹点采集时间的后端。通过对局部特征的选取避免了对全部特征点进行分析时造成的计算资源的浪费现象。多尺度特征提取单元，用于对运动轨迹与所述滚动轨迹基于多尺度进行划分，获得多个轨迹点多尺度数据集，以根据多尺度数据集获取轨迹点的多尺度特征数据。其中需要说明的是：多尺度特征数据包括：移动速度、移动角度、移动距离、移动时间。之后特征选取单元，用于基于遗传算法获取局部特征数据与多尺度特征数据中预设数量的待分析特征数据；具体地，在本说明书一个或多个实施例中，基于遗传算法获取局部特征数据与多尺度特征数据中预设数量的待分析特征数据，具体包括以下过程：

首先根据预设数值对局部特征数据与多尺度特征数据进行随机排序，获得多个初始特征数据集合；然后根据多个初始特征数据集合中的特征数据进行排序，分别模拟出初始特征数据集合的评估因子，以根据评估因子获得符合要求的初始特征数据集合，并将符合要求的初始特征数据对应的评估因子的归一化均值，作为初始最佳适应度；其中评估因子用于评估白屏状态。确定符合要求的初始特征数据集合对应的特征数据的顺序为第一迭代序列，并基于滚动轨迹与移动轨迹中各轨迹点的预设权重值与对应的特征数据的顺序，确定出第一迭代序列的权重值。对多个初始特征数据集合进行交叉迭代，获得第二迭代序列，并根据第二迭代序列计算获得交叉迭代后的最佳适应度。如果交叉迭代后的最佳适应度小于初始最佳适应度，并且第二迭代序列的权重值大于第一迭代序列的权重值，则将第二迭代序列对应的特征数据作为待分析特征数据。模型分析单元，用于将待分析特征数据输入预设神经网络模型，以对轨迹点进行分析，获得页面的异常白屏响应概率。

在本说明书一个实施例中，为了降低用户对于白屏现象的不良体验，可视单元，具体用于：基于预设UI库获取与页面请求相对应的骨架屏组件；其中需要说明的是目前很多UI库都有骨架屏组件可供引用。如果根据白屏反馈单元确定出web前端首页处于异常白屏响应的状态，那么可以将骨架屏组件对应的骨架屏的图形，填充到可视区间的画面中对可视区间进行占位。如果在后续加载过程中，根据性能监控模块获取的运行数据，确定出web前端首页的目标打包文件加载完成，则获取该目标打包文件对应的加载页面，并以加载页面替换所述骨架屏的图形。使得用户感知内容逐渐加载并呈现的过程，降低了用户对于白屏的不良体验，提高了用户对于网页的兴趣。

在本说明书一个实施例中，在启动webpack功能模块之前，为了优化webpack的打包功能，我们可以在vue.config.js中判断是否时生产环境，若是则关闭productionSourceMap：productionSourceMap:false引入uglifyjs-webpack-plugin插件来去掉console输出。其中，需要说明的是，在通过判断是否为生产环境并进行插件选择之前，先安装插件：npm install uglifyjs-webpack-plugin save，在从vue.config.js中配置插件，以便后续基于不同环境对于插件状态进行判别。然后引入compression-webpack-plugin开启gZip压缩。同样需要说明的是，在使用该插件进行压缩之前需要先安装插件：npm i--save-dev compression-webpack-plugin在从vue.config.js中配置插件。此外，还可以拆分chunk-vendor.js。

在本说明书一个实施例中，webpack功能单元具体用于：获取白屏反馈单元获取的白屏状态，确定出web前端首页的可视化组件，获取可视化组件所对应的首页文件，以基于首页文件确定各可视化组件对应的VUE资源；其中，VUE资源包括：vue、vue-router、vuex、axios。通过获取与可视化界面相对应的待打包项目文件，并对待打包项目文件进行打包分析以获取到分析结果。

根据分析结果确定出打包项目文件中的可优化打包项目文件，若存在那么基于预设打包优化工具对可优化打包项目文件进行压缩打包，获得第一打包文件。获取打包项目文件中剩余文件的代加载数据进行打包，获得第二打包文件。基于第一打包文件与第二打包文件的并集作为目标打包文件。

如图2所示，本说明书一个或多个实施例提供了一种web前端首页的白屏优化方法，方法包括以下步骤：

S201：在web前端页面的首页文件中插入对应的链接，以通过所述对应的链接获取到所述首页文件的VUE资源；

S202：根据页面响应数据，确定与当前web前端页面的白屏状态相对应的白屏状态数据；其中，所述白屏状态包括：正常白屏响应，异常白屏响应；

S203：根据接收的页面请求与所述首页状态提供对应的骨架屏，或将所述前端建构系统的可视模块填充于所述骨架屏，构成可视化界面；

S204：根据所述白屏状态获取所述首页文件的VUE资源，并对所述首页文件的VUE资源与所述可视化界面对应的待打包项目文件中的待加载数据进行压缩打包，获得目标打包文件；

S205：监控所述目标打包文件在所述web前端页面中的运行数据，以获取web前端页面加载过程中组件间的依赖关系；

S206：根据所述白屏状态数据、所述加载时间与所述页面的渲染时间，确定所述系统的中待优化组件，并基于所述组件间的依赖关系与预设组件的依赖关系确定待调整组件，基于所述待优化组件与所述待调整组件生成待优化信息，以对所述待优化组件与所述待调整组件进行优化调整。

如图3所示，本说明书提供了一种web前端首页的白屏优化设备，设备包括：

至少一个处理器301；以及，

与所述至少一个处理器301通信连接的存储器302；其中，

所述存储器302存储有可被所述至少一个处理器301执行的指令，所述指令被所述至少一个处理器301执行，以使所述至少一个处理器301能够：

在web前端页面的首页文件中插入对应的链接，以通过所述对应的链接获取到所述首页文件的VUE资源；

根据页面响应数据，确定与当前web前端页面的白屏状态相对应的白屏状态数据；其中，所述白屏状态包括：正常白屏响应，异常白屏响应；

根据接收的页面请求与所述首页状态提供对应的骨架屏，或将所述前端建构系统的可视模块填充于所述骨架屏，构成可视化界面；

根据所述白屏状态获取所述首页文件的VUE资源，并对所述首页文件的VUE资源与所述可视化界面对应的待打包项目文件中的待加载数据进行压缩打包，获得目标打包文件；

监控所述目标打包文件在所述web前端页面中的运行数据，以获取web前端页面加载过程中组件间的依赖关系；

根据所述白屏状态数据、所述加载时间与所述页面的渲染时间，确定所述系统的中待优化组件，并基于所述组件间的依赖关系与预设组件的依赖关系确定待调整组件，基于所述待优化组件与所述待调整组件生成待优化信息，以对所述待优化组件与所述待调整组件进行优化调整。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置、设备、非易失性计算机存储介质实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

上述对本说明书特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。

以上所述仅为本说明书的一个或多个实施例而已，并不用于限制本说明书。对于本领域技术人员来说，本说明书的一个或多个实施例可以有各种更改和变化。凡在本说明书的一个或多个实施例的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本说明书的权利要求范围之内。