Rev. 2.73

attachment

엄밀히 말해 코드를 압축하는 것은 아니고 자바스크립트 코드에 들어있는 주석, 공백 등을 제거해 용량을 줄여 페이지 로딩속도를 높이는 방법입니다. 이 행위를 도와주는 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를 사용하는 것이 가장 간단하며, 아래처럼 손쉽게 붙일 수 있습니다.

RewriteEngine on
RewriteRule ^(.*\.(css|js))$ /minify.php?files=$1 [L,NC]

물론 생짜 PHP만으로 구현할 수도 있습니다.

<?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>

그러나, 소스분석이 어려워지고, 코드에 주석으로 명시된 저자권 표시 규정에 위배되는 문제를 가지고 있습니다.

Example:

* 이와 반대격인 Beautify도 참고하세요.

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar