Fala galera, hoje venho dar uma dica simples, que pode ajudar em alguns projetos de sistemas, acredito que para usar em site não deva ajudar muito, pois vai ficar criando processamento no servidor de forma desnecessária. Leia até o final que apresento uma alternativa para fazer o mesmo sem usar PHP. Mas então vamos direto ao ponto que todos querem ver, acredito eu.
Para fazer isso basta chamar todos os seus arquivos css e javascripts em um único arquivo com PHP, eu sugiro que crie 1 arquivo php para cada tipo de conteúdo assim pode separar e facilitar até mesmo na manutenção. Pensando assim, segue abaixo exemplo de código para retornar todos os arquivos de css em um único request:
<?php
/**File: css.php */
/** Caminho para pasta do css, não url e sim a pasta. */
$path_css = __DIR__."/assets/css/";
$relative_styles = array(
"bootstrap.min.css",
"fontawesome.min.css",
"style.css"
);
/** Definir o Header para navegador saber o tipo de conteudo */
header("Content-type: text/css");
/** Joga todos os arquivos em somente 1 request para o navegador */
foreach ($relative_styles as $style) {
// verifica se existe o existe para evitar erros
if (file_exists($path_css.$style)){
readfile($path_css.$style);
}
}
?>
Depois de criar esse arquivo basta chama-lo da mesma forma que chamaria todos os outros arquivos via html, veja abaixo exemplo:
<link rel="stylesheet" type="text/css" href="/css.php">
Agora que já sabe como funciona pode fazer o mesmo para javascript, apesar de saber que poderia alterar, vou facilitar para você que gosta de copiar e colar de forma mais fácil e rápida, veja abaixo como ficaria o mesmo exemplo para javascript:
<?php
/**File: javascripts.php */
/** Caminho para pasta do javascript, não url e sim a pasta. */
$path_css = __DIR__."/assets/javascript/";
$relative_js = array(
"bootstrap.min.js",
"jquery.min.js",
"jquery.ui.min.js",
"app.js"
);
/** Definir o Header para navegador saber o tipo de conteudo */
/** Lembrando de usar o "application/javascript" pois text/javascript é obsoleto,
* veja mais em: https://www.iana.org/assignments/media-types/media-types.xhtml
*/
header("Content-type: application/javascript");
/** Joga todos os arquivos em somente 1 request para o navegador */
foreach ($relative_js as $js) {
// verifica se existe o existe para evitar erros
if (file_exists($path_css.$js)){
readfile($path_css.$js);
}
}
?>
E sendo assim, o html para chamar esse arquivo de javascript ficaria assim:
<script src="/javascripts.php"></script>
Espero que isso possa lhe ajudar de alguma forma, e sinceramente se quiser otimizar ainda mais pode até mesmo adicionar compressão dos arquivos, retornando para o navegador um conteúdo todo compactado para fazer isso basta adicionar a seguinte linha no inicio do código que irá compactar quando for feito o request e até mesmo transmitir os arquivos de forma mais rápida.
<?php
ob_start ("ob_gzhandler");
/** ... */
?>
Caso não ache isso muito de se fazer, você tem muitas outras alternativas para poder reduzir o consumo de banda ou de requests ao servidor, você pode fazer coisas como:
- Você pode comprimir os arquivos diretamente no Apache usando o .htaccess;
- “Compilar” seus arquivos css e/ou javascript em único arquivo que não será necessário compacta-lo a cada request;
- Pode trabalhar com ferramenta como LESS/SASS para compactar seus arquivo CSS para você de forma mais prática;
- Pode também trabalhar mais com módulos do NodeJS como o GrunJS que facilitam esse tipo de processo;
Como pode perceber sempre tem uma forma de melhora nosso desenvolvimento e oferecer um produto melhor ao nosso cliente. Claro, que nem sempre conseguiremos fazer da melhor forma inicialmente, porém o importante a nossa constante busca por melhorar nossos projetos que irá nos trazer melhores resultados.
Espero ter ajudado.
Abraços 😀