後端配置（如 CDN 域名、API 基礎路徑、版本號）需同步給前端 JavaScript 使用時，透過 PHP 動態生成 JS 檔案是常見模式。本文展示完整實作含快取控制、內容長度標頭、字元編碼聲明。
<?php
// 取得系統配置物件（假設為單例/註冊容器）
$url = $this->getConfig()->url();
// 組裝 JS 內容：單一全域物件暴露所有配置
$content = "var url={ base:'{$url->base}',css:'{$url->css}',js:'{$url->js}',img:'{$url->img}',current:window.location};";
// 快取策略：7 天（604800 秒）
$expire = 604800;
// 必要 HTTP 標頭
header('Content-Type: application/javascript; charset=utf-8');
header('Cache-Control: max-age=' . $expire . ', public');
header('Accept-Ranges: bytes');
header('Content-Length: ' . strlen($content));
header('ETag: "' . md5($content) . '"');
header('Last-Modified: ' . gmdate('D, d M Y H:i:s', time()) . ' GMT');
// 輸出內容
echo $content;
?>
<!-- HTML 頁面引入 --> <script src="/config.js.php"></script> <script> console.log(url.base); // 輸出 CDN 基礎域名 console.log(url.css); // 輸出 CSS 資源路徑 console.log(url.current.href); // 當前頁面完整 URL </script>
| 標頭 | 作用 | 備註 |
|---|---|---|
Content-Type: application/javascript | 正確 MIME 類型 | 瀏覽器才會當作 JS 執行 |
charset=utf-8 | 字元編碼聲明 | 防止中文變數值亂碼 |
Cache-Control: max-age | 瀏覽器強快取 | 減少重複請求，提升載入速度 |
ETag / Last-Modified | 協商快取驗證 | 內容未變時回傳 304 Not Modified |
Content-Length | 啟用 Keep-Alive/管線化 | 精確傳輸長度，避免 chunked 編碼開銷 |
<?php
// 版本化：查詢字串帶版本號，部署時更新版本號即可失效快取
$version = 'v20240115';
header('Cache-Control: max-age=31536000, public, immutable'); // 1 年
// 環境區分：開發環境不快取
if (APP_ENV === 'development') {
header('Cache-Control: no-cache, no-store, must-revalidate');
header('Pragma: no-cache');
header('Expires: 0');
}
// 條件輸出：根據 User-Agent 或域名輸出不同配置
$isMobile = stripos($_SERVER['HTTP_USER_AGENT'], 'Mobile') !== false;
$content = "var config = { api: '" . ($isMobile ? '/mobile-api' : '/api') . "' };";
?>
json_encode() 轉義後再嵌入Content-Security-Policy: script-src 'self' 限制腳本來源此模式廣泛應用於前後端分離架構的配置下發、功能開關、A/B 測試參數等場景，是現代 Web 應用的基礎設施組件。
