Gzip กับ minify

เมื่อวันก่อนฉันมีการสนทนาที่ค่อนข้างมีชีวิตชีวาเกี่ยวกับการย่อขนาด Javascript และ CSS กับคนที่ชอบใช้ Gzip

ฉันจะเรียกคนนี้ว่า X

X กล่าวว่า Gzip ลดขนาดโค้ดทั้งหมดแล้วเนื่องจากมันจะบีบอัดไฟล์

ฉันไม่เห็นด้วย. Zip เป็นวิธีการย่อขนาดไฟล์แบบไม่สูญเสีย Lossless หมายถึงต้องคืนค่าต้นฉบับอย่างสมบูรณ์ซึ่งหมายความว่าข้อมูลจะต้องถูกจัดเก็บเพื่อให้สามารถกู้คืนช่องว่างอักขระที่ไม่ต้องการโค้ดที่แสดงความคิดเห็นและอื่น ๆ ซึ่งใช้พื้นที่มากขึ้นเนื่องจากต้องบีบอัดมากขึ้น

ฉันไม่มีวิธีการทดสอบ แต่ฉันเชื่อว่า Gzip ของรหัสนี้:

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

จะยังคงใหญ่กว่า Gzip ของรหัสนี้:

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

มีใครพิสูจน์ได้ว่าถูกหรือผิด
และอย่ามาพูดว่า "ถูกต้องเพราะนั่นคือสิ่งที่ฉันใช้มาตลอด"

ฉันกำลังขอการพิสูจน์ทางวิทยาศาสตร์ที่นี่

ง่ายมากในการทดสอบ ฉันเอา js ของคุณใส่ไว้ในไฟล์ต่าง ๆ แล้วรัน gzip -9 กับมัน นี่คือผลลัพธ์ สิ่งนี้ทำได้บนเครื่อง WinXP ที่ใช้ Cygwin และ 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

นี่คือการทดสอบเพิ่มเติมโดยใช้ตัวอย่าง 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

ไฟล์ต้นฉบับ gzipped พร้อมตัวเลือก -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ใช้สำหรับการลดขนาด แอปเก็บถาวร Linux มาตรฐานที่มาพร้อมกับ Ubuntu ใช้สำหรับ Gzipping

ต้นฉบับ: 28,781ไบต์
Minified: 22,242 bytes
Gzipped: 6,969 bytes
Min + Gzip: 5,990ไบต์

ความคิดเห็นส่วนตัวของฉันคือไปที่ Gzipping ก่อนเนื่องจากเห็นได้ชัดว่าสร้างความแตกต่างที่ยิ่งใหญ่ที่สุด สำหรับการลดขนาดนั้นขึ้นอยู่กับวิธีการทำงานของคุณ คุณจะต้องเก็บไฟล์ CSS ดั้งเดิมไว้เพื่อทำการแก้ไขต่อไป หากไม่รบกวนคุณให้ย่อเล็กสุดหลังจากการเปลี่ยนแปลงทุกครั้งก็ไปได้เลย

(หมายเหตุ: มีวิธีแก้ปัญหาอื่น ๆ เช่นเรียกใช้ผ่านตัวย่อ "ตามต้องการ" เมื่อให้บริการไฟล์และแคชในระบบไฟล์)

ระวังเมื่อทดสอบสิ่งนี้: ตัวอย่าง CSS ทั้งสองนี้มีขนาดเล็กเล็กน้อยดังนั้นจึงไม่ได้รับประโยชน์จากการบีบอัด GZIP - การเพิ่มส่วนหัวและส่วนท้ายขนาดเล็กของ GZIP (ค่าใช้จ่ายประมาณ 20 ไบต์) เพียงอย่างเดียวจะสูญเสียกำไรที่ได้รับ ในความเป็นจริงคุณจะไม่มีไฟล์ CSS ขนาดเล็กและกังวลเกี่ยวกับการบีบอัดไฟล์

minify + gzip บีบอัดมากกว่า gzip

คำตอบของคำถามเดิมคือใช่ minify + gzip จะได้รับการบีบอัดมากกว่า gzip อย่างมีนัยสำคัญ นี่เป็นจริงสำหรับตัวอย่างที่ไม่สำคัญใด ๆ (เช่นโค้ด JS หรือ CSS ที่มีประโยชน์ซึ่งมีขนาดมากกว่าสองสามร้อยไบต์)

สำหรับตัวอย่างที่มีผลให้คว้าซอร์สโค้ด Jqueryซึ่งมีให้ย่อขนาดและไม่บีบอัดบีบอัดทั้งสองด้วย gzip แล้วดู

เป็นที่น่าสังเกตว่า Javascript ได้รับประโยชน์จากการย่อขนาดมากกว่า CSS ที่ปรับให้เหมาะสม แต่ก็ยังมีประโยชน์

เหตุผล:

การบีบอัด GZIP ไม่สูญเสีย ซึ่งหมายความว่าจะต้องจัดเก็บข้อความทั้งหมดรวมถึงช่องว่างความคิดเห็นชื่อตัวแปรแบบยาวและอื่น ๆ เพื่อให้สามารถทำซ้ำได้อย่างสมบูรณ์ในภายหลัง ในทางกลับกันการลดขนาดจะสูญเสีย หากคุณย่อขนาดโค้ดแสดงว่าคุณกำลังลบข้อมูลส่วนใหญ่ออกจากโค้ดของคุณทำให้ GZIP ต้องเก็บรักษาน้อยลง

• การลดขนาดจะทิ้งช่องว่างโดยไม่จำเป็นโดยเว้นช่องว่างไว้เฉพาะในกรณีที่จำเป็นเพื่อเหตุผลทางไวยากรณ์
• การลดขนาดจะลบความคิดเห็น
• การย่อรหัสอาจแทนที่ชื่อตัวระบุด้วยชื่อที่สั้นกว่าซึ่งจะไม่มีผลข้างเคียง
• การลดขนาดโค้ดอาจทำให้ 'การเพิ่มประสิทธิภาพคอมไพเลอร์' เป็นเรื่องเล็กน้อยสำหรับโค้ดซึ่งทำได้โดยการแยกวิเคราะห์โค้ดเท่านั้น
• การลดขนาด CSS อาจกำจัดกฎที่ซ้ำซ้อนหรือรวมกฎที่มีตัวเลือกเดียวกัน

คุณถูก.

การย่อขนาดเล็กกว่าการ gzipping ไม่เหมือนกัน (จะเรียกว่าเหมือนกันถ้าเป็นกรณีนั้น) ตัวอย่างเช่นการ gzip นี้ไม่เหมือนกัน:

var myIncrediblyLongNameForThisVariableThatDoesNothingButTakeUpSpace = null;

กว่าย่อขนาดเพื่อลงเอยด้วยสิ่งที่ชอบ:

var a = null;

แน่นอนฉันจะบอกว่าวิธีที่ดีที่สุดในกรณีส่วนใหญ่คือการย่อขนาด FIRST จากนั้นก็ Gzip ไม่ใช่แค่การย่อขนาดหรือ gzipping แม้ว่าบางครั้งการลดขนาดหรือ gzipping ขึ้นอยู่กับโค้ดจะให้ผลลัพธ์ที่ดีกว่าการทำทั้งสองอย่าง

มีเกณฑ์ที่การเข้ารหัส gzip เป็นประโยชน์ กฎทั่วไปคือยิ่งไฟล์มีขนาดใหญ่การบีบอัดและ gzip ก็จะยิ่งดีขึ้นเท่านั้น แน่นอนว่าคุณสามารถย่อขนาดก่อนจากนั้น gzip หลังจากนั้น

แต่ถ้าเรากำลังพูดถึง gzip เทียบกับย่อขนาดบนข้อความชิ้นเล็ก ๆ ที่มีความยาวไม่เกิน 100 ไบต์การเปรียบเทียบแบบ "วัตถุประสงค์" นั้นไม่น่าเชื่อถือแม้จะไม่มีจุดหมายก็ตามเว้นแต่เราจะออกมาพร้อมกับข้อความพื้นฐานสำหรับสร้างวิธีการเปรียบเทียบมาตรฐาน เช่น Lorem Ipsum-type แต่เขียนด้วย Javascript หรือ CSS

ดังนั้นให้ฉันเสนอให้เปรียบเทียบเวอร์ชันล่าสุดของ jQuery และ MooTools (เวอร์ชันที่ไม่มีการบีบอัด) โดยใช้โค้ดFat-Free Minify (PHP) ของฉัน(เพียงแค่ตัดช่องว่างและความคิดเห็นออกไปโดยไม่ทำให้ตัวแปรสั้นลงไม่มีการเข้ารหัส baseX)

นี่คือผลลัพธ์ของ 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 อยู่ที่การทำซ้ำในเนื้อหา ดังนั้นจึงไม่เกี่ยวกับ minify กับ gzip พวกเขาทำสิ่งที่แตกต่างกัน และคุณจะได้รับสิ่งที่ดีที่สุดจากทั้งสองโลกโดยใช้ทั้งสองอย่าง

ทำไมไม่ใช้ทั้งสองอย่าง?

ง่ายต่อการทดสอบ: เพียงแค่ใส่ข้อความ css ของคุณในไฟล์ข้อความและบีบอัดไฟล์โดยใช้ไฟล์เก็บถาวรเช่น gzip บน linux

ฉันเพิ่งทำสิ่งนี้และมันเกิดขึ้นสำหรับ css แรกขนาดคือ 184 ไบต์และสำหรับวินาทีที่ 162 ไบต์

ดังนั้นคุณพูดถูกพื้นที่สีขาวมีความสำคัญแม้กระทั่งสำหรับไฟล์ gzipped แต่อย่างที่เห็นได้จากการทดสอบเล็กน้อยนี้สำหรับไฟล์ที่มีขนาดเล็กมากขนาดของไฟล์บีบอัดอาจมากกว่าขนาดของไฟล์ต้นฉบับ

