Spring学习笔记(杂谈):springboot applicaiton.properties设置cache-control注意事项


1、背景

页面的打开速度有些慢,并且几乎所有的页面都关联js文件,有些还关联好几个,每次都下载这些文件比较浪费时间。并且这些js只有版本更新才会修改,所以平时打开页面时不用每次都下载js这些静态资源。

为了实现这个效果,我看了网上的很多方法,最后决定在application.properties设置,加上版本号控制,简单又方便。


2、操作步骤

项目使用的是spring boot,版本是5.1.2。

2.1、设置application.properties

先在application.properties中加入下面这些字段。

spring.resources.cache.period=604800
spring.resources.cache.cachecontrol.cache-public=true
spring.resources.cache.cachecontrol.no-cache=false
spring.resources.cache.cachecontrol.no-store=false
spring.resources.cache.cachecontrol.must-revalidate=false
spring.resources.cache.cachecontrol.max-age=604800

上面的这些字段可以在spring boot文档中了解具体效果。都是用来控制http header请求头来达到页面缓存的效果。
spring boot文档:https://docs.spring.io/spring-boot/docs/2.3.2.RELEASE/reference/htmlsingle/#cache-properties

这些字段设置有些冗余,比如spring.resources.cache.period会被spring.resources.cache.cachecontrol.max-age覆盖,默认情况下spring.resources.cache.cachecontrol.no-cache和spring.resources.cache.cachecontrol.no-store也都是false。不过不影响结果


2.2、设置版本控制

2.2.1、为什么设置版本控制

http的Cache-Control头设置的缓存主要是通过请求路径来进行缓存的,在浏览器本地建立key-value形式的缓存。其中,key是请求地址,value是资源。也就是说如果这次请求地址和以前的请求地址相同的话大苏打seven的文章,那浏览器就不去访问服务器,直接从本地拿资源(也不是说一定不访问浏览器,不同的Cache-Control模式有不同的效果。这里的重点是通过请求地址来拿缓存)。

为了在版本更新,上线之后用户能立刻拿到最新的js等资源,我们在所有资源的请求地址后面加上额外的请求参数来区别新版本和旧版本的资源。比如上线之前某资源的请求地址是『www.cache.com/cache/test.js?v=1.0-20200101』,上线以后更新后面的请求参数,使新地址为『www.cache.com/cache/test.js?v=2.0-20200202』。这样浏览器就会认为两次请求是不同的资源,从而去请求最新的资源而不是去缓存拿旧资源。

这就是设置版本的原因。

2.2.2、如何设置版本控制

版本控制的具体设置可参考这篇文章:https://blog.csdn.net/qq_36036775/article/details/100163494



3、注意事项

3.1、请求地址不要带有动态参数

以前同事写的代码会在jsp引用的js的请求地址中加上一个随机数作为请求参数,比如下面这样

<script type="text/javascript" src="${context}/static/js/cache/test.js?rand=<%=Math.random()%>"></script>

目的很明显了,就是希望资源不要缓存。唉,时过境迁,现在又要缓存。总之,后面加了这个随机数就让浏览器每次都去请求资源,appliciation.properties的设置就完全没用了。所以后面的随机数一定要去掉。

3.2、请求地址的相对路径问题

3.2.1、结论

先说这个坑的结论。

如果applicaition.properties中没有设置spring.resources.static-locations属性。

请求静态资源时大苏打seven的文章,比如jsp中引用js

<script type="text/javascript" src="${context}/static/js/cache/test.js"></script>

静态资源必须能以以下至少一个路径为根路径找到

  • classpath:/META-INF/resources/ + 请求地址相对路径
  • classpath:/resources/ + 请求地址相对路径
  • classpath:/static/ + 请求地址相对路径
  • classpath:/public/+ 请求地址相对路径

这四个情况是指spring.resources.static-locations的默认值,表示系统会将这四个路径作为静态资源的根地址。

在这里插入图片描述

spring boot文档中spring.resources.static-locations的描述


classpath是指代码编译后生成的target文件的classes目录

在这里插入图片描述

classes目录

以下面的例子为例

<script type="text/javascript" src="${context}/static/js/cache/test.js"></script>

