자바스크립트 실시간 압축기 - Minify
출처 : http://firejune.com
[ 적용전 ]
[ 적용후 ]
엄밀히 말해 코드를 압축하는 것은 아니고 자바스크립트 코드에 들어있는 주석, 공백 등을 제거해 용량을 줄여 페이지 로딩속도를 높이는 방법입니다. 이 행위를 도와주는 Minify는 실시간으로 멀쩡한 자바스크립트 또는 스타일시트 파일을 재가공하여 뿌려줍니다. 콤마(,)로 구분하여 다중파일을 처리할 수 있어, 서버로부터의 요청을 줄일 수 있고(src="firstfile.js,secondfile.js"), 훌륭한 최소화 도구인 JSMin 라이브러리를 사용하며, 자동으로 CSS 파일이 들고 있는 이미지 경로명을 교체할 수 도 있습니다. Gzip압축전송은 기본입니다. 좌측 그림은 일전에 소개한 Gzip전송만 사용한 것과 Minify를 적용한 후 로딩속도를 비교 측정한 것입니다. 약 10% 속도 상승효과가 있군요. 덤으로 웹사이트 성능개선 도구인 YSlow의 10. Minify JS항에서 A평가를 받을 수 있습니다.
Minify는 PHP 5.2.1이상을 요구하고 있으나 PHP 4에서 사용 할 수 있는 버전도 있습니다. 마지막 변경일을 기준으로 생성하는 압축 파일은 케시폴더에 저장되어 서버성능의 향상꾀하고 있습니다. 설치에는 mod_rewrite를 사용하는 것이 가장 간단하며, 아래처럼 손쉽게 붙일 수 있습니다.
[code]
RewriteEngine on
RewriteRule ^(.*\.(css|js))$ /minify.php?files=$1 [L,NC]
[/code]
물론 쌩짜 PHP만으로 구현할 수도 있습니다.
[code]
<?php
require 'minify.php';
$minifyCSS = new Minify(Minify::TYPE_CSS);
$minifyJS = new Minify(Minify::TYPE_JS);$minifyCSS->addFile(array(
'css/example.css', 'css/monkeys.css',
'http://example.com/foo/bar/baz.css'));$minifyJS->addFile(array(
'js/prototype.js', 'js/example.js'));?><html>
<head>
<title>Example Page</title>
<style type="text/css">
<?php echo $minifyCSS->combine(); ?>
</style>
<script type="text/javascript>
<?php echo $minifyJS->combine(); ?>
</script> </head>
<body> <p>
Blah. </p>
</body></html>
[/code]
그러나, 소스분석이 어려워지고, 코드에 주석으로 명시된 저자권 표시 규정에 위배되는 문제를 가지고 있습니다.
댓글을 달아 주세요