【前端开发】合并多个前端静态资源文件，减少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;
}
}