对css,js压缩之combo以及七牛cdn的思考

    之前发布的一个JFinal的css,js压缩的Combo Handler:http://www.dreamlu.net/blog/17

    该Handler可按照指定规则压缩并合并js和css,比较常见!淘宝,窝窝团都是采用的类似的方式!之前我也是参看窝窝团研发副总裁的博客才写了这样一个插件

    在强大的BAE2.0的cdn下,不得不承认该Handler还是有一定的效果!在迁移到3.0时,想使用七牛的镜像来做cdn!由于七牛云镜像不支持URL参数,发现之前的Combo Handler完全失效了!被迫开启了2.0的cnd依然使用2.0的来实现加速!

    昨天在github查看express-coffee源码的时候发现了connect-assets插件,这是一个实现类似rails中的asset框架!connect-assets中的源码采用coffee编写,这个我再喜欢不过了!大致的看了下,他是使用的一个模版标签去生成css,js的链接的,我恍然大悟!

    于是,我也采用类似的方法,写了个combo的Jade的模版标签!

    由于我的博分得有前台和后台不能像那些rails一样将所有的js,css压成一个(感觉这样比较浪费),于是多加了一个参数‘assets-web.jcss’,它用来记录这需要合并的js或者css,我对其分别以jcss和jjs的后缀区分!

    用@标记需要合并压缩的css或者js,加一个版本信息是为了更改之后方便重新生成合并压缩后的文件(没有采用对整个需要合并压缩的文件哈希的方式,看官可自行完善)!


    上面是ruby-china的js链接!

    下面是本博Jade模版的标签生成的css链接!这样做的最大好处就是节省请求时间,在第一次请求发现木有此css时则自动根绝规则文件去生成这个css,如果存在,则直接返回路径!如果规则文件被修改该文件的hex值发生改变,也同样会去生成新的css文件!

   核心代码已经抽出来单独形成了一个库,采用JFinal,Beetl或jsp的模版标签实现,使用JFinal和beetl、JSP的同学可直接使用:

git地址:http://git.oschina.net/596392912/JFinal-assets

依赖:JFinal,Beetl,yuicompressor,commons-io

页面js标签

<#assets file="/assets/assets.jjs"; src>
    <script src="${ctxPath}${src}"></script>
</#assets>

页面css标签

<#assets file="/assets/assets.jcss"; href> 
    <link rel="stylesheet" href="${ctxPath}${href}">
</#assets>

file: 需要压缩的js、css列表

assets.jjs示例:

#开头表注释
/js/jquery.min.js
/js/jquery-ui.min.js
/js/modernizr.min.js
/js/superfish.min.js
/js/application.js

捐助共勉
版权声明:若无特殊注明,本文皆为原创,转载请保留文章出处。