基于jawr的springboot+springmvc+thymeleaf的web静态文件压缩方案

Posted 2021-05-01 Lambda在线

基于jawr的springboot+springmvc+thymeleaf的web静态文件压缩方案

1. 主要用到的依赖：

 
   
   
 

  
    
    
  
```
  
    
    
  
<dependency>
  
    
    
  
        <groupId>com.github.dtrunk90</groupId>
  
    
    
  
        <artifactId>thymeleaf-jawr-extension</artifactId>
  
    
    
  
        <version>2.0.2</version>
  
    
    
  
    </dependency>
  
    
    
  
    <dependency>
  
    
    
  
        <groupId>net.jawr</groupId>
  
    
    
  
        <artifactId>jawr-core</artifactId>
  
    
    
  
        <version>3.9</version>
  
    
    
  
    </dependency>
  
    
    
  
```
 
   
   
 

2. 与spring集成example可参考： https://github.com/j-a-w-r/jawr-spring/tree/master/jawr-spring-extension

3. jawr core源码分析：

主要通过 JawrSpringController初始化 JawrRequestHandler，这个handler是整个静态文件压缩初始化的入口

 
   
   
 

  
    
    
  
    public JawrRequestHandler(ServletContext context, Map<String, Object> initParams, Properties configProps)
  
    
    
  
    throws ServletException {
  
    
    
  

  
    
    
  
        this.initParameters = initParams;
  
    
    
  
        initRequestHandler(context, configProps);
  
    
    
  
    }
  
    
    
  

  
    
    
  
    /**
  
    
    
  
     * Initialize the request handler
  
    
    
  
     * 
  
    
    
  
     * @param context
  
    
    
  
     *            the servlet context
  
    
    
  
     * @param configProps
  
    
    
  
     *            the configuration properties
  
    
    
  
     * @throws ServletException
  
    
    
  
     *             if an exception occurs
  
    
    
  
     */
  
    
    
  
    private void initRequestHandler(ServletContext context, Properties configProps) throws ServletException {｝
 
   
   
 

initRequestHandler 调用

 
   
   
 

  
    
    
  
rotected void initializeJawrContext(Properties props) throws ServletException
  
    
    
  

  
    
    
  
// Initialize config
  
    
    
  
initializeJawrConfig(props);
  
    
    
  

  
    
    
  
bundlesHandler = factory.buildResourceBundlesHandler();
  
    
    
  

  
    
    
  
//PropertiesBasedBundlesHandlerFactory
  
    
    
  
public ResourceBundlesHandler buildResourceBundlesHandler()
  
    
    
  
            throws DuplicateBundlePathException, BundleDependencyException {
  
    
    
  
        return factory.buildResourceBundlesHandler();
  
    
    
  
    }
  
    
    
  

  
    
    
  
// BundlesHandlerFactory    
  
    
    
  
public ResourceBundlesHandler buildResourceBundlesHandler()
  
    
    
  
            throws DuplicateBundlePathException, BundleDependencyException{
  
    
    
  

  
    
    
  
            ...
  
    
    
  

  
    
    
  
            // Use the cached proxy if specified when debug mode is off.
  
    
    
  
        if (useCacheManager && !jawrConfig.isDebugModeOn())
  
    
    
  
            collector = new CachedResourceBundlesHandler(collector);
  
    
    
  
        //这里是初始化入口
  
    
    
  
        collector.initAllBundles();
  
    
    
  
        return collector;
  
    
    
  

  
    
    
  
            }
 
   
   
 

压缩后的临时文件的存放目录 AbstractResourceBundleHandler

 
   
   
 

  
    
    
  
    /** The path of the temporary working directory */
  
    
    
  
    protected String tempDirPath;
  
    
    
  

  
    
    
  
    /** The path of the directory which contain the bundles in text format */
  
    
    
  
    protected String textDirPath;
  
    
    
  

  
    
    
  
    /** The path of the directory which contain the bundles in gzip format */
  
    
    
  
    protected String gzipDirPath;
 
   
   
 

tempDirPath 路径：javax.servlet.context.tempdir 的目录

4.集成spring boot

jawr的配置文件：放到 aplication.properties

 
   
   
 

  
    
    
  
##### Common properties #####
  
    
    
  
jawr.debug.on=false
  
    
    
  
＃gzip压缩
  
    
    
  
jawr.gzip.on=true
  
    
    
  
jawr.gzip.ie6.on=false
  
    
    
  
jawr.charset.name=UTF-8
  
    
    
  
#使用md5生成hashcode
  
    
    
  
jawr.bundle.hashcode.generator=MD5
  
    
    
  
jawr.use.generator.cache=false
  
    
    
  
jawr.use.smart.bundling=true
  
    
    
  
jawr.use.bundle.mapping=true
  
    
    
  

  
    
    
  

  
    
    
  
# javascript properties and mappings
  
    
    
  
#压缩文件目录 也就是上面tempDirPath路径下的 /js 子目录
  
    
    
  
jawr.js.bundle.basedir=/js
  
    
    
  
jawr.js.bundle.bundlepostprocessors=JSMin
  
    
    
  

  
    
    
  
#id 是标签src属性用的  mappings是静态文件路径
  
    
    
  
#id 格式必须是jawr.js.bundle.名字.id 的格式
  
    
    
  
# 路径映射 jawr.js.bundle.名字.mappings
  
    
    
  
# jar:static/js/jquery-1.9.1.min.js jar:后面是静态文件路径 也就是web项目根目录下的 static 目录
  
    
    
  
# 多个路径用逗号分开 jar:static/js/addRead.js,jar:static/js/pc_detail.js
  
    
    
  
jawr.js.bundle.jquery.id= bundleid
  
    
    
  
jawr.js.bundle.jquery.mappings=jar:static/js/jquery-1.9.1.min.js
  
    
    
  

  
    
    
  

  
    
    
  
# CSS properties and mappings
  
    
    
  
jawr.css.bundle.basedir=/css
  
    
    
  
jawr.css.bundle.bundlepostprocessors=cssminify,base64ImageEncoder
  
    
    
  
jawr.css.bundle.filepostprocessors=base64ImageEncoder
  
    
    
  

  
    
    
  
jawr.css.bundle.pcindex.id= bundleid
  
    
    
  
jawr.css.bundle.pcindex.mappings=jar:static/css/index.css
 
   
   
 

5.集成thymeleaf

依赖扩展: thymeleaf-jawr-extension

 
   
   
 

  
    
    
  
// src 就是 上面配置的 bundleid
  
    
    
  
<script jawr:src="bundleid"></script>
 
   
   
 

主要优势：

1.对网络交互的数据进行压缩，比如对JS，CSS，图片等。通过去除空行，空格，换行符，注释，变量名混淆可以大大减少JS和CSS文件大小。常用的压缩工具有JSMin, YuiCompressor,Packer，Microsoft Ajax Minifier和UglifyJS。对于第三方的JS，我们可以预先对其压缩。但对于自己开发的JS，为了可读性和可维护性，我们只能在项目部署的时候压缩。JAWR默认的JS压缩器为JSMIN，CSS的压缩器为CSS Compressor，可选的配置为YuiCompressor(支持JS和CSS)。

2.可以合并所有的JS文件，合并所有的CSS文件。我们知道浏览器下载一个10K的文件，比下载10个1K的文件的速度要快很多，因为浏览器和服务端每次交互都会发送Request Header，服务器响应也会有Response Header，另外下载一个文件只需要建立一次网络连接，而10个文件则要建立10次网络连接，这个比较耗时。

3.对图片Base64编码嵌入html页面。减少网络交互次数。

4.应用启动时压缩静态文件，静态文件可以用hash索引，发生变化的文件才会改变hash便于缓存， 生产和开发环境可以通过 jawr.debug.on=false配置就行了