CN109614162B

CN109614162B - 基于组件开发模式下的前端加载优化方法、存储介质

Info

Publication number: CN109614162B
Application number: CN201811359822.3A
Authority: CN
Inventors: 刘德建; 陈铭; 高举全; 郭玉湖
Original assignee: Fujian Tianquan Educational Technology Ltd
Current assignee: Fujian Tianquan Educational Technology Ltd
Priority date: 2018-11-15
Filing date: 2018-11-15
Publication date: 2023-10-10
Anticipated expiration: 2038-11-15
Also published as: CN109614162A

Abstract

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

Description

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

技术领域

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

背景技术

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

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

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

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

发明内容

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

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

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

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

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

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

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

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

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

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

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

附图说明

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

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

具体实施方式

为详细说明本发明的技术内容、所实现目的及效果，以下结合实施方式并配合附图予以说明。

本发明最关键的构思在于：将各组件的公用库打包上传至公共服务器，在组件调用时统一从公共服务器加载，并缓存与其他组件共享，从而优化前端页面的加载效率。

本发明涉及的技术术语解释:

请参照图1，本发明提供基于组件开发模式下的前端加载优化方法，包括：

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

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

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

从上述描述可知，本发明的有益效果在于：所有业务组件在启动的时候，都选择从公共服务器加载公共库，减轻本地服务器的负担；同时，基于浏览器的特性，在一个组件加载公共库以后，其他组件可共享，无需再加载。区别于现有的各个组件间相互独立，需要重复加载公共库，存在极大冗余的问题，本发明能大大减少冗余，同时显著提升前端加载效率。

进一步的，还包括：

浏览器缓存已加载的静态文件；

启动另一组件后，判断所述另一组件对应的资源标签所对应的静态文件是否已缓存，若是，则从缓存中获取所述对应的静态文件。

由上述描述可知，基于浏览器的缓存特性，将缓存组件已加载的静态文件，与其他组件共享，不仅能减少访问服务器的次数，提高服务器工作性能，且能提高静态文件的加载效率。

进一步的，所述配置在webpack打包过程不进行静态文件的加载，具体为：

通过修改node工程下的第一配置文件其中的webpack插件的第二配置文件，配置在webpack打包过程不进行静态文件的加载。

由上述描述可知，配置在打包时不进行静态文件的自动加载，能实现自定义静态文件的加载方式，为后续从公共服务器下载公共库提供支持。

进一步的，所述webpack打包前端代码时，将各组件的公共库打包到第三方库，生成包含第三方库的静态文件，具体为：

通过修改node工程下的第三配置文件，增加变量第三方库；

在webpack的入口配置中加入所述变量第三方库；

webpack打包前端代码时，依据所述入口配置将各组件的公共库打包到所述变量第三方库中；

生成包含第三方库的静态文件，并存储至本地。

由上述描述可知，通过增加变量第三方库，将各组件之间可以通用的公共库统一存储至第三方库，为后续统一从第三方库中获取公共库提供支持。各个组件不再需要各自从本地加载公共库，造成反复请求同一个公共库，能大大减轻本地服务器的公共负担，提高前端加载效率。

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

通过修改node工程下的入口文件，遍历所述静态文件，获取对应静态js代码的第一文件名列表和对应静态css代码的第二文件名列表；在所述第一文件名列表和第二文件名列表中对应所述第三方库的文件名中添加所述公共服务器的域名；在第一文件名列表的各个文件名中添加script标签，在第二文件名列表的各个文件名中添加link标签。

由上述描述可知，在一具体实施方式中，可以通过修改node工程下的入口文件，将静态文件中关于所述第三方库的各个文件名中添加对应的资源标签以及指向公共服务器的域名，从而实现在依据资源标签调用公共库时能依据域名从公共服务器获取所需的资源，进而实现在组件启动时，都将自动从公共服务器加载公共库，无需动用本地服务器，且还能在后续共享给其他组件，从而优化了前端价值效率。

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

从上述描述可知，本发明的有益效果在于：对应本领域普通技术人员可以理解实现上述技术方案中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来实现的，所述的程序可存储于一计算机可读取的存储介质中，该程序在执行时，可包括如上述各方法的流程。

其中，所述的存储介质可以是磁盘、光碟、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(Random Access Memory，RAM)等。

实施例一

请参照图2，本实施例提供基于组件开发模式下的前端加载优化方法，包括：

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

具体的，可以通过修改node工程下的第一配置文件其中的webpack插件的第二配置文件，配置在webpack打包过程不进行静态文件的加载。

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

具体的，该步骤包括：

S21：通过修改node工程下的第三配置文件，增加变量第三方库；

S22：在webpack的入口配置中加入所述变量第三方库；webpack打包前端代码时，依据所述入口配置将各组件的公共库打包到所述变量第三方库中；

S23：生成包含第三方库的静态文件，并存储至本地。

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

具体的，可以将CDN服务器作为公共服务器用。

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

具体的，可以通过以下步骤实现：