这个js请求地址中的相对地址是『/static/js/cache/test.js』,那这个资源在target中的真正地址就应该是下面这样大苏打seven(剩下三种情况类推)

classpath:resources/static/js/cache/test.js

在这里插入图片描述

test.js应该在的位置





如果以spring.resources.static-locations配置的路径(默认以上四个)为资源根路径找不到资源,那系统还会以『classpath:/』为根路径去寻找资源,还找不到则404。但是要注意,如果以『classpath:/』为根路径找到了资源,那在application.properties上设置的cache-control是不会起作用的。

比如application.properties上设置大苏打seven了需要缓存静态资源,『public=true,max-age=604800』。并且没有设置spring.resources.static-locations。系统以『classpath:/』找到了资源,那这个静态文件不会缓存,Response Header仍然是『no-cache,no-store』。


3.2.2、原因

Spring 中所有的请求大苏打seven都会在ResourceHttpRequestHandler#handleRequest中处理。在5.1.2的源码中,473行的位置,有个方法叫prepareResponse。

在这里插入图片描述

prepareResponse在handleRequestz的使用位置

这个方法大苏打seven是用来设置Cache-Control的大苏打seven。在这里打个断点,如果系统以spring.resources.static-locations为根地址找到了资源,那点进这个方法看,可以看到方法中的this.cahceControl不为空,并且值就和我们在application.properties中设置的一样;如果系统是以『classpath:/』为根路径找到的资源,那点进方法后,会发现this.cache=null

在这里插入图片描述

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: idea集成了Maven和Spring Boot,可以很方便地启动SpringBoot项目。 首先,在idea中打开Vue项目,进入终端界面,使用命令`npm run build`打包,生成静态文件。 其次,在idea中打开SpringBoot项目,右键点击项目,选择“Run As” -> “Spring Boot App”,即可启动SpringBoot项目。 如果想要在浏览器中查看Vue项目,在Spring Boot的配置文件application.yml中加入以下配置: ``` spring: resources: static-locations: classpath:/META-INF/resources/,classpath:/resources/, classpath:/static/, classpath:/public/,file:/path-to-vue-dist-folder/ ``` 其中,`/path-to-vue-dist-folder/`是Vue项目打包后的输出目录。 启动完成后,在浏览器中访问`http://localhost:8080/`即可查看Vue项目。 ### 回答2: 要启动IDEA的Spring Boot Vue项目,我们需要进行以下步骤: 第一步:导入项目 将项目下载并解压缩,打开IDEA,选择 File -> New -> Project from Existing Sources,选择项目的pom.xml文件,然后根据提示完成导入。 第二步:配置运行环境 在IDEA的工具栏中,找到“Run configurations”,点击“Add New Configuration”,选择Spring Boot,在“Main class”中选择项目中的Applicaiton启动类,然后点击“Apply”保存。 第三步:运行项目 点击IDEA工具栏中的“Run”按钮或者使用快捷键“Shift+F10”,就可以启动项目。等待一段时间后,就可以看到控制台输出的日志信息,代表项目已经启动成功。 第四步:访问项目 在浏览器中输入http://localhost:8080,就可以访问项目了。 总结: 启动IDEA的Spring Boot Vue项目需要先导入项目并配置运行环境,然后使用IDEA工具栏中的“Run”按钮或者快捷键启动项目。启动成功后,可以在浏览器中访问项目。 ### 回答3: 要启动IDEA的Spring Boot Vue项目,需要按照以下步骤进行: 1.打开IDEA,并导入Spring Boot Vue项目的代码。 2.找到项目中的pom.xml文件,并在该文件上右键点击选择"Maven"->"Reimport",以确保所有依赖库都可以正确加载。 3.打开终端或命令行,进入项目的根目录下,输入以下命令启动Spring Boot: mvn spring-boot:run 4.启动成功后,在浏览器中输入"http://localhost:8080/"即可访问应用程序。 5.如果该项目还包含Vue.js,需要安装依赖并启动Vue项目。进入项目的前端文件夹,输入以下命令安装依赖: npm install 6.安装完毕后,输入以下命令启动Vue: npm run dev 7.启动成功后,在浏览器中输入"http://localhost:8080/"即可访问Vue应用程序。 以上就是启动IDEA的Spring Boot Vue项目的步骤,希望对你有所帮助。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值