Cara menghapus css visual studio yang tidak terpakai

Menyoroti kelas css yang tidak terpakai mencari file html di folder yang sama dengan file css/scss/sass

Cara Penggunaan

Secara otomatis menyorot kelas css yang tidak terpakai saat membuka file gaya

Catatan Rilis

1. 0. 7

Peningkatan. Sekarang mendeteksi kelas seperti. kelasku. arahkan, myClass. fokus, myClass. anak ke-n, dll. Perbaikan bug. itu tidak akan mencoba mendeteksi kelas yang tidak didukung oleh ekstensi. menghindari masalah menyoroti beberapa kelas yang salah

Saat Anda mengunjungi halaman web, browser Anda meminta semua sumber daya yang diperlukan untuk membangunnya. Sering kali sebuah halaman akhirnya memuat sumber daya, seperti JavaScript dan CSS, berisi kode yang sebenarnya tidak diperlukan untuk membuat halaman yang dimaksud;

Sebagian besar kode diproses dan dimuat di browser melalui apa yang dikenal sebagai utas utama. Anggap saja sebagai satu jalur, jalan satu arah. Setiap sumber daya adalah satu mobil yang melaju di jalan itu, yang semuanya harus tiba di tujuannya — browser — agar halaman selesai dimuat. Semakin banyak kode yang Anda coba proses, semakin lama waktu yang dibutuhkan untuk menyelesaikan pemuatan halaman. JavaScript dan CSS biasanya membutuhkan waktu paling lama untuk mengurai, mengompilasi, dan mengeksekusi. Selain itu, interaksi pengguna juga berjalan di utas utama tersebut. Artinya, semakin lama JavaScript atau CSS dieksekusi, semakin lama halaman tetap tidak responsif terhadap interaksi pengguna, yang mengarah ke pengalaman pengguna yang kurang memuaskan.

Dengan Pengalaman Halaman (khususnya, untuk tujuan diskusi ini) diperhitungkan oleh algoritme Google untuk peringkat, penting untuk memastikan bahwa Anda melakukan semua yang Anda bisa untuk memberikan pengalaman pengguna yang baik, termasuk mengurangi waktu muat halaman dan lainnya.

Panduan ini akan menunjukkan cara cepat mengidentifikasi kode yang tidak terpakai dalam sumber daya JavaScript dan CSS sehingga Anda dapat mengambil tindakan, hanya memuat apa yang diperlukan, dan meningkatkan kecepatan pemuatan halaman Anda

Penting – Sebelum Anda Menghapus Kode Apa Pun

Kami sangat menyarankan agar Anda menyiapkan lingkungan pementasan sebelum Anda memublikasikan perubahan kode apa pun ke situs aktif Anda. JavaScript bisa sangat penting untuk fungsionalitas, dan CSS sama pentingnya untuk struktur halaman, visibilitas elemen, dan presentasi konten, antara lain. Anda tidak ingin secara tidak sengaja menghapus beberapa kode yang halaman Anda andalkan untuk memuat dengan benar, jadi penting untuk menguji setiap perubahan dalam pementasan sebelum Anda meluncurkannya secara langsung

Selalu pertimbangkan  berbagai cara yang akan dialami pengguna di situs Anda sebelum Anda menghapus kode apa pun. Misalnya, pengguna yang masuk mungkin memerlukan gaya alternatif atau fungsi JavaScript daripada pengguna yang keluar. Hal lain yang harus diperhatikan secara khusus adalah CSS khusus perangkat. Kueri media dapat digunakan untuk menentukan gaya untuk elemen tergantung pada breakpoint viewport tertentu. Beberapa alat atau program otomatis untuk menemukan kode yang tidak digunakan mungkin tidak mempertimbangkan hal ini dan dapat secara salah menyatakan gaya yang saat ini tidak aktif sebagai tidak digunakan

Selalu cadangkan dan uji secara menyeluruh sebelum menerapkan perubahan kode apa pun

Mulailah dengan Audit Plugin

Tempat yang mudah untuk mulai mencari kode yang tidak perlu ada di plugin dan ekstensi

