Bagaimana cara menemukan css yang tidak terpakai di html?

File CSS dapat dengan mudah mendapatkan KB yang berlebihan dari waktu ke waktu. Ini mungkin terjadi karena sisa gaya lama atau hanya karena Anda telah menggunakan kerangka kerja CSS besar seperti Bootstrap (147 KB saat diminimalkan) dan kemungkinan besar hanya menggunakan sebagian kecil dari apa yang ditawarkannya. CSS yang tidak digunakan memperlambat pemuatan halaman dan membuat pemeliharaan jauh lebih sulit daripada yang seharusnya

CSS yang tidak digunakan dalam komponen UI bersama yang dapat digunakan kembali

Menghapus CSS yang tidak digunakan sangat berguna saat membagikan komponen UI yang dapat digunakan kembali dari proyek Anda, menggunakan Bit (Github)

Contoh. berbagi komponen React dalam bit. dev

Misalnya, saya memiliki aplikasi React sederhana dengan header ('Search') dan komponen search-bar

Baik komponen header maupun bilah pencarian memerlukan CSS global yang sama. Saat mengekspor komponen bilah pencarian saya ke koleksi Bit, Bit akan mengidentifikasi file itu sebagai ketergantungan

$ bit add src/components/*

lalu, mari kita coba memberi tag pada semua komponen yang dilacak

$ bit tag --all

_

Bit mengembalikan kesalahan — komponen bergantung pada file CSS global

Saya kemudian menambahkan file CSS

$ bit add src/style.css

Mari ekspor komponen dengan CSS-nya ke koleksi 'contoh-css-tidak terpakai' saya

$ bit export eden.unused-css-example

Komponen bilah pencarian saya sekarang ada di koleksi 'contoh-css-tidak terpakai' saya

Snapshot di atas memberi tahu kita gayanya. file css juga ditambahkan ke koleksi. Sekarang menjadi ketergantungan bilah pencarian. Setiap kali kita

$ bit tag --all

_6 atau

$ bit tag --all

7 ke proyek baru, kita akan mendapatkan gaya tambahan yang tidak ada hubungannya dengan komponen bilah pencarian kita

Semoga Anda yakin sekarang. )

Mari kita lanjutkan daftarnya

1. PurgeCss

pengantar

Edit deskripsi

www. purgecss. com

Ini adalah alat yang sangat efektif untuk membersihkan gaya css yang tidak terpakai

Yang keren dengan purgecss adalah dapat diintegrasikan ke dalam alur kerja pengembangan Anda. PurgeCSS dapat digunakan sebagai alat CLI dari terminal. Instal secara global

npm i purgecss -g

_

Jalankan perintah berikut di terminal

purgecss --css index.css --content index.html

Di atas akan mengumpulkan index. css (seperti yang ditunjukkan oleh — css flag) dan index. html (seperti yang ditunjukkan oleh — flag konten) dan hapus semua pemilih CSS yang tidak digunakan di dalamnya

Ini tersedia di registri NPM, dan dapat diinstal seperti ini

npm i purgecss -D

_

Lihat itu diinstal sebagai ketergantungan pengembangan, sehingga tidak mengikuti Anda saat mendorong produksi

Kami membuat file JS dan menuangkan kode berikut

// purgecss.jsvar Purgecss = require('purgecss') // ES5
import Purgecss from 'purgecss' // ES6var purgecss = new Purgecss({
  content: ['**/*.html'],
  css: ['**/*.css']
})
var purgecssResult = purgecss.purge()

_

Konten dan css dalam objek diteruskan ke

$ bit tag --all

8 berisi pola glob yang memberi tahu PurgeCSS untuk mengumpulkan file

$ bit tag --all

9 dan

$ bit add src/style.css

0 dalam proyek dan membersihkannya dari kode CSS yang tidak digunakan

Metode pembersihan dipanggil dan purgecssResult berisi hasil dari css yang dibersihkan

Kami menjalankan file menggunakan node yang dapat dieksekusi

node purgecss.js

Lebih lanjut tentang repositori Github

FullHuman/purgecss

Saat Anda membuat situs web, kemungkinan besar Anda menggunakan kerangka kerja css seperti Bootstrap, Materializecss…

github. com

2. MemurnikanCSS

PurifyCSS Online - Hapus CSS yang tidak terpakai

Tentang Alat ini menggunakan PurifyCSS, yang merupakan perpustakaan JS yang memindai kode sumber Anda (HTML dan JS) untuk pemilih yang digunakan dan…

purifycss. on line

Ini adalah alat luar biasa lainnya, seperti purgecss. PurifyCSS bekerja dengan mengambil semua file HTML yang ditentukan untuk proses perbandingan terhadap file CSS yang diberikan. Itu mencari melalui file HTML dan file CSS yang diberikan, itu menghapus gaya CSS yang berlebihan dan menulis CSS yang dimurnikan ke file lain, kemudian menautkan kembali file HTML ke file CSS yang dimurnikan

Menurut penulis

Fungsi yang mengambil konten (HTML/JS/PHP/dll) dan CSS, dan hanya mengembalikan CSS yang digunakan. PurifyCSS tidak mengubah file CSS asli. Anda dapat menulis ke file baru, seperti minifikasi. Jika aplikasi Anda menggunakan framework CSS, ini sangat berguna karena banyak pemilih yang sering tidak digunakan

Penggunaannya sangat mudah

npm i purify-css -D

Selanjutnya, buat file (saya akan menyebut milik saya memurnikan. js) dan tambahkan kode berikut

$ bit tag --all

_0

Kami mengekstraksi fungsi pemurnian dari paket "purify-css"

