PHP 一鍵合併壓縮 JS/CSS：減少 HTTP 請求，提升頁面加載速度

為什麼要合併壓縮靜態資源？

瀏覽器對同域名並發連接數有限制（HTTP/1.1 通常為 6 個），頁面引用大量分散的 JS/CSS 文件會導致請求排隊、延遲增加。合併文件可減少請求數，壓縮可縮小傳輸體積，雙管齊下顯著提升首屏渲染速度。

核心實現思路

1. 前端頁面通過參數指定需合併的文件列表與路徑
2. PHP 後端讀取文件內容，拼接、移除註釋、壓縮空白字符
3. 設置正確 Content-Type 輸出，配合緩存策略

前端調用示例

<!-- CSS 合併 -->
<link rel="stylesheet" type="text/css" 
  href="cssmin.php?get=base,style1,style2,global&path=css/&v=20131023" />

<!-- JS 合併 -->
<script type="text/javascript" 
  src="jsmin.php?get=jquery-1.6.4.min.js,minjquery.js,minjquery.ui.js,test.js,global.js&path=js/&v=20131023"></script>

v 參數為版本號，用於緩存失效控制。

PHP 後端實現（jsmin.php）

<?php
header("Content-Type: application/x-javascript; charset: utf-8");

if (isset($_GET['get'])) {
    $files = explode(',', $_GET['get']);
    $path  = $_GET['path'] ?? '';
    $str   = '';

    foreach ($files as $file) {
        $fullPath = $path . $file;
        if (is_file($fullPath)) {
            $str .= file_get_contents($fullPath);
        }
    }

    // 移除空白字符
    $str = str_replace(["\t", "\r\n", "\n"], '', $str);

    // 移除單行註釋 // ...
    $str = preg_replace('/\/\/[^\n]*/', '', $str);
    // 移除多行註釋 /* ... */
    $str = preg_replace('/\/\*[\s\S]*?\*\//', '', $str);

    echo $str;
}

CSS 版本（cssmin.php）差異點

<?php
header("Content-Type: text/css; charset: utf-8");

if (isset($_GET['get'])) {
    $files = explode(',', $_GET['get']);
    $path  = $_GET['path'] ?? '';
    $css   = '';

    foreach ($files as $file) {
        $fullPath = $path . $file . '.css'; // 自動補全 .css
        if (is_file($fullPath)) {
            $css .= file_get_contents($fullPath);
        }
    }

    $css = str_replace(["\t", "\r\n", "\n"], '', $css);
    $css = preg_replace('/\/\*[\s\S]*?\*\//', '', $css); // 僅移除多行註釋

    echo $css;
}

生產環境必備增強

1. 緩存機制（關鍵）

合併壓縮屬 CPU 密集型操作，必須緩存結果：

$cacheKey = md5($path . implode(',', $files) . ($filemtime...));
$cacheFile = sys_get_temp_dir() . "/minify_{$cacheKey}.cache";

if (file_exists($cacheFile) && time() - filemtime($cacheFile) < 3600) {
    readfile($cacheFile);
    exit;
}

// ... 合併壓縮邏輯 ...
file_put_contents($cacheFile, $output);

2. 安全防護

• 限制 path 參數目錄遍歷（basename()、realpath() 校驗）
• 白名單允許的文件擴展名
• 設置輸出緩存頭：Cache-Control: public, max-age=31536000

3. 更強大的替代方案

專案規模增長時，建議遷移至成熟工具：

• Assetic：PHP 資源管理框架，支持合併、壓縮、編譯（Less/Sass）
• Webpack / Vite / Rollup：現代前端構建工具，構建時處理，運行時零開銷
• Nginx ngx_http_concat_module：Web 服務器層面合併，性能最優

總結

本文提供的原型代碼適合中小專案快速接入，核心邏輯清晰：讀取 → 拼接 → 過濾 → 輸出。生產環境務必加上緩存、安全校驗與版本控制，或直接採用構建時處理方案，將運行時開銷降為零。