코드 축소

컴퓨터 과학에서 코드 축소는 불필요한 요소를 제거하고 코드를 다시 작성하여 파일 크기를 줄이는 과정입니다. 일반적으로 웹 페이지 리소스, 예를 들어 HTML, CSS, JavaScript 파일에 적용합니다. 웹 리소스의 크기를 줄이면 파일을 더 빠르게 전송할 수 있으므로 웹 페이지가 더 빠르게 로드됩니다.

데이터를 축소하는 방법에는 여러 가지가 있습니다. 가장 기본적인 방법은 주석, 불필요한 공백, 줄 바꿈(개행 문자)을 제거하는 것입니다. 주석과 공백은 코드를 더 읽기 쉽게 만들어 주지만 웹 브라우저는 이를 무시합니다. 따라서 게시하기 전에 이러한 요소를 안전하게 제거할 수 있습니다. 또 다른 방법은 각 문에 필요한 코드를 최소화하는 것입니다. CSS에서는 긴 형식의 CSS를 축약형 CSS로 변환하여 이를 수행하는 경우가 많습니다. 예를 들어 margin 정의는 긴 형식으로 작성하면 7줄이 필요할 수 있지만 축약형으로 작성하면 한 줄만 필요할 수 있습니다. JavaScript에서는 긴 변수 이름을 더 짧은 이름으로 바꿀 수 있습니다흔히 단일 (문자로 바꿉니다).

다음은 축소하기 전과 후의 CSS 코드 예입니다. 주석, 공백, 줄 바꿈, 불필요한 세미콜론이 제거된 것을 확인할 수 있습니다. 코드도 긴 형식의 CSS에서 축약형으로 변환되었습니다.

표준 CSS 코드

img.left   /* float left 400px image */
{
    float: left;
    max-width: 400px;
    margin-top: 8px;
    margin-right: 30px;
    margin-bottom: 12px;
    margin-left: 0px;
}

축소된 CSS 코드

img.left{float:left;max-width:400px;margin:8px 30px 12px 0}

고급 코드 축소 알고리즘을 사용하면 파일 크기를 더욱 줄일 수 있습니다. 예를 들어 CSS 축소 도구는 CSS 파일에서 중복된 줄을 찾아 제거할 수 있습니다. 또한 비슷한 CSS 정의를 하나의 문으로 결합할 수도 있습니다. JS 축소 도구는 JavaScript 함수를 실제로 다시 작성하여 더 효율적으로 만들 수 있습니다.

코드를 축소해도 몇 킬로바이트만 절약되는 경우가 많습니다. 예를 들어 표준 CSS 파일의 크기가 50KB이고 축소된 버전의 크기가 40KB일 수 있습니다. 하지만 페이지 로드 속도를 개선할 때는 모든 킬로바이트가 중요합니다. 좋은 축소 도구의 목표는 코드가 구문 분석되거나 처리되는 방식에 전혀 영향을 주지 않으면서 파일 크기를 최대한 줄이는 것입니다. 어떤 축소 도구를 사용하든 개발자는 일반적으로 나중에 편집할 수 있도록 축소하지 않은 버전의 코드를 유지합니다.

코드 축소와 압축 비교

코드 축소와 파일 압축은 모두 파일 크기를 줄이지만 동일한 것은 아닙니다. 코드 축소는 단순히 텍스트를 변경하는 반면, 파일 압축은 파일 안의 이진 코드를 완전히 다시 작성합니다. 압축된 파일을 텍스트 파일로 읽으려면 파일 압축 해제 유틸리티로 압축을 해제해야 합니다. 많은 웹 사이트는 웹 리소스의 크기를 최대한 줄이기 위해 코드 축소와 "gzip" 파일 압축을 함께 사용합니다.