Minifying CSS bermaksud mengeluarkan aksara yang tidak perlu seperti Whitespace, Komen, dan Break Line tanpa mengubah fungsi, menghasilkan saiz fail yang lebih kecil dan masa beban halaman yang lebih cepat. 1. Untuk pengurangan, satu kali, gunakan alat dalam talian seperti cssminifier.com, CSS bersih, atau pengetua CSS Toptal dengan menampal kod anda, mengklik "Minify," dan menyalin output-ini adalah pemula yang mesra tetapi tidak sesuai untuk projek besar atau kod sensitif. 2. Bagi pemaju, mengautomasikan proses menggunakan alat binaan: Pilihan A -Gunakan Poskss dengan cssnano dengan memasang node.js dan pakej yang diperlukan, membuat fail konfigurasi, menambah skrip ke pakej.json, dan menjalankannya untuk menghasilkan fail yang minifikasi, yang mengintegrasikan dengan rangka kerja moden. Pilihan B-Gunakan Webpack dengan CSS-Minimizer-WebPack-Plugin dengan memasang plugin, mengemas kini konfigurasi Webpack, dan menjalankan webpack dalam mod pengeluaran untuk meminimumkan CSS secara automatik. 3. Gunakan pelari tugas seperti Gulp dengan memasang Gulp-Cssnano dan Gulp-Rename, menyediakan gulpfile.js untuk menentukan tugas minifikasi, dan menjalankannya untuk memproses dan menyimpan fail yang dimampatkan, sesuai untuk aliran kerja warisan. 4. Gunakan alat pelayan atau alat CMS: Dalam WordPress, plugin seperti Autoptimize atau WP Rocket Handle CSS Minification secara automatik; Penjana tapak statik seperti Jekyll atau Hugo menyokong minifikasi terbina dalam atau plugin; CDN seperti Cloudflare atau Netlify sering menyediakan ciri minifikasi automatik. Contoh CSS yang minifikasi menghilangkan semua ruang dan komen tambahan, bertukar. Header {padding: 20px; Warna: #333; saiz font: 16px; } / Ini adalah komen / ke dalam .header {padding: 20px; warna:#333; saiz font: 16px}, menyampaikan gaya yang sama dalam fail yang lebih kecil. Minifikasi CSS meningkatkan prestasi, terutamanya pada sambungan mudah alih atau perlahan, dan harus automatik dalam persekitaran pengeluaran menggunakan toolset yang sesuai berdasarkan tumpukan teknologi projek.

Minifikasi CSS bermaksud mengeluarkan semua aksara yang tidak perlu dari Whitespace, komen, dan pemecahan talian CSS anda -tanpa mengubah fungsinya. Ini menjadikan fail lebih kecil, yang meningkatkan kelajuan beban halaman dan prestasi keseluruhan. Inilah caranya dengan berkesan.

1. Gunakan minifier CSS dalam talian (cepat & mudah)

Jika anda mempunyai fail CSS kecil atau hanya memerlukan satu kali minify, alat dalam talian adalah pilihan terpantas.

Alat popular:

• Minifier CSS (cssminifier.com)
• CSS Bersih
• Toptal CSS Minifier

Cara Menggunakan:

• Tampal kod CSS anda ke dalam kotak input
• Klik "Minify"
• Salin output termampat

? Pro: Tiada persediaan, mesra pemula
? cons: tidak sesuai untuk projek besar atau automasi

?? Elakkan menggunakan alat dalam talian untuk kod sensitif atau proprietari, kerana anda memuat naiknya ke pelayan pihak ketiga.

2. Gunakan alat binaan (untuk pemaju)

Jika anda mengusahakan projek sebenar, automasi minifikasi menggunakan alat binaan. Ini mengintegrasikan ke dalam aliran kerja anda dan boleh meminimumkan CSS setiap kali anda membuat perubahan.

Pilihan A: Gunakan PostCSS dengan CSSNANO

POSTCSS adalah alat yang berkuasa yang mengubah CSS dengan plugin. cssnano adalah plugin yang meminimumkan CSS.

Langkah:

1. Pasang Node.js (jika belum dipasang)
2. Jalankan:

    NPM Pasang Postcss CSSNANO POSTCSS-CLI-SAVE-DEV

3. Buat postcss.config.js :

    modul.exports = {
     Plugin: [
       memerlukan ('cssnano') ({
         Preset: 'lalai'
       })
     ]
   }

4. Tambahkan skrip ke package.json :

    "Skrip": {
     "Minify -CSS": "Postcss Styles.css -O Styles.min.css"
   }

5. Jalankan:

    NPM Run Minify-CSS

? Pro: automatable, sesuai dengan aliran kerja dev moden
? Bekerja hebat dengan kerangka seperti React, Vue, dll.

Pilihan B: Gunakan Webpack

Jika anda menggunakan Webpack, gunakan css-minimizer-webpack-plugin .

1. Pasang:

    NPM Pasang CSS-MINIMIZER-WEBPACK-PLUGIN-SAVE-DEV

2. Kemas kini webpack.config.js :

    const cssminimizerplugin = memerlukan ('css-minimizer-webpack-plugin');
   
   modul.exports = {
     Pengoptimuman: {
       Kurangkan: Benar,
       Minimizer: [
         baru cssminimizerplugin ()
       ]
     }
   };

Sekarang, apabila anda menjalankan webpack --mode production , CSS anda akan diminimumkan secara automatik.

3. Gunakan pelari tugas (seperti Gulp atau Grunt)

Untuk aliran kerja yang lebih tua, Gulp masih merupakan pilihan yang kukuh.

Contoh dengan Gulp:

1. Pasang:

    NPM Pasang Gulp Gulp-Cssnano Gulp-Rename--Save-DeV

2. Buat gulpfile.js :

    const gulp = memerlukan ('gulp');
   const cssnano = memerlukan ('gulp-cssnano');
   const rename = memerlukan ('gulp-rename');
   
   Gulp.Task ('Minify-CSS', fungsi () {
     kembali gulp.src ('src/styles.css')
       .pipe (cssnano ())
       .PIPE (Namakan semula ('Styles.min.css'))
       .pipe (gulp.dest ('dist/'));
   });

3. Jalankan:

    Gulp Minify-CSS

4. Gunakan alat pelayan atau CMS

Jika anda tidak selesa dengan alat baris arahan:

• WordPress : Plugin seperti Autoptimize atau WP Rocket Minify CSS secara automatik.
• Penjana tapak statik (contohnya, Jekyll, Hugo): Gunakan minifikasi terbina dalam atau plugin.
• Perkhidmatan CDN (CloudFlare, Netlify): Selalunya termasuk pengurangan automatik.

Bonus: Seperti apa css minified

Asal:

 .header {
  Padding: 20px;
  Warna: #333;
  saiz font: 16px;
}
/ * Ini adalah komen */

Minified:

 .header {padding: 20px; warna:#333; saiz font: 16px}

Semua ruang dan komen tambahan hilang -gaya yang sama, fail yang lebih kecil.

Minifikasi CSS adalah mudah sekali ditubuhkan. Untuk satu kali, gunakan alat dalam talian. Untuk projek sebenar, mengautomasikannya dengan postcss, webpack, atau gulp. Keuntungan prestasi adalah nyata, terutamanya pada sambungan mudah alih atau perlahan.

Pada dasarnya: Keluarkan kembung, sediakan fail yang lebih kecil, dan biarkan pengguna melihat laman web anda lebih cepat.

Atas ialah kandungan terperinci Bagaimana cara meminimumkan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!