在网页开发中,经常用到各种各样的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;
}