Purge CSS để loại bỏ classes không sử dụng

Trong quá trình phát triển giao diện, file CSS có thể trở nên cồng kềnh do chứa nhiều lớp không cần thiết. PurgeCSS là công cụ giúp tối ưu CSS bằng cách loại bỏ các lớp không sử dụng. Trong bài học này, học viên sẽ tìm hiểu cách tích hợp PurgeCSS với Tailwind CSS và thực hành tinh gọn file CSS, nhằm giảm kích thước và cải thiện hiệu suất tải trang.

Purge CSS để loại bỏ classes không sử dụng

1. Giới thiệu về PurgeCSS và lý do nên sử dụng

• PurgeCSS là một công cụ giúp quét mã nguồn HTML, JavaScript, và loại bỏ các lớp CSS không được sử dụng.
• Lợi ích:
  • Giảm kích thước file CSS, giúp tải trang nhanh hơn.
  • Tối ưu bộ nhớ cache của trình duyệt.
  • Tăng hiệu suất tổng thể của website.

2. Cách tích hợp PurgeCSS với Tailwind CSS

Bước 1: Cài đặt PurgeCSS
Sử dụng npm để cài đặt PurgeCSS:

npm install @fullhuman/postcss-purgecss

Bước 2: Cấu hình PostCSS
Tạo hoặc chỉnh sửa file postcss.config.js:

const purgecss = require('@fullhuman/postcss-purgecss')({
  content: ['./src/**/*.html', './src/**/*.js'], // Đường dẫn quét mã nguồn
  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
})

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    ...(process.env.NODE_ENV === 'production' ? [purgecss] : [])
  ]
}

3. Thực hành loại bỏ các lớp CSS dư thừa

Trước khi tối ưu:

.bg-red-500 { background-color: red; }
.text-xl { font-size: 1.25rem; }
.hover\:text-gray-500:hover { color: #6b7280; }
/* ... hàng trăm dòng không sử dụng */

Sau khi tối ưu:
Chỉ giữ lại các lớp thực sự được dùng, nhờ PurgeCSS:

.bg-red-500 { background-color: red; }
.text-xl { font-size: 1.25rem; }

Kết luận

Sau bài học này, học viên đã hiểu cách tích hợp và sử dụng PurgeCSS để tinh gọn CSS trong môi trường production. Hãy áp dụng kỹ thuật này vào dự án thực tế để cải thiện hiệu suất tải trang và nâng cao trải nghiệm người dùng.