Archief - Site optimaliseren: JS en CSS files combineren.

Bram · 24 aug 2010

Hey allemaal

Ik was wat aan het rondsurfen en kwam op themeforest deze template tegen. Ik neusde even rond en zag dat css en js files niet los van elkaar werden ingeladen, maar de developer gebruik maakte van de regel

Code:

<link href="css/mini.php?files=reset,common,form,standard,special-pages" rel="stylesheet" type="text/css">

Leek me wel interessant om in de toekomst zelf zo te gaan werken en na wat googlen kwam ik uit op deze pagina: 3 ways to compress CSS files using PHP

Nu heb ik zelf een scriptje opgesteld waarbij ik manier 2 en 3 combineer. Ik gebruik enerzijds die vermeldde compress functie om whitespace en commentaar te verwijderen, anderzijds gebruik ik de ob_gzhandler callback.

PHP:

	ob_start("ob_gzhandler");
	header('Content-type: text/css');
	header ("cache-control: must-revalidate");
	$offset = 60 * 60;
	$expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";
	header ($expire);

	/* send files to include in the GET 'files' parameter in a comma separated string
	 * Like so: mini.php?files=reset,style,handheld
	*/
	$files = isset($_GET['files']) ? $_GET['files']  : false;
	$buffer = '';
	$extension = false;
	if(strpos($_SERVER['REQUEST_URI'], 'css')) $extension = '.css';
	if(strpos($_SERVER['REQUEST_URI'], 'js')) $extension = '.js';
	
	if($files)
	{
		if(strpos($files, ','))
		{
			$filesArray = explode(',', $files);
		}
		else
		{
			$filesArray = $files;
		}
		
		foreach($filesArray as $file)
		{
			$filePath = $file.$extension;
			if (file_exists($filePath))
			{
				$buffer .= file_get_contents($filePath);
			}
		}
	}
	
	// Actual output
	echo compress($buffer);
	
	function compress($buffer)
	{
		/* remove comments */
		$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
		/* remove tabs, spaces, newlines, etc. */
		$buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
		return $buffer;
	}

Nu vroeg ik me af: is het nuttig om die ob_gzhandler callback te gebruiken? Doe ik het juist (ik merk niet echt een probleem, m'n css wordt geladen). Ik zie in Firebug wel dat er bij status (bij elke refresh) "200 OK" staat, terwijl ik eigenlijk (zoals bij andere files) 304 Not modified verwachtte.

Mensen die opmerkingen hebben? Dit zelf anders aanpakken?

Archief - Site optimaliseren: JS en CSS files combineren.

Bram

Legacy Member