JavaScript 압축기: JS를 축소하는 방법과 이유

우리는 모두 거기에 있었고 당신은 배웠습니다 멋진 웹사이트를 만드는 방법 하지만 일단 게시하면 참을 수 없을 정도로 느립니다.

자바스크립트를 최소화하는 것은 웹사이트 응답 시간을 단축하는 한 가지 방법입니다. HTML 압축 ), 다행히도 이것은 쉬운 과정입니다. 오늘은 여러분이 알아야 할 모든 것을 보여드리겠습니다.

축소는 무엇을 의미합니까?

의 과정 축소 (또는 축소 )는 단순한 개념이다. JavaScript나 다른 언어로 코드를 작성할 때 코드를 인간이 더 쉽게 이해할 수 있도록 하는 데만 필요한 많은 기능이 있습니다. 예를 들어.

코드를 축소하면 파일 크기를 크게 줄일 수 있습니다. 따라서 파일이 작을수록 사용자가 더 빨리 다운로드할 수 있습니다. JavaScript를 한두 줄만 작성한다면 눈에 띄는 개선이 없을 것입니다. 그러나 많은 양의 코드를 작성하거나 jQuery와 같은 대규모 라이브러리를 사용하는 경우 눈에 띄는 성능 향상과 대폭 축소된 파일 크기를 쉽게 달성할 수 있습니다!

다음과 같은 외부 CDN에서 코드를 로드하는 경우 Google 호스팅 라이브러리 , 축소된 코드를 사용했습니다.

페이스 북에서 익명으로하는 방법

축소된 코드는 어떻게 생겼습니까?

몇 가지 예를 살펴보겠습니다. 축소가 작은 코드 기반에 미치는 영향을 확인하기 어렵기 때문에 길이가 긴 점에 대해 미리 사과드립니다.

여기 몇 가지가 있습니다. 축소되지 않은 Python 및 JavaScript에서 JSON 사용에 대한 가이드의 JavaScript:

// setup some JSON to use  
var cars = [  
 { 'make':'Porsche', 'model':'911S' },  
 { 'make':'Mercedes-Benz', 'model':'220SE' },  
 { 'make':'Jaguar','model': 'Mark VII' }  
];  
window.onload = function() {  
 // setup the button click  
 document.getElementById('theButton').onclick = function() {  
 doWork()  
 };  
}  
function doWork() {  
 // ajax the JSON to the server  
 $.post('receiver', cars, function(){  
 });  
 // stop link reloading the page  
 event.preventDefault();  
}

다음은 축소된 코드입니다.

function doWork(){$.post('receiver',cars,function(){}),event.preventDefault()}var cars=[{make:'Porsche',model:'911S'},{make:'Mercedes-Benz',model:'220SE'},{make:'Jaguar',model:'Mark VII'}];window.onload=function(){document.getElementById('theButton').onclick=function(){doWork()}};

이 축소된 버전의 코드는 39% 더 작은. 이 예에서 변수 이름은 동일하게 유지되지만 모든 공백과 주석이 제거되었습니다.

다음은 jQuery 가이드의 또 다른 예입니다.

// dfd == deferred  
var dfd = $.Deferred();  
function doThing() {  
 $.get('some/slow/url', function() {  
 dfd.resolve();  
 });  
 return dfd.promise();  
}  
$.when(doThing()).then(function(){  
 console.log('YAY, it is finished');  
});

다음은 축소된 코드입니다.

function doThing(){return $.get('some/slow/url',function(){dfd.resolve()}),dfd.promise()}var dfd=$.Deferred();$.when(doThing()).then(function(){console.log('YAY, it is finished')});

이번에는 뿐이었다. 26퍼센트 축소 -- 이러한 사소한 코드 블록에는 여전히 매우 좋습니다.

다음은 Javascript 및 DOM 가이드의 마지막 예입니다.

//declare a new variable to hold a new h1 element  
var newHeading = document.createElement('h1');  
//add the text node to the document  
var h1Text = document.createTextNode('Heading Level 1');  
//make it a child node of the new heading  
newHeading.appendChild(h1Text);  
//append this as a child of element defined as 'bt'  
document.getElementById('bt').appendChild(newHeading);

어떻게 있는지 주목 많이 주석 및 공백. 축소 버전은 다음과 같이 파일 크기를 줄였습니다. 52% :

한 계정으로 Netflix를 몇 대의 기기에서 볼 수 있나요

var newHeading=document.createElement('h1'),h1Text=document.createTextNode('Heading Level 1');newHeading.appendChild(h1Text),document.getElementById('bt').appendChild(newHeading);

다음은 축소 버전과 비교한 일부 일반적인 JavaScript 라이브러리의 크기입니다.

하이차트: 1MB > 201KB
제이쿼리: 270KB > 90KB
무도구: 164KB > 93KB

이러한 라이브러리 중 일부는 압축 시 상당한 크기 감소를 보여줍니다( ~80% ), 다른 사람들은 그다지 좋지 않습니다( ~40% ). 즉, 절약하면 사용자의 웹 사이트가 더 빨라지고 웹 서버의 부담이 줄어듭니다.

어떻게 축소합니까?

이제 어떻게 작동하고 어떻게 생겼는지 알았으니 수행 방법에 대해 알아보겠습니다. 걱정하지 마십시오. 코드를 수동으로 수정할 필요가 전혀 없습니다! 프로세스를 처리하는 다양한 도구를 무료로 사용할 수 있습니다.

