브라우저가 컨텐츠를 받아오는 방식은 다음과 같다.
이렇게 웹 사이트에서 표시할 컨텐츠들을 서버에서부터 받아오는 작업을 [개발자 도구 > Network 탭]에서 확인할 수 있다.
여기서 맨 처음 받아오는 www.naver.com의 이름을 가진 파일이 바로 HTML 파일이다.
그 뒤로 CSS와 JS 파일들을 연달아 가져오는 것을 알 수 있다.
이를 고려한다면 컨텐츠의 개수를 줄이는 것이 베스트일 수 있다. 표시할 페이지가 간단하면 된다! 그러나 나타낼 데이터들이 많아지고 많은 정보를 보여주고 싶은 경우가 많으므로 웹 성능을 위해 컨텐츠의 개수를 줄이는 것이 능사는 아니다. 컨텐츠의 양을 유지하면서 HTTP 요청을 줄이는 방법을 찾는 것이 가장 좋다.
만약 하나의 파일을 요청하고 받아오는 데에 1초의 시간이 소요된다고 해 보자. 1000개의 파일이 필요하다 한다면 1000초의 시간이 필요하다. 따라서 여러 곳에서 사용될 수 있는 로직을 하나의 파일로 묶어 사용할 수 있도록 자바스크립트 파일을 모듈화하여 사용하는 것이 HTTP 요청 수를 줄이는 데에 도움이 된다.
자바스크립트 파일을 분리하여 사용하였을 때
하나로 병합된 자바스크립트 파일을 사용하였을 때
script 1, 2, 3 파일을 하나의 파일로 묶었을 때, 파일의 크기는 커졌지만 속도 면에서는 큰 차이가 없는 것을 알 수 있다. 따라서 이렇게 자바스크립트 파일을 묶는 것이 HTTP 요청/응답 속도를 높일 수 있는 방법이다.
스크립트 파일을 하나로 합침으로써 HTTP 응답 시간을 줄일 수 있다.