[发明专利]基于组件开发模式下的前端加载优化方法、存储介质

说明书

本发明提供基于组件开发模式下的前端加载优化方法、存储介质，方法包括：配置在webpack打包过程不进行静态文件的加载；webpack打包前端代码时，将各组件的公共库打包到第三方库，生成包含第三方库的静态文件；上传所述第三方库至公共服务器；在入口文件遍历获取所述静态文件的文件名列表，在其中对应所述第三方库的文件名中添加所述公共服务器的域名和对应代码类型的资源标签；浏览器启动一组件后，通过访问所述入口文件，依据所述一组件对应的资源标签所对应的文件名记载的域名从本地或所述公共服务器加载对应的静态文件。本发明通过优化前端工程公共资源的加载方式，提高了前端页面的加载效率，显著提升浏览器的性能。

技术领域

本发明涉及前端工程化领域，具体涉及基于组件开发模式下的前端加载优化方法、存储介质。

背景技术

所谓组件化开发，就是将业务拆分成若干彼此独立的组件，然后根据需要拼接成一个大规模的应用。例如将某个电子商城拆分成：用户中心组件，商品展示组件，商品搜索组件，购物篮组件，客服组件，售后组件等等。

在这个背景下，由于组件间相互独立，有不同的团队开发，每个组件都会有自己的项目工程。

这就导致很多代码冗余存在：假设在统一技术架构的情况下，所有组件都会用到以下公共库：react、loadsh和usdk。由于每个组件都是独立的工程，因此会独立进行编译打包，打包后的最终文件中各自都有这些公共库。当一个站点需要同时加载多个组件时，公共库就会被重复加载，存在极大的资源浪费。

本发明针对目前业界最流行的node+webpack的技术架构，针对上述问题提供了一种针对前端工程公共资源的加载优化方案。

发明内容

本发明所要解决的技术问题是：提供基于组件开发模式下的前端加载优化方法、存储介质，通过优化前端公共资源的加载方式，提升前端加载性能。

为了解决上述技术问题，本发明采用的技术方案为：

基于组件开发模式下的前端加载优化方法，包括：

配置在webpack打包过程不进行静态文件的加载；

webpack打包前端代码时，将各组件的公共库打包到第三方库，生成包含第三方库的静态文件；

上传所述第三方库至公共服务器；

在入口文件遍历获取所述静态文件的文件名列表，在其中对应所述第三方库的文件名中添加所述公共服务器的域名和对应代码类型的资源标签；

启动一组件后，通过访问所述入口文件，依据所述一组件对应的资源标签所对应的文件名记载的域名从本地或所述公共服务器加载对应的静态文件。

本发明提供的另一个技术方案为：

一种计算机可读存储介质，其上存储有计算机程序，所述程序在被处理器执行时，能实现上述基于组件开发模式下的前端加载优化方法所包含的步骤。

本发明的有益效果在于：将各组件共用的公共库打包到第三方库，并上传至公共服务器；当组件需要加载公共库时，统一从公共服务器中加载；同时基于浏览器的缓冲特性，能将已加载的静态文件存储在本地，其他组件能共享已加载的静态文件而无需反复通过本地服务器加载，增加本地服务器的负担。由此，本发明的前端加载方案能实现多个组件之间的公共库只需加载一次，便可实现共享，且无需动用本地服务器，从而显著提升前端页面的加载效率，优化用户体验。

附图说明

图1为本发明基于组件开发模式下的前端加载优化方法的流程示意图；

图2为本发明实施例一的方法流程示意图。

具体实施方式