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>