編碼的世界 / 優質文選 / 生涯

最簡單的css和js文件合並

2022年7月26日
-   

      隨著web頁面功能越來越多，css和js使用也越來越多。但是一個頁面中js和css越多導致頁面請求次數就越多，網絡延遲也會加大。
網上有很多jss的壓縮合並工具，但是都不是很方便。
       其實來如果css和js所在的服務器支持動態程序比如php或者.jsp就很好辦了，在靜態服務器放一個php文件，用php動態生成就很方便了。
<html xmlns="http://www.w3.org/1999/xhtml">
<meta charset="UTF-8">
<title>列表頁</title>
<head>
<link rel="stylesheet" type="text/css" href="/static/index.php?css/base.css;css/admin.css" />





<script type="text/javascript" charset="UTF-8" src="/static/index.php?js/common.js;js/admin.js;nav.js;page.js"></script>
</head><body></body></html>

核心在於static.php完成css和js代碼合並，當然在index.php這個文件也可以完成css和js文件的壓縮。其實來這個文件也很簡單
<?php
$files = explode(';',trim($_SERVER['QUERY_STRING'],';') );
strpos($_SERVER['QUERY_STRING'],'.css')!==false && header('Content-Type: text/css');
$a = array();
foreach($files as $fn){
 $fn = './'.preg_replace('/[^a-z0-9/.\_-]/i','',$fn);
  $a[] = "
/* $fn -*/";
	//判斷要合並的文件是否存在
	if (!file_exists($fn)){





		
	} else{
		$a[]=file_get_contents($fn);
	}
}
$s=implode('',$a);
echo $s;

熱門文章