Công cụ loại bỏ CSS không sử dụng

Nếu bạn có các quy tắc kiểu CSS trong biểu định kiểu của mình mà không được sử dụng trên trang, thì bạn có “CSS không được sử dụng”

Người ta thường thấy khi biểu định kiểu phát triển, có những quy tắc không còn được sử dụng nữa

Ngay cả một biểu định kiểu mới cũng có thể bao gồm “CSS không sử dụng”, đặc biệt nếu bạn đang sử dụng khung CSS và không sử dụng tất cả các quy tắc

Lý do chúng tôi muốn xóa các quy tắc CSS không sử dụng này là vì chúng làm chậm hiệu suất

CSS không sử dụng làm chậm hiệu suất như thế nào?

Khi trình duyệt kết xuất, nó cần thêm từng phần tử một vào trang

Đối với mỗi phần tử, chẳng hạn như một nút, nó cần xem nên áp dụng kiểu nào

Bạn càng có nhiều kiểu trong biểu định kiểu thì quá trình này sẽ càng mất nhiều thời gian

Vì vậy, nếu bạn có 100 phần tử trên trang và 100 quy tắc thì nó sẽ phải chạy qua các kiểu 100 * 100

Danh sách các quy tắc này càng dài thì ảnh hưởng đến hiệu suất web của bạn càng lớn

Chúng tôi có thể tăng tốc độ hiển thị của trang bằng cách giảm các kiểu trong biểu định kiểu

Cái nào làm tăng hiệu suất web

Hãy xem cách bạn có thể biết liệu trang web của mình có CSS ​​không được sử dụng hay không

Cách xác định CSS không sử dụng

Để tìm bất kỳ CSS không sử dụng nào trên trang của bạn, chúng tôi có thể sử dụng Công cụ dành cho nhà phát triển Chrome

Truy cập trang mà bạn muốn kiểm tra và nhấp chuột phải vào nền

Chọn tùy chọn “Kiểm tra” và tùy chọn này sẽ mở ra Công cụ dành cho nhà phát triển Chrome

Chúng ta cần mở công cụ “bảo hiểm” và có một số bước để mở công cụ này

Trước tiên, hãy đảm bảo rằng “ngăn kéo bảng điều khiển” đang mở bằng cách nhấn phím “Esc”

Khi bạn đã mở ngăn kéo, hãy tìm tab “Mức độ phù hợp”

Nếu nó bị thiếu, hãy nhấn vào menu ba chấm bên cạnh từ “Bảng điều khiển” và chọn “Mức độ phủ sóng”

Để bắt đầu ghi phạm vi phủ sóng, chúng ta cần nhấn nút ghi

Nhấn làm mới và bạn sẽ thấy các tệp CSS và JS của mình được tải trong cửa sổ

Nhấp vào tệp CSS của bạn và bạn sẽ thấy các thanh màu đỏ và xanh lục bên cạnh mỗi kiểu

Thanh màu xanh lá cây có nghĩa là kiểu này đang được trang sử dụng

Thanh màu đỏ cho biết quy tắc không được sử dụng

Bạn cũng có thể thấy trong bảng trên, tệp CSS có 97. 1% CSS không sử dụng

Vì vậy, bây giờ chúng tôi biết những gì đang được sử dụng và những gì không

Hãy xem xét việc loại bỏ nó

Xóa CSS không sử dụng

Một cách đơn giản là sử dụng một công cụ trực tuyến như UnCSS Online

Công cụ đơn giản này cho phép bạn nhập tệp CSS và tệp HTML

Sau đó, nó sẽ tìm ra quy tắc CSS nào đang được áp dụng và chỉ xuất ra CSS đã sử dụng

Khi bạn có đầu ra, bạn có thể sao chép lại tệp này vào tệp CSS và thêm nó vào trang

Công cụ này phù hợp với tác vụ một lần và có thể hữu ích cho các trang web tĩnh

Nếu bạn có nhà phát triển làm việc trên trang web của mình thì bạn cần tự động hóa quy trình này

Hãy xem xét một số đề xuất bạn có thể đưa ra cho nhóm phát triển

Tự động xóa CSS không sử dụng

Công cụ UnCSS trực tuyến ở trên sử dụng thư viện này https. //github. com/uncss/uncss hậu trường

Nếu chúng tôi cần thường xuyên sử dụng công cụ UnCSS, tốt hơn hết là sử dụng thư viện này như một phần của quy trình làm việc của nhà phát triển

Để làm điều đó, hãy cài đặt uncss bằng cách sử dụng nút

npm install -g uncss

Sau đó chúng ta có thể sử dụng nó trên dòng lệnh như thế này

Usage: uncss [options] <file or URL, ...>
    e.g. uncss https://getbootstrap.com/docs/3.3/examples/jumbotron/ > stylesheet.css

Options:

  -h, --help                            output usage information
  -V, --version                         output the version number
  -i, --ignore <selector, ...>          Do not remove given selectors
  -m, --media <media_query, ...>        Process additional media queries
  -C, --csspath <path>                  Relative path where the CSS files are located
  -s, --stylesheets <file, ...>         Specify additional stylesheets to process
  -S, --ignoreSheets <selector, ...>    Do not include specified stylesheets
  -r, --raw <string>                    Pass in a raw string of CSS
  -t, --timeout <milliseconds>          Wait for JS evaluation
  -H, --htmlroot <folder>               Absolute paths' root location
  -u, --uncssrc <file>                  Load these options from <file>
  -n, --noBanner                        Disable banner
  -a, --userAgent <string>              Use a custom user agent string
  -I, --inject <file>                   Path to javascript file to be executed before uncss runs
  -o, --output <file>                   Path to write resulting CSS to

CSS quan trọng

Có một cải tiến nữa mà chúng ta có thể thực hiện đối với CSS

Cũng như loại bỏ CSS không được trang sử dụng, chúng tôi có thể đặt CSS quan trọng trong dòng

Điều này có nghĩa là bất kỳ kiểu nào trong số các kiểu trong màn hình đầu tiên đều được đưa vào tệp HTML. Các kiểu này sau đó sẽ bị xóa khỏi biểu định kiểu CSS bên ngoài

Để làm điều này, chúng ta có thể sử dụng một công cụ dành cho nhà phát triển khác có tên là Critical

Thao tác này sẽ tự động lấy CSS trong màn hình đầu tiên và thêm nó vào bên trong thẻ

programming css

Reply 5 0 Chia sẻ