압축하기 쉬운 JavaScript는 어떻게 작성합니까?

Question

내 개인 웹 사이트의 전선을 통해 보내야하는 Javascript 코드의 크기를 최소화하고 싶습니다. 더 잘 압축 할 코드를 작성하는 트릭이 있습니까? 나는 최소 화 과 gzip 모두에 대해 생각하고 있습니다.

짧은 변수 이름을 사용해야합니까? 또는 min-ification이 모든 인스턴스를 찾아 단축 할 수 있습니까? 아니면 gzip이 그들을 감지하고 전선을 압박하기 때문에 괜찮습니까? 함수의 경우 속성이있는 객체를 전달하는 것이 더 낫습니까? 또는 각 값에 대한 개별 매개 변수가 필요합니까? (매개 변수가 함수에 대해 항상 로컬이기 때문에 매개 변수가 짧아지면 안전하다고 상상할 수 있습니다.)

이 도구의 기능에 대한 이해가 매우 까다 롭지 만 필자는 어떻게해야합니까? 가능한 한 작게 압축하려면 자바 스크립트를 작성하십시오.

Answer 1

축소 도구를 사용하는 경우 변수에 짧은 이름을 사용할 필요가 없으므로 minifier가이를 처리합니다.

minifier는 개체 속성의 이름을 바꿀 수 없지만 매개 변수의 이름을 바꿀 것이기 때문에 minification의 관점에서 개체 속성 대신 개별 매개 변수를 사용하는 것이 좋습니다.

나는 Gzip 관점에서 더 압축 가능한 코드를 작성하는 방법에 대해 조언 할 자격이 있다고 느끼지 않지만보다 미세한 자바 스크립트 코드 작성에 대한 조언을 드릴 수 있습니다.

내 첫 번째 조언은 코드에서 좋아하는 minifier를 실행 한 다음 예쁜 인쇄 된 버전과 원래 코드를 비교하는 것입니다. 이렇게하면 minifier가 코드에서 어떤 변화를하는지 알 수 있습니다.

일반적으로 minifier는 변수 이름의 이름을 짧은 이름으로 변경하지만 객체 속성의 이름은 바꿀 수 없습니다.

그래서이를 방지 :

foo.bar.baz.A = 1; 
foo.bar.baz.B = 2; 
foo.bar.baz.C = 3; 

대신은, 이렇게 :

var shortcut = foo.bar.baz; 
shortcut.d = 1; 
shortcut.e = 2; 
shortcut.f = 3; 

minifier는 하나 개 또는 두 개의 문자 변수에 shortcut의 이름을 바꿉니다.

$div.css('background', 'blue'); // set BG 
$div.height(100);    // set height 
$div.fadeIn(200);    // show element 

를 대신 이렇게 :

또 다른 좋은 방법은 (당신이 jQuery를 사용하는 특별한 경우)

예를 들어 가능한 한 많은 method chaining을 사용하고,이를 방지

$('#my-div') 
    .css('background', 'blue') 
    .height(100) 
    .fadeIn(200); 

Answer 2

일부 결과에 대해서는 minification 및 gzipping을 사용해야합니다 (https://css-tricks.com/the-difference-between-minification-and-gzipping/ 참조). 클라이언트 측 캐싱을 사용하는 것도 고려해야합니다. 그러면 캐쉬 히트의 전선 비용을 없앨 수 있습니다. 응답에 여분의 http 헤더를 보내지 않았는지 확인하십시오.