Bagaimana untuk membuang css berlebihan

Dalam proses pembangunan web, berbilang pembangun dan peredaran masa sering membawa kepada pengumpulan sejumlah besar gaya berlebihan dalam fail CSS, yang dipanggil "CSS sampah". CSS sampah ini akan menyebabkan tapak web menjadi sangat besar dan kompleks, mengurangkan prestasi dan kebolehselenggaraan, dan juga meningkatkan kos pembangunan. Oleh itu, dalam beberapa projek besar, membersihkan CSS berlebihan telah menjadi masalah serius yang mesti diselesaikan.

Jadi bagaimana untuk membersihkan CSS berlebihan? Di sini, saya akan berkongsi beberapa kaedah dan alat untuk menyelesaikan masalah ini:

1. Pembersihan Manual

Pembersihan manual adalah kaedah yang paling asli dan asas. Dengan melihat lebih dekat pada fail CSS anda dan mengalih keluar gaya yang berlebihan dan tidak digunakan, anda boleh mencapai hasil pengoptimuman yang besar. Walau bagaimanapun, kelemahan kaedah ini juga jelas. Operasi ini memakan masa dan intensif buruh, memerlukan kesabaran dan penjagaan yang melampau, dan terdedah kepada ketinggalan dan kesilapan. Oleh itu, kaedah ini sesuai untuk projek yang lebih kecil dan halaman mudah.

2. Alat analisis kod

Alat analisis kod boleh membantu kami mencari kod CSS sampah secara automatik, menjadikannya mudah untuk mencari dan memadamkan gaya berlebihan dengan cepat. Alat yang biasa digunakan ialah:

(1) Google Chrome DevTools

Chrome DevTools ialah alat yang disertakan dengan penyemak imbas Chrome Melalui fungsi analisis Liputan, anda boleh mencari kod CSS yang tidak digunakan dalam halaman web dan padamkannya. Kaedah operasi khusus adalah seperti berikut:

• Buka Chrome DevTools
• Pilih tab Liputan
• Klik butang "Mulakan Rakaman" dan tunggu sehingga tapak web dimuatkan
• Hentikan rakaman dan lihat kod CSS yang tidak digunakan

Kelebihan: Mudah digunakan, tidak perlu memasang perisian lain.

(2) PurifyCSS

PurifyCSS ialah alat baris arahan yang boleh mengekstrak gaya terpakai daripada fail HTML dan CSS dan menjana fail CSS baharu. Kaedah operasi khusus adalah seperti berikut:

• Pasang PurifyCSS: npm install purify-css
• Gunakan arahan PurifyCSS: purifycss [input.css] [content.html] -o [ output.css]

Kelebihan: Boleh memproses sejumlah besar fail CSS secara automatik.

3. Alat Automasi

Alat automasi ialah cara yang lebih berkuasa dan cekap untuk mencapai pembersihan automatik melalui beberapa skrip. Alat yang biasa digunakan ialah:

(1) Grunt

Grunt ialah pelari tugas berasaskan JavaScript yang boleh memproses CSS, JavaScript, imej dan sumber lain secara automatik melalui beberapa pemalam. CSS berlebihan boleh dibersihkan dengan menggunakan pemalam grunt-uncss. Kaedah operasi khusus adalah seperti berikut:

• Pasang Grunt: npm install -g grunt-cli
• Pergi ke direktori akar projek dan buat fail baharu bernama Gruntfile.js
• Konfigurasikan fail Gruntfile.js dan tambahkan cara menggunakan pemalam grunt-uncss
• Laksanakan arahan grunt untuk menjalankan tugas Grunt

Kelebihan: Pelbagai fungsi boleh dicapai melalui satu siri tugasan, sangat fleksibel dan berskala.

(2) Gulp

Gulp ialah alat binaan automatik berasaskan aliran yang juga boleh membersihkan CSS secara automatik melalui beberapa pemalam. Membersihkan CSS berlebihan boleh dicapai dengan menggunakan pemalam gulp-uncss. Kaedah operasi khusus adalah seperti berikut:

• Pasang Gulp: npm install -g gulp-cli
• Buat projek baharu dan masukkan direktori akar projek
• Pasang gulp-uncss Plug-in: npm install --save-dev gulp-uncss
• Tambah tugasan yang berkaitan dalam fail gulpfile.js
• Gunakan arahan gulp untuk menjalankan tugas

Kelebihan: Data boleh diproses dalam cara penstriman, yang pantas dan boleh mengendalikan sejumlah besar fail dengan cekap.

Ringkasnya, terdapat banyak kaedah dan alatan untuk dipilih untuk mengalih keluar CSS berlebihan Kaedah khusus yang anda pilih bergantung pada saiz dan kerumitan projek serta tabiat dan keutamaan pembangun. Tetapi secara keseluruhan, membersihkan CSS berlebihan adalah perkara yang sangat berfaedah untuk dilakukan dan boleh meningkatkan prestasi dan kebolehselenggaraan tapak web anda.

Atas ialah kandungan terperinci Bagaimana untuk membuang css berlebihan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!