cakephp 에서 쓰던 helper 인데 codeigniter용으로 변경 하였습니다.
여러개의 CSS 파일과 JS 파일을 하나의 파일로 압축해서 전송 하는 방법 입니다.
CSSTidy, JSMin 을 사용 하였습니다.
브라우저에서 HTTP연결 횟수가 많아질수록 사용자가 보는 페이지는 느려 보입니다.? 특히 자바스크립트는 파일이 다 불러와질때까지 브라우저는 랜더링을 멈추고 대기 하고 있습니다. 이런 현상을 최소화 하기 위한 방법입니다. ( YSlow[Firefox 부가기능] 에서는 자바스크립트 파일을 하단에 배치하는 것을 권장 하고 있습니다. )
helper 파일의 위치 입니다.
/system/application/helpers 폴더에 압축된 파일들을 풀어 놓습니다.
/system/application/config/autoload.php 에서 helper를 자동으로 불러 오도록 합니다.
$autoload['helper'] = array('asset', 'json', 'url');
/system/application/config/constants.php 에서 Asset helper 에 필요한 상수들을 선업 합니다.
define('PACKED', TRUE); // FALSE 지정시 압축 하지 않고 그냥 출력 합니다.
define('CHAR_SET', 'UTF-8');
define('PHP5', (PHP_VERSION >= 5));
define('DS', DIRECTORY_SEPARATOR);
define('IMG_ROOT', dirname(APPPATH).DS.'assets'.DS.'images'.DS); // 이미지 절대경로
define('IMG_URL', '/system/assets/images/'); // 이미지 경로
define('CSS_ROOT', dirname(APPPATH).DS.'assets'.DS.'css'.DS); // CSS 절대경로
define('CSS_URL', '/system/assets/css/'); // CSS 경로
define('JS_ROOT', dirname(APPPATH).DS.'assets'.DS.'js'.DS); // JS 절대경로
define('JS_URL', '/system/assets/js/'); // JS 경로
define('CACHE_ASSET', dirname(APPPATH).DS.'cache'.DS.'asset'.DS); // 압축된 CSS, JS 파일 경로
define('CACHE_URL', '/system/cache/asset/');
view 파일에서의 사용방법 입니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko"> <head> <!--[if IE 8]> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <![endif]--> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="language" content="korea" /> <meta name="author" content="꼬불" /> <title>Welcome to CodeIgniter</title> <link rel="Shortcut Icon" type="image/x-icon" href="" /> <?php $html['css'] = array( 'global.reset' ); $html['javascript'] = array( 'jquery-1.3.2', 'jquery.easing.1.3', 'jquery.form', 'jquery.metadata', 'jquery.timer', 'jquery.infieldlabel', 'jquery.flash', 'jquery.corners' ); scriptForLayout($html); unset($html); ?> </head> <body>
어때요 참 쉽죠?
css, js 파일이 압축 되고 캐싱된 화면 입니다.
/system/cache/asset/ 폴더에 아래와 같이 파일이 생성되고 불려지는 것을 볼 수 있습니다.
