javascript minification

43
자바스크립트 압축의 모든 것 ABC Talk / Steve Ahn

Upload: ohgyun-ahn

Post on 13-Dec-2014

1.253 views

Category:

Documents


3 download

DESCRIPTION

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

TRANSCRIPT

Page 1: JavaScript Minification

자바스크립트����������� ������������������  압축의����������� ������������������  모든����������� ������������������  것

ABC����������� ������������������  Talk����������� ������������������  /����������� ������������������  Steve����������� ������������������  Ahn

Page 2: JavaScript Minification

오늘은.

-����������� ������������������  자바스크립트����������� ������������������  압축을����������� ������������������  왜����������� ������������������  하는지.

-����������� ������������������  코드에서����������� ������������������  어떤����������� ������������������  부분을����������� ������������������  압축할����������� ������������������  수����������� ������������������  있는지.

-����������� ������������������  어떤����������� ������������������  부분은����������� ������������������  압축할����������� ������������������  수����������� ������������������  없는지.

-����������� ������������������  어떤����������� ������������������  도구들이����������� ������������������  있고����������� ������������������  어떤����������� ������������������  게����������� ������������������  가장����������� ������������������  좋은지.

-����������� ������������������  압축한����������� ������������������  코드는����������� ������������������  어떻게����������� ������������������  디버깅하는����������� ������������������  게����������� ������������������  좋은지.

Page 3: JavaScript Minification

자바스크립트����������� ������������������  압축.

-����������� ������������������  압축(Compress),����������� ������������������  최소화(Minify),����������� ������������������  최적화(Optimize)

-����������� ������������������  리소스����������� ������������������  크기를����������� ������������������  줄여����������� ������������������  네트워크����������� ������������������  비용을����������� ������������������  줄이기����������� ������������������  위함

-����������� ������������������  사용자가����������� ������������������  많다면����������� ������������������  더욱����������� ������������������  효과적일����������� ������������������  것(예:����������� ������������������  jquery)

Page 4: JavaScript Minification

자바스크립트����������� ������������������  압축의����������� ������������������  목표

-����������� ������������������  압축한����������� ������������������  코드가����������� ������������������  기존과����������� ������������������  동일하게����������� ������������������  동작하도록����������� ������������������  안전하게!

-����������� ������������������  최대한����������� ������������������  짧게!

Page 5: JavaScript Minification

먼저,����������� ������������������  도구의����������� ������������������  관점에서.

-����������� ������������������  코드에서����������� ������������������  어떤����������� ������������������  부분을����������� ������������������  안전하게����������� ������������������  압축할����������� ������������������  수����������� ������������������  있을까?

-����������� ������������������  어떤����������� ������������������  부분은����������� ������������������  압축할����������� ������������������  수����������� ������������������  없을까?

Page 6: JavaScript Minification

탭,����������� ������������������  공백,����������� ������������������  주석

-����������� ������������������  가장����������� ������������������  효과적인����������� ������������������  방법!

----/** * 구입할 수 있는 차종을 추천한다. * @param {Number} money * @return {String} */function recommendCar(money) { }

----function recommendCar(money){}

Page 7: JavaScript Minification

지역변수를����������� ������������������  짧게!

-����������� ������������������  안전하다!

----function canBuyCar(brand, money, color) { var result = false;}

----function canBuyCar(a, b, c) { var d = false;}

Page 8: JavaScript Minification

어떤����������� ������������������  것들은����������� ������������������  압축할����������� ������������������  수����������� ������������������  없을까?

-����������� ������������������  원시값은����������� ������������������  압축할����������� ������������������  수����������� ������������������  없다.

----“문자열”, 2000, null, undefined, true, false

-����������� ������������������  키워드����������� ������������������  또한����������� ������������������  압축할����������� ������������������  수����������� ������������������  없다.

----this, var, return, for, if, else, ...

Page 9: JavaScript Minification

전역변수와����������� ������������������  객체의����������� ������������������  프로퍼티

-����������� ������������������  다른����������� ������������������  스콥에서����������� ������������������  사용할����������� ������������������  가능성이����������� ������������������  있으므로����������� ������������������  안전하지����������� ������������������  않다.

----var globalMessage = { 'SORRY': '죄송합니다'};

// globalMessage// globalMessage.SORRY

Page 10: JavaScript Minification

나쁜����������� ������������������  건����������� ������������������  역시����������� ������������������  나쁘다.