이들은 여러 가지 방식으로 작동합니다. 대부분의 온라인 도구를 사용하면 코드를 복사하여 붙여넣을 수 있습니다. 그러면 코드가 처리되어 페이지에 표시됩니다. 이러한 도구를 사용하면 여러 파일을 업로드할 수도 있습니다.

다음은 온라인 도구에 대한 간략한 요약입니다. 그들은 대부분 동일하게 작동하므로 어느 것을 선택할지 너무 걱정할 필요가 없습니다.

JS압축 -- 저는 개인적으로 이 웹사이트가 빠른 작업이라면 가장 많이 사용합니다. 실행이 빠르고 빌드에 사용한 도구도 보여줍니다.

자바스크립트 축소기 -- 이 도구는 잘 작동하지만 API로서 정말 빛을 발합니다. 이를 통해 기존 웹 사이트 위에 자체 통합 또는 서비스를 구축할 수 있습니다.

JavaScript Minifier -- 같은 이름을 가진 또 다른 웹사이트인 이 도구는 간단합니다. 옵션이나 메뉴가 없고 버튼 하나만 있습니다.

작게 하다 -- 이 웹사이트는 훌륭해 보이고 개발자들은 여기의 세부 사항에 분명히 주의를 기울였습니다.

이 목록은 영원히 계속될 수 있습니다. 웹 사이트를 축소하는 온라인 도구가 너무 많아서 잘못되기가 어렵습니다.

축소 도구는 명령줄 도구 또는 플러그인으로도 존재합니다. 자바스크립트 편집기 . 이러한 도구는 사용하기가 훨씬 빠르고 기존 코드에서 '그냥 작동'하는 경우가 많습니다. 복사하여 붙여넣을 필요가 없으며 동일한 파일에 있을 수 있는 HTML 또는 CSS에서 JavaScript를 추출할 필요도 없습니다.

Microsoft Visual Studio를 사용하는 경우 번들러 및 축소자 마켓플레이스의 확장 기능은 600,000개 이상의 설치를 보유하고 있습니다! 뿐만 아니라 정기적으로 업데이트되고 GitHub에서 사용 가능 .

당신이 팬이라면 숭고한 텍스트 나처럼 그럼 작게 하다 패키지는 원하는 패키지입니다. 61,000개 이상의 설치가 있는 이 패키지는 매우 인기 있는 패키지입니다. GitHub에서 사용 가능 , 오픈 소스 프로젝트에 기여하고 싶다면.

마지막으로, 만약 당신이 파이참 사용자, 당신은 할 수 있습니다 통합하도록 구성 다음과 같은 많은 일반적인 압축 도구를 사용하여 직접 유이 압축기 . 이러한 도구 중 다수는 위에 나열된 온라인 도구를 직접적으로 구동합니다.

주의 사항

거기 가지다 잡힐 권리? 어떤 것도 완벽할 수 없습니다. 네, 한 가지 문제가 있습니다. 하지만 이는 매우 사소하고 쉽게 해결할 수 있습니다.

축소된 코드는 원래 상태로 복원할 수 없습니다.

코드를 축소하면 원래 형식이 손실됩니다. 큰 변경을 쉽게 하고 싶다면 그것의 사본을 보관해야 합니다. 버전 제어를 사용하는 것만으로는 충분하지 않습니다.

가능한 동안 축소 해제 당신의 코드, 그것은 다시 완전히 동일하지 않습니다. 귀하의 소중한 의견은 모두 손실됩니다.

이것은 큰 문제는 아니지만 코딩할 때 염두에 두어야 합니다. 기본 원칙으로, 압축되지 않은 > 개발 및 압축 > 생산.

이제 JavaScript 축소에 대해 알아야 할 모든 것을 알게 되었습니다! 코드 축소는 서버에서 성능을 끌어내는 방법 중 하나이며 모든 대형 웹 사이트에서 수행하고 있습니다.

코드를 축소하기 위해 어떤 도구를 사용합니까? 귀찮아도 합니까? 아래 의견에 알려주십시오!

키보드에서 Windows 버튼이 작동하지 않음

이미지 크레디트: Shutterstock을 통한 NavinTar

공유하다 공유하다 트위터 이메일 디스크 공간을 확보하려면 이러한 Windows 파일 및 폴더를 삭제하십시오.

Windows 컴퓨터에서 디스크 공간을 비워야 합니까? 다음은 디스크 공간을 확보하기 위해 안전하게 삭제할 수 있는 Windows 파일 및 폴더입니다.

다음 읽기 관련 항목

프로그램 작성
자바스크립트
자바
웹 디자인

저자 소개 조 코번(136건의 기사 게재)

Joe는 영국 링컨 대학교에서 컴퓨터 공학을 전공했습니다. 그는 전문 소프트웨어 개발자이며 드론을 날리거나 작곡을 하지 않을 때 종종 사진을 찍거나 동영상을 제작하는 모습을 볼 수 있습니다.

조 코번이 참여한 작품 더보기

뉴스레터 구독

뉴스레터에 가입하여 기술 팁, 리뷰, 무료 전자책 및 독점 거래를 확인하십시오!

구독하려면 여기를 클릭하세요.