Meskipun plugin dapat berguna untuk manajemen konten dan fitur situs kaya lainnya, plugin sering kali memuat kode yang tidak diperlukan di seluruh halaman situs Anda. Ambil Formulir Kontak 7 yang sangat populer, misalnya. Itu memuat kode pada setiap posting dan halaman situs WordPress Anda, terlepas dari apakah halaman tersebut berisi formulir kontak atau tidak

Dalam banyak kasus, pemilik situs menggunakan plugin untuk menyelesaikan satu masalah, tetapi sering memasang plugin yang membengkak dengan fitur yang tidak diperlukan yang tidak relevan dengan masalah yang dihadapi. Ini bermasalah karena meskipun fitur tidak digunakan, library JavaScript atau library yang diperlukan untuk menggunakannya mungkin masih dimuat di latar belakang halaman Anda

Gunakan Plugin dengan Bijaksana

Luangkan waktu untuk meninjau semua plugin dan ekstensi yang digunakan di situs Anda. Evaluasi apakah plugin benar-benar diperlukan. Jika Anda menggunakan plugin untuk satu fitur tertentu, coba cari plugin lain yang melakukan hal itu. Anda akan terkejut melihat banyaknya add-on ringan di luar sana yang memberikan solusi langsung dan sederhana tanpa fitur tambahan. Selalu gunakan repositori resmi untuk CMS apa pun

• Plugin WordPress
• Toko Aplikasi Shopify
• Ekstensi Magento
• Ekstensi Joomla
• Ekstensi Squarespace

Alternatifnya, pertimbangkan untuk bekerja sama dengan pengembang untuk membantu Anda mengkonsolidasikan dan menggabungkan fitur tertentu ke dalam arsitektur/CMS situs Anda tanpa plugin. Misalnya, Google Pengelola Tag dan Google Analytics dapat diinstal ke dalam template situs Anda dengan beberapa kode sederhana. Namun ada seluruh plugin yang dirancang untuk membantu membuat implementasi kode lebih mudah, seringkali dengan kode tambahan yang tidak perlu yang dilampirkan padanya

Waktu yang tepat untuk meninjau plugin Anda adalah setelah peluncuran situs. Plugin akan sering dipasang untuk keperluan debugging atau impor/ekspor, dan mungkin boleh dihapus setelah situs yang diperbarui aktif. Anda mungkin juga menemukan bahwa ada plugin yang Anda gunakan, tetapi hanya sesekali, jadi pertimbangkan untuk menonaktifkannya sampai Anda benar-benar membutuhkannya untuk aktif.

Cara Menemukan CSS & JavaScript yang Tidak Digunakan

Sebagian besar browser populer memiliki panel inspektur yang menampilkan permintaan jaringan yang dikirim untuk memuat halaman tersebut. Ini dapat membantu Anda memahami sumber daya JavaScript dan CSS apa yang dimuat di halaman mana pun. Berikut ini tautan ke dokumentasi tentang cara menemukan dan melihat aktivitas jaringan di masing-masing browser berikut

• Chrome
• Firefox
• Safari
• Microsoft Edge

Penting untuk diperhatikan bahwa Anda tidak dapat menghapus kode yang tidak terpakai dari sumber daya yang tidak dihosting oleh domain Anda. Namun, dengan sumber daya yang Anda host, Anda harus dapat mengoptimalkannya

Cara Menggunakan Chrome DevTools untuk Menemukan Kode yang Tidak Digunakan

Salah satu fitur hebat Chrome DevTools adalah kemampuan untuk melihat CSS dan JavaScript yang tidak terpakai secara real time. Pendekatan ini mungkin tidak berguna dalam skala besar, tetapi dapat membantu Anda dengan cepat mengidentifikasi sumber daya yang berisi kode yang tidak digunakan pada setiap laman

Saat Anda mengunjungi URL, tab Cakupan akan memberi tahu Anda berapa banyak kode yang digunakan, versus berapa banyak yang dimuat, dari sumber mana pun yang diberikan

Untuk membuka Chrome DevTools, tekan Ctrl + Shift + I atau klik tombol kanan mouse dan pilih Inspeksi.  

Untuk melihatnya sendiri