-����������� ������������������  eval����������� ������������������  내의����������� ������������������  코드는����������� ������������������  지역변수에����������� ������������������  접근할����������� ������������������  수����������� ������������������  있기����������� ������������������  때문에

����������� ������������������  ����������� ������������������  안전하지����������� ������������������  않다.

----function canBuyCar(brand, money, color) { eval('console.log(brand, money, color);');}

----function canBuyCar(a, b, c) { eval('console.log(brand, money, color);');}

Page 11: JavaScript Minification

쓰지����������� ������������������  말라는����������� ������������������  건����������� ������������������  쓰지����������� ������������������  않는����������� ������������������  게����������� ������������������  좋다.

-����������� ������������������  with����������� ������������������  구문에서����������� ������������������  컨텍스트의����������� ������������������  프로퍼티와

����������� ������������������  ����������� ������������������  지역변수를����������� ������������������  구분할����������� ������������������  수����������� ������������������  없기����������� ������������������  때문에����������� ������������������  안전하지����������� ������������������  않다.

----function printCarMessage(message) { var vw = 'Das Auto'; with (message) { // message.vw ? // 지역변수 vw? console.log(vw); }};printCarMessage({ vw: '다스 오토~'});

Page 12: JavaScript Minification

쓰지����������� ������������������  말라는����������� ������������������  건����������� ������������������  쓰지����������� ������������������  않는����������� ������������������  게����������� ������������������  좋다.

----

function printCarMessage(a) { var b = 'Das Auto'; with (a) { console.log(vw? b?); }}

Page 13: JavaScript Minification

좀����������� ������������������  더����������� ������������������  압축할����������� ������������������  만한����������� ������������������  게����������� ������������������  있을까?

-����������� ������������������  객체의����������� ������������������  키����������� ������������������  따옴표를����������� ������������������  제거한다.

----{ 'brand': 'benz' } --> { brand: 'benz' }

-����������� ������������������  프로퍼티����������� ������������������  정의를����������� ������������������  dot����������� ������������������  연산자를����������� ������������������  사용하게����������� ������������������  바꾼다.

----brand['benz'] --> brend.benz

Page 14: JavaScript Minification

세미콜론

-����������� ������������������  안전한����������� ������������������  범위����������� ������������������  내에서����������� ������������������  세미콜론을����������� ������������������  삭제한다.

----function buyCar(money) { return money * -1;}

----function buyCar(money) { return money * -1}

Page 15: JavaScript Minification

브레이스

-����������� ������������������  안전한����������� ������������������  범위����������� ������������������  내에서����������� ������������������  브레이스를����������� ������������������  삭제한다.

----if (money > 5000) { buyBenz(money);}

----if (money > 5000) buyBenz(money);

Page 16: JavaScript Minification

var����������� ������������������  키워드

-����������� ������������������  함수����������� ������������������  내에서����������� ������������������  var����������� ������������������  키워드를����������� ������������������  한����������� ������������������  번만����������� ������������������  사용하도록����������� ������������������  정리한다.

----var brand = 'benz';var money = 5000;

----var brand = 'benz', money = 5000;

Page 17: JavaScript Minification

true/false를����������� ������������������  좀����������� ������������������  더����������� ������������������  짧게!

-����������� ������������������  true/false를����������� ������������������  키워드����������� ������������������  대신����������� ������������������  다른����������� ������������������  값으로����������� ������������������  사용한다.

----true --> !0false --> !1

Page 18: JavaScript Minification

사용하지����������� ������������������  않는����������� ������������������  변수

-����������� ������������������  사용하지����������� ������������������  않는����������� ������������������  변수와����������� ������������������  함수를����������� ������������������  삭제한다.

----$buyBtn.click(function (e) { console.log('BUY!');});

----$buyBtn.click(function () { console.log('BUY!');});

Page 19: JavaScript Minification

if����������� ������������������  구문

-����������� ������������������  단순한����������� ������������������  if����������� ������������������  구문은����������� ������������������  표현식으로����������� ������������������  압축한다.

----if (money) { buyCar();}

----money && buyCar();

Page 20: JavaScript Minification

if~else����������� ������������������  구문

-����������� ������������������  if~else����������� ������������������  구문은����������� ������������������  삼항����������� ������������������  연산자로����������� ������������������  압축한다.

----if (money) { buyCar();} else { workHard();}

----money ? buyCar() : workHard();

Page 21: JavaScript Minification

문자열����������� ������������������  병합

-����������� ������������������  단순����������� ������������������  문자열의����������� ������������������  합은����������� ������������������  미리����������� ������������������  계산한다.

----var str = "buy" + "car" + "now";

----var str = "buycarnow";

Page 22: JavaScript Minification

숫자����������� ������������������  연산

-����������� ������������������  단순한����������� ������������������  숫자����������� ������������������  연산은����������� ������������������  미리����������� ������������������  계산한다.

----var hour = 1000 * 60 * 60;

----var hour = 3600000;

Page 23: JavaScript Minification

긴����������� ������������������  숫자

-����������� ������������������  긴����������� ������������������  숫자는����������� ������������������  지수법으로����������� ������������������  표현한다.

----var hour = 3600000;

----var hour = 36e5;

Page 24: JavaScript Minification

지금까지����������� ������������������  찾아본����������� ������������������  압축����������� ������������������  대상

-����������� ������������������  주석,����������� ������������������  공백����������� ������������������  제거

-����������� ������������������  지역변수����������� ������������������  압축����������� ������������������  및����������� ������������������  정리

-����������� ������������������  if/else����������� ������������������  구문����������� ������������������  압축

-����������� ������������������  키워드����������� ������������������  간소화����������� ������������������  및����������� ������������������  대체

-����������� ������������������  정적인����������� ������������������  연산����������� ������������������  선처리

Page 25: JavaScript Minification

이제����������� ������������������  사람의����������� ������������������  관점에서.

-����������� ������������������  저걸����������� ������������������  다����������� ������������������  신경쓰는����������� ������������������  건����������� ������������������  오바고,

����������� ������������������  ����������� ������������������  ����������� ������������������  웬만한����������� ������������������  건����������� ������������������  압축����������� ������������������  도구가����������� ������������������  해줄����������� ������������������  것����������� ������������������  같은데.

-����������� ������������������  실질적으로����������� ������������������  어떤����������� ������������������  걸����������� ������������������  신경쓰면����������� ������������������  될까?

Page 26: JavaScript Minification

전역변수를����������� ������������������  지역변수로.

-����������� ������������������  자주����������� ������������������  쓰이는����������� ������������������  전역변수는����������� ������������������  지역변수에����������� ������������������  담아둔다.

----var buyButton = document.getElementById('btn_buy_car');

----var doc = document;var buyButton = doc.getElementById('btn_buy_car');

Page 27: JavaScript Minification

전역변수는����������� ������������������  필요할����������� ������������������  때만.

-����������� ������������������  필요하지����������� ������������������  않는����������� ������������������  전역변수를����������� ������������������  만들지����������� ������������������  않는다.

----function getPrivateInfo() {}

function getPublicInfo() { return getPrivateInfo();}

----(function () { function getPrivateInfo() {}

window.getPublicInfo() { return getPrivateInfo(); }}());

Page 28: JavaScript Minification

프로퍼티는����������� ������������������  지역변수에.

-����������� ������������������  자주����������� ������������������  쓰이는����������� ������������������  프로퍼티는����������� ������������������  지역변수에����������� ������������������  담아둔다.

----console.log(message.brand.benz.copy);

----var benzMessage = message.brand.benz;console.log(benzMessage.copy);

Page 29: JavaScript Minification

그����������� ������������������  외에~

-����������� ������������������  자주����������� ������������������  쓰이는����������� ������������������  문자열과����������� ������������������  숫자는����������� ������������������  상수로����������� ������������������  할당한다.

-����������� ������������������  eval과����������� ������������������  with는����������� ������������������  쓰지����������� ������������������  않는다.

Page 30: JavaScript Minification

정~말����������� ������������������  아쉬운����������� ������������������  상황이라면.

-����������� ������������������  정말����������� ������������������  네트워크����������� ������������������  리소스를����������� ������������������  줄여야����������� ������������������  하는����������� ������������������  상황이라면,

����������� ������������������  ����������� ������������������  몇����������� ������������������  가지����������� ������������������  더����������� ������������������  고려할����������� ������������������  수����������� ������������������  있다.

Page 31: JavaScript Minification

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;}

Page 32: JavaScript Minification

null과����������� ������������������  undefined.

-����������� ������������������  null과����������� ������������������  undefined도����������� ������������������  지역변수로����������� ������������������  할당해둔다.

----var NULL = null, UNDEFINED;

또는

(function (NULL, UNDEFINED) {

}(null));

Page 33: JavaScript Minification

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;}