S41：修改node工程下的入口文件，遍历所述静态文件，获取对应静态js代码的第一文件名列表(htmlWebpackPlugin.files.js)和对应静态css代码的第二文件名列表(htmlWebpackPlugin.files.css)；

S42：在所述第一文件名列表和第二文件名列表中对应所述第三方库的文件名(即静态文件名中包含上述配置的变量第三方库)中添加所述公共服务器的域名；

S43：在第一文件名列表的各个文件名中添加script标签，在第二文件名列表的各个文件名中添加link标签。

上述步骤能实现在入口文件判断组件要加载的静态文件是否属于公共库，如果是，则从公共服务器中加载，而不用从组件所在环境中加载，从而降低环境对应的服务器的工作负担，同时又能实现已加载静态文件的共享。

S5：浏览器缓存已加载的静态文件；

S6：启动另一组件后，判断所述另一组件对应的资源标签所对应的静态文件是否已缓存，若是，则从缓存中获取所述对应的静态文件。

基于浏览器自身的缓存特性，一个组件加载静态文件后，其他组件都能共享已加载的内容，从而实现了资源的重复利用，同时优化前端加载效率。

实施例二

本实施例对应实施例一，提供一具体实施方式，包括：

第一步：

1、修改node工程下的webpack.config.js文件，将webpack插件HtmlWebpackPlugin下的inject属性值设置成false。inject属性用于通知webpack插件，是否自动生成加载静态文件的代码。当值为false的时候，webpack将不会生成加载静态文件代码，这个时候，我们就可以自定义加载方式。

第二步：

2.1、修改node工程下的webpack.config.js文件，增加一个变量venderJs(第三方库)，用于存储各组件用到的公共库。例如：var venderJs＝[‘react’,‘redux’,‘ussdk’,‘lodash’]。

2.2、修改入口配置entryJs，将venderJs加入进去，最终导出的格式类似：

{

entryJs:{

index:index.js,

vender:venderJs

}

这一步的目的是通知webpack，在打包的时候，将公共库打包到vender.js中。

第三步：

3.1、执行一次webpack打包操作，并且将打包后生成的vender.js上传到公共服务器，假设公共服务器是http://www.cdn.com。

第四步：

4.1、修改node工程下的入口模板文件(通常是index.html或者index.ejs)，然后遍历htmlWebpackPlugin.files.js和htmlWebpackPlugin.files.css得到webpack编译之后的静态文件名，在body标签的尾部进行以下修改：

1、如果静态文件名是:vender.js那么在文件名前面加上公共服务器地址，例如http://www.cdn.com/vender.js；

2、分别使用script标签和link标签加载js文件和css文件。

例如，对入口模板文件进行修改的伪代码如下：

最终打包出的入口文件如下：

这一步的目的是让入口文件判断要加载的文件是否是公共文件，如果是则从公共服务器加载，否则从组件所在环境加载。

经过上面几个步骤的配置之后，所有业务组件在启动的时候(index.html)，都会从公共服务器(http://www.cdn.com)加载共类库(vender.js)，由于浏览器自身的缓存特性，在一个组件加载之后，其他组件都能够共享之前加载的内容，从而显著提升了前端页面的加载效率，优化了资源的利用方式和浏览器的性能。

实施例三

一种计算机可读存储介质，其上存储有计算机程序，所述程序在被处理器执行时，能实现上述实施例一或实施例二所述的基于组件开发模式下的前端加载优化方法所包含的步骤。具体的步骤内容在此不再复述，详细请查阅实施例一和实施例二的记载。

综上所述，本发明提供的基于组件开发模式下的前端加载优化方法、存储介质，通过优化前端工程公共资源的加载方式，提高了前端页面的加载效率，显著提升浏览器的性能。

以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等同变换，或直接或间接运用在相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims

1.基于组件开发模式下的前端加载优化方法，其特征在于，包括：

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

所述配置在webpack打包过程不进行静态文件的加载，具体为：

通过修改node工程下的第一配置文件其中的webpack插件的第二配置文件，配置在webpack打包过程不进行静态文件的加载，以实现自定义静态文件的加载方式；

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

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

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

通过修改node工程下的入口文件，遍历所述静态文件，获取对应静态js代码的第一文件名列表和对应静态css代码的第二文件名列表；在所述第一文件名列表和第二文件名列表中对应所述第三方库的文件名中添加所述公共服务器的域名；在第一文件名列表的各个文件名中添加script标签，在第二文件名列表的各个文件名中添加link标签；

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

在入口文件判断组件要加载的静态文件是否属于公共库，如果是，则从公共服务器中加载，而不用从组件所在环境中加载；非公共库从本地文件加载。

2.如权利要求1所述的基于组件开发模式下的前端加载优化方法，其特征在于，还包括：

浏览器缓存已加载的静态文件；

3.如权利要求1所述的基于组件开发模式下的前端加载优化方法，其特征在于，所述webpack打包前端代码时，将各组件的公共库打包到第三方库，生成包含第三方库的静态文件，具体为：

通过修改node工程下的第三配置文件，增加变量第三方库；

在webpack的入口配置中加入所述变量第三方库；

生成包含第三方库的静态文件，并存储至本地。

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