Minnify 를 이용하여 javascript 압축하여 페이지 속도 높이기Minnify 를 이용하여 javascript 압축하여 페이지 속도 높이기
페이지 정보
작성자 MintState 댓글 0건 조회 16,572회 작성일 08-11-10 13:35본문
Minnify 를 이용하여 javascript 압축하여 페이지 속도 높이기
자바스크립트의 주석, 공백을 제거하여 로딩속도를 높이는 방법입니다.
또한 JSMin 라이브러리를 사용하며, 자동으로 CSS 파일이 들고 있는 이미지 경로명을 교체할 수 도 있습니다.
Minify는 PHP 5.2.1이상에서 작동합니다. 그러나 PHP 4 에서 도 사용할 수 있는 버전도 존재합니다.
Minify v1.0
Before Minify
After Minify
mod_rewrite 이용시 .htaccess 을 수정하여 주시면 됩니다.
PHP만 사용할 경우는
Minify v2.1
사용방법이 조금 바뀌었다.
압축 파일을 풀면 /min /min_unit_tests 두가지 폴더가 생긴다.
우선 테스트를 위하여
http://sample.com/min_unit_tests/test_all.php 하면된다. PASS가 잘 뜨는지 확인..
http://sample.com/min/builder/ 으로 접속하면
빌더를 볼수 있다.
기본적으로 다음과 같이 쓸 수 있다.
자바스크립트의 주석, 공백을 제거하여 로딩속도를 높이는 방법입니다.
또한 JSMin 라이브러리를 사용하며, 자동으로 CSS 파일이 들고 있는 이미지 경로명을 교체할 수 도 있습니다.
Minify는 PHP 5.2.1이상에서 작동합니다. 그러나 PHP 4 에서 도 사용할 수 있는 버전도 존재합니다.
Minify v1.0
Before Minify
<html>
<head>
<title>Example Page</title>
<link rel="stylesheet" type="text/css" href="css/example.css" />
<link rel="stylesheet" type="text/css" href="css/monkeys.css" />
<link rel="stylesheet" type="text/css" href="foo/bar/baz.css" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/example.js"></script>
</head>
<body>
<p>
Blah.
</p>
</body>
</html>
After Minify
<html>
<head>
<title>Example Page</title>
<link rel="stylesheet" type="text/css" href="minify.php?files=css/example.css,css/monkeys.css,foo/bar/baz.css" />
<script type="text/javascript" src="minify.php?files=js/prototype.js,js/example.js"></script>
</head>
<body>
<p>
Blah.
</p>
</body>
</html>
mod_rewrite 이용시 .htaccess 을 수정하여 주시면 됩니다.
<script type="text/javascript" src="firstfile.js,secondfile.js"></script>
PHP만 사용할 경우는
<?php
// Load the Minify library.
require 'minify.php';
// Create new Minify objects.
$minifyCSS = new Minify(Minify::TYPE_CSS);
$minifyJS = new Minify(Minify::TYPE_JS);
// Specify the files to be minified. Full URLs are allowed as long as they point
// to the same server running Minify.
$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>
Minify v2.1
사용방법이 조금 바뀌었다.
압축 파일을 풀면 /min /min_unit_tests 두가지 폴더가 생긴다.
우선 테스트를 위하여
http://sample.com/min_unit_tests/test_all.php 하면된다. PASS가 잘 뜨는지 확인..
http://sample.com/min/builder/ 으로 접속하면
빌더를 볼수 있다.
기본적으로 다음과 같이 쓸 수 있다.
<script type="text/javascript" src="/min/f=javascript1.js,javascript2.js"></script> <link type="text/css" rel="stylesheet" href="/min/f=style1.css,style2.css" />
|
|
댓글목록
등록된 댓글이 없습니다.
