Gzip so với minify

Tôi đã có một cuộc thảo luận hơi sôi nổi vào ngày khác về việc giảm bớt Javascript và CSS so với ai đó thích sử dụng Gzip.

Tôi sẽ gọi người này là X.

X nói rằng Gzip đã sẵn sàng thu nhỏ mã, vì nó nén các tệp của bạn.

Tôi không đồng ý. Zip là một phương pháp lossless thu nhỏ fileize. Lossless có nghĩa là bản gốc phải được khôi phục hoàn hảo, nghĩa là thông tin phải được lưu trữ để có thể khôi phục các khoảng trắng, các ký tự không cần thiết, mã nhận xét và mọi thứ khác. Điều đó chiếm nhiều không gian hơn, vì nhiều hơn phải được nén.

Tôi không có phương pháp kiểm tra, nhưng tôi tin rằng Gzip của mã này:

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

Vẫn sẽ lớn hơn Gzip của mã này:

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

Có ai có thể chứng minh điều này đúng hay sai.
Và xin đừng đến nói "Điều đó đúng bởi vì đó là những gì tôi luôn sử dụng".

Tôi đang yêu cầu bằng chứng khoa học ở đây.

Rất đơn giản để kiểm tra. Tôi lấy js của bạn, đặt chúng vào các tệp khác nhau và chạy gzip -9 trên chúng. Đây là kết quả. Điều này đã được thực hiện trên máy WinXP chạy Cygwin và gzip 1.3.12.

-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

Đây là một thử nghiệm tiếp theo bằng cách sử dụng một ví dụ JS trong thế giới thực. Tệp nguồn là "common.js" Kích thước tệp gốc là 73134 byte. Tối thiểu hóa, nó đã đến 26 232 byte.

Tệp gốc:

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

Tập tin rút gọn:

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

Tệp gốc được nén với tùy chọn -9 (cùng phiên bản như trên):

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

Tập tin rút gọn được nén với tùy chọn -9 (cùng phiên bản như trên):

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

Như bạn có thể thấy, có một sự khác biệt nhất định giữa các phương pháp khác nhau. Đặt cược tốt nhất là cả minify cũng như gzip chúng.

Đây là kết quả của một thử nghiệm mà tôi đã thực hiện một thời gian trước, sử dụng tệp CSS "đời thực" từ trang web của tôi. Trình tối ưu hóa CSS được sử dụng để thu nhỏ. Ứng dụng lưu trữ Linux tiêu chuẩn đi kèm với Ubuntu đã được sử dụng cho Gzipping.

Ban đầu: 28.781 byte
được rút gọn: 22.242 byte
Gzipped: 6969 byte
Min + Gzip: 5990 byte

Ý kiến ​​cá nhân của tôi là đi Gzipping trước, vì điều đó rõ ràng tạo ra sự khác biệt lớn nhất. Đối với việc thu nhỏ, nó phụ thuộc vào cách bạn làm việc. Bạn sẽ phải giữ tệp CSS gốc để chỉnh sửa sâu hơn nữa. Nếu nó không làm phiền bạn để giảm thiểu nó sau mỗi thay đổi thì hãy tìm nó.

(Lưu ý: có các giải pháp khác, chẳng hạn như chạy nó thông qua một công cụ khai thác "theo yêu cầu" khi phục vụ tệp và lưu vào bộ đệm trong hệ thống tệp.)

Cảnh giác khi kiểm tra điều này: hai đoạn CSS đó rất nhỏ, vì vậy chúng không được hưởng lợi từ việc nén GZIP - chỉ riêng việc thêm tiêu đề và chân trang nhỏ của GZIP (khoảng 20 byte trên đầu) sẽ làm mất lợi nhuận. Trong thực tế, bạn sẽ không có một tệp CSS nhỏ này và quan tâm đến việc nén nó.

minify + gzip nén nhiều hơn chỉ gzip

Câu trả lời cho câu hỏi ban đầu là, vâng, minify + gzip sẽ thu được số lượng nén đáng kể hơn so với chỉ gzip. Điều này đúng với bất kỳ ví dụ không tầm thường nào (tức là bất kỳ mã JS hoặc CSS hữu ích nào lớn hơn vài trăm byte).

Để biết ví dụ về điều này có hiệu lực, lấy mã nguồn Jquery có sẵn được rút gọn và không nén, nén cả hai bằng gzip và xem xét.

