Estamos sempre atolados com muita coisa para fazer e pouco tempo. Naturalmente, a web acompanha essa necessidade de agilidade e tenta fazer a sua parte. Isso significa prover facilidade de acesso, conteúdos diretos, navegação indutiva, velocidade de download/upload, etc… O Twitter, por exemplo. São mensagens de 140 caracteres. Nada poderia ser mais rápido de ser escrito ou lido.

O visitante do seu site tem pressa e não quer esperar uma página lenta ser carregada. Ele pode estar na rua, acessando do celular. Ele não tem tempo. Por outro lado, somos a Web 2.0. Os sites precisam ser mais dinâmicos e agradáveis aos olhos dos usuários. Ou seja, nossos arquivos de JavaScript e CSS estão aumentando.

Para esse problema surgiram os “redutores” de JavaScript e CSS. São pequenas bibliotecas que minimizam o tamanho de seus arquivos removendo comentários, espaços desnecessários, quebras de linha e até codificando essas informações para ocuparem ainda menos espaço.

Reduzindo seu JavaScript

Entre as mais usadas bibliotecas para minimizar arquivos JavaScript, estão:

• JSMin
  • Criado por: Ryan Grove (php) e Douglas Crockford
  • Licensa: MIT
  • Uso: Minimizar arquivos JavaScript com PHP
  • Tamanho: 7,7Kb
  • Compatibilidade: PHP5+, todos os browsers
  • Site da Biblioteca
  • Download
• YUI Compressor
• Packer

Nesse tutorial usaremos o JSMin e PHP5+.

Minimizando seu JavaScript com JSMin e PHP

Para começar, faça download da biblioteca do JSMin e armazene a classe baixada dentro do diretório onde armazena seus arquivos javascript.

Agora crie um arquivo PHP chamado minifier_js.php dentro do diretório onde armazena seus arquivos javascript. Adicione a esse arquivo o seguinte código:

<?php
	header("Content-type: application/x-javascript");

	require 'jsmin-1.1.1.php';

	// Minimiza tamanho do script
	echo JSMin::minify(file_get_contents($_GET["file"]));
?>

Perceba que o código acima transformará o tipo de conteúdo do arquivo em Aplicação/JavaScript e minimizará o arquivo especificado na URL através da variável file.

Abre ou crie um arquivo HTML. E Adicione o seguinte código, dentro da tag head:

<script type="text/javascript" src="js/minifier_js.php?file=example.js"></script>

Certifique-se de que o caminho para o js/minifier_js.php?file=example.js está correto e substitua o valor example.js pelo nome do seu arquivo JavaScript.

Abra seu arquivo HTML no browser e seu código já deverá estar funcionando, ou seja, seu arquivo JavaScript está sendo comprimido antes de incluído no documento.

Adicionando Segurança

Nesse momento, seu script faz o que deveria, porém não filtra o que pode ser inserido na variável file. Isso constitui um grave erro de segurança. Sendo assim, vamos concertá-lo. Altere o código contido no arquivo minifier_js.php por este:

<?php
	header("Content-type: application/x-javascript");

	// Arquivos Permitidos para serem diminuidos
	$allowedFiles = array('example.js');

	// Verifica se o arquivo solicitado é permitido
	if( in_array($_GET["file"],$allowedFiles) ) {

		require 'jsmin-1.1.1.php';
		// Minimiza tamanho do script
		echo JSMin::minify(file_get_contents($_GET["file"]));
	}
	else
	{
		die("O arquivo ".htmlentities($_GET["file"])." não pode ser minimizado.");
	}
?>

Perceba que agora os arquivos permitidos para compactação estão definidos na variável $allowedFiles. O Script também verifica se o arquivo chamado para ser diminuído está definido nessa variável, sendo assim permitido. Adicione seus arquivos JavaScript a variável $allowedFiles.

Agora seu minifier está livre de problemas de segurança e continua minimizando seus arquivos JavaScript antes de serem enviados ao documento.

Adicionando Cache

Seu minifier está funcionando, mas efetua a compactação de cada arquivo cada vez que é carregado na página. Dependendo do número de solicitações, isso pode causar um problema de performace. Podemos resolver esse problema criando um cache dos arquivos comprimidos.

Para isso, crie um diretório chamado cache dentro do local onde armazena seus arquivos JavaScript e altere o código contido no seu arquivo minifier_js.php por este:

<?php
	header("Content-type: application/x-javascript");

	// Arquivos permitidos para serem diminuidos
	$allowedFiles = array('example.js');
	// Tempo de cache em minutos
	$cacheTime = 3600; // tempo de cache em minutos

	// Verifica se o arquivo solicitado é permitido
	if( in_array($_GET["file"],$allowedFiles) ) {

		$file = $_GET["file"]; // arquivo js
		$cacheFile = 'cache/'.$file; // cache do arquivo js

		// Minimiza o Script
		// Ocorre sempre que: nao existe cache, cache passou do tempo de cacheTime
		if( !file_exists($cacheFile) || filemtime($cache) > $cacheTime ) {

			require 'jsmin-1.1.1.php';
			// minimiza tamanho do script
			$minScript = JSMin::minify(file_get_contents($file));
			// grava o arquivo minimizado no cache
			$handle = fopen($cacheFile,"w"); // abre ou cria o arquivo do cache
			fwrite($handle, $minScript); // escreve
			fclose($handle); // fecha arquivo
		}
		else
		{
			// le o arquivo de cache
			$minScript = file_get_contents($cacheFile);
		}

		// mostra o arquivo minimizado
		echo $minScript;
	}
	else
	{
		die("O arquivo ".htmlentities($_GET["file"])." não pode ser minimizado.");
	}
?>

Agora o seu minifier somente irá comprimir o arquivo caso não haja nenhum cache ou o cache existente tenha ultrapassado o período máximo de armazenamento definido na variável $cacheFile em minutos.

Feito isso, seus problemas com a quantidade de solicitações ficam acabados, visto que uma nova compactação do script somente será feita uma vez a cada $cacheTime minutos.

Para limpar o cache manualmente, basta deletar todo o conteúdo — ou o arquivo específico — do diretório cache.

Reduzindo seu CSS com CSSMin e PHP

• Criado por: Joe Scylla
• Licensa: MIT
• Uso: Minimizar arquivos CSS com PHP
• Tamanho: 5,5Kb
• Compatibilidade: PHP5+, todos os browsers
• Site da Biblioteca
• Download

O mesmo código finalizado para redução de JavaScripts será usado aqui, a diferença é que uniremos a ele uma outra biblioteca PHP. Comece criando o arquivo minifier_css.php dentro do diretório onde armazena seus arquivos CSS. Crie também um diretório chamado cache nesse mesmo local.

Feito isso, adicione o seguinte código ao seu minifier_css.php:

<?php
	header("Content-type: text/css");

	// Arquivos permitidos para serem diminuidos
	$allowedFiles = array('example.css');
	// Tempo de cache em minutos
	$cacheTime = 3600; // tempo de cache em minutos

	// Verifica se o arquivo solicitado é permitido
	if( in_array($_GET["file"],$allowedFiles) ) {

		$file = $_GET["file"]; // arquivo js
		$cacheFile = 'cache/'.$file; // cache do arquivo js

		// Minimiza o Script
		// Ocorre sempre que: nao existe cache, cache passou do tempo de cacheTime
		if( !file_exists($cacheFile) || filemtime($cache) > $cacheTime ) {

			require 'cssmin-v1.0.1.b3.php';
			// minimiza tamanho do script
			$minCSS = cssmin::minify(file_get_contents($file), "remove-last-semicolon,preserve-urls");
			// grava o arquivo minimizado no cache
			$handle = fopen($cacheFile,"w"); // abre ou cria o arquivo do cache
			fwrite($handle, $minCSS); // escreve
			fclose($handle); // fecha arquivo
		}
		else
		{
			// le o arquivo de cache
			$minCSS = file_get_contents($cacheFile);
		}

		// mostra o arquivo minimizado
		echo $minCSS;
	}
	else
	{
		die("O arquivo ".htmlentities($_GET["file"])." não pode ser minimizado.");
	}
?>

Lembre-se de adicionar o nome de seus arquivos CSS a variável $allowedFiles para que esses possam ser comprimidos.

Abra ou crie um arquivo HTML. E Adicione o seguinte código dentro da tag head:

<link rel="stylesheet" href="css/minifier_css.php?file=example.css" type="text/css" media="screen">

Certifique-se de que o caminho para o css/minifier_css.php?file=example.css está correto e substitua o valor example.css pelo nome do seu arquivo CSS.

Pronto, seus arquivos CSS também estão sendo comprimidos e um cache está sendo armazenado.

The End & Download

Espero que esse pequeno tutorial ajude todos a comprimir seus arquivos JavaScript e CSS, em tempo de execução, usando o PHP. Qualquer dúvida postem. Seguem os arquivos para download:

Reduzindo seus JavaScripts e CSS's (10.31 KB, 46 clicks)