Page 34: JavaScript Minification

압축����������� ������������������  도구엔����������� ������������������  어떤����������� ������������������  것들이����������� ������������������  있나?

-����������� ������������������  UglifyJS

-����������� ������������������  Closure����������� ������������������  Compiler

-����������� ������������������  YUI����������� ������������������  Compressor

-����������� ������������������  JSMin,����������� ������������������  Packer,����������� ������������������  ...

Page 35: JavaScript Minification

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

Page 36: JavaScript Minification

Closure����������� ������������������  Compiler

-����������� ������������������  구글에서����������� ������������������  개발

-����������� ������������������  압축률은����������� ������������������  가장����������� ������������������  좋으나,����������� ������������������  압축����������� ������������������  속도가����������� ������������������  느림

-����������� ������������������  Advanced����������� ������������������  옵션에서는����������� ������������������  굉장히����������� ������������������  높은����������� ������������������  압축률을����������� ������������������  제공함

-����������� ������������������  구글의����������� ������������������  여러����������� ������������������  서비스에서����������� ������������������  사용하고����������� ������������������  있음

-����������� ������������������  압축����������� ������������������  뿐����������� ������������������  아니라����������� ������������������  코드����������� ������������������  분석����������� ������������������  기능도����������� ������������������  제공

-����������� ������������������  간혹����������� ������������������  압축����������� ������������������  코드가����������� ������������������  제대로����������� ������������������  동작하지����������� ������������������  않는����������� ������������������  경우가����������� ������������������  있다고����������� ������������������  함

