Minify优化网站性能合并多个CSS或者js文件

Jul 30 2011

Minify优化网站性能合并多个CSS或者js文件

mazerain

分类：前端

0条评论

已被围观 7432 次

今天在看dbRadio Plus时，发现里面有<link href="/FileCombine?Minify=true&FileType=CSS&RootPath=/Content/stylesheets/&File=Gobal.css&File=intro.css"
rel="stylesheet" type="text/css" />一段，想到CSS可以这样写？这无疑是合并了多个css，减少请求次数和时间的一个方法。就开始搜索Minify。

项目地址：minify（Google Code）

作用：合并(减少HTTP请求)、精简、Gzip压缩和缓存JavaScript和CSS文件。

配置：Apache+PHP，开启Mod Rewrite（不开启也可以）。

下载：点击下载

安装：解压后将min文件夹复制到网站根目录。

使用方法：

假设网站域名是http://example.com，Minify安装在了虚拟主机的根目录下，那么访问http://example.com/min/，我们会看到一个“Minify URI Builder”，我们可以输入需要进行合并的文件CSS/JS的URI，如下

点击Update之后，系统会自动生成一个合并后的URL：

/min/b=js&f=jquery-a.js,jquery-b.js,jquery-c.js ←开启Rewrite的URL

/min/?b=js&f=jquery-a.js,jquery-b.js,jquery-c.js ←不开启Rewrite的URL

上传CSS也会生成类似的URL。

Minify在资源首次被请求的时候，会对多个文件进行合并，gzip，去除空格，注释等处理，然后会把处理的结果进行缓存，默认情况下是进行文件缓存，缓存的key以minify_开头，修改min/config.php文件，设置/min/config.php文件，$min_cachePath 有3个选择。

//$min_cachePath = ‘c:\\WINDOWS\\Temp’;
//$min_cachePath = ‘/tmp’;
//$min_cachePath = preg_replace(‘/^\\d+;/’, ”, session_save_path());

选择第2个，去除// 设置tmp属性777

安装完毕后删除min/builder/index.php 文件。防止其他人登陆！后期如需编辑再次上传！

在Html中使用MINIFY 在（X）HTML文件，不要忘记将&替换为&

一般情况下，网站速度的瓶颈都在前端，而最关键的就是资源的加载速度，但是大多数浏览器都有单个域名并发请求数限制，所以如果一个页面中存在很多的资源，比如CSS和JavaScript文件，那么明显会降低网站的加载速度，比较好处理方式就是把多个文件通过一个请求来访问，这样既不会影响之前的文件维护，又会减少资源的清楚数量，Minify就是为之而生。

下面两幅图分别是启用Minify之前和启用Minify之后网站请求时间的一个对比，可以看出启用Minify之后，资源的加载时间从250ms减少到了125ms，总共节省了50%的时间。