นี่เป็นเพียงเพราะขนาดตัวอย่างของคุณน้อยมากสำหรับไฟล์ขนาดใหญ่การบีบอัดไฟล์จะทำให้คุณได้ไฟล์ที่เล็กลง

ฉันไม่เห็นใครพูดถึง Mangling ดังนั้นฉันจึงโพสต์ผลการค้นหานั้น

นี่คือตัวเลขบางส่วนที่ฉันคิดโดยใช้ UflifyJS สำหรับการลดขนาดและ Gzip ฉันมีไฟล์ประมาณ 20 ไฟล์ที่ฉันเชื่อมต่อเข้าด้วยกันขนาดประมาณ 2.5MB พร้อมความคิดเห็นและทั้งหมด

ไฟล์ Concat 2.5MB

uglify({
    mangle: false
})

ลดขนาดโดยไม่ต้องบด: 929kb

uglify({
    mangle: true
})

ลดและแหลก: 617kb

ตอนนี้ถ้าฉันใช้ไฟล์เหล่านั้นและ gzip ฉันจะได้รับ 239kb และ 190kb ตามลำดับ

มีวิธีการทดสอบที่ง่ายมาก: สร้างไฟล์ที่ประกอบด้วยช่องว่างเท่านั้นและไฟล์อื่นที่ว่างเปล่าจริงๆ จากนั้น Gzip ทั้งสองและเปรียบเทียบขนาด ไฟล์ที่มีช่องว่างจะต้องใหญ่กว่าแน่นอน

แน่นอนว่าการบีบอัดแบบสูญเสีย "มนุษย์" ที่รักษาเค้าโครงหรือสิ่งสำคัญอื่น ๆ และลบขยะที่ไม่จำเป็น (ช่องว่างความคิดเห็นสิ่งที่ซ้ำซ้อน ฯลฯ ) จะดีกว่าการบีบอัด gZip แบบไม่สูญเสีย

ตัวอย่างเช่นเครื่องหมายหรือชื่อฟังก์ชันมักจะมีความยาวพอสมควรเพื่ออธิบายความหมาย การแทนที่ด้วยชื่อที่มีความยาวหนึ่งอักขระจะช่วยประหยัดพื้นที่ได้มากและไม่สามารถทำได้ด้วยการบีบอัดแบบไม่สูญเสีย

อย่างไรก็ตามสำหรับ CSS มีเครื่องมือเช่นคอมเพรสเซอร์ CSSที่จะช่วยคุณได้

อย่างไรก็ตามคุณจะได้ผลลัพธ์ที่ดีที่สุดเมื่อรวม "การเพิ่มประสิทธิภาพแบบสูญเสีย" และการบีบอัดแบบไม่สูญเสีย

แน่นอนคุณสามารถทดสอบ - เขียนของคุณลงในไฟล์และ gzip กับzlib คุณยังสามารถลองใช้โปรแกรมยูทิลิตี้ "gzip"

กลับไปที่คำถามของคุณ - ไม่มีความสัมพันธ์ที่ชัดเจนระหว่างความยาวของแหล่งที่มาและผลลัพธ์ที่บีบอัด ประเด็นสำคัญคือ 'เอนโทรปี' (แต่ละองค์ประกอบในแหล่งที่มาแตกต่างกันอย่างไร)

ดังนั้นขึ้นอยู่กับว่าแหล่งที่มาของคุณเป็นอย่างไร ตัวอย่างเช่นช่องว่างต่อเนื่องจำนวนมาก (เช่น> 1,000) อาจถูกบีบอัดให้มีขนาดเท่ากับช่องว่างน้อย (เช่น <10)

นี่คือผลลัพธ์เมื่อ gziping ทั้งสองไฟล์

bytes  File
45     min.txt
73     min.gz

72     normal.txt
81     normal.gz

คุณถูกต้อง minify + gzip ส่งผลให้ไบต์น้อยลง ไม่มีการพิสูจน์ทางวิทยาศาสตร์แม้ว่า

ทำไมคุณถึงไม่มีวิธีการทดสอบ?

ย่อขนาดรหัสของคุณในไฟล์เดียวและปล่อยให้ "ไม่มีการปิด" ไว้ในอีกไฟล์หนึ่ง อัปโหลดไปยังเว็บเซิร์ฟเวอร์ที่สามารถ gziping เอาต์พุตได้ (เช่น mod_deflate สำหรับ Apache) ติดตั้งส่วนขยาย Firebug สำหรับ firefox ล้างแคชและเข้าถึงทั้งสองไฟล์ แท็บ "NET" ของ Firebug จะมีจำนวนข้อมูลที่ถูกถ่ายโอนเปรียบเทียบข้อมูลเหล่านั้นและคุณมีหลักฐาน "เชิงประจักษ์"