•  03-07-2019
  •  | 
  •  

문제

나는 다른 날에 JavaScript와 CSS를 조정하는 것에 대해 GZIP를 선호하는 사람에 대해 다소 활발한 토론을했습니다.

이 사람 X라고 부를 게요.

X는 GZIP가 파일을 ZIP하기 때문에 코드를 최소화한다고 말했다.

나는 동의하지 않는다. 지퍼는 a입니다 무손실 파일 크기를 줄이는 방법. 무손실은 원본을 완벽하게 복원해야한다는 것을 의미합니다. 즉, 정보가 필요하지 않은 문자, 주석 코드 및 기타 모든 것을 복원 할 수 있도록 정보를 저장해야합니다. 더 많은 공간이 필요합니다. 더 많은 공간이 압축되어야하기 때문입니다.

테스트 방법은 없지만이 코드의 GZIP라고 생각합니다.

.a1 {
    background-color:#FFFFFF;
    padding: 40px 40px 40px 40px;
}

이 코드의 GZIP보다 여전히 더 클 것입니다.

.a1{body:background-color:#FFF;padding:40px}

이 옳고 그름을 증명할 수있는 사람이 있습니까?
그리고 "내가 항상 사용했기 때문에 옳습니다"라고 말하지 마십시오.

나는 여기에서 과학적 증거를 요구하고 있습니다.

도움이 되었습니까?

해결책

테스트하기가 매우 간단합니다. 나는 당신의 JS를 가져 와서 다른 파일에 넣고 GZIP -9를 달렸습니다. 결과는 다음과 같습니다. 이것은 Cygwin 및 GZIP 1.3.12를 실행하는 WinXP 기계에서 이루어졌습니다.

-rwx------  1 xxxxxxxx mkgroup-l-d     88 Apr 30 09:17 expanded.js.gz

-rwx------  1 xxxxxxxx mkgroup-l-d     81 Apr 30 09:18 minified.js.gz

다음은 실제 JS 예제를 사용한 추가 테스트입니다. 소스 파일은 "common.js"입니다. 원래 파일 크기는 73134 바이트입니다. 최소화 된 바이트는 26232 바이트로 나왔습니다.

원본 파일 :

-rwxrwxrwx 1 xxxxxxxx mkgroup-l-d 73134 Apr 13 11:41 common.js

미니딩 파일 :

-rwxr-xr-x 1 xxxxxxxx mkgroup-l-d 26232 Apr 30 10:39 common-min.js

-9 옵션 (위와 동일한 버전)이있는 원본 파일 : :

-rwxrwxrwx 1 xxxxxxxx mkgroup-l-d 12402 Apr 13 11:41 common.js.gz

-9 옵션 (위와 동일한 버전)이있는 미니딩 파일 : :

-rwxr-xr-x 1 xxxxxxxx mkgroup-l-d  5608 Apr 30 10:39 common-min.js.gz

보시다시피, 다양한 방법 사이에는 확실한 차이가 있습니다. 가장 좋은 방법은 gzip뿐만 아니라 미량화하는 것입니다.

다른 팁

다음은 웹 사이트의 "실제"CSS 파일을 사용하여 잠시 거슬러 올라간 테스트 결과입니다. CSS 최적화기 미니 화에 사용됩니다. Ubuntu와 함께 제공되는 표준 Linux 아카이브 앱은 Gzipping에 사용되었습니다.

원래의: 28,781 바이트
미수 : 22,242 바이트
gzipped : 6,969 바이트
Min+Gzip : 5,990 바이트

저의 개인적인 의견은 먼저 Gzipping을 위해가는 것입니다. 왜냐하면 그것은 가장 큰 차이를 만들기 때문입니다. 미니 화에 관해서는, 그것은 당신이 일하는 방식에 달려 있습니다. 더 많은 편집을 위해 원래 CSS 파일을 유지해야합니다. 모든 변화 후에 그것을 미치는 것이 귀찮게하지 않으면 그것을 위해 가십시오.

(참고 : 파일을 제공 할 때 미니 파이어 "주문형"을 통해 실행하고 파일 시스템에 캐싱하는 것과 같은 다른 솔루션이 있습니다.)

이 테스트 할 때 조심하십시오. CS의 두 스 니펫이 사소하게 작기 때문에 GZIP 압축의 혜택을 얻지 못합니다. GZIP의 작은 헤더 만 추가하면 이익을 잃게됩니다. 실제로 CSS 파일이 작고 압축에 대해 걱정하지 않을 것입니다.

+GZIP를 최소화하면 GZIP 이상의 압축을 압축합니다

원래 질문에 대한 답은 예, Minify + GZIP는 단지 GZIP보다 많은 압축을 얻는다는 것입니다. 이는 사소한 예제 (즉, 수백 바이트 이상의 유용한 JS 또는 CSS 코드)에 해당됩니다.

사실상의 예를 위해서는 jQuery 소스 코드를 잡습니다 이용 가능하고 압축되지 않은 이용 가능하며 GZIP로 압축하고 살펴보십시오.

JavaScript는 잘 최적화 된 CS보다 미니 화에서 더 많은 혜택을 받는다는 점은 주목할 가치가 있지만 여전히 혜택이 있습니다.

추리:

GZIP 압축은 무손실입니다. 즉, 정확한 공백, 주석, 긴 변수 이름 등을 포함한 모든 텍스트를 저장해야하므로 나중에 완벽하게 재현 할 수 있습니다. 반면에, 미니는 손실입니다. 코드를 최소화하면 코드 에서이 정보의 많은 부분을 제거하여 GZIP가 보존 해야하는 것보다 적습니다.

  • 미니 화는 불필요하게 공백을 폐기하여 구문 적 이유로 필요한 경우에만 공간을 남겨 둡니다.
  • 미니는 의견을 제거합니다.
  • 코드 미니 화는 부작용이없는 곳의 이름으로 식별자 이름을 대체 할 수 있습니다.
  • 코드 미니 화는 실제로 코드를 구문 분석하여 가능한 코드에 대한 사소한 '컴파일러 최적화'를 만들 수 있습니다.
  • CSS 미니 화는 중복 규칙을 제거하거나 동일한 선택기를 갖는 규칙을 결합 할 수 있습니다.

네가 옳아.

gzipping보다 미용하는 것은 동일하지 않습니다 (그렇다면 동일하게 불립니다). 예를 들어, gzip과 동일하지 않습니다.

var myIncrediblyLongNameForThisVariableThatDoesNothingButTakeUpSpace = null;

다음과 같은 것으로 끝나는 것보다 :

var a = null;

물론, 코드에 따라 단지 소지하거나 Gzipping이 두 가지를 수행하는 것보다 더 나은 결과를 제공 할 수 있지만, 대부분의 경우 GZIP를 최우선으로 수행하는 것보다 먼저 GZIP를 조정하는 것이 가장 좋은 접근법이라고 말하고 싶습니다.

Gzip-Encoding이 유리한 임계 값이 있습니다. 일반적인 규칙은 파일이 클수록 압축 및 GZIP가 더 잘 이길 것입니다. 물론 먼저 GZIP를 이행 할 수 있습니다.

그러나 우리가 GZIP에 대해 이야기하고 있다면, 100 바보 이하의 작은 텍스트에서 미니에 대해 이야기한다면, "객관적인"비교는 신뢰할 수 없으며, 벤치마킹의 표준 벤치 마킹 수단을 설정하기위한 기준 텍스트를 나오지 않는 한, 심지어 무의미합니다. Lorem ipsum 유형처럼 JavaScript 또는 CSS로 작성되었습니다.

따라서 내 최신 버전의 jQuery 및 mootools (비 압축 버전)를 사용하여 지방이없는 미니 (PHP) 코드 (평범한 스트리핑 공백 및 댓글, 변수 단축 없음, Basex-Encoding 없음)

다음은 Minify vs. GZIP (보수적 수준 -5 압축) 대 Minify+GZIP의 결과입니다.

MooTools-Core
-------------
Baseline 102,991 bytes
Minified 79,414 (77.1% of original)
Gzipped 27,406 (26.6%)
Minified+Gzipped 22,446 (21.8%)

jQuery
------
Baseline 170,095
Minified 99,735 (58.6% of original)
Gzipped 46,501 (27.3%)
Minified+Gzipped 27,938 (16.4%)

누군가가 총을 뛰어 넘기 전에 이것은 JS 도서관의 전투가 아닙니다.

보시다시피,+gzipping을 조정하면 더 나은 압축이 가능합니다. 큰 파일에서. 코드를 조정하는 데는 장점이 있지만 주요 요인은 원래 코드에 공백과 주석이 얼마나 많은지입니다. 이 경우 jQuery는 더 많은 미니 화를 제공합니다 (인라인 문서에서 훨씬 더 많은 공백). GZIP 압축의 강점은 내용에 얼마나 많은 반복이 있는지에 있습니다. 따라서 GZIP를 미니에 관한 것이 아닙니다. 그들은 다르게 일을합니다. 그리고 당신은 두 가지를 모두 사용하여 두 세계를 최대한 활용합니다.

왜 둘 다 사용하지 않습니까?

테스트하기 쉽습니다. CSS의 텍스트를 텍스트 파일에 넣고 Linux의 GZIP와 같은 아카이버를 사용하여 파일을 압축하십시오.

방금이 작업을 수행했으며 첫 번째 CSS의 경우 크기가 184 바이트이고 두 번째 162 바이트에 대해 발생합니다.

따라서, 당신이 옳고, 화이트 스페이스는 gzipped 파일의 경우에도 중요하지만,이 작은 테스트에서 볼 수 있듯이, 실제로 작은 파일에 대해서는 압축 파일의 크기가 원본 파일의 크기보다 클 수 있습니다.

이것은 예제의 크기가 적기 때문입니다. 더 큰 파일의 경우 Gzipping은 더 작은 파일을 얻을 수 있습니다.

나는 아무도 Mangling을 언급하는 것을 보지 못했기 때문에 결과를 게시하고 있습니다.

다음은 Uflifyjs를 사용하여 미니 화 및 GZIP를 사용하여 생각해 낸 몇 가지 수치입니다. 나는 약 2.5MB에서 댓글과 함께 연결 한 약 20 개의 파일을 가지고있었습니다.

연결 파일 2.5MB

uglify({
    mangle: false
})

망설없이 미니 팅 : 929KB

uglify({
    mangle: true
})

조정 및 엉망인 : 617KB

이제 해당 파일을 가져 와서 gzip하면 각각 239kb와 190kb를 얻게됩니다.

이것을 테스트하는 매우 간단한 방법이 있습니다. 그런 다음 둘 다 gzip하고 크기를 비교하십시오. 공백이있는 파일은 물론 더 클 것입니다.

물론 레이아웃이나 다른 중요한 것들을 보존하고 필요하지 않은 쓰레기를 제거하는 "인간"손실 압축 압축 (공백, 주석, 중복 등)은 무손실 GZIP 압축보다 낫습니다.

예를 들어, 마크 또는 함수 이름과 같은 것은 의미를 설명하는 데 특정 길이 일 가능성이 높습니다. 이것을 한 캐릭터의 이름으로 대체하면 많은 공간을 절약 할 수 있으며 무손실 압축으로 불가능합니다.

그건 그렇고, CSS의 경우와 같은 도구가 있습니다. CSS 압축기 그것은 당신을 위해 잃어버린 일을 할 것입니다.

그러나 "손실 최적화"와 무손실 압축을 결합 할 때 최상의 결과를 얻을 수 있습니다.

물론 당신은 테스트 할 수 있습니다 - 파일에 작성하여 gzip zlib. "GZIP"유틸리티 프로그램으로 시도 할 수도 있습니다.

귀하의 질문으로 돌아 가기 - 소스 길이와 압축 결과 사이에는 명확한 관계가 없습니다. 핵심 요점은 '엔트로피'입니다 (소스의 각 요소는 얼마나 다른가).

그래서 그것은 당신의 소스의 방식에 달려 있습니다. 예를 들어, 많은 연속 공간 (Ex,> 1000)은 공간이 거의 없다 (Ex, <10)과 동일한 크기로 압축 될 수있다.

이것은 두 파일을 Gziping 할 때의 결과입니다

bytes  File
45     min.txt
73     min.gz

72     normal.txt
81     normal.gz

당신이 맞습니다, 미니+gzip 결과는 적은 바이트를 얻습니다. 그래도 과학적 증거는 없습니다.

어떻게 테스트 방법이 없습니까?

한 파일로 코드를 미확인하고 다른 파일에 "미확인"상태로 남겨 두십시오. 출력 (예 : Apache 용 Mod_deflate, Apache 용 Mod_deflate)을 Gziping 할 수있는 웹 서버에 업로드하고 Firefox 용 Firebug Extension을 설치하고 캐시를 지우고 두 파일에 액세스하십시오. FireBug의 "NET"탭에는 전송 된 정확한 양의 데이터 양이 포함되어 있으며이를 비교하며 "경험적"증거가 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top