การใช้งาน PurgeCSS อย่างละเอียดเพื่อลดขนาดไฟล์

Tailwind CSS เป็น framework ที่ยอดเยี่ยม แต่ข้อเสียอย่างหนึ่งคือขนาดไฟล์ CSS ที่ค่อนข้างใหญ่ โดยเฉพาะอย่างยิ่งเมื่อใช้งานใน production environment เนื่องจาก Tailwind CSS มี utility classes จำนวนมาก ซึ่งส่วนใหญ่ไม่ได้ถูกใช้งานจริงในโปรเจ็กต์ของเรา ดังนั้นการใช้ PurgeCSS จึงเป็นสิ่งจำเป็นอย่างยิ่งในการลดขนาดไฟล์ CSS ให้เล็กลง เพื่อปรับปรุงประสิทธิภาพการโหลดหน้าเว็บ

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

การตั้งค่า `content` paths

การตั้งค่า content paths ถือเป็นหัวใจสำคัญของการใช้งาน PurgeCSS อย่างถูกต้องและมีประสิทธิภาพ content paths คือรายการของไฟล์ที่ PurgeCSS จะทำการวิเคราะห์เพื่อหา CSS classes ที่ถูกใช้งาน หาก content paths ไม่ถูกต้อง PurgeCSS อาจจะลบ CSS rules ที่จำเป็นต่อการทำงานของเว็บไซต์ออกไปได้

โดยทั่วไปแล้ว content paths จะประกอบไปด้วยไฟล์ HTML, JavaScript, Vue, React หรือไฟล์อื่นๆ ที่มีการใช้ CSS classes ของ Tailwind CSS ตัวอย่างการตั้งค่า content paths ใน tailwind.config.js:

