JavaScript Minification
Upcoming SlideShare
Loading in...5
×
 

JavaScript Minification

on

  • 1,003 views

자바스크립트 압축의 모든 것 / @ABC Talk #6

자바스크립트 압축의 모든 것 / @ABC Talk #6

Statistics

Views

Total Views
1,003
Views on SlideShare
884
Embed Views
119

Actions

Likes
3
Downloads
19
Comments
0

3 Embeds 119

http://ohgyun.com 113
http://www.hanrss.com 5
http://digg.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

JavaScript Minification JavaScript Minification Presentation Transcript

  • 자바스크립트
  •   압축의
  •   모든
  •   것 ABC
  •   Talk
  •   /
  •   Steve
  •   Ahn
  • 오늘은. -
  •   자바스크립트
  •   압축을
  •   왜
  •   하는지. -
  •   코드에서
  •   어떤
  •   부분을
  •   압축할
  •   수
  •   있는지. -
  •   어떤
  •   부분은
  •   압축할
  •   수
  •   없는지. -
  •   어떤
  •   도구들이
  •   있고
  •   어떤
  •   게
  •   가장
  •   좋은지. -
  •   압축한
  •   코드는
  •   어떻게
  •   디버깅하는
  •   게
  •   좋은지.
  • 자바스크립트
  •   압축. -
  •   압축(Compress),
  •   최소화(Minify),
  •   최적화(Optimize) -
  •   리소스
  •   크기를
  •   줄여
  •   네트워크
  •   비용을
  •   줄이기
  •   위함 -
  •   사용자가
  •   많다면
  •   더욱
  •   효과적일
  •   것(예:
  •   jquery)
  • 자바스크립트
  •   압축의
  •   목표 -
  •   압축한
  •   코드가
  •   기존과
  •   동일하게
  •   동작하도록
  •   안전하게! -
  •   최대한
  •   짧게!
  • 먼저,
  •   도구의
  •   관점에서. -
  •   코드에서
  •   어떤
  •   부분을
  •   안전하게
  •   압축할
  •   수
  •   있을까? -
  •   어떤
  •   부분은
  •   압축할
  •   수
  •   없을까?
  • 탭,
  •   공백,
  •   주석 -
  •   가장
  •   효과적인
  •   방법! ---- /** * 구입할 수 있는 차종을 추천한다. * @param {Number} money * @return {String} */ function recommendCar(money) { } ---- function recommendCar(money){}
  • 지역변수를
  •   짧게! -
  •   안전하다! ---- function canBuyCar(brand, money, color) { var result = false; } ---- function canBuyCar(a, b, c) { var d = false; }
  • 어떤
  •   것들은
  •   압축할
  •   수
  •   없을까? -
  •   원시값은
  •   압축할
  •   수
  •   없다. ---- “문자열”, 2000, null, undefined, true, false -
  •   키워드
  •   또한
  •   압축할
  •   수
  •   없다. ---- this, var, return, for, if, else, ...
  • 전역변수와
  •   객체의
  •   프로퍼티 -
  •   다른
  •   스콥에서
  •   사용할
  •   가능성이
  •   있으므로
  •   안전하지
  •   않다. ---- var globalMessage = { 'SORRY': '죄송합니다' }; // globalMessage // globalMessage.SORRY
  • 나쁜
  •   건
  •   역시
  •   나쁘다. -
  •   eval
  •   내의
  •   코드는
  •   지역변수에
  •   접근할
  •   수
  •   있기
  •   때문에 
  •   
  •   안전하지
  •   않다. ---- function canBuyCar(brand, money, color) { eval('console.log(brand, money, color);'); } ---- function canBuyCar(a, b, c) { eval('console.log(brand, money, color);'); }
  • 쓰지
  •   말라는
  •   건
  •   쓰지
  •   않는
  •   게
  •   좋다. -
  •   with
  •   구문에서
  •   컨텍스트의
  •   프로퍼티와 
  •   
  •   지역변수를
  •   구분할
  •   수
  •   없기
  •   때문에
  •   안전하지
  •   않다. ---- function printCarMessage(message) { var vw = 'Das Auto'; with (message) { // message.vw ? // 지역변수 vw? console.log(vw); } }; printCarMessage({ vw: '다스 오토~' });
  • 쓰지
  •   말라는
  •   건
  •   쓰지
  •   않는
  •   게
  •   좋다. ---- function printCarMessage(a) { var b = 'Das Auto'; with (a) { console.log(vw? b?); } }
  • 좀
  •   더
  •   압축할
  •   만한
  •   게
  •   있을까? -
  •   객체의
  •   키
  •   따옴표를
  •   제거한다. ---- { 'brand': 'benz' } --> { brand: 'benz' } -
  •   프로퍼티
  •   정의를
  •   dot
  •   연산자를
  •   사용하게
  •   바꾼다. ---- brand['benz'] --> brend.benz
  • 세미콜론 -
  •   안전한
  •   범위
  •   내에서
  •   세미콜론을
  •   삭제한다. ---- function buyCar(money) { return money * -1; } ---- function buyCar(money) { return money * -1 }
  • 브레이스 -
  •   안전한
  •   범위
  •   내에서
  •   브레이스를
  •   삭제한다. ---- if (money > 5000) { buyBenz(money); } ---- if (money > 5000) buyBenz(money);
  • var
  •   키워드 -
  •   함수
  •   내에서
  •   var
  •   키워드를
  •   한
  •   번만
  •   사용하도록
  •   정리한다. ---- var brand = 'benz'; var money = 5000; ---- var brand = 'benz', money = 5000;
  • true/false를
  •   좀
  •   더
  •   짧게! -
  •   true/false를
  •   키워드
  •   대신
  •   다른
  •   값으로
  •   사용한다. ---- true --> !0 false --> !1
  • 사용하지
  •   않는
  •   변수 -
  •   사용하지
  •   않는
  •   변수와
  •   함수를
  •   삭제한다. ---- $buyBtn.click(function (e) { console.log('BUY!'); }); ---- $buyBtn.click(function () { console.log('BUY!'); });
  • if
  •   구문 -
  •   단순한
  •   if
  •   구문은
  •   표현식으로
  •   압축한다. ---- if (money) { buyCar(); } ---- money && buyCar();
  • if~else
  •   구문 -
  •   if~else
  •   구문은
  •   삼항
  •   연산자로
  •   압축한다. ---- if (money) { buyCar(); } else { workHard(); } ---- money ? buyCar() : workHard();
  • 문자열
  •   병합 -
  •   단순
  •   문자열의
  •   합은
  •   미리
  •   계산한다. ---- var str = "buy" + "car" + "now"; ---- var str = "buycarnow";
  • 숫자
  •   연산 -
  •   단순한
  •   숫자
  •   연산은
  •   미리
  •   계산한다. ---- var hour = 1000 * 60 * 60; ---- var hour = 3600000;
  • 긴
  •   숫자 -
  •   긴
  •   숫자는
  •   지수법으로
  •   표현한다. ---- var hour = 3600000; ---- var hour = 36e5;
  • 지금까지
  •   찾아본
  •   압축
  •   대상 -
  •   주석,
  •   공백
  •   제거 -
  •   지역변수
  •   압축
  •   및
  •   정리 -
  •   if/else
  •   구문
  •   압축 -
  •   키워드
  •   간소화
  •   및
  •   대체 -
  •   정적인
  •   연산
  •   선처리
  • 이제
  •   사람의
  •   관점에서. -
  •   저걸
  •   다
  •   신경쓰는
  •   건
  •   오바고, 
  •   
  •   
  •   웬만한
  •   건
  •   압축
  •   도구가
  •   해줄
  •   것
  •   같은데. -
  •   실질적으로
  •   어떤
  •   걸
  •   신경쓰면
  •   될까?
  • 전역변수를
  •   지역변수로. -
  •   자주
  •   쓰이는
  •   전역변수는
  •   지역변수에
  •   담아둔다. ---- var buyButton = document.getElementById('btn_buy_car'); ---- var doc = document; var buyButton = doc.getElementById('btn_buy_car');
  • 전역변수는
  •   필요할
  •   때만. -
  •   필요하지
  •   않는
  •   전역변수를
  •   만들지
  •   않는다. ---- function getPrivateInfo() {} function getPublicInfo() { return getPrivateInfo(); } ---- (function () { function getPrivateInfo() {} window.getPublicInfo() { return getPrivateInfo(); } }());
  • 프로퍼티는
  •   지역변수에. -
  •   자주
  •   쓰이는
  •   프로퍼티는
  •   지역변수에
  •   담아둔다. ---- console.log(message.brand.benz.copy); ---- var benzMessage = message.brand.benz; console.log(benzMessage.copy);
  • 그
  •   외에~ -
  •   자주
  •   쓰이는
  •   문자열과
  •   숫자는
  •   상수로
  •   할당한다. -
  •   eval과
  •   with는
  •   쓰지
  •   않는다.
  • 정~말
  •   아쉬운
  •   상황이라면. -
  •   정말
  •   네트워크
  •   리소스를
  •   줄여야
  •   하는
  •   상황이라면, 
  •   
  •   몇
  •   가지
  •   더
  •   고려할
  •   수
  •   있다.
  • this는
  •   지역변수로. -
  •   자주
  •   쓰이는
  •   this는
  •   지역변수로
  •   할당한다. ---- function Car(brand, money, color) { this.brand = brand; this.money = money; this.color = color; } ---- function Car(brand, money, color) { var self = this; self.brand = brand; self.money = money; self.color = color; }
  • null과
  •   undefined. -
  •   null과
  •   undefined도
  •   지역변수로
  •   할당해둔다. ---- var NULL = null, UNDEFINED; 또는 (function (NULL, UNDEFINED) { }(null));
  • return은
  •   한
  •   번만. ---- function getCar(money) { if (money > 10000) { return 'PORSCHE'; } else if (money > 5000) { return 'BMW'; } else { return 'VW'; } } ---- function getCar(money) { var result = 'VW'; if (money > 10000) { result = 'PORSCHE'; } else if (money > 5000) { return = 'BMW'; } return result; }
  • 압축
  •   도구엔
  •   어떤
  •   것들이
  •   있나? -
  •   UglifyJS -
  •   Closure
  •   Compiler -
  •   YUI
  •   Compressor -
  •   JSMin,
  •   Packer,
  •   ...
  • UglifyJS -
  •   http://lisperator.net/uglifyjs/ -
  •   추천! -
  •   가장
  •   인기있는
  •   압축
  •   도구 -
  •   빠르고
  •   압축율도
  •   좋음 -
  •   jQuery
  •   등
  •   여러
  •   상용
  •   라이브러리에서
  •   채택 -
  •   Node
  •   기반으로
  •   구현 -
  •   온라인
  •   도구:
  •   http://lisperator.net/uglifyjs/#demo -
  •   Ruby
  •   Wapper:
  •   https://github.com/lautis/uglifier -
  •   Maven
  •   Plugin:
  •   https://github.com/tqh/uglifyjs-maven-plugin
  • Closure
  •   Compiler -
  •   구글에서
  •   개발 -
  •   압축률은
  •   가장
  •   좋으나,
  •   압축
  •   속도가
  •   느림 -
  •   Advanced
  •   옵션에서는
  •   굉장히
  •   높은
  •   압축률을
  •   제공함 -
  •   구글의
  •   여러
  •   서비스에서
  •   사용하고
  •   있음 -
  •   압축
  •   뿐
  •   아니라
  •   코드
  •   분석
  •   기능도
  •   제공 -
  •   간혹
  •   압축
  •   코드가
  •   제대로
  •   동작하지
  •   않는
  •   경우가
  •   있다고
  •   함 -
  •   Java
  •   기반으로
  •   구현 -
  •   온라인
  •   도구:
  •   http://closure-compiler.appspot.com/
  •    -
  •   Ruby
  •   Wapper:
  •   https://github.com/documentcloud/closure-compiler 
  •   
  • YUI
  •   Compressor -
  •   Yahoo
  •   에서
  •   개발 -
  •   한
  •   때
  •   잘
  •   나갔으나,
  •   현재는
  •   Deprecated
  •   되었음. -
  •   Yahoo에서는
  •   Ugilfy를
  •   커스터마이징
  •   yuglify를
  •   사용하고
  •   있음 -
  •   yuglify:
  •   https://github.com/yui/yuglify
  •   
  • 코드로
  •   직접
  •   압축해보기! -
  •   데모
  •   타~임!
  • 압축한
  •   코드
  •   디버깅하기 -
  •   소스맵(Source
  •   Map) -
  •   압축한
  •   코드를
  •   원본에서
  •   확인할
  •   수
  •   있음 -
  •   UglifyJS,
  •   Closure
  •   Compiler
  •   에서
  •   제공 -
  •   http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/
  • 소스맵
  •   생성하기 1.
  •   압축
  •   도구에서
  •   소스맵
  •   옵션
  •   추가 
  •   
  •   
  •   
  •   Uglify:
  •   --source-map 
  •   
  •   
  •   
  •   Closure
  •   Compiler:
  •   --create_source_map 2.
  •   압축된
  •   소스에
  •   주석
  •   추가 
  •   
  •   
  •   
  •   //@
  •   sourceMappingURL=./source.js.map
  •   (크롬) 
  •   
  •   
  •   
  •   //#
  •   sourceMappingURL=./source.js.map
  •   (크롬
  •   카나리) 3.
  •   크롬
  •   개발자
  •   도구에서
  •   소스맵
  •   옵션
  •   켜기
  • 코드에서
  •   직접
  •   디버깅해보기! -
  •   데모
  •   타~임!
  • #
  •   참고 -
  •   http://alistapart.com/article/better-javascript-minification -
  •   http://www.peterbe.com/plog/comparing-google-closure-with-uglifyjs -
  •   http://net.tutsplus.com/tutorials/tools-and-tips/source-maps-101/
  •    -
  •   http://badassjs.com/post/971960912/uglifyjs-a-fast-new-javascript- compressor-for-node-js -
  •   http://www.yuiblog.com/blog/2012/10/16/state-of-yui-compressor/
  • 끝!
  •   고맙습니다.