Thymeleaf + VersionResourceResolver를 이용하여 자바스크립트 캐시 문제 해결하기...

개발을 하다보면 자바스크립트 파일을 빈번하게 수정하게 된다. 그렇다 보니 브라우저에서 캐시를 하게되면 수정된 사항이 반영이 되지 않는 문제가 발생하곤 한다. 이를 해결하기위해 html파일에서 자바스크립트 파일을 임포트할때 아래와 같이 처리하곤 했다.

 

 <script type="text/javascript" src="/js/common.js?v=20250407"></script>

 

이렇게 처리하면 브라우저에서 자바스크립트가 캐시되는걸 방지할 수 있지만 파일이 수정될때마다 수동으로 버전을 변경해줘야 하는 번거로움이 발생한다.

 

이를 효율적으로 처리할 수 있는 방법에 대해서 찾아보다가 VersionResourceResolver라는것을 알게 되었다.

 

방법은 다음과 같다.

 

WebMvcConfigurer을 구현할때 addResourceHandlers 메서드에 자바스크립트 리소스 경로를 지정해주고

addResolver(new VersionResourceResolver()
addContentVersionStrategy("/**")

을 등록하여 모든 자바스크립트 파일을 포함시킨다.

 

ResourceUrlEncodingFilter 를 빈으로 등록하여 fillter를 설정해주면 된다.

ResourceUrlEncodingFilter는 타임리프가 랜더링될때 리소스 url을 변경해주는 역할을 한다.

 

즉,  VersionResourceResolver 에 addContentVersionStrategy 설정을 하면 파일이 해시값을 얻을 수 있고 ResourceUrlEncodingFilter에 의해서 자바스크립트가 로드될때 파일명에 해시값이 붙게되어 캐시를 방지할 수 있게 된다.

public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        WebMvcConfigurer.super.addResourceHandlers(registry);

        registry.addResourceHandler("/js/**")
                .addResourceLocations("classpath:/static/js/")
                .resourceChain(true)
                .addResolver(new VersionResourceResolver()
                    .addContentVersionStrategy("/**"));
    }

    @Bean
    public FilterRegistrationBean<ResourceUrlEncodingFilter> resourceUrlEncodingFilter() {
        FilterRegistrationBean<ResourceUrlEncodingFilter> registration = new FilterRegistrationBean<>();
        registration.setFilter(new ResourceUrlEncodingFilter());
        return registration;
    }
  }

 

이 후에 html파일에서 자바스크립트를 임포트 할때 타임리프 문법으로 처리해주면 된다.

 

<script type="text/javascript" th:src="@{/js/common.js}"></script>

 

정상적으로 동작한다면 아래와 같이 자바스크립트 파일에 해시값이 붙어 있는걸 확인할 수 있다.

 

 

 

이제 자바스크립트가 수정되면 해시값이 바뀌기때문에 캐시 문제를 방지 할 수 있다.