10
1시도 2012.12.9 파일 1개에 모든 모듈을 넣는 방식 Google Chrome 에서 새로고침 5요청에 걸린 시간 최소값

r.js 를 사용한 AMD JS 최적화결과

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: r.js 를 사용한 AMD JS 최적화결과

1차 시도

• 2012.12.9

• 파일 1개에 모든 모듈을 넣는 방식

• Google Chrome 에서 새로고침 5회

• 각 요청에 걸린 시간 중 최소값

Page 2: r.js 를 사용한 AMD JS 최적화결과

0

17.5

35

52.5

70

홈 고객지원 홈

117

69

48

Before After

Request����������� ������������������  Count* 라이브러리는 My Page 와 공동 사용* 모든 페이지에 필요한 JS를 하나로 묶음

Page 3: r.js 를 사용한 AMD JS 최적화결과

0

200

400

600

800

홈 고객지원 홈 1.57KB36.89KB

11.34KB43.97KB

740.83KB763.97KB

684.91KB662.12KB

Before After 캐시-Before 캐시 - After

전송량* 라이브러리는 My Page 와 공동 사용* 모든 페이지에 필요한 JS를 하나로 묶음

Page 4: r.js 를 사용한 AMD JS 최적화결과

0

225

450

675

900

홈 고객지원 홈

758ms

488ms

739ms

508ms

880ms

594ms

761ms

597ms

Before After 캐시-Before 캐시 - After

OnLoad* 라이브러리는 My Page 와 공동 사용* 모든 페이지에 필요한 JS를 하나로 묶음

Page 5: r.js 를 사용한 AMD JS 최적화결과

0

100

200

300

400

홈 고객지원 홈

241ms264ms

197ms199ms

358ms365ms

266ms291ms

Before After 캐시-Before 캐시 - After

DOMContentLoaded* 라이브러리는 My Page 와 공동 사용* 모든 페이지에 필요한 JS를 하나로 묶음

Page 6: r.js 를 사용한 AMD JS 최적화결과

2차 시도

• 2013.2.1

• 페이지 마다 의존성있는 모듈만 묶음

• PhantomJS 를 사용해 10회 요청

• 요청의 평균/분산

Page 7: r.js 를 사용한 AMD JS 최적화결과

0

17.5

35

52.5

70

홈 고객지원 홈

128

69

48

Before After

Request����������� ������������������  Count* 라이브러리는 My Page 와 공동 사용* 페이지마다 의존성있는 JS만 로드

Page 8: r.js 를 사용한 AMD JS 최적화결과

0

200

400

600

800

홈 고객지원 홈 1.74KB

60.77KB11.63KB

67.6KB

688.53KB713.12KB 704.16KB708.95KB

Before After 캐시-Before 캐시 - After

전송량* 라이브러리는 My Page 와 공동 사용* 페이지마다 의존성있는 JS만 로드

Page 9: r.js 를 사용한 AMD JS 최적화결과

0

1000

2000

3000

4000

홈 고객지원 홈

1540.3ms

1197.7ms

2471.1ms

1386.2ms

1673.4ms

1346.7ms

3367.4ms

1546.4ms

Before After 캐시-Before 캐시 - After

OnLoad

Page 10: r.js 를 사용한 AMD JS 최적화결과

0

275

550

825

1100

홈 고객지원 홈

663.9ms

817.5ms874.7ms

1018.1ms

779.2ms

888.5ms930ms

1072.5ms

Before After 캐시-Before 캐시 - After

DOMContentLoaded