Điều đáng chú ý là Javascript mang lại lợi ích rất nhiều từ việc thu nhỏ hơn so với CSS được tối ưu hóa tốt, nhưng vẫn có một lợi ích.

Lý do:

Nén GZIP là lossless. Điều này có nghĩa là nó phải lưu trữ tất cả văn bản, bao gồm cả khoảng trắng chính xác, nhận xét, tên biến dài, v.v. để chúng có thể được sao chép hoàn hảo sau này. Mặt khác, giảm thiểu là mất mát. Nếu bạn thu nhỏ mã của mình, bạn sẽ xóa nhiều thông tin này khỏi mã của mình, để lại ít GZIP cần lưu giữ.

• Giảm thiểu loại bỏ khoảng trắng không cần thiết, chỉ chừa khoảng trống khi cần thiết vì lý do cú pháp.
• Giảm thiểu loại bỏ ý kiến.
• Việc thu nhỏ mã có thể thay thế tên định danh bằng tên ngắn hơn trong đó sẽ không có tác dụng phụ.
• Việc thu nhỏ mã có thể làm cho 'tối ưu hóa trình biên dịch' tầm thường thành mã chỉ có thể thực hiện được bằng cách phân tích cú pháp mã
• Thu nhỏ CSS có thể loại bỏ các quy tắc dư thừa hoặc kết hợp các quy tắc có cùng bộ chọn.

Bạn đúng.

Nó không giống nhau để thu nhỏ hơn gzipping (chúng sẽ được gọi là giống nhau nếu đó là trường hợp). Ví dụ, nó không giống với gzip này:

var myIncrediblyLongNameForThisVariableThatDoesNothingButTakeUpSpace = null;

Hơn minify để kết thúc với một cái gì đó như:

var a = null;

Tất nhiên, tôi muốn nói rằng cách tiếp cận tốt nhất trong hầu hết các trường hợp là giảm thiểu FIRST sau đó là Gzip, thay vì chỉ thu nhỏ hoặc gzipping, mặc dù tùy thuộc vào mã đôi khi chỉ cần thu nhỏ hoặc gzipping sẽ cho bạn kết quả tốt hơn so với thực hiện cả hai.

Có một ngưỡng mà mã hóa gzip là lợi thế. Nguyên tắc chung là: tệp càng lớn, nén và gzip sẽ thắng càng tốt. Tất nhiên bạn có thể giảm thiểu đầu tiên sau đó gzip sau.

Nhưng nếu chúng ta đang nói về gzip so với minify trên một đoạn văn bản nhỏ dài không quá 100byte, thì một so sánh "khách quan" là không đáng tin cậy, thậm chí là vô nghĩa - trừ khi chúng ta đưa ra một văn bản cơ bản để thiết lập một phương tiện chuẩn cho điểm chuẩn, giống như kiểu Lorem Ipsum nhưng được viết bằng Javascript hoặc CSS.

Vì vậy, hãy để tôi đề xuất điểm chuẩn các phiên bản mới nhất của jQuery và MooTools (phiên bản không nén) bằng cách sử dụng Giảm thiểu không có chất béo (PHP) mã (chỉ đơn giản tước khoảng trắng và ý kiến, không rút ngắn của các biến, không Basex mã hóa)

Dưới đây là kết quả của minify so với gzip (ở mức nén 5 mức bảo thủ) so với 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%)

Trước khi bất cứ ai nhảy súng, đây không phải là một trận chiến của các thư viện JS.

Như bạn có thể thấy, minifying + gzipping cho phép bạn nén tốt hơn trên các tệp lớn . Giảm thiểu mã có lợi thế của nó, nhưng yếu tố chính là có bao nhiêu khoảng trắng và các bình luận có trong mã gốc. Trong trường hợp này, jQuery có nhiều hơn nên nó cho phép thu nhỏ tốt hơn (nhiều khoảng trắng hơn trong tài liệu nội tuyến). Điểm mạnh của nén Gzip là ở mức độ lặp lại trong nội dung. Vì vậy, nó không phải là về minify so với gzip. Họ làm những việc khác nhau. Và bạn có được điều tốt nhất của cả hai thế giới bằng cách sử dụng cả hai.

Tại sao không sử dụng cả hai?

