解决静态资源文件js/css缓存问题(超详细总结版) |
您所在的位置:网站首页 › 插件已禁用安装失败怎么清除缓存数据 › 解决静态资源文件js/css缓存问题(超详细总结版) |
什么是静态资源文件
顾名思义,静态资源文件就是js、css、img等非服务器动态运行生成的文件,统称为静态
资源文件。
为什么要缓存静态资源文件
静态资源文件是基本不会改变的,没必要每次都从服务器中获取。也就是说,我们每次向
服务器发送请求得到的静态资源是相同的。所以我们可以把静态资源缓存再浏览器,也就
是客户端,来进行性能优化。
虽然绝大多数css和js文件都只有几百k,但有些时候会存在如字体文件等超过1MB的文件,加载时间会达到一秒以上,就会极大的影响网页的整体加载速度,这时候就必须要对静态资源文件进行缓存。 实现缓存的几种方法一、修改html文件 第一种方法就是在html文件的最上面加上这样一行代码: 这句话的作用是修改服务器的响应该html文件的响应头,设置其中静态资源文件的缓存时间为7200秒。 说到这里首先要介绍一下服务器给浏览器的静态资源响应,按F12打开开发者调试工具,选择Network,如下图所示: 这里的woff可以替换为css|js,即匹配所有css和js文件,这里我需要缓存的为字体文件,后缀为woff。之前查找了很多资料,没有第一行proxy_pass,配置后会出现匹配到的静态资源文件报404,是因为没有设置正确的代理路径,参考自己nginx配置文件中其它部分设置正确的路径即可。这样设置之后,重启nginx,发现可以进行缓存了,如下图所示: 因此我们的304请求很可能是因为这个响应头造成的。我们要通过nginx去掉这个响应头。 nginx中清除响应头需要下载一个模块headers_more,这个模块可以实现响应头的清除功能。下载安装模块后需要对nginx重新编译才能生效。建议在运维的协助下完成。nginx中需要修改的配置如下: location ~* \.(woff)$ { proxy_pass http://kubernetes; expires 1d; more_clear_headers Pragma; }将Pragma这个响应头清除,之后重启nginx,结果如下图所示: 最后的nginx配置我没有配置版本号,因为我缓存的是字体文件,也就是说是永远不会改变的。然而我们如果缓存的是js和css文件,每隔几周可能都会进行修改,这时候不设置版本号就是存在风险的,可能你浏览器端存有旧的css文件没有过期,这时候又没有版本号作区分,可能会导致无法获取最新的css文件。因此建议添加版本号,具体配置在springboot配置的链接中有详细说明,参考配置即可。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |