一种解决前端应用缓存引起渲染异常的方法与流程

1.本发明涉及互联网技术领域，更具体的说，本发明涉及一种解决前端应用缓存引起渲染异常的方法。


背景技术：

2.前端web应用主要是为了解决快速迭代快速版本更新，避免移动端和pc端app需要频繁发版的问题。
3.现有技术缺陷：随着用户量的增多，前端应用在服务器上更新版本后，会有部分用户会出现页面不能及时更新显示新版本页面，出现前端应用加载异常，页面布局错乱等显示问题，而且通过刷新浏览器页面也不能正常显示，必须要清理浏览器缓存才可以。


技术实现要素：

4.为了克服现有技术的不足，本发明提供一种解决前端应用缓存引起渲染异常的方法。
5.本发明解决其技术问题所采用的技术方案是：一种解决前端应用缓存引起渲染异常的方法，其改进之处在于，该方法包括以下的步骤：
6.s10、通过对前端应用工程进行打包配置，使最终打包前端构建前端应用时，该应用里面的每个文件都带有hash值，确保每个文件的唯一特性；
7.s20、通过步骤s10完成前端应用工程的打包配置后，对前端应用的缓存策略进行编码；
8.s30、通过步骤s10和s20得到的目标前端应用项目的编码和工程配置，构建用于发布的前端应用；
9.s40、对步骤s30中得到的前端应用包，部署到服务端相应的目录下，用于浏览器访问前端应用的资源地址；
10.s50、前往当前前端应用部署所在的目标服务器进行该前端应用的缓存策略配置；
11.s60、完成前端编码和构建、后端部署应用以及后端配置缓存策略，前往浏览器上对当前应用进行正常访问。
12.进一步的，步骤s10中，包括以下的步骤：
13.s101、对前端应用进行打包配置前，通过vue-cli3.0创建项目，使用visual studio code进行代码编写的开发工具，选择vue为前端开发的技术栈，vue-cli3.0用于组成完整的vue项目核心构成，用来对目标前端应用进行快速开发、编译和构建；
14.s102、依据步骤s101中完成项目的开发工作，前往目标工程的vue.config.js文件配置filenamehashing属性为true；
15.s103、完成步骤s102中的配置，执行打包命令后，构建打包前端应用输出的文件后面加上的hash值；
16.s104、在所述的vue.config.js文件上添加时间戳，确保文件的唯一性。
17.进一步的，步骤s20中，前往目标工程的入口文件index.html或者public下的模板index.html的head上添加缓存策略，使该策略对整个工程的html文件统一生效。
18.进一步的，前端应用的缓存策略包括：
19.s201、配置《meta http-equiv＝"expires"content＝"0"》用于设定网页的到期时间为当前，即下次使用需到服务器上重新传输；
20.s202、配置《meta http-equiv＝"pragma"content＝"no-cache"》用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从cache中再调出；
21.s203、配置《meta http-equiv＝"cache-control"content＝"no-cache,no-store,must-revalidate"》用于清除缓存，再访问时需要重新下载。
22.进一步的，步骤s30中，包括以下内容：
23.前往目标前端工程所在的终端，执行npm run build命令打包构建前端应用，构建输出的前端应用包，资源带有当前时间戳和hash值的后缀，得到的前端应用资源文件都是唯一的，该前端应用包，用于部署到服务端，提供给浏览器访问。
24.进一步的，步骤s50中，包括以下的步骤：
25.s501、前往前端应用部署的服务端，前往nginx文件配置服务端对当前前端应用的所有html的缓存策略进行配置，用于解决服务器自身存在的html缓存问题；
26.s502、对nginx文件进行配置，配置add_header cache-control no-cache，用于放开缓存；
27.s503、对nginx文件进行配置，配置add_header cache-control private；
28.s504、对nginx文件进行配置，配置add_header cache-control no-store，设置不仅不能缓存,连临时文件夹中不能暂存该资源；
29.s505、对所述的nginx文件进行配置，配置只针对忽略目录下的所有html缓存；
30.s506、通过步骤s501-s505，忽略目标前端应用所在的目录下所有html的文件缓存，其他文件不影响，html会根据哈斯值，访问对应的js、css资源，若js、css在浏览器上已有资源，可以用缓存，如果没有，再下载。
31.进一步的，步骤s60中，浏览器上对当前应用进行正常访问包括以下的步骤：
32.s601、浏览器加载目标前端应用，每次加载该前端应用的入口文件index.html都会从远程服务端去获取；
33.s602、当前端应用有版本更新时，构建打包输出的资源文件名已经换了hash后缀，当前的app.js、styles.js\chunk-libs.js文件都有hash，此时浏览器会根据新的index.html去渲染页面，同时会需要用到新的app.js、styles.js\chunk-libs.js文件；
34.s603、浏览器检测不到缓存里有该js文件，此时会前往目标服务器下载该文件，此时目标服务器目录下的进行缓存策略的配置，服务端也不会从缓存中取，确保了访问的资源是最新的；
35.s604、其他所需的css、js、图片资源文件也是类似的处理，确保了资源最新；
36.s605、修改代码，重新构建并部署新版本的前端应用到目标服务器上，前往浏览器进行访问，实现正常访问和正常显示，不再出现因缓存影响造成的页面异常问题，也不需要手动清除浏览器缓存。
37.本发明的有益效果是：本发明的一种解决前端应用缓存引起渲染异常的方法，解
决web前端应用在将前端应用资源包部署到服务器上进行版本更新后，因浏览器缓存或者服务器缓存原因造成的加载异常，页面布局错乱、白屏等问题；不需要手动清理就能正常显示，提升用户体验。
附图说明
38.图1为本发明的一种解决前端应用缓存引起渲染异常的方法的流程示意图。
具体实施方式
39.下面结合附图和实施例对本发明进一步说明。
40.以下将结合实施例和附图对本发明的构思、具体结构及产生的技术效果进行清楚、完整地描述，以充分地理解本发明的目的、特征和效果。显然，所描述的实施例只是本发明的一部分实施例，而不是全部实施例，基于本发明的实施例，本领域的技术人员在不付出创造性劳动的前提下所获得的其他实施例，均属于本发明保护的范围。另外，专利中涉及到的所有联接/连接关系，并非单指构件直接相接，而是指可根据具体实施情况，通过添加或减少联接辅件，来组成更优的联接结构。本发明创造中的各个技术特征，在不互相矛盾冲突的前提下可以交互组合。
41.参照图1所示，本发明揭示了一种解决前端应用缓存引起渲染异常的方法，具体的，该方法包括以下的步骤：
42.s10、通过对前端应用工程进行打包配置，使最终打包前端构建前端应用时，该应用里面的每个文件都带有hash值，确保每个文件的唯一特性；
43.在本实施例中，步骤s10包括以下的步骤：
44.s101、对前端应用进行打包配置前，通过vue-cli3.0创建项目，使用visual studio code进行代码编写的开发工具，选择vue为前端开发的技术栈，vue-cli3.0用于组成完整的vue项目核心构成，用来对目标前端应用进行快速开发、编译和构建；
45.s102、依据步骤s101中完成项目的开发工作，前往目标工程的vue.config.js文件配置filenamehashing属性为true；
46.s103、完成步骤s102中的配置，执行打包命令后，构建打包前端应用输出的文件后面加上的hash值；
47.本实施例中，在vue.config.js文件加
48.config.output.filename('js/[name].[hash:8].js').end()和
[0049]
config.output.chunkfilename('js/[name].[hash:8].js').end()；
[0050]
s104、在所述的vue.config.js文件上添加时间戳，确保文件的唯一性；本实施例中，在vue.config.js文件加上const timestamp＝new date().gettime()
[0051]
[0052]
通过步骤s101-s104的配置，最终打包构建前端应用时输出的资源文件都是唯一的，每次版本更新，文件资源都会标上新的带有hash后缀值文件名标识。
[0053]
s20、通过步骤s10完成前端应用工程的打包配置后，对前端应用的缓存策略进行编码；
[0054]
在本实施例中，步骤s20中，前往目标工程的入口文件index.html或者public下的模板index.html的head上添加缓存策略，使该策略对整个工程的html文件统一生效。前端应用的缓存策略包括：
[0055]
s201、配置《meta http-equiv＝"expires"content＝"0"》用于设定网页的到期时间为当前，即下次使用需到服务器上重新传输；
[0056]
s202、配置《meta http-equiv＝"pragma"content＝"no-cache"》用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从cache中再调出；
[0057]
s203、配置《meta http-equiv＝"cache-control"content＝"no-cache,no-store,must-revalidate"》用于清除缓存，再访问时需要重新下载。
[0058]
浏览器加载前端应用的新版本时，会因访问到的是浏览器的缓存而不是服务器上的最新资源，造成页面异常；通过s201-s203的配置，配置当前前端应用html文件的缓存策略为不需要缓存，即可忽略浏览器缓存对html的影响。
[0059]
s30、通过步骤s10和s20得到的目标前端应用项目的编码和工程配置，构建用于发布的前端应用；
[0060]
步骤s30中，包括以下内容：前往目标前端工程所在的终端，执行npm run build命令打包构建前端应用，构建输出的前端应用包，资源带有当前时间戳和hash值的后缀，得到的前端应用资源文件都是唯一的，该前端应用包，用于部署到服务端，提供给浏览器访问。
[0061]
s40、对步骤s30中得到的前端应用包，部署到服务端相应的目录下，用于浏览器访问前端应用的资源地址；
[0062]
s50、前往当前前端应用部署所在的目标服务器进行该前端应用的缓存策略配置；
[0063]
本实施例中，所述步骤s50中，包括以下的步骤：
[0064]
s501、前往前端应用部署的服务端，前往nginx文件配置服务端对当前前端应用的所有html的缓存策略进行配置，用于解决服务器自身存在的html缓存问题；
[0065]
s502、对nginx文件进行配置，配置add_header cache-control no-cache，用于放开缓存；
[0066]
s503、对nginx文件进行配置，配置add_header cache-control private；
[0067]
s504、对nginx文件进行配置，配置add_header cache-control no-store，设置不仅不能缓存,连临时文件夹中不能暂存该资源；
[0068]
s505、对所述的nginx文件进行配置，配置只针对忽略目录下的所有html缓存；其具体内容如下：
[0069][0070]
s506、通过步骤s501-s505，忽略目标前端应用所在的目录下所有html的文件缓存，其他文件不影响，html会根据哈斯值，访问对应的js、css资源，若js、css在浏览器上已有资源，可以用缓存，如果没有，再下载。
[0071]
s60、完成前端编码和构建、后端部署应用以及后端配置缓存策略，前往浏览器上对当前应用进行正常访问。
[0072]
步骤s60中，浏览器上对当前应用进行正常访问包括以下的步骤：
[0073]
s601、浏览器加载目标前端应用，每次加载该前端应用的入口文件index.html都会从远程服务端去获取；
[0074]
s602、当前端应用有版本更新时，构建打包输出的资源文件名已经换了hash后缀，当前的app.js、styles.js\chunk-libs.js文件都有hash，此时浏览器会根据新的index.html去渲染页面，同时会需要用到新的app.js、styles.js\chunk-libs.js文件；
[0075]
s603、浏览器检测不到缓存里有该js文件，此时会前往目标服务器下载该文件，此时目标服务器目录下的进行缓存策略的配置，服务端也不会从缓存中取，确保了访问的资源是最新的；
[0076]
s604、其他所需的css、js、图片资源文件也是类似的处理，确保了资源最新；
[0077]
s605、修改代码，重新构建并部署新版本的前端应用到目标服务器上，前往浏览器进行访问，实现正常访问和正常显示，不再出现因缓存影响造成的页面异常问题，也不需要手动清除浏览器缓存。
[0078]
本发明提供的一种解决前端应用缓存引起渲染异常的方法，能够有效解决web前端应用在将前端应用资源包部署到服务器上进行版本更新后，因浏览器缓存或者服务器缓存原因造成的加载异常，页面布局错乱、白屏等问题，不需要手动清理就能正常显示，提升用户体验。
[0079]
以上是对本发明的较佳实施进行了具体说明，但本发明创造并不限于所述实施例，熟悉本领域的技术人员在不违背本发明精神的前提下还可做出种种的等同变形或替换，这些等同的变形或替换均包含在本技术权利要求所限定的范围内。