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

基于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配置就行了

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 200,667评论 5 472
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,361评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 147,700评论 0 333
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,027评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,988评论 5 361
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,230评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,705评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,366评论 0 255
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,496评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,405评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,453评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,126评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,725评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,803评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,015评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,514评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,111评论 2 341