Kami kemudian mengatur file html dan file css yang ingin kami bersihkan dari gaya yang tidak digunakan masing-masing ke htmlFiles dan cssFiles. Mereka menyimpan file dalam sebuah array. Di sini, kami menggunakan pola glob untuk memberi tahu purify-css untuk mengumpulkan semua file

$ bit tag --all

9 dan

$ bit add src/style.css

0 dalam proyek kami dan membersihkannya

Kami mengatur konfigurasi di opts. Kami hanya mengatur jalur file dan nama tempat penyimpanan css yang dimurnikan. Ada banyak konfigurasi yang bisa kita atur, seperti minify css yang dipurifikasi, untuk menampilkan berapa banyak CSS yang tidak terpakai yang dibersihkan

Selanjutnya, kami memanggil fungsi pemurnian dengan meneruskan htmlFiles, cssFiles, opts, dan fungsi panggilan balik yang akan dipanggil dengan hasil pemurnian saat selesai

Jadi kita jalankan saja purify-nya. js untuk membersihkan semua css yang tidak terpakai yang kita miliki

$ bit tag --all

_1

Lihat repositori Github

MemurnikanCSS

Memurnikan file CSS dunia. PurifyCSS memiliki 5 repositori yang tersedia. Ikuti kode mereka di GitHub

github. com

3. uncss

UnCSS Daring

Salin Tempel HTML dan CSS Anda ke dalam kotak di bawah Klik tombol Tunggu keajaiban terjadi CSS yang tidak terpakai hilang, ambil sisanya…

uncss-online. com

Ini juga merupakan modul Node yang tentunya. ) menghapus css yang tidak digunakan. Sama seperti yang kami lakukan dengan purifyCSS, ia memiliki API JS yang kami panggil dengan opsi untuk menghapus gaya css yang tidak terpakai

Menurut penulis

UnCSS adalah alat yang menghapus CSS yang tidak terpakai dari stylesheet Anda. Ini berfungsi di banyak file dan mendukung CSS yang disuntikkan Javascript

Kita dapat menginstalnya sebagai modul global dan menggunakannya dari terminal

$ bit tag --all

_2

dan menggunakannya dari mana saja di sistem kami

Penggunaan baris perintah dasar dari uncss adalah ini

$ bit tag --all

_3

Semua css yang digunakan di

$ bit add src/style.css

_3 akan ditulis ke

$ bit add src/style.css

4

Penggunaan JS juga sederhana

$ bit tag --all

_4

Fungsi uncss diekstraksi dari pustaka "uncss". Kami menempatkan File html dalam array,

$ bit add src/style.css

5. Konfigurasi diatur dalam opts. Terakhir, uncss dipanggil dengan htmlFiles, opts, dan fungsi panggilan balik dengan parameter yang menyimpan kesalahan dan parameter lain yang menyimpan hasilnya

File

$ bit add src/style.css

_6 kemudian dapat dijalankan

$ bit tag --all

_5

Lihat lebih banyak repositori Github

uncss/uncss

Hapus gaya yang tidak digunakan dari CSS. Berkontribusi pada pengembangan uncss/uncss dengan membuat akun di GitHub

github. com

4. Tab Cakupan di Chrome DevTools (Secara Manual)

Tab Cakupan ini membantu kami menemukan kode Js dan CSS yang tidak terpakai

Buka browser Chrome Anda, buka "Alat Pengembang", klik "Alat Lainnya" dan kemudian "Cakupan"

Cakupan akan terbuka. Kami akan melihat tombol untuk mulai menangkap cakupan, untuk memuat ulang dan mulai menangkap cakupan dan berhenti menangkap cakupan dan menampilkan hasil

Jika Anda memiliki halaman web, Anda ingin menganalisis cakupan kodenya. Muat halaman web dan klik tombol

$ bit add src/style.css

7 di tab Cakupan

Setelah beberapa saat, sebuah tabel akan muncul di tab dengan sumber daya yang dianalisisnya, dan berapa banyak kode yang digunakan di halaman web. Semua file yang ditautkan di halaman web (css, js) akan dicantumkan di tab Cakupan. Mengklik sumber apa pun di sana akan membuka sumber daya itu di panel Sumber dengan perincian

$ bit add src/style.css

8 dan

$ bit add src/style.css

9

Dengan perincian ini, kita dapat melihat berapa banyak byte yang tidak digunakan dalam file CSS kita, sehingga kita dapat menghapusnya secara manual atau menggunakan salah satu alat yang kami jelaskan di atas

Untuk lebih lanjut tentang ini, lihat

Temukan JavaScript dan Kode CSS yang Tidak Digunakan Dengan Tab Cakupan Di Chrome DevTools

Tab Cakupan di Chrome DevTools dapat membantu Anda menemukan kode JavaScript dan CSS yang tidak terpakai. Menghapus kode yang tidak terpakai dapat mempercepat…

developer. google. com

Kesimpulan

Ini dia daftar alat yang dapat kita gunakan untuk menghapus kode CSS yang berlebihan dan tidak terpakai dari aplikasi web kita

Jadi, periksa aplikasi web Anda untuk mengetahui apakah Anda memiliki kode yang tidak berguna di basis kode Anda, dan gunakan alat yang baru saja kami jelaskan untuk membersihkannya. Ingat, menghapus kode yang tidak terpakai dapat mempercepat pemuatan halaman Anda, dan menyelamatkan pengguna seluler Anda dari data seluler yang berharga itu

Apakah Anda memiliki tambahan dalam daftar, atau mengapa beberapa tidak boleh ada, atau Anda memiliki masalah dengan salah satunya, atau hanya ingin berbicara?

Bagaimana cara menemukan gaya CSS yang tidak terpakai?

Bagaimana cara menemukan kelas yang tidak digunakan dalam HTML?

Bagaimana cara menemukan file CSS dan JS yang tidak terpakai di situs web saya?