r.js 를 사용한 AMD JS 최적화결과
- 1. 1차 시도 • 2012.12.9 • 파일 1개에 모든 모듈을 넣는 방식 • Google Chrome 에서 새로고침 5회 • 각 요청에 걸린 시간 중 최소값
- 2. Request
- 3. dzܲԳ * 라이브러리는 My Page 와 공동 사용 * 모든 페이지에 필요한 JS를 하나로 묶음 Before After 70 69 52.5 48 35 17.5 11 7 0 홈 고객지원 홈
- 4. ѫ량 * 라이브러리는 My Page 와 공동 사용 * 모든 페이지에 필요한 JS를 하나로 묶음 Before After 캐시-Before 캐시 - After 800 763.97KB 740.83KB 684.91KB 662.12KB 600 400 200 0 43.97KB 36.89KB 11.34KB 1.57KB 홈 고객지원 홈
- 5. OnLoad * 라이브러리는 My Page 와 공동 사용 * 모든 페이지에 필요한 JS를 하나로 묶음 Before After 캐시-Before 캐시 - After 900 880ms 761ms 758ms 739ms 675 597ms 594ms 508ms 488ms 450 225 0 홈 고객지원 홈
- 6. DOMContentLoaded * 라이브러리는 My Page 와 공동 사용 * 모든 페이지에 필요한 JS를 하나로 묶음 Before After 캐시-Before 캐시 - After 400 365ms 358ms 300 291ms 264ms 266ms 241ms 200 199ms 197ms 100 0 홈 고객지원 홈
- 7. 2차 시도 • 2013.2.1 • 페이지 마다 의존성있는 모듈만 묶음 • PhantomJS 를 사용해 10회 요청 • 요청의 평균/분산
- 8. Request
- 9. dzܲԳ * 라이브러리는 My Page 와 공동 사용 * 페이지마다 의존성있는 JS만 로드 Before After 70 69 52.5 48 35 17.5 12 8 0 홈 고객지원 홈
- 10. ѫ량 * 라이브러리는 My Page 와 공동 사용 * 페이지마다 의존성있는 JS만 로드 Before After 캐시-Before 캐시 - After 800 708.95KB 713.12KB 704.16KB 688.53KB 600 400 200 67.6KB 60.77KB 0 11.63KB 1.74KB 홈 고객지원 홈
- 11. OnLoad Before After 캐시-Before 캐시 - After 4000 3367.4ms 3000 2471.1ms 2000 1673.4ms 1546.4ms 1540.3ms 1346.7ms 1386.2ms 1000 1197.7ms 0 홈 고객지원 홈
- 12. DOMContentLoaded Before After 캐시-Before 캐시 - After 1100 1072.5ms 1018.1ms 930ms 888.5ms 874.7ms 825 817.5ms 779.2ms 663.9ms 550 275 0 홈 고객지원 홈