Thật dễ dàng để kiểm tra: chỉ cần đặt văn bản của css của bạn vào các tệp văn bản và nén các tệp bằng cách sử dụng một trình lưu trữ như gzip trên linux.

Tôi vừa mới thực hiện điều này, và điều đó xảy ra với css đầu tiên, kích thước là 184 byte và đối với cái thứ hai là 162 byte.

Vì vậy, bạn đã đúng, khoảng trắng quan trọng ngay cả đối với các tệp được nén, nhưng như người ta có thể thấy từ thử nghiệm nhỏ này, đối với các tệp thực sự nhỏ, kích thước của tệp nén có thể lớn hơn kích thước của tệp gốc.

Điều này chỉ là do kích thước rất nhỏ của ví dụ của bạn, đối với các tệp lớn hơn, gzipping sẽ giúp bạn có được các tệp nhỏ hơn.

Tôi không thấy ai nhắc đến Mangling vì vậy tôi sẽ đăng kết quả của mình lên đó.

Dưới đây là một số số liệu tôi đã đưa ra bằng cách sử dụng UflifyJS để thu nhỏ và Gzip. Tôi đã có khoảng 20 tệp mà tôi ghép lại với nhau khoảng 2,5 MB với các bình luận và tất cả.

Tập tin concat 2,5 MB

uglify({
    mangle: false
})

Giảm thiểu mà không xáo trộn: 929kb

uglify({
    mangle: true
})

Thu nhỏ và thu thập: 617kb

Bây giờ nếu tôi lấy các tệp đó và gzip chúng, tôi sẽ nhận được lần lượt là 239kb và 190kb.

Có một phương pháp rất đơn giản để kiểm tra điều này: Tạo một tệp chỉ bao gồm khoảng trắng và một tệp khác thực sự trống. Sau đó, Gzip cả hai và so sánh kích thước của chúng. Các tập tin với khoảng trắng trong đó tất nhiên sẽ lớn hơn.

Tất nhiên, nén "mất con người" giữ nguyên bố cục hoặc một số thứ quan trọng khác và loại bỏ mọi thứ không cần thiết (khoảng trắng, bình luận, những thứ dư thừa, v.v.) sẽ tốt hơn so với nén gZip không mất dữ liệu.

Ví dụ, những thứ như nhãn hiệu hoặc tên hàm rất có thể sẽ có độ dài nhất định để mô tả ý nghĩa. Thay thế tên này bằng một ký tự dài sẽ tiết kiệm được nhiều dung lượng và không thể thực hiện được với nén không mất dữ liệu.

Nhân tiện, đối với CSS, có những công cụ như máy nén CSS sẽ làm công việc mất mát cho bạn.

Tuy nhiên, bạn sẽ nhận được kết quả tốt nhất khi kết hợp "tối ưu hóa tổn thất" và nén không mất dữ liệu.

tất nhiên bạn có thể kiểm tra - ghi tệp của bạn vào một tệp và gzip nó với zlib . Bạn cũng có thể thử với chương trình tiện ích "gzip".

trở lại câu hỏi của bạn - không có mối quan hệ nhất định giữa độ dài của nguồn và kết quả được nén. điểm quan trọng là 'entropy' (mỗi phần tử trong nguồn khác nhau như thế nào).

vì vậy, điều đó phụ thuộc vào nguồn của bạn như thế nào. ví dụ: rất nhiều khoảng trắng liên tục (ví dụ:> 1000) có thể được nén cùng kích thước với vài khoảng trống (ví dụ <10).

đây là kết quả khi gzip hai tập tin

bytes  File
45     min.txt
73     min.gz

72     normal.txt
81     normal.gz

Bạn đã đúng, minify + gzip cho kết quả ít byte hơn. Không có bằng chứng khoa học mặc dù.

Tại sao bạn không có phương pháp kiểm tra?

Giảm thiểu mã của bạn trong một tệp và để nó "chưa hoàn thành" trên một tệp khác. Tải lên một máy chủ web có khả năng gzip đầu ra (ví dụ mod_deflate cho Apache), cài đặt tiện ích mở rộng Fireorms cho firefox, xóa bộ nhớ cache của bạn và truy cập cả hai tệp. Tab "NET" của Fireorms sẽ chứa chính xác lượng dữ liệu được truyền, so sánh chúng và bạn có bằng chứng "thực nghiệm".