用 Minify 合并 CSS 和 JavaScript 文件以减少 HTTP 请求

关于前端CSS和Javascript的请求优化，目前(2026年)我有了更好的办法，可以不再使用Minify这样的方案了，例如本站，通过自己开发的库可以深入贴合网站要求，没有冗余，异步加载JS模块，CSS则是直接内连到HTML里，开发的时候也是模块化，有兴趣的可以联系我交流

在 Web 前端的优化中，一个网站的打开速度仍然是衡量网站质量的重要指标之一。网页本身的 HTML 文件一般都比较小，所以影响网页加载速度的一个关键因素就是资源的加载速度。

一个网页中的请求太多，一般情况下会对网页打开速度产生比较明显的影响。为了提高网站速度和用户体验，我们不得不尽量减少请求数量。

一方面，一些比较先进的技术不断应用到实际开发中，比如利用 CSS Sprite 技术合并网页背景图片，以减少图片请求。另一方面，随着网站体积和规模不断扩大，我们又不得不把一些内容拆分开来，以便开发、维护和扩展。

一个大型网站，不论是 CSS、JavaScript 还是其他文件，都不可能只有一个。从开发和维护的角度来看，把不同功能分别放在不同文件中更加方便；但是从前端加载的角度来看，我们又希望请求数量越少越好。当这两个需求产生矛盾的时候，一些新的技术和工具就出现了，Minify 就是其中比较实用的一个。

使用方法

首先下载 Minify：

http://code.google.com/p/minify/downloads/list

下载之后，将其中的 min 文件夹解压到你的网站根目录。然后进行配置，找到 min 文件夹下面的：

config.php

根据自己的系统找到对应的配置项。如果你的系统是 Windows，就删除相应的注释；如果是 Linux，则删除另一项的注释。

配置完成之后，还需要配置伪静态。如果你的 Web 服务器是 Apache，并且 AllowOverride 设置为 All，那么可以忽略这一步，因为 Minify 已经自带了相关配置。

如果使用的是其他 Web 服务器，则需要根据对应服务器的规则进行配置。

配置完成之后，就可以通过 Minify 对 CSS 或 JavaScript 文件进行合并和压缩。

它的访问规则类似：

http://域名/min/f=xxx.css

其中 f= 后面填写需要合并的 CSS 或 JavaScript 文件，多个文件之间使用逗号隔开。

例如：

http://域名/min/f=1.css,2.css

这样就可以返回 1.css 和 2.css 合并之后的文件。

如果需要合并 JavaScript 文件，也是同样的方式。

除了直接指定文件之外，也可以通过 groupsConfig.php 来设置文件组。

例如：

'css' => array(

'//css/file1.css',

'//css/file2.css'

这样在引用的时候，只需要访问：

http://域名/min/g=css

就可以返回这两个文件合并后的结果。

如果网站中有一些经常需要同时加载的 CSS 或 JavaScript 文件，使用这种方式会比较方便。

其实 Minify 的原理比较简单。

就是通过 PHP 接收浏览器发来的请求，然后在服务器端把对应的文件读取出来，进行合并和压缩，最后根据相应的 MIME 类型返回给浏览器。

大致过程就是：

浏览器请求

↓

PHP 接收请求

↓

读取 CSS / JavaScript 文件

↓

合并

↓

压缩

↓

返回浏览器

当然，在这个过程中还会涉及客户端和服务器端缓存、压缩等处理。

这样做之后，开发的时候仍然可以把 CSS 和 JavaScript 分开编写，方便管理；而浏览器实际请求的时候，又可以通过 Minify 将多个文件合并起来，从而减少 HTTP 请求的数量。