[CS] CDN과 패키지 URL

CDN(Content Delivery Network)이란

여러 개의 분산된 서버를 통해 사용자와 가까운 서버에서 파일을 제공하여 빠르게 로드할 수 있도록 하는 시스템으로, 대표적인 CDN 제공업체에는 jsDelivr, Google CDN, Cloudflare CDN이 있다.

jQuery, React, Bootstrap 등 대형 라이브러리는 CDN을 통해 공식적으로 배포되기도 한다.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

unpkg란

npm 패키지를 웹에서 직접 불러올 수 있도록 도와주는 공개 CDN 서비스로, npm과 연결되어 있어 최신 버전의 패키지를 쉽게 가져올 수 있다,

• 최신 버전: https://unpkg.com/react
• 특정 버전: https://unpkg.com/react@18.2.0
• 특정 파일: https://unpkg.com/react@18/umd/react.production.min.js

패키지를 로드하다보면 min이 들어간 URL과 그렇지 않은 URL을 볼 수 있다.

<script src="https://unpkg.com/prop-types@15.8.1/prop-types.js"></script>
<script src="https://unpkg.com/prop-types@15.8.1/prop-types.min.js"></script>

차이는 압축 여부인데 prop-types.js는 비압축 버전, prop-types.min.js는 압축 버전인 것이다.
비압축 버전의 경우, 읽기 쉬운 코드를 포함하고 있어 디버깅에 유용하기 때문에 개발 환경에서 사용하기에 적합하다. 대신 파일 크기가 크고, 네트워크 로딩 속도고 느릴 수 있다.
압축 버전은 공백, 주석 등 불필요한 코드를 제거하여 파일 크기를 줄인 것으로 로딩 속도가 빠르고 운영 환경에서 사용하기 적합하다.

브라우저에서 unpkg를 통해 특정 패키지를 요청하면 압축된 버전(.min.js)이 있는 경우 이를 반환할 가능성이 크다. 즉, 위 두 개의 URL이 동일한 결과를 반환할 수도 있는 것이다. 따라서 운영 환경에서는 명확하게 .min.js를 지정해서 파일 크기를 줄이고 로딩 속도를 빠르게 하는 것을 보장하는 것이 좋다.