服务端合并和压缩JS和CSS文件(3)
来源:随网之舞 发布时间:2010-06-11 18:23:00
5. 使用Minify
比如,有两个JavaScript文件,http://localhost/example/a.js,http://localhost/example/b.js,那么使用Minify合并的URL是http://localhost/min/f=/example/a.js,/example/b.js,直接把这个URL放到页面中就可以使用了。
实际上Minify不仅仅实现了合并功能,同时默认在合并的同时还会对文件进行精简压缩,如果你在本地本身就对文件进行压缩了,比如使用YUI Compressor,那么可以在config.php中进行如下设置取消Minify的压缩以提升性能:
$min_serveOptions['minifiers']['application/x-javascript'] = '';
$min_serveOptions['minifiers']['text/css'] = '';
如果服务端支持Java,那么也可以对Minify进行简单配置而实现利用YUI Compressor压缩JavaScript和CSS文件。
直接在服务端进行合并和压缩,这非常的灵活,也极大的减轻了前端开发成果的部署过程,真使事半功倍。更多配置请看Minify CookBook和Wiki
在YUI3中使用Minify
在YUI2中,合并机制只支持库本身的文件,自定义的文件会单独一一加载。从YUI3开始,模块变得更小,这样就导致使用合并时URL会变长,但在IE下URL的最大值是2083,Apache默认的URL最大值是8192,所以当URL在对应浏览器下超出最大值时,YUI3会自动根据浏览器判断进行拆分成多个合并的URL,并且还提供maxURLLength来设置最大值。而从YUI3.1.0开始,不仅仅支持自定义文件的合并,还支持可以使用多个提供合并服务的CDN,即可以对YUI组件使用http://yui.yahooapis.com这个CDN,其余文件使用其他支持合并的CDN,这样非常的实用、方便和灵活。示例在YUI3中使用Minify就说明了这点。
由于YUI默认URL的合并形式和Minify的不相同,所以在YUI实例化时需要利用正则替换来实现YUI3支持Minify的URL合并形式,但这种方式既不灵活,且有风险,不友好又效率低。比较简单的方式是直接修改YUI 3的源码,如示例在修改后的YUI3中使用Minify。同时,YUI 3.1.*的版本有一个bug,即同时合并JavaScript和CSS时,较短的那个URL结尾处多一个&符号,如示例在YUI3中使用Minify中:
/file/UploadPic/20106/11/widget-33.css&
3.1.1/build/console/assets/skins/sam/console.css&
http://dancewithnet.com/min/b=yui&f=3.1.1/tabview/assets/
skins/sam/tabview.css&
这两种都可以使用,虽然在早期的IE浏览器版本(如IE6)中会有无法解析的风险,且影响某些特定情况下的缓存,但当使用修改后的YUI时,合并的URL变成类似/min/b=yui&f=3.1.1/tabview/assets/skins/sam/tabview.css,的样子,就会出现bug了。对于YUI的Combo Handler来说这是一个小bug,所以YUI3把这个bug设置为P5。但当我们改造YUI3来更好的支持Minify时,还要解决这个问题,具体方案请看示例在修改后的YUI3中使用Minify。
在CDN上使用Minify
CDN的全称是Content Delivery Network,即内容分发网络。其最常应用就是通过位于不同地理位置的服务器把静态资源部署到用户最近的边缘,这样能有效解决Web服务中大量静态资源的速度和性能问题。由于实施成本比较高,所以在实际的应用中,大型公司一般会组建自己的CDN,而小型公司只能租借第三方的CDN,但不管怎样这两种方式都不会影响在服务端实施合并和压缩程序。一般情况下,静态资源也并不是直接上传到CDN,而是先传到一台后台服务器,然后各地CDN的前端Cache服务器按需索取。YUI CDN的Combo Handler就是部署在其后台服务器上的,Minify也应如此。简单图示如下:
当一个资源请求到CDN时,CDN会先检查本地是否存在这个资源,如果有则会直接返回该资源,如果没有则会请求其后台服务器,后台服务器会依据资源URL的信息进行相应的处理,然后返回给CDN,CDN就会存储这个资源,再次出现这个资源请求时就无需请求后台服务器了。所以,虽然合并特别是压缩JavaScript和CSS文件是消耗时间的,但是由于只需要第一次,并且第一次基本上由我们自己访问掉(我们可以创建程序自动进行一次访问来保证,实际上图片优化也可以采用这种方式),所以基本上很安全。这正是目前在口碑网实施的JavaScript和CSS合并方案,在第4届D2的《前端性能优化和自动化》中也介绍了它。
原文:http://dancewithnet.com/2010/06/08/minify-js-and-css-files-in-server/
猜你喜欢
- 子邮件传递可以由多种协议来实现。目前,在Internet网上最流行的三种电子邮件协议是SMTP、POP3和IMAP,下面分别简单介绍。◆SM
- 对于很多站长的网站被某个搜索引擎屏蔽的问题已经很常见了,为什么会出现这样的问题,站长首先要对网站自身分析一下,是否有违反搜索引擎规则的手法,
- 网上的一些防范asp木马的教程都基于提前防范的基础之上,例如:禁止FSO,利用NTFS限制用户目录等等。这些方法虽然有效,但是都是基于提前防
- 针对搜索引擎显示Adsense广告是一个很古老的话题,其目的是为了减少无效展示,提高eCPM,也就是所谓的有效每千次展示的费用。江湖上传言e
- 据电信市场研究与咨询公司Dittberner Associates公布的最新研究报告显示,今年一季度,中国的固定宽带用户已经超过美国在全球固
- 摘要:Windows2000Server安装成功后,一般会启动一个默认的Web站点,为整个网络提供Internet服务。在中小型局域网中,服
- 网站的运营和盈利说复杂也复杂,说简单也简单。往复杂了说,要考虑网站建设,库存,进货,防诈骗,客户服务,售后服务,运货,发货,人员管理,当然还
- 关键词的优化难易度分析,SEOer们,大家好,不知道同行们你们是如何分析一个关键词优化的难易度的?小弟初学seo、本文纯属抛砖引玉,希望不正
- 1、SEO中英文解释SEO英文解释:SEO是Search Engine Optimization的缩写,用英文描述是to use some
- 导读:最近AdSense又做出了改变,而这一最新的变化可能影响你的点击率和收入,因为Google力图减少意外点击并提升对于广告主的价值。Go
- xingTemplate 是一个基于PHP的模板引擎,主要对于PHP程序的方面快速开发而设计。它可以通过简易快捷的模板语法编译为PHP文件,
- 另一个经常会碰到的问题是,网站被惩罚排名下降应该怎么办?首先应该确定你的网站是完全被封,还是只是排名下降。直接搜索一下域名或URL用site
- 我们经常发现一些发布商反映他们的广告代码被别人放到了他不知道的网站上。有些发布商会莫名其妙的收到我们的警告信,然后发现那个网站根本不是自己的
- WordPress 的页面管理功能长期以来并不讨用户或开发社区的好,以下8个页面管理插件适合于 WordPress 2.5 版,可以用来改变
- 网络赚钱,简称网赚,英文名make-money-online。指单纯通过网络手段,赚取现实中的现金。大多数人对这个概念的印象非常理想:点点鼠
- 一项调查显示,超过60%的网民对政府网站不满意,只有7%表示满意。这的确是个值得重视的信号。网民上政府网站,要么是查看信息,要么是反映情况,
- 1、摒弃框架 框架结构是指利用将一个网页分为若干个窗口,这样可以在一个页面上展示几个不同内容的网页,例如将菜单和网页内容放到两个框架中,这样
- 据Google站长博客报道,Google目前允许网站管理员自行修改sitelinks(网站附加链接)。所谓的sitelinks(网站附加链接
- 查询数据表后得知,dede对推荐文章的定义很简单iscommend=11 推荐iscommend=5 加粗iscommend=16 加粗并推
- 核心提示:如何让攻击者无缘Webshell那是代码部分的问题,我们做为管理员应该如何加固Web服务器,让攻击者在获得了Webshell之后无