PHP合并静态文件详解

在进行 Web 前端开发时，我相信你一定会遇到许多静态资源文件，比如 CSS 样式文件、JavaScript 脚本文件等等，这些文件的文件头冗长，通常会浪费许多带宽，同时也会增加页面加载时间，往往需要进行打包和压缩，而 PHP 合并静态文件是一种非常好的解决方案。

什么是 PHP 合并静态文件

PHP 合并静态文件是一种将多个静态文件合并成一个文件，并向客户端输出的技术，通常使用 PHP 命令行工具进行合并，而实现这个过程的大致流程如下：

判断是否需要合并文件
找到所有需要合并的文件，并确认文件的存在性
读取每一个文件内容，将其合并成一个大文件
输出合并后的文件到客户端，并在此过程进行缓存优化

PHP 合并静态文件的优点

PHP 合并静态文件的好处在于：

减少 HTTP 请求，加快页面加载速度
优化文件体积，减少带宽占用
缓存机制，减少文件重复加载，提升用户体验和服务器性能

PHP 合并静态文件的示例

接下来，我们来看两个具体的 PHP 合并静态文件的示例。

示例一：合并两个 CSS 文件

我们有以下两个 CSS 文件：

/* reset.css */
html, body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    background: transparent;
}
body {
    line-height: 1;
    font-size: 12px;
    font-family: Helvetica, Arial, sans-serif;
    color: #333;
}

/* style.css */
#header {
    background-color: #333;
    color: #fff;
}

我们将以上两个 CSS 文件合并成一个文件，并输出到客户端：

<?php
function combine($files, $type)
{
    $content = '';
    foreach ($files as $file) {
        if (file_exists($file)) {
            if($type === 'css') {
                $content .= file_get_contents($file);
            } else {
                $content .= '<script>'.file_get_contents($file).'</script>';
            }
        }
    }

    return $content;
}

$cssFiles = [
    'reset.css',
    'style.css'
];

echo '<style>'. combine($cssFiles, 'css') .'</style>';

?>

示例二：合并多个 JavaScript 文件

同样，我们有以下两个 JavaScript 文件：

/* jquery.js */
(function( window, undefined ) {
    //定义jQuery
})();

/* main.js */
(function( window, undefined ) {
    //主要的JavaScript代码
})();

我们将以上两个 JavaScript 文件合并成一个文件，并输出到客户端：

<?php
function combine($files, $type)
{
    $content = '';
    foreach ($files as $file) {
        if (file_exists($file)) {
            if($type === 'css') {
                $content .= file_get_contents($file);
            } else {
                $content .= '<script>'.file_get_contents($file).'</script>';
            }
        }
    }

    return $content;
}

$jsFiles = [
    'jquery.js',
    'main.js'
];

echo '<script>'. combine($jsFiles, 'js') .'</script>';

?>