[发明专利]基于webpack的前端网页加载方法、存储介质

说明书

本发明提供基于webpack的前端网页加载方法、存储介质，方法包括：配置开启CDN服务器加载的运行环境；打包前端代码，生成对应的静态文件并存储在本地；配置在所述运行环境下，将所述静态文件上传至CDN服务器，以及在入口文件遍历获取本地的静态文件的文件名列表，在列表中的各个文件名中添加对应所述CDN服务器的域名和对应代码类型的资源标签；在所述运行环境下，浏览器通过访问所述入口文件，依据所述资源标签对应的文件名记载的域名从所述CDN服务器加载所述静态文件。本发明能够实现在预设的运行环境下，利用CDN服务器分担本地服务器的工作，从而显著提升前端网页加载的性能，优化用户体验。

技术领域

本发明涉及前端工程化领域，具体涉及基于webpack的前端网页加载方法、存储介质。

背景技术

在前端工程化的大背景下，前端代码变得越来越庞大。如果将前端代码发布到一个普通的web服务器，其加载性能是非常低下的，所以更好的做法是将前端代码发布到CDN服务器，然后进行静态加载。

但是传统的web发布方式无法直接应用于目前流行的基于node+webpack的前端开发架构中，这是因为传统的web不是前后端分离的，使用的是模板语言例如smarty。web端的开发需要服务端环境，而node+webpack实现了前后端分离，完全不需要服务端环境。由于两种开发方式截然不同，所以旧的开发流程以及相关技术方案无法直接套用到新的开发流程中。

本发明针对目前流行的前端工程化开发方式，提供了一种基于webpack的前端网页加载方案，能够优化静态资源的加载方式，同时解决以下问题：

1、发布过程能够自动完成，无需人工干预；

2、兼容node+webpack的开发方式；

3、支持不同环境随意切换本地加载或者CDN加载，例如开发环境下需要本地加载，正式环境则使用CDN加载。

发明内容

本发明所要解决的技术问题是：提供一种基于webpack的前端网页加载方法、存储介质，能兼容node+webpack的开发方式和支持加载方式的切换。

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

基于webpack的前端网页加载方法，包括：

配置开启CDN服务器加载的运行环境；

打包前端代码，生成对应的静态文件并存储在本地；

配置在所述运行环境下，将所述静态文件上传至CDN服务器，以及

在入口文件遍历获取本地的静态文件的文件名列表，在列表中的各个文件名中添加对应所述CDN服务器的域名和对应代码类型的资源标签；

在所述运行环境下，浏览器通过访问所述入口文件，依据所述资源标签对应的文件名记载的域名从所述CDN服务器加载所述静态文件。

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

一种计算机可读存储介质，其上存储有计算机程序，所述程序在被处理器执行时，能实现上述基于webpack的前端网页加载方法所包含的步骤。

本发明的有益效果在于：可以灵活配置需要开启CDN服务器的运行环境，支持不同环境随意切换本地加载或者CDN加载；配置在上述运行环境下将自动上传静态文件至CDN，自动完成发布流程，而无需人工干预；在入口文件将静态文件的各个文件名添加指向CDN的域名和资源标签，在上述运行环境下时，能基于标签自动记载对应域名的静态文件，实现CDN静态加载方式能兼容node+webpack的开发方式。本发明能利用CDN服务器分担本地服务器的工作，从而显著提升前端网页加载的性能，优化用户体验。

附图说明

图1为本发明基于webpack的前端网页加载方法的流程示意图；