Thu gọn CSS của bạn với PurgeCSS: Hướng dẫn dành cho người mới bắt đầu

Trang web chậm? Các tệp CSS lớn có thể là thủ phạm! PurgeCSS là một công cụ tiện dụng giúp dọn dẹp CSS của bạn bằng cách loại bỏ các style không sử dụng, giúp trang web của bạn tải nhanh hơn. Tìm hiểu cách PurgeCSS hoạt động và xem ví dụ về các ngôn ngữ tạo khuôn mẫu khác nhau như Blade và ERB.
Thu gọn CSS của bạn với PurgeCSS: Hướng dẫn dành cho người mới bắt đầu
Cập nhật lần cuối 01:15 26/06/2024 GMT+7

Bạn đã bao giờ tự hỏi tại sao trang web của bạn lại tải chậm đôi khi chưa? Một lý do có thể là do các tệp CSS lớn từ các thư viện như Bootstrap. Hôm nay chúng ta sẽ tìm hiểu về một công cụ thú vị có tên là PurgeCSS có thể giúp tăng tốc trang web của bạn bằng cách loại bỏ CSS không sử dụng!

PurgeCSS là gì?

PurgeCSS giống như một chiếc máy hút bụi cho CSS của bạn. Nó quét các tệp HTML và JavaScript của bạn, kiểm tra những quy tắc CSS nào bạn thực sự sử dụng và loại bỏ những cái không cần thiết. Điều này có thể làm cho tệp CSS của bạn nhỏ hơn nhiều, giúp trang web của bạn tải nhanh hơn.

PurgeCSS hoạt động bằng cách phân tích các tệp nội dung của bạn (HTML, JavaScript, v.v.) và các tệp CSS của bạn, sau đó loại bỏ các quy tắc CSS không sử dụng. Dưới đây là quy trình từng bước:

  • Phân tích Nội dung: PurgeCSS quét các tệp nội dung của bạn (như HTML và JavaScript) và trích xuất tất cả các class, ID và tên phần tử được sử dụng.
  • Phân tích CSS: Sau đó, nó phân tích các tệp CSS của bạn và tạo danh sách tất cả các selector hiện có.
  • So sánh: PurgeCSS so sánh danh sách các selector đã sử dụng từ các tệp nội dung của bạn với tất cả các selector trong CSS của bạn.
  • Loại bỏ: Bất kỳ quy tắc CSS nào có selector không xuất hiện trong các tệp nội dung của bạn đều bị loại bỏ.
  • Bảo tồn: Các quy tắc phù hợp với các selector được tìm thấy trong nội dung của bạn sẽ được giữ lại.
  • Xuất kết quả: PurgeCSS tạo ra một tệp CSS mới chỉ chứa các style cần thiết.

Ví dụ

Nếu bạn có CSS này:

.btn { color: blue; }
.card { border: 1px solid gray; }
.unused-class { font-size: 20px; }

Và HTML này:

<button class="btn">Click me</button>

PurgeCSS sẽ xuất ra:

.btn { color: blue; }

Các style .card và .unused-class sẽ bị loại bỏ vì chúng không được sử dụng trong HTML.
Quá trình này có thể giảm đáng kể kích thước tệp, đặc biệt khi sử dụng các framework CSS lớn mà bạn thường chỉ sử dụng một phần nhỏ các style có sẵn.

Sử dụng PurgeCSS với npx trên Ubuntu

Để chạy PurgeCSS, chúng ta sử dụng lệnh npx. npx đi kèm với Node.js, phải được cài đặt trước trên máy tính Ubuntu của bạn.

Trước khi sử dụng PurgeCSS, bạn cần cài đặt nó trong dự án của mình. Bạn có thể làm điều này bằng cách sử dụng yarn hoặc npm, là các trình quản lý package phổ biến cho JavaScript. Đây là các lệnh để cài đặt PurgeCSS như một development dependency:

Sử dụng yarn:

$ yarn add purgecss --dev

Hoặc nếu bạn thích npm:

$ npm i -D purgecss

Đây là một ví dụ đơn giản về cách sử dụng PurgeCSS.

  • Mở terminal của bạn trên Ubuntu.
  • Chuyển đến thư mục dự án của bạn.
  • Chạy PurgeCSS với lệnh này:

$ npx purgecss --css bootstrap.css --content index.html --output style.min.css

Điều này nói với PurgeCSS:

  • Xem xét tệp CSS của bạn (bootstrap.css)
  • Kiểm tra các style nào được sử dụng trong tệp HTML của bạn (index.html)
  • Tạo một tệp CSS mới, nhỏ hơn (style.min.css)

Bạn sẽ thấy rằng style.min.css nhỏ hơn nhiều so với bootstrap.css!

Tùy chỉnh Đường dẫn Nội dung cho PurgeCSS

Khi sử dụng PurgeCSS, bạn có thể chỉ định các tệp mà nó nên phân tích để xác định CSS nào đang được sử dụng. Tham số --content linh hoạt và có thể được điều chỉnh cho các cấu trúc dự án và loại tệp khác nhau.

Đối với Laravel Blade template:
--content './resources/**/*.php'
Điều này nói với PurgeCSS xem xét tất cả các tệp PHP (bao gồm các mẫu Blade) trong thư mục resources và các thư mục con của nó.

Đối với Ruby on Rails ERB template:
--content './app/views/**/*.html.erb'
Điều này hướng dẫn PurgeCSS kiểm tra tất cả các tệp ERB trong thư mục views và các thư mục con của nó.


Bạn cũng có thể chỉ định nhiều vị trí nội dung trong một lệnh duy nhất. Ví dụ:
$ npx purgecss --css bootstrap.css --content './index.html' './js/**/*.js' './components/**/*.vue' --output styles.min.css

Lệnh này nói với PurgeCSS:

  • Kiểm tra tệp index.html trong thư mục hiện tại
  • Xem xét tất cả các tệp JavaScript trong thư mục js và các thư mục con của nó
  • Kiểm tra tất cả các tệp thành phần Vue trong thư mục components và các thư mục con của nó

Bằng cách sử dụng nhiều tham số --content, bạn có thể đảm bảo PurgeCSS phân tích tất cả các tệp liên quan trong dự án của bạn, bất kể chúng nằm ở đâu hoặc loại tệp nào.