SpringBoot静态资源解决浏览器缓存的方案和字体图标的处理

系统上线后,如果js、css、图片等静态资源修改,发布后因为用户客户端浏览器的缓存,会导致修改不能马上生效,怎么解决?

SpringBoot提供了一种简单有效的方式:

1、将ResourceUrlProvider 添加到Spring中:

@ControllerAdvice
public class ResourceUrlProviderController {
    @Autowired
    private ResourceUrlProvider resourceUrlProvider;

    @ModelAttribute("urls")
    public ResourceUrlProvider urls() {
        return this.resourceUrlProvider;
    }
}

2、yml或properties文件中增加配置

  resources:
    chain:
      strategy:
        content:
          enabled: true
          paths: /**

这种方式将在静态文件路径后增加Md5字符串,字符串的值根据文件内容自动生成,所以在文件内容改变时自动改变。

还有一种方式是在静态文件路径里增加版本号:

resources:
   chain:
      strategy:
          fixed:
             enabled: true
             paths: /**
             version: v版本号

3、页面引用静态资源

<script type="text/javascript" src="${urls.getForLookupPath('/static/js/login.js')}"></script>

4、效果:

MD5方式:

<script type="text/javascript" src="/static/js/login-83aa9d307823c9e7a55cc37b7ad3bdfc.js"></script>

版本号方式:

<script type="text/javascript" src="/static/v2.0.0/js/login.js"></script>

5、字体图标的问题

使用这种方式解决了静态资源缓存问题后,带来了一个问题,fontawsome、glyphicons等字体图标被服务端拦截了,不能正常加载,需要在pom文件中增加配置:

<build>
        <plugins>
            ......
            <!--解决加上静态资源缓存刷新策略后,字体图标不显示的问题-->
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-resources-plugin</artifactId>
                <configuration>
                    <encoding>${project.build.sourceEncoding}</encoding>
                </configuration>
            </plugin>
        </plugins>
        <pluginManagement>
            <plugins>
                ......
                <!--解决加上静态资源缓存刷新策略后,字体图标不显示的问题-->
                <plugin>
                    <artifactId>maven-resources-plugin</artifactId>
                    <configuration>
                        <encoding>utf-8</encoding>
                        <useDefaultDelimiters>true</useDefaultDelimiters>
                        <nonFilteredFileExtensions>
                            <nonFilteredFileExtension>woff</nonFilteredFileExtension>
                            <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
                            <nonFilteredFileExtension>eot</nonFilteredFileExtension>
                            <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
                            <nonFilteredFileExtension>svg</nonFilteredFileExtension>
                        </nonFilteredFileExtensions>
                    </configuration>
                </plugin>
            </plugins>
        </pluginManagement>
        <resources>
            ......
            <resource>
                <directory>src/main/resources</directory>
                <includes>
                    <include>**/*.*</include>
                </includes>
                <filtering>false</filtering>
            </resource>
        </resources>
</build>
原文地址:https://www.cnblogs.com/oliverreal/p/13945331.html