1. 程式人生 > >【前端開發】合併多個前端靜態資原始檔,減少HTTP請求次數

【前端開發】合併多個前端靜態資原始檔,減少HTTP請求次數

從優化請求靜態資原始檔(JS、CSS)的角度來說,載入多個檔案會發出多次請求,為了解決這個問題,我們可以把多個檔案合併成一個檔案,現在有一些前端工具可以把多個檔案合併成一個檔案,這種方式是靜態的在發版前就要合併成一個檔案,還有一種方式把多個檔案動態合併成一個檔案;所謂動態是把多個檔案以引數的方式傳入給一個請求地址然後動態地讀取檔案內容並且成一個大字串後再返回回來;

如:

http://localhost/StaticResource/gg?p=js/lib/jquery.min.js,js/lib/handlebars.min.js,js/lib/jquery-ui.js,js/lib/ajaxData.js,js/lib/m.js,js/lib/pagination.js,js/lib/promptDialog.js,js/lib/CR.js,js/lib/selectUI1.0.js,js/lib/clockSubmit.js,js/lib/jquery.validate.min.js,js/lib/jquery.validate-methods.min.js,js/lib/require.js

p引數是一個個檔案相對路徑以逗號分割,在程式是以逗號為分割線轉移成一個數組,然後解析陣列組成一個地址訪問路徑,讀取檔案中的內容合成一個字串返回;

在開發過程中遇到組合後返回的資料中如果有HTML標籤會顯示出來,原因是返回過來的資料型別不是JS檔案型別或CSS檔案型別;所以在返回資料時指定它的型別;

header('Content-Type:application/javascript;Accept-Ranges:bytes');

以下是PHP程式碼片段,不這是最終的解決方案,它可以算是一個簡單的解決辦法或思路,如果大家有好的方法可以拿出來一起分享;

<?php
namespace Home\Controller;
use Think\Controller;

class StaticResourceController extends Controller
{
	public function __construct()
	{
		parent::__construct();
	}
  /*
	 JS資源整合
  */
	public function js()
	{
		// 根目錄
		$ROOT = $_SERVER['DOCUMENT_ROOT'];
		// 獲取引數地址
		$p  = $_GET['p'];
		// 解析成陣列
		$arr = explode(",",$p); 
		// 迴圈陣列
		foreach ($arr as $value) {
			// 讀取檔案內容
			$_content = file_get_contents($ROOT ."/Public/js/". $value);
			if ($_content != "") {
				$content .= $_content."\n";
			}
		}

		header('Content-Type:application/javascript;Accept-Ranges:bytes');
		echo($content);
		die;
	}

	/*
   css資源整合
	*/
	public function css()
	{
		// 根目錄
		$ROOT = $_SERVER['DOCUMENT_ROOT'];
		// 獲取引數地址
		$p  = $_GET['p'];
		// 解析成陣列
		$arr = explode(",",$p); 
		// 迴圈陣列
		foreach ($arr as $value) {
			// 讀取檔案內容
			$_content = file_get_contents($ROOT ."/Public/css/". $value);
			if ($_content != "") {
				$content .= $_content."\n";
			}
		}

		header('Content-Type:text/css;Accept-Ranges:bytes');
		echo($content);
		die;
	}
}