module.exports = {
  content: [
    './src/**/*.{html,js,jsx,ts,tsx,vue}',
    './public/**/*.html',
    './components/**/*.{js,vue}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

ในตัวอย่างนี้ PurgeCSS จะทำการวิเคราะห์ไฟล์ทั้งหมดที่อยู่ใน directories src, public, และ components ที่มีนามสกุล .html, .js, .jsx, .ts, .tsx, และ .vue เพื่อหา CSS classes ที่ถูกใช้งาน

เหตุผลเชิงออกแบบ: การระบุ content paths ที่ถูกต้องเป็นเรื่องสำคัญมาก หากคุณระบุ path ที่ไม่ครอบคลุม PurgeCSS จะไม่สามารถตรวจจับ CSS classes ที่ถูกใช้งานในไฟล์เหล่านั้นได้ และอาจจะลบ CSS rules ที่จำเป็นออกไป ทำให้เว็บไซต์แสดงผลผิดพลาด ในทางกลับกัน หากคุณระบุ path ที่กว้างเกินไป PurgeCSS อาจจะใช้เวลานานในการวิเคราะห์ไฟล์ทั้งหมด

แนวปฏิบัติที่ดี:

เริ่มต้นด้วยการระบุ content paths ที่จำเป็นที่สุดก่อน แล้วค่อยๆ เพิ่ม paths อื่นๆ เข้าไป
ใช้ glob patterns (เช่น **/*.html) เพื่อระบุไฟล์ทั้งหมดที่อยู่ใน directory และ subdirectories
ทดสอบเว็บไซต์อย่างละเอียดหลังจากที่รัน PurgeCSS เพื่อให้แน่ใจว่าไม่มี CSS rules ที่ถูกลบออกไปโดยไม่ตั้งใจ

การ `whitelist` classes

ในบางกรณี อาจมี CSS classes ที่ถูกสร้างขึ้นแบบ dynamic ผ่าน JavaScript หรือถูกใช้งานในลักษณะที่ PurgeCSS ไม่สามารถตรวจจับได้ ในกรณีเช่นนี้ เราสามารถใช้ whitelist เพื่อบอกให้ PurgeCSS ไม่ต้องลบ CSS classes เหล่านั้นออกไป

ตัวอย่างการใช้งาน whitelist ใน tailwind.config.js:

module.exports = {
  content: [
    './src/**/*.{html,js,jsx,ts,tsx,vue}',
    './public/**/*.html',
    './components/**/*.{js,vue}',
  ],
  safelist: [
    'dynamic-class-1',
    'dynamic-class-2',
    /^grid-cols-\d+$/, // Regular expression to whitelist grid column classes
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

ในตัวอย่างนี้ PurgeCSS จะไม่ลบ CSS classes dynamic-class-1 และ dynamic-class-2 ออกไป นอกจากนี้ยังมีการใช้ regular expression เพื่อ whitelist CSS classes ที่มีรูปแบบ grid-cols-\d+ (เช่น grid-cols-1, grid-cols-2, grid-cols-3, ...)

เหตุผลเชิงออกแบบ: การใช้งาน whitelist อย่างระมัดระวังเป็นสิ่งสำคัญ การ whitelist classes จำนวนมากเกินไปจะทำให้ไฟล์ CSS มีขนาดใหญ่ขึ้นโดยไม่จำเป็น ในทางกลับกัน หากไม่ whitelist classes ที่จำเป็น เว็บไซต์อาจจะแสดงผลผิดพลาด

แนวปฏิบัติที่ดี:

พยายามหลีกเลี่ยงการใช้งาน whitelist หากเป็นไปได้ ให้แก้ไขโค้ดเพื่อให้ PurgeCSS สามารถตรวจจับ CSS classes ที่ถูกใช้งานได้โดยอัตโนมัติ
ใช้ regular expressions เพื่อ whitelist classes ที่มีรูปแบบเดียวกัน
comment ใน safelist เพื่ออธิบายเหตุผลที่ต้อง whitelist class นั้นๆ

การ `debug` PurgeCSS

PurgeCSS มี mode debug ที่ช่วยให้เราสามารถตรวจสอบได้ว่า PurgeCSS กำลังทำงานอย่างไร และ CSS rules ใดบ้างที่ถูกลบออกไป mode debug จะแสดงรายการของ CSS rules ที่ถูกใช้งานและไม่ได้ถูกใช้งาน ทำให้เราสามารถแก้ไข content paths และ whitelist ได้อย่างแม่นยำ

ในการเปิดใช้งาน mode debug ให้เพิ่ม option DEBUG=true ใน environment variables หรือใน command line:

DEBUG=true npm run build

เมื่อรัน PurgeCSS ใน mode debug PurgeCSS จะแสดง output ที่ละเอียดมากขึ้น ซึ่งจะช่วยให้เราสามารถระบุปัญหาและแก้ไขได้อย่างรวดเร็ว

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

แนวปฏิบัติที่ดี:

เปิดใช้งาน mode debug เมื่อทำการ configure PurgeCSS เป็นครั้งแรก หรือเมื่อมีการเปลี่ยนแปลงโครงสร้างของโปรเจ็กต์
ตรวจสอบ output ของ PurgeCSS อย่างละเอียด เพื่อหา CSS rules ที่ถูกลบออกไปโดยไม่ตั้งใจ
ใช้ mode debug เพื่อทดสอบ regular expressions ที่ใช้ใน whitelist

สรุป

การใช้งาน PurgeCSS อย่างละเอียดเป็นสิ่งจำเป็นในการลดขนาดไฟล์ CSS ของโปรเจ็กต์ Tailwind CSS การตั้งค่า content paths ที่ถูกต้อง การใช้งาน whitelist อย่างระมัดระวัง และการ debug PurgeCSS อย่างสม่ำเสมอ จะช่วยให้คุณสามารถ configure PurgeCSS ได้อย่างมีประสิทธิภาพ และปรับปรุงประสิทธิภาพการโหลดหน้าเว็บของโปรเจ็กต์ของคุณได้อย่างมาก ในบทความถัดไป เราจะมาเรียนรู้การใช้ Tailwind CSS กับ Server-Side Rendering (SSR)

การใช้งาน PurgeCSS อย่างละเอียดเพื่อลดขนาดไฟล์