1. Buka Alat Pengembang Chrome (tekan Ctrl + Shift + I atau klik tombol kanan mouse dan pilih Periksa. )
2. Selanjutnya, klik ikon setelan > Alat lainnya > Cakupan
3. Setelah itu, klik tombol Muat Ulang (ikon panah lingkaran)
4. Filter daftar yang muncul hanya untuk melihat resource JavaScript atau CSS
5. Klik sumber daya apa saja untuk melihat kode yang digunakan dan tidak digunakan
   

Setiap baris kode diberi kode warna untuk membantu Anda mengidentifikasi kode yang digunakan dan tidak digunakan

• Hijau pekat berarti baris kode dijalankan
• Merah solid berarti tidak dieksekusi

Cara Menggunakan Tab Cakupan

Berikut cara kami menggunakannya untuk mengidentifikasi sumber daya yang berisi kode paling tidak terpakai untuk membantu kami memprioritaskan mana yang harus ditangani terlebih dahulu

Pada tangkapan layar di atas, Anda dapat melihat banyak sumber daya CSS yang hampir seluruhnya berisi gaya yang tidak terpakai. Salah satu item yang tercantum di atas adalah file Font Awesome CSS. Di dalam tab Cakupan DevTools kita dapat menelusuri lebih jauh untuk melihat secara spesifik kode/gaya mana yang tidak digunakan

Situs yang dimaksud menggunakan total lima ikon. Tetapi file CSS memuat ribuan gaya ikon di setiap halaman dan posting

Kami langsung tahu bahwa kami dapat secara khusus mengekstrak gaya ikon yang dibutuhkan situs dan hanya memuatnya. Ini membutuhkan pembaruan semua jalur file yang menunjuk ke file saat ini dengan jalur ke file baru yang jauh lebih kecil yang kami buat

Cara Menghapus CSS & JavaScript yang Tidak Digunakan

Tidak dapat disangkal bahwa menghapus CSS atau JavaScript yang tidak digunakan adalah tugas yang menantang dan memakan waktu. Ini akan membutuhkan banyak kesabaran dan pengujian

Selalu cari peluang terbesar untuk menghapus apa pun yang tidak diperlukan (seperti audit plugin yang disarankan di atas) terlebih dahulu. Dalam kebanyakan kasus, CSS lebih ringan daripada JavaScript, jadi carilah alternatif khusus CSS untuk menggantikan fitur JavaScript yang mungkin Anda gunakan di seluruh situs Anda

Pertimbangkan Layanan Otomatis

Meskipun menghapus CSS dan JavaScript dari situs yang lebih kecil dapat dikelola, hal ini dapat menjadi hal yang menakutkan untuk situs besar. Untungnya ada layanan dengan harga terjangkau yang dapat mengotomatiskan proses penghapusan

Seperti halnya hampir semua layanan otomatis, berhati-hatilah. Pastikan untuk mencadangkan situs Anda, dan uji secara menyeluruh di lingkungan pementasan. Berikut adalah beberapa layanan otomatis untuk dipertimbangkan

• CSS yang tidak digunakan
• PurifyCSS Online
• UnCSS Daring

Gunakan Pengaya

Saya tahu ini sepertinya rekomendasi yang munafik, tetapi jika Anda mencari solusi yang lebih hemat biaya daripada layanan otomatis, Anda dapat mempertimbangkan untuk menggunakan plugin. Idealnya, waktu muat halaman yang akan Anda hemat dengan menghapus sumber daya yang tidak dibutuhkan akan lebih dari cukup untuk memuat yang diwakili oleh plugin tambahan

Perfmatters Script Manager muncul di pikiran sebagai opsi untuk WordPress. Ini memungkinkan Anda untuk menonaktifkan seluruh plugin, kueri, dan CSS/JS sebaris – bahkan skrip eksternal jika diantrekan dengan benar di WordPress. Belum lagi, plugin ini juga memungkinkan Anda menambahkan pengecualian berdasarkan apakah pengguna masuk atau keluar

Kumpulkan Sumber Daya dan Kirim Secara Efisien

Meskipun menghapus plugin yang tidak perlu dan kode yang tidak digunakan akan membantu secara keseluruhan, memaketkan dan hanya mengirimkan sumber daya yang dibutuhkan halaman tertentu juga dapat memberikan dampak yang signifikan

