[TypeScript 기초] 3. 스크립트 번들링

2018/07/12 - [개발자] - [TypeScript 기초] 2. 오브젝트 데이터 바인딩에서 Browserify를 이용하여 bundling을 하였습니다. 왜 번들링이 필요할까요?

현재 주요 브라우저의 대부분은 각 호스트 이름 당 동시 연결 수를 6 개로 제한합니다. 즉, 6 개의 요청이 처리되는 동안 호스트의 리소스에 대한 추가 요청은 브라우저에 의해 대기됩니다. 아래 이미지에서 IE F12 개발자 도구 네트워크 탭은 샘플 애플리케이션의 정보보기에 필요한 리소스의 타이밍을 보여줍니다.

회색 막대는 요청이 6 개의 연결 제한을 기다리는 브라우저에 의해 대기 된 시간을 표시합니다. 노란색 막대는 첫 번째 바이트에 대한 요청 시간, 즉 요청을 보내고 서버에서 첫 번째 응답을받는 데 걸리는 시간입니다. 파란색 막대는 서버에서 응답 데이터를 수신하는 데 걸리는 시간을 표시합니다. 애셋을 두 번 클릭하여 자세한 타이밍 정보를 얻을 수 있습니다. 예를 들어 다음 이미지는 /Scripts/MyScripts/JavaScript6.js 파일을로드하는 데 필요한 타이밍을 보여줍니다.

앞의 이미지는 브라우저가 동시 연결 수를 제한하여 요청이 대기 한 시간을 제공하는 시작 이벤트를 보여줍니다. 이 경우 요청은 다른 요청이 완료 될 때까지 46 밀리 초 대기합니다.앞의 이미지는 브라우저가 동시 연결 수를 제한하여 요청이 대기 한 시간을 제공하는 시작 이벤트를 보여줍니다. 이 경우 요청은 다른 요청이 완료 될 때까지 46 밀리 초 대기합니다.

Broswerify를 이용하여 CSS, JavaScript 및 기타 번들을 만들 수 있습니다. 파일 수가 적 으면 HTTP 요청 수가 적어 첫 페이지로드 성능을 향상시킬 수 있습니다.

다음 이미지는 이전에 표시된 정보보기의 동일한 타이밍보기를 보여 주지만이 번들 및 축소 기능이 활성화 된 상태입니다.

이렇기 때문에 Bundling와 Minification을 통해 작은 Script 또는 CSS 파일을 하나로 묶어 제공함으로써 서비스 성능을 향상 시킬 수 있기 때문입니다.

다음에는 TypeScript와 Ajax를 이용하여 list를 출력하는 프로그램을 만들어 보겠습니다. Happy coding 하세요.