-����������� ������������������  Java����������� ������������������  기반으로����������� ������������������  구현

-����������� ������������������  온라인����������� ������������������  도구:����������� ������������������  http://closure-compiler.appspot.com/����������� ������������������  

-����������� ������������������  Ruby����������� ������������������  Wapper:����������� ������������������  https://github.com/documentcloud/closure-compiler

����������� ������������������  

Page 37: JavaScript Minification

YUI����������� ������������������  Compressor

-����������� ������������������  Yahoo����������� ������������������  에서����������� ������������������  개발

-����������� ������������������  한����������� ������������������  때����������� ������������������  잘����������� ������������������  나갔으나,����������� ������������������  현재는����������� ������������������  Deprecated����������� ������������������  되었음.

-����������� ������������������  Yahoo에서는����������� ������������������  Ugilfy를����������� ������������������  커스터마이징����������� ������������������  yuglify를����������� ������������������  사용하고����������� ������������������  있음

-����������� ������������������  yuglify:����������� ������������������  https://github.com/yui/yuglify����������� ������������������  

Page 38: JavaScript Minification

코드로����������� ������������������  직접����������� ������������������  압축해보기!

-����������� ������������������  데모����������� ������������������  타~임!

Page 39: JavaScript Minification

압축한����������� ������������������  코드����������� ������������������  디버깅하기

-����������� ������������������  소스맵(Source����������� ������������������  Map)

-����������� ������������������  압축한����������� ������������������  코드를����������� ������������������  원본에서����������� ������������������  확인할����������� ������������������  수����������� ������������������  있음

-����������� ������������������  UglifyJS,����������� ������������������  Closure����������� ������������������  Compiler����������� ������������������  에서����������� ������������������  제공

-����������� ������������������  http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/

Page 40: JavaScript Minification

소스맵����������� ������������������  생성하기

1.����������� ������������������  압축����������� ������������������  도구에서����������� ������������������  소스맵����������� ������������������  옵션����������� ������������������  추가

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  Uglify:����������� ������������������  --source-map

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  Closure����������� ������������������  Compiler:����������� ������������������  --create_source_map

2.����������� ������������������  압축된����������� ������������������  소스에����������� ������������������  주석����������� ������������������  추가

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  //@����������� ������������������  sourceMappingURL=./source.js.map����������� ������������������  (크롬)

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  //#����������� ������������������  sourceMappingURL=./source.js.map����������� ������������������  (크롬����������� ������������������  카나리)

3.����������� ������������������  크롬����������� ������������������  개발자����������� ������������������  도구에서����������� ������������������  소스맵����������� ������������������  옵션����������� ������������������  켜기

Page 41: JavaScript Minification

코드에서����������� ������������������  직접����������� ������������������  디버깅해보기!

-����������� ������������������  데모����������� ������������������  타~임!

Page 42: JavaScript Minification

#����������� ������������������  참고

-����������� ������������������  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/

Page 43: JavaScript Minification

끝!����������� ������������������  고맙습니다.