Javascript 코드를 축소하는 이유는?

JavaScript 최소화는 파일 크기를 줄임으로써 웹 페이지 성능을 향상할 수 있습니다.

학습 목표

이 글을 읽은 후에 다음을 할 수 있습니다:

  • JavaScript 최소화의 정의
  • 축소(uglification), 난독화, 암호화에 대해 알아보기

관련 콘텐츠


계속 알아보시겠어요?

인터넷에서 가장 인기 있는 인사이트를 한 달에 한 번 정리하는 Cloudflare의 월간 요약본 theNET를 구독하세요!

Cloudflare가 개인 데이터를 수집하고 처리하는 방법은 Cloudflare의 개인정보 취급방침을 참조하세요.

글 링크 복사

Cloudflare Pro 요금제 및 속도 도구 추가 기능으로 웹 사이트 성능 향상

JavaScript에서 최소화란?

minimization이라고도 하는 최소화는 JavaScript 소스 코드에서 기능을 변경하지 않고 불필요한 문자를 모두 제거하는 프로세스입니다. 여기에는 공백, 주석, 세미콜론 제거와 함께 더 짧은 변수 이름 및 함수 사용이 포함됩니다. JavaScript 코드를 최소화하면 파일 크기가 작아집니다.

예를 들어, 다음은 최소화 전후의 코드 블록입니다.

최소화 전: 코드 8줄

최소화 기능이 없는 JavaScript

최소화 후: 한 줄의 코드

최소화 기능이 있는 JavaScript

최소화는 웹 페이지 로딩 속도를 높여 웹 사이트 경험을 개선하여 방문자와 검색 엔진 모두 만족할 수 있도록 합니다.

최소화는 난독화, 압축, 암호화, 축소(uglification)와 어떻게 다를까요?

  • 축소(Uglification): 이는 본질적으로 최소화와 동일합니다.Uglify JS는 JavaScript 파일을 최소화하기 위한 JavaScript 라이브러리입니다.JavaScript 파일을 '못생기게 만드는 것(uglify)'은 Uglify를 사용하여 파일을 축소하는 것입니다.축소는 가독성을 높이는 동시에 성능을 개선합니다.
  • 암호화: 암호화는 일반 데이터라고 하는 데이터를 인코딩된 데이터로 변환하는 과정입니다.이렇게 암호화된, 즉 인코딩된 데이터를 암호 텍스트라고 하며, 암호를 해독하려면 비밀 키가 필요합니다.브라우저에서는 암호화된 코드를 실행할 수 없습니다.암호화는 보안 기능이며 암호화로 반드시 파일 크기가 줄어들지는 않습니다.
  • 난독화: 이 프로세스는 비즈니스 로직을 숨기기 위해 사용됩니다.코드가 수정되어 사람이 읽을 수 없게 됩니다.이 때문에 리버스 엔지니어링이 어렵습니다.난독화는 컴퓨터에서 여전히 코드를 이해하고 실행할 수 있다는 점에서 암호화와 다릅니다.난독화는 변수, 함수, 멤버의 이름을 변경하는 방식으로 이루어집니다.결과적으로 파일 크기가 줄어들면 성능도 향상되지만, 이것이 난독화의 주요 목표는 아닙니다.
  • 압축: 데이터 압축은 데이터를 표현하는 데 필요한 비트 수를 줄이는 프로세스입니다.데이터 압축을 하면 하드 드라이브의 소중한 공간을 확보하고 파일 전송 속도를 높이며 네트워크 대역폭에 대한 비용을 절감할 수 있습니다.Microsoft Word 파일과 같은 일부 파일은 원본 크기의 90%까지 압축될 수 있습니다.

개발자가 처음부터 최소화된 코드를 작성하지 않는 이유는?

압축은 압축 파일을 생성하므로 웹 성능 모범 사례에 해당합니다. 그렇다면 왜 최소화된 코드를 작성하지 않을까요?

JavaScript 코드는 코드를 이해하고 디버깅하기 위해 공백, 서식, 주석이 필요한 사람을 위해, 그리고 사람에 의해 작성됩니다. 코드가 작성된 후에는 성능 향상을 위해 최소화 소프트웨어를 사용할 수 있습니다. 이는 브라우저가 코드를 이해할 필요 없이 코드를 실행할 수 있기 때문입니다.

최소화의 단점은?

최소화하면 테마, 플러그인, 서버 환경 등의 사이트 종속 변수로 인해 복잡한 스크립트가 손상될 수 있습니다. 또한 최소화 작업은 다른 성능 조정과 함께 수행해야 합니다. 최소화는 그 자체로는 큰 이득을 얻지 못할 수도 있습니다. 최소화로 인해 디버깅하기 어려운 오류가 발생할 수도 있습니다.

이러한 단점에도 불구하고 일반적으로 잠재적인 성능 향상을 위해 최소화를 시도해 볼 가치가 있습니다. CSS를 최소화하는 방법도 알아보세요.