网页优化：CSS和JS合并压缩

在网页开发中，经常用到各种各样的JS和CSS，因此当一个前端把网页交给后台时，往往会有很多脚本文件，导致页面产生很多请求。这个问题直接导致服务器负荷加重，网页加载变慢（我们都知道：一个大文件和多个小文件同体积时，一个大文件方案优于多个小文件，这也是雪碧图和字体图标流行的原因吧），在移动端尤甚。

为解决这个问题，常用做法是将CSS和JS分别合并，即把页面的所有CSS合并成一个CSS文件，所有的JS尽可能的合并成一个JS文件,以提升网页的加载速度。

为防止遗忘有以后备用，将实现代码记录。

// =======CSS,JS==========
/**
 * 压缩多个CSS文件为1个
 * @param unknown $urls 要压缩的CSS文件，用,英文逗号隔开
 * @param string $key 生成文件名标识
 * @param string $path 生成路径
 * @return string 生成的CSS文件
 */
function parse_css($urls, $key = "defalut", $path = "/cache/css/") {
	$savePath=__ROOT__.$path;
	$urlArr = explode ( ',', $urls ); // 分隔样式
	$root = $_SERVER ["DOCUMENT_ROOT"];//物理路径根目录 如  D:\www\phpcode
	$filename = $key . "_"; // 文件名
	$fileMd5 = "";
	//通过文件MD5指纹构造新文件名
	foreach ( $urlArr as $k => $v ) {
		$v = $root . $v; // 文件物理地址
		$fileMd5 .= md5_file ( $v ) . "\r\n";
	}
	$filename .= md5 ( $fileMd5 ) . ".css";//文件名
	$cssUrl=$savePath.$filename;//生成CSS的URL路径
	$savePath =$root.$savePath;//存储目录（物理地址）
	if (! file_exists ( $savePath.$filename )) {
		if (! file_exists ( $savePath )){
			mkdir ( $savePath, 0777 );//如果文件夹不存在，就建一个
		}
		$css_content="";
		foreach ( $urlArr as $k => $v ) {
			$cssBaseDir = dirname ( $v ); // css目录
			$v = $root . $v; // 文件物理地址
			$tempCss = file_get_contents ( $v );
			$tempCss = str_replace ( "../images/", $cssBaseDir . "/../images/", $tempCss );//构造引用图片的路径
			$css_content .= $tempCss;
			// echo $css_content;
		}
		$css_content = preg_replace ( "/[\r\n]/", '', $css_content );//去掉换行
		file_put_contents ( $savePath.$filename, $css_content );//输出文件
	}
	return $cssUrl;
}

/**
 * 压缩多个JS文件为1个
 * @param unknown $urls 要压缩的JS文件，用,英文逗号隔开
 * @param string $key生成文件名标识
 * @param string $path生成路径
 * @return string合并后的JS
 */
function parse_js($urls, $key = "defalut", $path = "/cache/js/")
{
	$savePath=__ROOT__.$path;
	$urlArr = explode ( ',', $urls ); // 分隔样式
	$root = $_SERVER ["DOCUMENT_ROOT"];//物理路径根目录 如  D:\www\phpcode
	$filename = $key . "_"; // 文件名
	$fileMd5 = "";
	//通过文件MD5指纹构造新文件名
	foreach ( $urlArr as $k => $v ) {
		$v = $root . $v; // 文件物理地址
		$fileMd5 .= md5_file ( $v ) . "\r\n";
	}
	$filename .= md5 ( $fileMd5 ) . ".js";//文件名
	$jsUrl=$savePath.$filename;//生成CSS的URL路径
	$savePath =$root.$savePath;//存储目录（物理地址）

	if (! file_exists ( $savePath.$filename )) {
		if (! file_exists ( $savePath )){
			mkdir ( $savePath, 0777 );//如果文件夹不存在，就建一个
		}
		//vendor('JavaScriptPacker');
		$$js_content='';
		foreach ( $urlArr as $k => $v ) {
			$cssBaseDir = dirname ( $v ); // css目录
			$v = $root . $v; // 文件物理地址
			$js_content.= file_get_contents($v)."\r\n";
			
		}
		file_put_contents ( $savePath.$filename, $js_content );//输出文件
	}
	return $jsUrl;
}