Soumettre la recherche
Mettre en ligne
JavaScript Minification
•
14 j'aime
•
2,315 vues
Ohgyun Ahn
Suivre
자바스크립트 압축의 모든 것 / @ABC Talk #6
Lire moins
Lire la suite
Signaler
Partager
Signaler
Partager
1 sur 43
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
7주 JavaScript Part1
7주 JavaScript Part1
지수 윤
Sw설계
Sw설계
김진태 Jintae Kim
패키지 매니저의 요건
패키지 매니저의 요건
Ohgyun Ahn
카카오스토리 웹팀의 코드리뷰 경험
카카오스토리 웹팀의 코드리뷰 경험
Ohgyun Ahn
Github Usage Scenarios
Github Usage Scenarios
Ohgyun Ahn
ES6: RegExp.prototype.unicode 이해하기
ES6: RegExp.prototype.unicode 이해하기
Ohgyun Ahn
diff output formats
diff output formats
Ohgyun Ahn
JavaScript Memory Profiling
JavaScript Memory Profiling
Ohgyun Ahn
Recommandé
7주 JavaScript Part1
7주 JavaScript Part1
지수 윤
Sw설계
Sw설계
김진태 Jintae Kim
패키지 매니저의 요건
패키지 매니저의 요건
Ohgyun Ahn
카카오스토리 웹팀의 코드리뷰 경험
카카오스토리 웹팀의 코드리뷰 경험
Ohgyun Ahn
Github Usage Scenarios
Github Usage Scenarios
Ohgyun Ahn
ES6: RegExp.prototype.unicode 이해하기
ES6: RegExp.prototype.unicode 이해하기
Ohgyun Ahn
diff output formats
diff output formats
Ohgyun Ahn
JavaScript Memory Profiling
JavaScript Memory Profiling
Ohgyun Ahn
Node.js 시작하기
Node.js 시작하기
Ohgyun Ahn
UX 심포지엄 20120 키노트 정리
UX 심포지엄 20120 키노트 정리
Ohgyun Ahn
Javascript hoisting
Javascript hoisting
Ohgyun Ahn
Python Usage (5-minute-summary)
Python Usage (5-minute-summary)
Ohgyun Ahn
BASH Guide Summary
BASH Guide Summary
Ohgyun Ahn
JavaSript Template Engine
JavaSript Template Engine
Ohgyun Ahn
Bot Trends 2017
Bot Trends 2017
David Pichsenmeister
Spark 의 핵심은 무엇인가? RDD! (RDD paper review)
Spark 의 핵심은 무엇인가? RDD! (RDD paper review)
Yongho Ha
Zeppelin(Spark)으로 데이터 분석하기
Zeppelin(Spark)으로 데이터 분석하기
SangWoo Kim
스타트업은 데이터를 어떻게 바라봐야 할까? (개정판)
스타트업은 데이터를 어떻게 바라봐야 할까? (개정판)
Yongho Ha
Spark 소개 1부
Spark 소개 1부
Jinho Yoo
[135] 우리 팀에서도 코드리뷰를 할 수 있을까 안오균
[135] 우리 팀에서도 코드리뷰를 할 수 있을까 안오균
NAVER D2
Webservice cache strategy
Webservice cache strategy
DaeMyung Kang
Spark + S3 + R3를 이용한 데이터 분석 시스템 만들기
Spark + S3 + R3를 이용한 데이터 분석 시스템 만들기
AWSKRUG - AWS한국사용자모임
도커 무작정 따라하기: 도커가 처음인 사람도 60분이면 웹 서버를 올릴 수 있습니다!
도커 무작정 따라하기: 도커가 처음인 사람도 60분이면 웹 서버를 올릴 수 있습니다!
pyrasis
Amazon EC2에서 Tensorflow 돌려보기 - 최선근 (데이터과학모임) :: AWS Community Day 2017
Amazon EC2에서 Tensorflow 돌려보기 - 최선근 (데이터과학모임) :: AWS Community Day 2017
AWSKRUG - AWS한국사용자모임
Web assembly 맛보기
Web assembly 맛보기
GyeongSeok Seo
망고100 보드로 놀아보자 6
망고100 보드로 놀아보자 6
종인 전
조은 - AMP PWA 101 [WSConf.Seoul.2017. Vol.2]
조은 - AMP PWA 101 [WSConf.Seoul.2017. Vol.2]
WSConf.
이권일 Sse 를 이용한 최적화와 실제 사용 예
이권일 Sse 를 이용한 최적화와 실제 사용 예
zupet
사례를 통해 살펴보는 프로파일링과 최적화 NDC2013
사례를 통해 살펴보는 프로파일링과 최적화 NDC2013
Esun Kim
스케일폼(Scaleform) ue4에 통합 및 간단한 사용법
스케일폼(Scaleform) ue4에 통합 및 간단한 사용법
Kiyoung Moon
Contenu connexe
En vedette
Node.js 시작하기
Node.js 시작하기
Ohgyun Ahn
UX 심포지엄 20120 키노트 정리
UX 심포지엄 20120 키노트 정리
Ohgyun Ahn
Javascript hoisting
Javascript hoisting
Ohgyun Ahn
Python Usage (5-minute-summary)
Python Usage (5-minute-summary)
Ohgyun Ahn
BASH Guide Summary
BASH Guide Summary
Ohgyun Ahn
JavaSript Template Engine
JavaSript Template Engine
Ohgyun Ahn
Bot Trends 2017
Bot Trends 2017
David Pichsenmeister
Spark 의 핵심은 무엇인가? RDD! (RDD paper review)
Spark 의 핵심은 무엇인가? RDD! (RDD paper review)
Yongho Ha
Zeppelin(Spark)으로 데이터 분석하기
Zeppelin(Spark)으로 데이터 분석하기
SangWoo Kim
스타트업은 데이터를 어떻게 바라봐야 할까? (개정판)
스타트업은 데이터를 어떻게 바라봐야 할까? (개정판)
Yongho Ha
Spark 소개 1부
Spark 소개 1부
Jinho Yoo
[135] 우리 팀에서도 코드리뷰를 할 수 있을까 안오균
[135] 우리 팀에서도 코드리뷰를 할 수 있을까 안오균
NAVER D2
Webservice cache strategy
Webservice cache strategy
DaeMyung Kang
Spark + S3 + R3를 이용한 데이터 분석 시스템 만들기
Spark + S3 + R3를 이용한 데이터 분석 시스템 만들기
AWSKRUG - AWS한국사용자모임
도커 무작정 따라하기: 도커가 처음인 사람도 60분이면 웹 서버를 올릴 수 있습니다!
도커 무작정 따라하기: 도커가 처음인 사람도 60분이면 웹 서버를 올릴 수 있습니다!
pyrasis
En vedette
(15)
Node.js 시작하기
Node.js 시작하기
UX 심포지엄 20120 키노트 정리
UX 심포지엄 20120 키노트 정리
Javascript hoisting
Javascript hoisting
Python Usage (5-minute-summary)
Python Usage (5-minute-summary)
BASH Guide Summary
BASH Guide Summary
JavaSript Template Engine
JavaSript Template Engine
Bot Trends 2017
Bot Trends 2017
Spark 의 핵심은 무엇인가? RDD! (RDD paper review)
Spark 의 핵심은 무엇인가? RDD! (RDD paper review)
Zeppelin(Spark)으로 데이터 분석하기
Zeppelin(Spark)으로 데이터 분석하기
스타트업은 데이터를 어떻게 바라봐야 할까? (개정판)
스타트업은 데이터를 어떻게 바라봐야 할까? (개정판)
Spark 소개 1부
Spark 소개 1부
[135] 우리 팀에서도 코드리뷰를 할 수 있을까 안오균
[135] 우리 팀에서도 코드리뷰를 할 수 있을까 안오균
Webservice cache strategy
Webservice cache strategy
Spark + S3 + R3를 이용한 데이터 분석 시스템 만들기
Spark + S3 + R3를 이용한 데이터 분석 시스템 만들기
도커 무작정 따라하기: 도커가 처음인 사람도 60분이면 웹 서버를 올릴 수 있습니다!
도커 무작정 따라하기: 도커가 처음인 사람도 60분이면 웹 서버를 올릴 수 있습니다!
Similaire à JavaScript Minification
Amazon EC2에서 Tensorflow 돌려보기 - 최선근 (데이터과학모임) :: AWS Community Day 2017
Amazon EC2에서 Tensorflow 돌려보기 - 최선근 (데이터과학모임) :: AWS Community Day 2017
AWSKRUG - AWS한국사용자모임
Web assembly 맛보기
Web assembly 맛보기
GyeongSeok Seo
망고100 보드로 놀아보자 6
망고100 보드로 놀아보자 6
종인 전
조은 - AMP PWA 101 [WSConf.Seoul.2017. Vol.2]
조은 - AMP PWA 101 [WSConf.Seoul.2017. Vol.2]
WSConf.
이권일 Sse 를 이용한 최적화와 실제 사용 예
이권일 Sse 를 이용한 최적화와 실제 사용 예
zupet
사례를 통해 살펴보는 프로파일링과 최적화 NDC2013
사례를 통해 살펴보는 프로파일링과 최적화 NDC2013
Esun Kim
스케일폼(Scaleform) ue4에 통합 및 간단한 사용법
스케일폼(Scaleform) ue4에 통합 및 간단한 사용법
Kiyoung Moon
제 7회 엑셈 수요 세미나 자료 연구컨텐츠팀
제 7회 엑셈 수요 세미나 자료 연구컨텐츠팀
EXEM
[TechDays Korea 2015] 녹슨 C++ 코드에 모던 C++로 기름칠하기
[TechDays Korea 2015] 녹슨 C++ 코드에 모던 C++로 기름칠하기
Chris Ohk
[Td 2015]녹슨 c++ 코드에 모던 c++로 기름칠하기(옥찬호)
[Td 2015]녹슨 c++ 코드에 모던 c++로 기름칠하기(옥찬호)
Sang Don Kim
op
op
neoact
optimize
optimize
neoact
Cloud-Barista 제4차 오픈 컨퍼런스 : CB-Spider / CB-Tumblebug : 멀티클라우드 인프라 서비스 (Multi-...
Cloud-Barista 제4차 오픈 컨퍼런스 : CB-Spider / CB-Tumblebug : 멀티클라우드 인프라 서비스 (Multi-...
Cloud-Barista Community
(망고210& Gingerbread) u-boot 컴파일 및 다운로드
(망고210& Gingerbread) u-boot 컴파일 및 다운로드
종인 전
NDC11_김성익_슈퍼클래스
NDC11_김성익_슈퍼클래스
Sungik Kim
성공적인 게임 런칭을 위한 비밀의 레시피 #3
성공적인 게임 런칭을 위한 비밀의 레시피 #3
Amazon Web Services Korea
S#03 김용현:VS2010으로 마이그레이션
S#03 김용현:VS2010으로 마이그레이션
codercay
ES6 for Node.js Study 2주차
ES6 for Node.js Study 2주차
승빈이네 공작소
김태훈 - Google AMP는 어떻게 빠른 성능을 내나 [WSConf. Seoul 2016/2017]
김태훈 - Google AMP는 어떻게 빠른 성능을 내나 [WSConf. Seoul 2016/2017]
WSConf.
Google AMP는 어떻게 빠른 성능을 내나?
Google AMP는 어떻게 빠른 성능을 내나?
Tai Hoon KIM
Similaire à JavaScript Minification
(20)
Amazon EC2에서 Tensorflow 돌려보기 - 최선근 (데이터과학모임) :: AWS Community Day 2017
Amazon EC2에서 Tensorflow 돌려보기 - 최선근 (데이터과학모임) :: AWS Community Day 2017
Web assembly 맛보기
Web assembly 맛보기
망고100 보드로 놀아보자 6
망고100 보드로 놀아보자 6
조은 - AMP PWA 101 [WSConf.Seoul.2017. Vol.2]
조은 - AMP PWA 101 [WSConf.Seoul.2017. Vol.2]
이권일 Sse 를 이용한 최적화와 실제 사용 예
이권일 Sse 를 이용한 최적화와 실제 사용 예
사례를 통해 살펴보는 프로파일링과 최적화 NDC2013
사례를 통해 살펴보는 프로파일링과 최적화 NDC2013
스케일폼(Scaleform) ue4에 통합 및 간단한 사용법
스케일폼(Scaleform) ue4에 통합 및 간단한 사용법
제 7회 엑셈 수요 세미나 자료 연구컨텐츠팀
제 7회 엑셈 수요 세미나 자료 연구컨텐츠팀
[TechDays Korea 2015] 녹슨 C++ 코드에 모던 C++로 기름칠하기
[TechDays Korea 2015] 녹슨 C++ 코드에 모던 C++로 기름칠하기
[Td 2015]녹슨 c++ 코드에 모던 c++로 기름칠하기(옥찬호)
[Td 2015]녹슨 c++ 코드에 모던 c++로 기름칠하기(옥찬호)
op
op
optimize
optimize
Cloud-Barista 제4차 오픈 컨퍼런스 : CB-Spider / CB-Tumblebug : 멀티클라우드 인프라 서비스 (Multi-...
Cloud-Barista 제4차 오픈 컨퍼런스 : CB-Spider / CB-Tumblebug : 멀티클라우드 인프라 서비스 (Multi-...
(망고210& Gingerbread) u-boot 컴파일 및 다운로드
(망고210& Gingerbread) u-boot 컴파일 및 다운로드
NDC11_김성익_슈퍼클래스
NDC11_김성익_슈퍼클래스
성공적인 게임 런칭을 위한 비밀의 레시피 #3
성공적인 게임 런칭을 위한 비밀의 레시피 #3
S#03 김용현:VS2010으로 마이그레이션
S#03 김용현:VS2010으로 마이그레이션
ES6 for Node.js Study 2주차
ES6 for Node.js Study 2주차
김태훈 - Google AMP는 어떻게 빠른 성능을 내나 [WSConf. Seoul 2016/2017]
김태훈 - Google AMP는 어떻게 빠른 성능을 내나 [WSConf. Seoul 2016/2017]
Google AMP는 어떻게 빠른 성능을 내나?
Google AMP는 어떻게 빠른 성능을 내나?
Plus de Ohgyun Ahn
호갱노노 이렇게 만듭니다
호갱노노 이렇게 만듭니다
Ohgyun Ahn
크롬익스텐션 맛보기
크롬익스텐션 맛보기
Ohgyun Ahn
재미있는 생산성 향상 도구
재미있는 생산성 향상 도구
Ohgyun Ahn
Raphael.js로 SVG 차트 만들기
Raphael.js로 SVG 차트 만들기
Ohgyun Ahn
깃헙으로 코드리뷰 하기
깃헙으로 코드리뷰 하기
Ohgyun Ahn
Recurrence relation
Recurrence relation
Ohgyun Ahn
Plus de Ohgyun Ahn
(6)
호갱노노 이렇게 만듭니다
호갱노노 이렇게 만듭니다
크롬익스텐션 맛보기
크롬익스텐션 맛보기
재미있는 생산성 향상 도구
재미있는 생산성 향상 도구
Raphael.js로 SVG 차트 만들기
Raphael.js로 SVG 차트 만들기
깃헙으로 코드리뷰 하기
깃헙으로 코드리뷰 하기
Recurrence relation
Recurrence relation
JavaScript Minification
1.
자바스크립트
2.
압축의
3.
모든
4.
것 ABC
5.
Talk
6.
/
7.
Steve
8.
Ahn
9.
오늘은. -
10.
자바스크립트
11.
압축을
12.
왜
13.
하는지. -
14.
코드에서
15.
어떤
16.
부분을
17.
압축할
18.
수
19.
있는지. -
20.
어떤
21.
부분은
22.
압축할
23.
수
24.
없는지. -
25.
어떤
26.
도구들이
27.
있고
28.
어떤
29.
게
30.
가장
31.
좋은지. -
32.
압축한
33.
코드는
34.
어떻게
35.
디버깅하는
36.
게
37.
좋은지.
38.
자바스크립트
39.
압축. -
40.
압축(Compress),
41.
최소화(Minify),
42.
최적화(Optimize) -
43.
리소스
44.
크기를
45.
줄여
46.
네트워크
47.
비용을
48.
줄이기
49.
위함 -
50.
사용자가
51.
많다면
52.
더욱
53.
효과적일
54.
것(예:
55.
jquery)
56.
자바스크립트
57.
압축의
58.
목표 -
59.
압축한
60.
코드가
61.
기존과
62.
동일하게
63.
동작하도록
64.
안전하게! -
65.
최대한
66.
짧게!
67.
먼저,
68.
도구의
69.
관점에서. -
70.
코드에서
71.
어떤
72.
부분을
73.
안전하게
74.
압축할
75.
수
76.
있을까? -
77.
어떤
78.
부분은
79.
압축할
80.
수
81.
없을까?
82.
탭,
83.
공백,
84.
주석 -
85.
가장
86.
효과적인
87.
방법! ---- /** * 구입할 수
있는 차종을 추천한다. * @param {Number} money * @return {String} */ function recommendCar(money) { } ---- function recommendCar(money){}
88.
지역변수를
89.
짧게! -
90.
안전하다! ---- function canBuyCar(brand, money,
color) { var result = false; } ---- function canBuyCar(a, b, c) { var d = false; }
91.
어떤
92.
것들은
93.
압축할
94.
수
95.
없을까? -
96.
원시값은
97.
압축할
98.
수
99.
없다. ---- “문자열”, 2000, null,
undefined, true, false -
100.
키워드
101.
또한
102.
압축할
103.
수
104.
없다. ---- this, var, return,
for, if, else, ...
105.
전역변수와
106.
객체의
107.
프로퍼티 -
108.
다른
109.
스콥에서
110.
사용할
111.
가능성이
112.
있으므로
113.
안전하지
114.
않다. ---- var globalMessage =
{ 'SORRY': '죄송합니다' }; // globalMessage // globalMessage.SORRY
115.
나쁜
116.
건
117.
역시
118.
나쁘다. -
119.
eval
120.
내의
121.
코드는
122.
지역변수에
123.
접근할
124.
수
125.
있기
126.
때문에
127.
128.
안전하지
129.
않다. ---- function canBuyCar(brand, money,
color) { eval('console.log(brand, money, color);'); } ---- function canBuyCar(a, b, c) { eval('console.log(brand, money, color);'); }
130.
쓰지
131.
말라는
132.
건
133.
쓰지
134.
않는
135.
게
136.
좋다. -
137.
with
138.
구문에서
139.
컨텍스트의
140.
프로퍼티와
141.
142.
지역변수를
143.
구분할
144.
수
145.
없기
146.
때문에
147.
안전하지
148.
않다. ---- function printCarMessage(message) { var
vw = 'Das Auto'; with (message) { // message.vw ? // 지역변수 vw? console.log(vw); } }; printCarMessage({ vw: '다스 오토~' });
149.
쓰지
150.
말라는
151.
건
152.
쓰지
153.
않는
154.
게
155.
좋다. ---- function printCarMessage(a) { var
b = 'Das Auto'; with (a) { console.log(vw? b?); } }
156.
좀
157.
더
158.
압축할
159.
만한
160.
게
161.
있을까? -
162.
객체의
163.
키
164.
따옴표를
165.
제거한다. ---- { 'brand': 'benz'
} -- { brand: 'benz' } -
166.
프로퍼티
167.
정의를
168.
dot
169.
연산자를
170.
사용하게
171.
바꾼다. ---- brand['benz'] -- brend.benz
172.
세미콜론 -
173.
안전한
174.
범위
175.
내에서
176.
세미콜론을
177.
삭제한다. ---- function buyCar(money) { return
money * -1; } ---- function buyCar(money) { return money * -1 }
178.
브레이스 -
179.
안전한
180.
범위
181.
내에서
182.
브레이스를
183.
삭제한다. ---- if (money
5000) { buyBenz(money); } ---- if (money 5000) buyBenz(money);
184.
var
185.
키워드 -
186.
함수
187.
내에서
188.
var
189.
키워드를
190.
한
191.
번만
192.
사용하도록
193.
정리한다. ---- var brand =
'benz'; var money = 5000; ---- var brand = 'benz', money = 5000;
194.
true/false를
195.
좀
196.
더
197.
짧게! -
198.
true/false를
199.
키워드
200.
대신
201.
다른
202.
값으로
203.
사용한다. ---- true -- !0 false
-- !1
204.
사용하지
205.
않는
206.
변수 -
207.
사용하지
208.
않는
209.
변수와
210.
함수를
211.
삭제한다. ---- $buyBtn.click(function (e) { console.log('BUY!'); }); ---- $buyBtn.click(function
() { console.log('BUY!'); });
212.
if
213.
구문 -
214.
단순한
215.
if
216.
구문은
217.
표현식으로
218.
압축한다. ---- if (money) { buyCar(); } ---- money
buyCar();
219.
if~else
220.
구문 -
221.
if~else
222.
구문은
223.
삼항
224.
연산자로
225.
압축한다. ---- if (money) { buyCar(); }
else { workHard(); } ---- money ? buyCar() : workHard();
226.
문자열
227.
병합 -
228.
단순
229.
문자열의
230.
합은
231.
미리
232.
계산한다. ---- var str =
buy + car + now; ---- var str = buycarnow;
233.
숫자
234.
연산 -
235.
단순한
236.
숫자
237.
연산은
238.
미리
239.
계산한다. ---- var hour =
1000 * 60 * 60; ---- var hour = 3600000;
240.
긴
241.
숫자 -
242.
긴
243.
숫자는
244.
지수법으로
245.
표현한다. ---- var hour =
3600000; ---- var hour = 36e5;
246.
지금까지
247.
찾아본
248.
압축
249.
대상 -
250.
주석,
251.
공백
252.
제거 -
253.
지역변수
254.
압축
255.
및
256.
정리 -
257.
if/else
258.
구문
259.
압축 -
260.
키워드
261.
간소화
262.
및
263.
대체 -
264.
정적인
265.
연산
266.
선처리
267.
이제
268.
사람의
269.
관점에서. -
270.
저걸
271.
다
272.
신경쓰는
273.
건
274.
오바고,
275.
276.
277.
웬만한
278.
건
279.
압축
280.
도구가
281.
해줄
282.
것
283.
같은데. -
284.
실질적으로
285.
어떤
286.
걸
287.
신경쓰면
288.
될까?
289.
전역변수를
290.
지역변수로. -
291.
자주
292.
쓰이는
293.
전역변수는
294.
지역변수에
295.
담아둔다. ---- var buyButton =
document.getElementById('btn_buy_car'); ---- var doc = document; var buyButton = doc.getElementById('btn_buy_car');
296.
전역변수는
297.
필요할
298.
때만. -
299.
필요하지
300.
않는
301.
전역변수를
302.
만들지
303.
않는다. ---- function getPrivateInfo() {} function
getPublicInfo() { return getPrivateInfo(); } ---- (function () { function getPrivateInfo() {} window.getPublicInfo() { return getPrivateInfo(); } }());
304.
프로퍼티는
305.
지역변수에. -
306.
자주
307.
쓰이는
308.
프로퍼티는
309.
지역변수에
310.
담아둔다. ---- console.log(message.brand.benz.copy); ---- var benzMessage =
message.brand.benz; console.log(benzMessage.copy);
311.
그
312.
외에~ -
313.
자주
314.
쓰이는
315.
문자열과
316.
숫자는
317.
상수로
318.
할당한다. -
319.
eval과
320.
with는
321.
쓰지
322.
않는다.
323.
정~말
324.
아쉬운
325.
상황이라면. -
326.
정말
327.
네트워크
328.
리소스를
329.
줄여야
330.
하는
331.
상황이라면,
332.
333.
몇
334.
가지
335.
더
336.
고려할
337.
수
338.
있다.
339.
this는
340.
지역변수로. -
341.
자주
342.
쓰이는
343.
this는
344.
지역변수로
345.
할당한다. ---- 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; }
346.
null과
347.
undefined. -
348.
null과
349.
undefined도
350.
지역변수로
351.
할당해둔다. ---- var NULL =
null, UNDEFINED; 또는 (function (NULL, UNDEFINED) { }(null));
352.
return은
353.
한
354.
번만. ---- 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; }
355.
압축
356.
도구엔
357.
어떤
358.
것들이
359.
있나? -
360.
UglifyJS -
361.
Closure
362.
Compiler -
363.
YUI
364.
Compressor -
365.
JSMin,
366.
Packer,
367.
...
368.
UglifyJS -
369.
http://lisperator.net/uglifyjs/ -
370.
추천! -
371.
가장
372.
인기있는
373.
압축
374.
도구 -
375.
빠르고
376.
압축율도
377.
좋음 -
378.
jQuery
379.
등
380.
여러
381.
상용
382.
라이브러리에서
383.
채택 -
384.
Node
385.
기반으로
386.
구현 -
387.
온라인
388.
도구:
389.
http://lisperator.net/uglifyjs/#demo -
390.
Ruby
391.
Wapper:
392.
https://github.com/lautis/uglifier -
393.
Maven
394.
Plugin:
395.
https://github.com/tqh/uglifyjs-maven-plugin
396.
Closure
397.
Compiler -
398.
구글에서
399.
개발 -
400.
압축률은
401.
가장
402.
좋으나,
403.
압축
404.
속도가
405.
느림 -
406.
Advanced
407.
옵션에서는
408.
굉장히
409.
높은
410.
압축률을
411.
제공함 -
412.
구글의
413.
여러
414.
서비스에서
415.
사용하고
416.
있음 -
417.
압축
418.
뿐
419.
아니라
420.
코드
421.
분석
422.
기능도
423.
제공 -
424.
간혹
425.
압축
426.
코드가
427.
제대로
428.
동작하지
429.
않는
430.
경우가
431.
있다고
432.
함 -
433.
Java
434.
기반으로
435.
구현 -
436.
온라인
437.
도구:
438.
http://closure-compiler.appspot.com/
439.
-
440.
Ruby
441.
Wapper:
442.
https://github.com/documentcloud/closure-compiler
443.
444.
YUI
445.
Compressor -
446.
Yahoo
447.
에서
448.
개발 -
449.
한
450.
때
451.
잘
452.
나갔으나,
453.
현재는
454.
Deprecated
455.
되었음. -
456.
Yahoo에서는
457.
Ugilfy를
458.
커스터마이징
459.
yuglify를
460.
사용하고
461.
있음 -
462.
yuglify:
463.
https://github.com/yui/yuglify
464.
465.
코드로
466.
직접
467.
압축해보기! -
468.
데모
469.
타~임!
470.
압축한
471.
코드
472.
디버깅하기 -
473.
소스맵(Source
474.
Map) -
475.
압축한
476.
코드를
477.
원본에서
478.
확인할
479.
수
480.
있음 -
481.
UglifyJS,
482.
Closure
483.
Compiler
484.
에서
485.
제공 -
486.
http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/
487.
소스맵
488.
생성하기 1.
489.
압축
490.
도구에서
491.
소스맵
492.
옵션
493.
추가
494.
495.
496.
497.
Uglify:
498.
--source-map
499.
500.
501.
502.
Closure
503.
Compiler:
504.
--create_source_map 2.
505.
압축된
506.
소스에
507.
주석
508.
추가
509.
510.
511.
512.
//@
513.
sourceMappingURL=./source.js.map
514.
(크롬)
515.
516.
517.
518.
//#
519.
sourceMappingURL=./source.js.map
520.
(크롬
521.
카나리) 3.
522.
크롬
523.
개발자
524.
도구에서
525.
소스맵
526.
옵션
527.
켜기
528.
코드에서
529.
직접
530.
디버깅해보기! -
531.
데모
532.
타~임!
533.
#
534.
참고 -
535.
http://alistapart.com/article/better-javascript-minification -
536.
http://www.peterbe.com/plog/comparing-google-closure-with-uglifyjs -
537.
http://net.tutsplus.com/tutorials/tools-and-tips/source-maps-101/
538.
-
539.
http://badassjs.com/post/971960912/uglifyjs-a-fast-new-javascript- compressor-for-node-js -
540.
http://www.yuiblog.com/blog/2012/10/16/state-of-yui-compressor/
541.
끝!
542.
고맙습니다.
Télécharger maintenant