javascript minification
DESCRIPTION
자바스크립트 압축의 모든 것 / @ABC Talk #6TRANSCRIPT
자바스크립트����������� ������������������ 압축의����������� ������������������ 모든����������� ������������������ 것
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 --> !0false --> !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/
끝!����������� ������������������ 고맙습니다.