ลดขนาด CSS

Demián Renzulli

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

กำลังโหลด CSS ที่ไม่ลดขนาด

ดูบล็อก CSS ต่อไปนี้

body {
  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
  margin: 2em;
}

/* all titles need to have the same font, color and background */
h1 {
  font-style: italic;
  color: #373fff;
  background-color: #000000;
}

h2 {
  font-style: italic;
  color: #373fff;
  background-color: #000000;
}

เนื้อหานี้อ่านง่าย และมีค่าใช้จ่ายในการสร้างไฟล์ขนาดใหญ่เกินความจำเป็น ดังนี้

• โดยจะใช้ช่องว่างเพื่อวัตถุประสงค์การเยื้องและมีความคิดเห็นที่เบราว์เซอร์ไม่สนใจ จึงจะนำออกได้
• องค์ประกอบ <h1> และ <h2> มีรูปแบบเดียวกัน: แทนที่จะประกาศแยกกัน: "h1 {...} h2 {...}" อาจแสดงเป็น "h1, h2{...}"
• background-color #000000 อาจแสดงเป็น #000 ได้

หลังจากทำการเปลี่ยนแปลงเหล่านี้ คุณจะได้รูปแบบเดียวกันในเวอร์ชันกะทัดรัดมากขึ้น

body{font-family:"Benton Sans","Helvetica Neue",helvetica,arial,sans-serif;margin:2em}h1,h2{font-style:italic;color:#373fff;background-color:#000}

คุณคงไม่อยากเขียน CSS แบบนั้น แต่คุณเขียน CSS ตามปกติและเพิ่มขั้นตอนการลดขนาดในกระบวนการสร้างได้ ในคู่มือนี้ คุณจะได้เรียนรู้วิธีดำเนินการโดยใช้เครื่องมือสร้างยอดนิยมอย่าง webpack

วัดระยะทาง

คุณจะใช้การลดขนาด CSS กับเว็บไซต์ที่ใช้ในคู่มืออื่นๆ ซึ่งก็คือ Fav Kitties เว็บไซต์เวอร์ชันนี้ใช้ไลบรารี CSS เจ๋งๆ อย่าง animate.css เพื่อแสดงภาพเคลื่อนไหวขององค์ประกอบต่างๆ ของหน้าเว็บเมื่อผู้ใช้โหวตให้แมว 😺

ในขั้นแรก คุณต้องเข้าใจว่าอะไรคือโอกาสที่จะเกิดขึ้นหลังจากลดขนาดไฟล์นี้

1. เปิดหน้าการวัด
2. ป้อน URL https://fav-kitties-animated.glitch.me แล้วคลิกเรียกใช้การตรวจสอบ
3. คลิกดูรายงาน
4. คลิกประสิทธิภาพ แล้วไปที่ส่วนโอกาส

รายงานที่ได้แสดงให้เห็นว่าไฟล์ animate.css สามารถบันทึกได้สูงสุด 16 KB ดังนี้

จากนั้นตรวจสอบเนื้อหาของ CSS โดยทำดังนี้

1. เปิดเว็บไซต์ Fav Kitties ใน Chrome (อาจใช้เวลาสักครู่เพื่อให้เซิร์ฟเวอร์ของ Glitch ตอบกลับในครั้งแรก)
2. กด "Control Shift J" (หรือ "Command Option J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
3. คลิกแท็บเครือข่าย
4. คลิกตัวกรอง CSS
5. เลือกช่องทำเครื่องหมายปิดใช้แคช
6. โหลดแอปซ้ำ

หน้าเว็บขอไฟล์ CSS 2 ไฟล์ซึ่งมีขนาด 1.9 KB และ 76.2 KB ตามลำดับ

1. คลิก animate.css
2. คลิกแท็บการตอบกลับเพื่อดูเนื้อหาของไฟล์

โปรดทราบว่าสไตล์ชีตมีอักขระสำหรับช่องว่างและการเยื้อง:

ถัดไป คุณจะต้องเพิ่มปลั๊กอิน Webpack บางอย่างในกระบวนการบิลด์เพื่อลดขนาดไฟล์เหล่านี้

การลดรูป CSS ด้วย Webpack

ก่อนที่จะเริ่มการเพิ่มประสิทธิภาพ ให้ทำความเข้าใจเกี่ยวกับวิธีการทำงานของกระบวนการสร้างเว็บไซต์ Fav Kitties ดังนี้

โดยค่าเริ่มต้น แพ็กเกจ JS ที่ได้ซึ่ง Webpack สร้างขึ้นจะประกอบด้วยเนื้อหาของไฟล์ CSS แบบแทรกในบรรทัด เนื่องจากเราต้องการเก็บไฟล์ CSS แยกกัน เราจึงใช้ปลั๊กอินเสริม 2 ปลั๊กอิน ได้แก่

• mini-css-extract-plugin จะแยกสไตล์ชีตแต่ละรายการออกเป็นไฟล์ของตัวเอง โดยเป็นหนึ่งในขั้นตอนหนึ่งของกระบวนการบิลด์
• webpack-fix-style-only-entries ซึ่งใช้เพื่อแก้ไขปัญหาใน Wepback 4 เพื่อหลีกเลี่ยงการสร้างไฟล์ JS เพิ่มเติมสำหรับไฟล์ CSS แต่ละไฟล์ที่แสดงอยู่ใน webpack-config.js

คุณจะต้องทำการเปลี่ยนแปลงบางอย่างในโปรเจ็กต์

1. เปิดโปรเจ็กต์ Fav Kitties ใน Glitch
2. หากต้องการดูแหล่งที่มา ให้กดดูแหล่งที่มา
3. คลิกรีมิกซ์เพื่อแก้ไขเพื่อทำให้โปรเจ็กต์แก้ไขได้
4. คลิกเทอร์มินัล (หมายเหตุ: หากปุ่มเทอร์มินัลไม่แสดง คุณอาจต้องใช้ตัวเลือกแบบเต็มหน้าจอ)

หากต้องการลดขนาด CSS ที่ได้ คุณจะต้องใช้ optimize-css-assets-webpack-plugin

1. ในคอนโซล Glitch ให้เรียกใช้ npm install --save-dev optimize-css-assets-webpack-plugin
2. เรียกใช้ refresh เพื่อให้การเปลี่ยนแปลงซิงค์กับเครื่องมือแก้ไขภาพแตก

จากนั้นกลับไปที่เครื่องมือแก้ไข Glitch เปิดไฟล์ webpack.config.js แล้วทำการแก้ไขต่อไปนี้

โหลดโมดูลที่จุดเริ่มต้นของไฟล์: js const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

จากนั้นส่งอินสแตนซ์ของปลั๊กอินไปยังอาร์เรย์ปลั๊กอิน ดังนี้ js plugins: [ new HtmlWebpackPlugin({template: "./src/index.html"}), new MiniCssExtractPlugin({filename: "[name].css"}), new FixStyleOnlyEntriesPlugin(), new OptimizeCSSAssetsPlugin({}) ] หลังจากทำการเปลี่ยนแปลงแล้ว ระบบจะทริกเกอร์การสร้างโปรเจ็กต์อีกครั้ง นี่คือลักษณะของผลลัพธ์ webpack.config.js

ถัดไป คุณจะตรวจสอบผลของการเพิ่มประสิทธิภาพนี้ด้วยเครื่องมือด้านประสิทธิภาพ

ยืนยัน

• หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกด เต็มหน้าจอ

ถ้าคุณหลงทางในขั้นตอนก่อนหน้า คุณสามารถคลิก ที่นี่เพื่อเปิด เวอร์ชันของไซต์

หากต้องการตรวจสอบขนาดและเนื้อหาของไฟล์ ให้ทำดังนี้

1. กด "Control Shift J" (หรือ "Command Option J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
2. คลิกแท็บเครือข่าย
3. คลิกตัวกรอง CSS
4. เลือกช่องทำเครื่องหมายปิดใช้แคช หากยังไม่ได้เลือกไว้
5. โหลดแอปซ้ำ

คุณสามารถตรวจสอบไฟล์เหล่านี้ และดูว่าเวอร์ชันใหม่ไม่มีช่องว่าง ทั้ง 2 ไฟล์มีขนาดเล็กลงมาก โดยเฉพาะ animate.css ที่ลดลงเหลือ ~26% จึงประหยัดพื้นที่ได้ ~20 KB!

ขั้นตอนสุดท้าย

1. เปิดหน้าการวัด
2. ป้อน URL ของเว็บไซต์ที่ได้รับการเพิ่มประสิทธิภาพ
3. คลิกดูรายงาน
4. คลิกประสิทธิภาพและหาส่วนโอกาส

รายงานไม่แสดง "Minify CSS" ว่า "โอกาส" อีกต่อไป และตอนนี้ได้ย้ายไปที่ "ผ่านการตรวจสอบแล้ว" ส่วน:

เนื่องจากไฟล์ CSS เป็นทรัพยากรที่บล็อกการแสดงผล หากคุณใช้การลดขนาดในเว็บไซต์ที่ใช้ไฟล์ CSS ขนาดใหญ่ คุณจะเห็นการปรับปรุงเกี่ยวกับเมตริกต่างๆ เช่น First Contentful Paint

ขั้นตอนถัดไปและทรัพยากร

ในคู่มือนี้ เราได้กล่าวถึงการลดขนาด CSS ด้วย Webpack แต่คุณก็สามารถใช้แนวทางเดียวกันนี้ได้ด้วยเครื่องมือสร้างอื่นๆ เช่น gulp-clean-css สำหรับ Gulp หรือ grunt-contrib-cssmin สำหรับ Grunt

การลดขนาดยังใช้ได้กับไฟล์ประเภทอื่นๆ อีกด้วย ดูข้อมูลเพิ่มเติมเกี่ยวกับเครื่องมือในการลดรูป JS และเทคนิคเสริมบางอย่าง เช่น การบีบอัด ได้ในคู่มือการลดและบีบอัดเพย์โหลดเครือข่าย