ลดขนาด 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 และเทคนิคเสริมบางอย่าง เช่น การบีบอัด ได้ในคู่มือการลดและบีบอัดเพย์โหลดเครือข่าย