96. Spring Boot之静态资源版本映射(解决js/css缓存问题)

 

 

我们在之前有一篇文章中讲过【处理静态资源】，但是在实际开发中，我们会发现我们所了解到的知识远远不够我们使用，今天这节就是在实际开发当中对碰到的问题进行一定的讲解和解决。

       问题的提出：我们对于我们编写的js和css文件，经常会做一些改变，由于浏览器缓存，用户本地的资源还是旧资源，一般为了解决这种情况导致的问题，我们会可能会选择在资源文件后面加上参数“版本号”或其他方式。

       使用版本号参数，如：

<scripttype="text/javascript"src="/js/common.js?v=1.0.1"></script>

       使用这种方式，当我们文件修改后，手动修改版本号来达到URL文件不被浏览器缓存的目的。同样也存在很多文件都需要修改的问题，或者有的人会增加时间戳的形式，这样是最不可取的，每次浏览器都需要为服务器增加了不必要的压力。Spring在解决这种问题方面，提供了2中解决方式。我们看看本节的大纲吧。

本章大纲

（1）回顾默认资源映射
（2）使用webjars
（3）Spring 静态资源版本映射之资源名称md5方式
（4）Spring 静态资源版本映射之资源版本号方式
（5）md5与版本号方式的处理原理
（6）总结

 

 

       接下来我们看看具体是怎么操作的。

（1）回顾默认资源映射

       默认配置的 /** 映射到 /static （或/public、/resources、/META-INF/resources）

其中默认配置的 /webjars/** 映射到 classpath:/META-INF/resources/webjars/

 

（2）使用webjars

       先说一下什么是webjars？我们在Web开发中，前端页面中用了越来越多的JS或CSS，如jQuery等等，平时我们是将这些Web资源拷贝到Java的目录下，这种通过人工方式拷贝可能会产生版本误差，拷贝版本错误，前端页面就无法正确展示。

       WebJars 就是为了解决这种问题衍生的，将这些Web前端资源打包成Java的Jar包，然后借助Maven这些依赖库的管理，保证这些Web资源版本唯一性。

       WebJars 就是将js, css 等资源文件放到 classpath:/META-INF/resources/webjars/ 中，然后打包成jar 发布到maven仓库中。

       以jQuery为例，文件存放结构为：

       META-INF/resources/webjars/jquery/2.1.4/jquery.js

    META-INF/resources/webjars/jquery/2.1.4/jquery.min.js

    META-INF/resources/webjars/jquery/2.1.4/jquery.min.map

   META-INF/resources/webjars/jquery/2.1.4/webjars-requirejs.js

       使用方式就是在pom.xml文件添加配置：

        <dependency>

           <groupId>org.webjars</groupId>

           <artifactId>jquery</artifactId>

           <version>2.1.4</version>

        </dependency>

 

       Spring Boot 默认将 /webjars/** 映射到 classpath:/META-INF/resources/webjars/ ，结合我们上面讲到的访问资源的规则，便可以得知我们在页面中引入jquery.js的方法为：

<script type="text/javascript" src="/webjars/jquery/2.1.4/jquery.js"></script>

       版本号统一管理

       但是我们实际开发中，可能会遇到升级版本号的情况，如果我们有100多个页面，几乎每个页面上都有按上面引入jquery.js 那么我们要把版本号更换为3.0.0，一个一个替换显然不是最好的办法。 使用webjars的webjars-locator就可以解决以上的问题，那么具体要怎么操作呢？

       首先在pom.xml添加webjars-locator的依赖：

       <dependency>

           <groupId>org.webjars</groupId>

           <artifactId>webjars-locator</artifactId>

       </dependency>

       增加一个WebJarsController，这个Controller会将以webjarslocator路径拦截，然后重新组装处理，具体代码如下：

package com.kfit;

 

import javax.servlet.http.HttpServletRequest;

 

import org.springframework.core.io.ClassPathResource;

import org.springframework.http.HttpStatus;

import org.springframework.http.ResponseEntity;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.PathVariable;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;

import org.springframework.web.servlet.HandlerMapping;

import org.webjars.WebJarAssetLocator;

 

/**

 * 这个Controller会将以webjarslocator路径拦截，然后重新组装处理

 * @author Angel --守护天使

 * @version v.0.1

 * @date 2016年12月1日

 */

@Controller

public class WebJarsController {

    privatefinal WebJarAssetLocator assetLocator = new WebJarAssetLocator();

    @ResponseBody

    @RequestMapping("/webjarslocator/{webjar}/**")

    public ResponseEntity<Object> locateWebjarAsset(@PathVariable String webjar, HttpServletRequest request) {

        try {

            String mvcPrefix = "/webjarslocator/" + webjar + "/"; // This prefix must match the mapping path!

            String mvcPath = (String) request.getAttribute(HandlerMapping.PATH_WITHIN_HANDLER_MAPPING_ATTRIBUTE);

            String fullPath = assetLocator.getFullPath(webjar, mvcPath.substring(mvcPrefix.length()));

            return new ResponseEntity<>(new ClassPathResource(fullPath), HttpStatus.OK);

        } catch (Exception e) {

            return new ResponseEntity<>(HttpStatus.NOT_FOUND);

        }

    }

}

 

最后在页面中使用的方式：

<script type="text/javascript" src="/webjarslocator/jquery/jquery.js"></script>

 

