基于webpack的前端网页加载方法、存储介质技术

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

【技术实现步骤摘要】
基于webpack的前端网页加载方法、存储介质
本专利技术涉及前端工程化领域，具体涉及基于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的前端网页加载方法的流程示意图；图2为本专利技术实施例二的自动编译和发布的流程的交互图；图3为本专利技术实施例三的前端页面自动加载流程的交互图。具体实施方式为详细说明本专利技术的
技术实现思路
、所实现目的及效果，以下结合实施方式并配合附图予以说明。本专利技术最关键的构思在于：在指定运行环境下，利用CDN服务器分担本地服务器的工作，显著提升前端网页加载的性能。本专利技术涉及的技术术语解释:请参照图1，本专利技术提供基于webpack的前端网页加载方法，包括：配置开启CDN服务器加载的运行环境；打包前端代码，生成对应的静态文件并存储在本地；配置在所述运行环境下，将所述静态文件上传至CDN服务器，以及在入口文件遍历获取本地的静态文件的文件名列表，在列表中的各个文件名中添加对应所述CDN服务器的域名和对应代码类型的资源标签；在所述运行环境下，浏览器通过访问所述入口文件，依据所述资源标签对应的文件名记载的域名从所述CDN服务器加载所述静态文件。从上述描述可知，本专利技术的有益效果在于：1、发布过程能够自动完成，无需人工干预2、兼容node+webpack的开发方式3、支持不同环境随意切换本地加载或者cdn加载，例如开发环境下需要本地加载，正式环境则使用cdn加载。进一步的，还包括：配置在非所述运行环境下，在入口文件遍历获取本地的静态文件的文件名列表，在列表中的各个文件名中添加对应代码类型的资源标签；在非所述运行环境下，浏览器通过访问所述入口文件，依据所述资源标签对应的文件名从本地服务器加载所述静态文件。由上述描述可知，在非指定的运行环境下，将使用默认的本地静态加载方式，从而支持不同环境随意切换，更好的满足不同需求。进一步的，所述配置开启CDN服务器加载的运行环境，具体为：通过修改node工程下的第一配置文件，配置使用CDN服务器加载静态文件的运行环境。由上述描述可知，在一具体实施方式中，可以通过修改node工程下的配置文件，实现CDN静态加载运行环境的指定，具有操作方便，易于实现的特点。进一步的，所述配置在所述运行环境下，将所述静态文件上传至CDN服务器，具体为：获取一脚本及其执行指令，所述脚本对应将本地存储有所述静态文件的文件夹上传至CDN服务器；配置在所述运行环境下，通过触发所述执行指令执行所述脚本。由上述描述可知，能在指定CDN加载的运行环境下，通过配置自动触发执行指令完成本地静态文件自动上传至CDN服务器，为后续从CDN服务器加载静态文件提供支持。进一步的，所述配置在所述运行环境下，通过触发所述执行指令执行所述脚本，具体为：通过修改node工程下的第二配置文件其中的webpack插件的第三配置文件，配置在所述运行环境下，执行所述生成对应的静态文件并存储在本地的步骤之后，通过触发所述执行指令执行所述脚本；以及配置在非所述运行环境下，执行所述生成对应的静态文件并存储在本地的步骤之后，从本地加载所述静态文件。由上述描述可知，在一具体实施方式中，可以通过修改node工程的配置文件下的webpack插件的配置文件，实现在打包过程对应预设的不同的静态加载方式，判断是直接本地加载静态文件还是上传静态文件至CDN为CDN静态加载做准备。进一步的，所述在入口文件遍历获取本地的静态文件的文件名列表，在列表中的各个文件名中添加对应所述CDN服务器的域名和对应代码类型的资源标签，具体为：依据所述第三配置文件的修改，通过修改node工程下的入口文件，配置在所述运行环境下，将webpack插件的公共路径指向所述CDN服务器的域名，然后遍历本地的静态文件，获取对应静态js代码的第一文件名列表和对应静态css代码的第二文件名列表，并在所述第一文件名列表和第二文件名列表的各个文件名中添加对应所述CDN服务器的域名，最后在第一文件名列表的各个文件名中添加script标签，在第二文件名列表的各个文件名中添加link标签。由上述描述可知，在一具体实施方式中，可以通过修改node工程下的入口文件，在静态文件的各个文件名中添加对应的资源标签以及指向CDN的域名，从而实现在依据资源标签调用时能依据域名从CDN服务器获取所需的资源，进而实现CDN加载静态文件在node+webpack的开发方式中的兼容。本专利技术提供的另一个技术方案为：一种计算机可读存储介质，其上存储有计算机程序，所述程序在被处理器执行时，能实现上述基于webpack的前端网页加载方法所包含的步骤。从上述描述可知，本专利技术的有益效果在于：对应本领域普通技术人本文档来自技高网...

【技术保护点】
1.基于webpack的前端网页加载方法，其特征在于，包括：配置开启CDN服务器加载的运行环境；打包前端代码，生成对应的静态文件并存储在本地；配置在所述运行环境下，将所述静态文件上传至CDN服务器，以及在入口文件遍历获取本地的静态文件的文件名列表，在列表中的各个文件名中添加对应所述CDN服务器的域名和对应代码类型的资源标签；在所述运行环境下，浏览器通过访问所述入口文件，依据所述资源标签对应的文件名记载的域名从所述CDN服务器加载所述静态文件。

【技术特征摘要】
1.基于webpack的前端网页加载方法，其特征在于，包括：配置开启CDN服务器加载的运行环境；打包前端代码，生成对应的静态文件并存储在本地；配置在所述运行环境下，将所述静态文件上传至CDN服务器，以及在入口文件遍历获取本地的静态文件的文件名列表，在列表中的各个文件名中添加对应所述CDN服务器的域名和对应代码类型的资源标签；在所述运行环境下，浏览器通过访问所述入口文件，依据所述资源标签对应的文件名记载的域名从所述CDN服务器加载所述静态文件。2.如权利要求1所述的基于webpack的前端网页加载方法，其特征在于，还包括：配置在非所述运行环境下，在入口文件遍历获取本地的静态文件的文件名列表，在列表中的各个文件名中添加对应代码类型的资源标签；在非所述运行环境下，浏览器通过访问所述入口文件，依据所述资源标签对应的文件名从本地服务器加载所述静态文件。3.如权利要求1所述的基于webpack的前端网页加载方法，其特征在于，所述配置开启CDN服务器加载的运行环境，具体为：通过修改node工程下的第一配置文件，配置使用CDN服务器加载静态文件的运行环境。4.如权利要求1所述的基于webpack的前端网页加载方法，其特征在于，所述配置在所述运行环境下，将所述静态文件上传至CDN服务器，具体为：获取一脚本及其执行指令，所述脚本对应将本地存储有所述静态文件的文件夹上传至CDN服务器；配置在所述运行环境下，通过触发所述执行指令执行所述...

【专利技术属性】
技术研发人员：刘德建，陈铭，高举全，郭玉湖，
申请(专利权)人：福建省华渔教育科技有限公司，
类型：发明
国别省市：福建,35