对 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 标签

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


页面 css 标签

1
2
3
<#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