（3）Spring 静态资源版本映射之资源名称md5方式

       Spring 默认提供了静态资源版本映射的支持。

       当我们的资源内容发生改变时，由于浏览器缓存，用户本地的资源还是旧资源，为了防止这种情况发生导致的问题。我们可能会选择在资源文件后面加上参数“版本号”或其他方式。

<scripttype="text/javascript"src="/js/demo.js?v=1.0.1"></script>

       使用这种方式，当我们文件修改后，手工修改版本号来达到URL文件不被浏览器缓存的目的。同样也存在很多文件都需要修改的问题。或者有的人会增加时间戳的方式，这样我认为是最不可取的，每次浏览器都要请求为服务器增加了不必要的压力。

       然而Spring在解决这种问题方面，提供了2种解决方式。 第一种方式就是MD5的方式，我们看下具体怎么操作。

       第一步：修改 application.properties 配置文件

spring.resources.chain.strategy.content.enabled=true

spring.resources.chain.strategy.content.paths=/**

       第二步：创建 ResourceUrlProviderController 文件

package com.kfit;

 

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.web.bind.annotation.ControllerAdvice;

import org.springframework.web.bind.annotation.ModelAttribute;

import org.springframework.web.servlet.resource.ResourceUrlProvider;

 

/**

 *

 * @author Angel --守护天使

 * @version v.0.1

 * @date 2016年12月1日

 */

@ControllerAdvice

public class ResourceUrlProviderController {

    @Autowired

    private ResourceUrlProvider resourceUrlProvider;

    @ModelAttribute("urls")

    public ResourceUrlProvider urls() {

        return this.resourceUrlProvider;

    }

}

       第三步：在页面中进行使用：

<scripttype="text/javascript"src="${urls.getForLookupPath('/js/demo.js') }"></script>

       如果使用的thymeleaf模板引擎的话，那么需要这么进行编写：

<scripttype="text/javascript"th:src="${urls.getForLookupPath('/js/demo.js') }"></script>

注：这个博主经过测试，证明可用。

 

       当我们访问页面后，HTML中实际生成的代码为：

<scripttype="text/javascript"src="/js/demo--ef8d9e1da763788be348c78ea32a3c6d.js"></script>

 

（4）Spring 静态资源版本映射之资源版本号方式

       资源版本号方式对所有资源的统一版本控制，不像上面一个md5是针对文件的。

 

       除了在 application.properties中的配置有所区别，页面使用和md5的一样。

spring.resources.chain.strategy.fixed.enabled=true

spring.resources.chain.strategy.fixed.paths=/js/**,/v1.0.0/**

spring.resources.chain.strategy.fixed.version=v1.0.0

 

       这样配置后，以上面 common.js 为例，实际页面中生成的HTML代码为：

<scripttype="text/javascript"src="/v1.0.0/js/demo.js"></script>

 

（5）md5与版本号方式的处理原理

       页面中首先会调用urls.getForLookupPath方法，返回一个/v1.0.0/js/demo.js或/css/demo-c6b7da8fffc9be141b48c073e39c7340.js然后浏览器发起请求。

       当请求的地址为md5方式时，会尝试url中的文件名中是否包含-，如果包含会去掉后面这部分，然后去映射的目录（如/static/）查找/js/common.js文件，如果能找到就返回。

       当请求的地址为版本号方式时，会在url中判断是否存在/v1.0.0 ，如果存在，则先从URL中把 /v1.0.0 去掉，然后再去映射目录查找对应文件，找到就返回。

 

（6）总结

       有这么多方式来管理我们的资源文件，然而在实际应用中虽然也都有可能用到（存在就有存在的道理嘛），但是凭借个人经验来说。

        <1>. 我们使用第三方的库时，建议使用webjars的方式，通过动态版本号（webjars-locator 的方式）来使用（因为第三方库在项目开发中变动频率很小，即便是变动也是版本号的修改）。

       <2>. 我们使用自己存放在静态资源映射目录中的资源的时候，建议使用md5 资源文件名的方式来使用（项目开发中一些css、js文件会经常修改）。

       <3>. 项目素材文件建议放到 classpath:/static （或其他）目录中，打包在项目中，通过CMS维护的一些图片和资源，我们使用配置引用到具体的磁盘绝对路径来使用。

 

       <4>. 注意使用md5文件名方式的时候，Spring 是有缓存机制的，也就是说，在服务不重启的情况下，你去变动修改这些资源文件，其文件名的md5值并不会改变，只有重启服务再次访问才会生效。如果需要每次都获取实际文件的md5值，需要重写相关类来实现，我们不建议这样做，因为一直去计算文件md5值是需要性能代价的。

 

 à悟空学院：https://t.cn/Rg3fKJD

学院中有Spring Boot相关的课程！点击「阅读原文」进行查看！

SpringBoot视频：http://t.cn/A6ZagYTi

Spring Cloud视频：http://t.cn/A6ZagxSR

SpringBoot Shiro视频：http://t.cn/A6Zag7IV

SpringBoot交流平台：https://t.cn/R3QDhU0

SpringData和JPA视频：http://t.cn/A6Zad1OH

SpringSecurity5.0视频：http://t.cn/A6ZadMBe

Sharding-JDBC分库分表实战：http://t.cn/A6ZarrqS

分布式事务解决方案「手写代码」：http://t.cn/A6ZaBnIr

评论

3 楼 林祥纤 2017-07-21  

qwfys200 写道

总结的很好。

谢谢！

2 楼 qwfys200 2017-07-21  

总结的很好。

1 楼 lixuejian 2016-12-02  

         mark