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 kembaliMenghapus 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 kita1. PurgeCssSemoga Anda yakin sekarang. ]
Mari kita lanjutkan daftarnya
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 digunakanMetode 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. MemurnikanCSSPurifyCSS 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
_0Kami 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 membersihkannyaKami 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
_1Lihat repositori Github
MemurnikanCSS
Memurnikan file CSS dunia. PurifyCSS memiliki 5 repositori yang tersedia. Ikuti kode mereka di GitHub
github. com
3. uncssUnCSS 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
_2dan menggunakannya dari mana saja di sistem kami
Penggunaan baris perintah dasar dari uncss adalah ini
$ bit tag --all
_3Semua css yang digunakan di
$ bit add src/style.css
_3 akan ditulis ke $ bit add src/style.css
4Penggunaan JS juga sederhana
$ bit tag --all
_4Fungsi 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 hasilnyaFile
$ bit add src/style.css
_6 kemudian dapat dijalankan$ bit tag --all
_5Lihat 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 CakupanSetelah 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
9Dengan 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
KesimpulanIni 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?