spring boot web 静态资源缓存配置

静态资源缓存

采用Spring Boot开发Web项目时，静态文件（css、js）每次都会从服务器加载。Spring boot可设置静态文件缓存，设置方式可通过配置文件或者配置类实现。

参考

https://docs.spring.io/spring-boot/docs/2.0.0.M2/reference/htmlsingle/ SPRING RESOURCES HANDLING

https://docs.spring.io/spring-boot/docs/2.0.0.M2/reference/htmlsingle/#boot-features-spring-mvc-static-content

1. 通过配置文件配置

#配置静态资源映射
spring.mvc.static-path-pattern=/static/**
spring.resources.static-locations=classpath:/static
# 资源缓存时间，单位秒，30天
spring.resources.cache-period=2592000 
# 开启gzip压缩
spring.resources.chain.gzipped=true 
# 启用缓存
spring.resources.chain.cache=true
 
# Enable the Spring Resource Handling chain. Disabled by default
spring.resources.chain.enabled=true
# 开启版本控制策略，默认为false
spring.resources.chain.strategy.content.enabled=true
# 指定要应用的版本的路径，多个以逗号分隔，默认为:[/**]
spring.resources.chain.strategy.content.paths=/**
 
# 设定Session的追踪模式(cookie, url, ssl)
server.session.tracking-modes=cookie

2. 通过配置类配置

@Configuration
//@EnableWebMvc
public class WebMvcConfig implements WebMvcConfigurer {
 
    @Autowired
    private StringHashCacheData stringCacheService;
 
 
    /**
     * 配置静态资源
     * 此处可使用 properties 文件配置
     * @param registry
     */
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        VersionResourceResolver versionResourceResolver = new VersionResourceResolver()
                .addVersionStrategy(new ContentVersionStrategy(), "/**");
        registry.addResourceHandler("static/**")
                .addResourceLocations("classpath:/static/")
                .setCachePeriod(2592000).resourceChain(true)
                .addResolver(versionResourceResolver);
    }
 
}

配置完成之后，静态文件都可以缓存到浏览器本地。同时也存在一个问题，如果服务器静态文件修改，浏览器端在未过期之前是不会重新加载文件的。此时需要通过版本号来控制。spring boot版本号支持两种，一种是文件md5，另一种是固定版本号。如下只描述md5方式，spring boot启动时会计算每个静态文件的md5值并缓存，浏览器访问时每个静态文件后缀前加上md5值作为版本号，如果服务器md5值改变则浏览器重新加载。（需要重启应用才会重新生成md5）

1. 通过ResourceUrlProvider

@ControllerAdvice
public class ResourceUrlProviderController {
    @Autowired
    private ResourceUrlProvider resourceUrlProvider;
 
 
    @ModelAttribute("urls")
    public ResourceUrlProvider urls() {
        return this.resourceUrlProvider;
    }
 
}

修改html文件引用，文件路径通过urls.getForLookupPath()来获取

    <link th:href="@{${urls.getForLookupPath('/js/element-ui/unpkg.index.css')}}" rel="stylesheet"/>
    <link th:href="@{${urls.getForLookupPath('/css/element-common.css')}}" rel="stylesheet"/>
    <link th:href="@{${urls.getForLookupPath('/css/element-main.css')}}" rel="stylesheet"/>

2. 模板引擎中可直接使用 ResourceUrlEncodingFilter

如果使用JSPs, Thymeleaf, FreeMarker and Velocity模板引擎，可直接使用此方法增加静态文件md5。不用修改html文件。WebMvcConfig中增加如下bean即可。

    /**
     * JSPs, Thymeleaf, FreeMarker and Velocity模板引擎，可直接使用此方法增加静态文件md5
     */
    @Bean
    public ResourceUrlEncodingFilter resourceUrlEncodingFilter() {
        return new ResourceUrlEncodingFilter();
    }

通过以上两种方式，查看源文件如下：

    <link href="/static/js/element-ui/unpkg.index-fa5a34770cfc018906ba56631cde8384.css" rel="stylesheet"/>
    <link href="/static/css/element-common-8d034911c02f85a64a6347a36306fe69.css" rel="stylesheet"/>
    <!-- 引入组件库 -->
    <script src="/static/js/element-ui/vue.min-c56f84b7ae1b95b070add89efc71279e.js"></script>
    <script src="/static/js/element-ui/unpkg.index-48aa15a6dba29cfbedf7423e315981f7.js"></script>
    <script src="/static/js/jquery/jquery-1.11.3.min-13c0a5055cca7b2463b2f73701960b9e.js"></script>
    <script src="/static/js/bootstrap.min-b2f171a91ddaf1c5bac9213eb362fc0a.js"></script>
    <script src="/static/js/sha1-f8b7a25b8a763a501be5de14134c1cd1.js"></script>
    <script src="/static/js/placeholder-52fdc121ee331aee7e590794a665deb8.js"></script>
    <script src="/static/js/md5-b63ff39aa1ee38d5fa50fde1167f1175.js"></script>
    <script src="/static/js/jquery.validate.min-37393e7134311accfe3a8ca6e7e96038.js"></script>
    <script src="/static/js/bootstrap.ext-b24cd1401c3771228503d0dea0db6385.js"></script>
    <script src="/static/js/jcf/jcf-5c852dec956dac0d976584ec86a4051a.js"></script>
    <script src="/static/js/jcf/jcf.scrollable-8eb535ed592e36b23dc0dd789744252e.js"></script>
    <script src="/static/js/pop-65f1965e2601c20440157a1f13a90bad.js"></script>
    <script src="/static/js/views/common-b3c967314abe758b20f09d9548a61ec1.js"></script>
    <script src="/static/js/views/cookie-51e9e652134e71ae055de54442749fb7.js"></script>