Dengan bundling, Anda akan mengurangi jumlah dan ukuran permintaan jaringan, mengurangi jumlah pekerjaan yang diproses di thread utama

Untuk melakukannya, kami sarankan untuk membuat bundel umum dengan kode yang digunakan setiap halaman, dan kemudian bundel khusus template di atasnya. Misalnya, di WordPress Anda dapat membuat bundel CSS dan JavaScript khusus untuk posting, halaman, dan halaman beranda. Jika Anda memiliki situs e-niaga, Anda dapat membuat bundel untuk halaman produk, kategori, dan bahkan proses pembayaran

Melangkah lebih jauh, Anda bahkan dapat memisahkan JavaScript dan CSS menjadi bundel penting. Alih-alih mencoba memuat semuanya segera setelah pengguna tiba di halaman, Anda dapat membagi bundel Anda untuk hanya mengirimkan kode Anda yang paling penting terlebih dahulu. Ini dikenal sebagai pemecahan kode dan membutuhkan bantuan dari pengembang berpengalaman. Berikut adalah ikhtisar yang bagus tentang bagaimana Anda dapat menentukan CSS kritis, dan alat (criticalcss. com) yang membantu Anda membuat file CSS penting untuk URL apa pun. Seperti biasa, pastikan untuk menguji setiap proses otomatis

Setelah Anda memiliki pemahaman yang baik tentang sumber daya mana yang diperlukan untuk jenis halaman tertentu, Anda dapat menggabungkannya dan mengirimkannya sesuai kebutuhan.  

Tetap perhatikan ukuran file bundel. Membundel semuanya menjadi satu file besar masih dapat meningkatkan waktu muat di utas utama. Temukan keseimbangan yang baik antara jumlah bundel dan ukuran setiap bundel. Sebagai aturan praktis, setiap bundel harus berukuran sekitar 100 kB. Selain menghapus CSS dan JavaScript yang tidak terpakai, pastikan file Anda diperkecil untuk membantu Anda mencapai bundel yang lebih kecil

Apa itu Minifikasi?

Minifikasi mengacu pada proses menghapus data yang tidak perlu atau berlebihan tanpa memengaruhi cara sumber daya diproses oleh browser, mis. g. dengan menghapus komentar dan pemformatan kode, menghapus kode usang, menggunakan nama variabel dan fungsi yang lebih pendek, dan seterusnya. Sumber daya HTML, CSS, dan JavaScript harus selalu dibuat seramping mungkin untuk mempercepat waktu muat

Sebagian besar layanan hosting menyediakan layanan minifikasi, tetapi jika Anda ingin mendapatkan lebih banyak pengalaman, berikut adalah beberapa rekomendasi yang dapat Anda jelajahi

• Untuk mengecilkan HTML, coba HTMLMinifier
• Untuk memperkecil CSS, coba CSSNano dan csso
• Untuk memperkecil JavaScript, coba UglifyJS. Kompiler Penutupan juga ;

Modul PageSpeed ​​milik Google juga terintegrasi dengan server web Apache atau nginx untuk secara otomatis mengoptimalkan kinerja seluruh situs, termasuk minifikasi sumber daya

Tidak usah buru-buru

Dari semua aspek pengoptimalan kinerja, pembersihan dan penghapusan kode yang tidak terpakai adalah salah satu yang dapat memberikan efek nyata. Jika dilakukan dengan baik, halaman Anda akan berjalan dengan efisien, dan tidak diragukan lagi akan memberikan pengalaman yang menyenangkan bagi pengguna Anda – yang penting bagi Google, dan yang lebih penting keuntungan Anda

Ingatlah untuk meluangkan waktu dan menguji secara menyeluruh sebelum mendorong apa pun secara langsung. Jika Anda memiliki rekomendasi tambahan untuk plugin, sumber daya, atau layanan. Beri tahu kami di komentar, kami ingin mendengarnya

Bagaimana cara menghapus kode CSS yang tidak terpakai?

Bagaimana cara menghapus CSS dan JS yang tidak digunakan?

Bagaimana cara menghapus CSS yang tidak terpakai dari Bootstrap min CSS?