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>