memampatkan CSS: alat yang berkuasa untuk meningkatkan kelajuan laman web

mata teras:

pemampatan CSS mengurangkan saiz fail dengan mengeluarkan watak yang berlebihan, dengan itu mempercepatkan muat turun dan menyimpan pemindahan data.
CSS Optimizer (CSSO) adalah alat mampatan berasaskan Node.js yang memerlukan kebiasaan dengan antara muka baris arahan.
CSSO bukan sahaja menghilangkan ruang, titik koma dan komen yang tidak perlu, tetapi juga mengoptimumkan dengan menggabungkan blok pengisytiharan dengan pemilih pendua, memadamkan atribut ditimpa, dan memendekkan kod warna.
Semasa memampatkan CSS dapat meningkatkan prestasi laman web, ia juga boleh membuat kod sukar dibaca dan debug. Oleh itu, adalah disyorkan untuk menyimpan fail CSS yang tidak dikompresi asal untuk tujuan pembangunan.

(Berikut adalah dikutip dari buku "The Master of CSS" yang ditulis oleh Tiffany Brown. Buku ini boleh didapati di seluruh dunia, dan anda juga boleh membeli versi e-book di sini.) Alat pemaju boleh membantu anda mencari dan menyelesaikan masalah rendering, tetapi betapa efisiennya? Adakah saiz fail kami diminimumkan? Untuk melakukan ini, kita memerlukan alat mampatan.

Dalam konteks CSS, mampatan hanya bermaksud mengeluarkan aksara yang berlebihan. Sebagai contoh, pertimbangkan blok kod berikut:

Kod ini termasuk rehat dan ruang garis, dan panjangnya 98 bait. Mari lihat contoh termampat:

<code>h1 {
    font: 16px / 1.5 'Helvetica Neue', arial, sans-serif;
    width: 80%;
    margin: 10px auto 0px;
}</code>

Sekarang CSS kami hanya 80 bait panjang, penurunan sebanyak 18%. Sudah tentu, bait yang lebih sedikit, semakin cepat kelajuan muat turun, dan kurang data yang anda dan pengguna anda akan memindahkan.

<code>h1{font:16px/1.5 'Helvetica Neue',arial,sans-serif;width:80%;margin:10px auto 0}</code>

Dalam bahagian ini, kami akan memperkenalkan CSS Optimizer (CSSO), alat pemampatan berasaskan Node.js. Untuk memasang CSSO, anda mesti memasang Node.js dan NPM terlebih dahulu. NPM dipasang sebagai sebahagian daripada proses pemasangan Node.js, jadi anda hanya perlu memasang satu pakej.

Menggunakan CSSO memerlukan anda untuk mengetahui antara muka baris arahan. Pengguna Linux dan OS X boleh menggunakan aplikasi terminal (untuk OS X, Aplikasi & GT; Aplikasi Terminal). Jika anda menggunakan Windows, gunakan Prompt Command. Pergi ke menu Permulaan atau Windows dan taipkan CMD dalam kotak carian.

Memasang CSSO

Selepas menubuhkan Node.js dan NPM, anda boleh memasang CSSO. Pada arahan baris arahan, ketik:

Bendera untuk memasang CSSO secara global supaya kita boleh menggunakannya dalam baris arahan. Pengguna OS X dan Linux mungkin perlu menggunakan sudo (

). Apabila NPM mencetak laluan pemasangannya ke tetingkap baris arahan dan baris arahan segera muncul semula, anda tahu ia telah dipasang dengan jayanya, seperti yang ditunjukkan dalam Rajah 3.25.

npm install -g csso -g sudo npm install -g csso Rajah 3.25.

Sekarang kita sudah bersedia untuk memampatkan CSS.

Compress menggunakan csso

Untuk memampatkan fail CSS, jalankan arahan CSSO dan lulus nama fail sebagai parameter:

csso style.css Ini akan melakukan mampatan asas. CSSO membuang ruang yang tidak perlu, titik koma tambahan, dan komen dalam fail input CSS.

Selepas selesai, CSSO mencetak CSS yang dioptimumkan ke output standard, iaitu terminal semasa atau tetingkap prompt arahan. Walau bagaimanapun, dalam kebanyakan kes, kami mahu menyimpan output itu ke fail. Untuk melakukan ini, lulus parameter kedua ke CSSO, nama fail termampat. Sebagai contoh, jika kita mahu menyimpan versi mampat gaya.css sebagai style.min.css, kita akan menggunakan arahan berikut:

csso style.css style.min.css Secara lalai, CSSO menyusun semula bahagian CSS. Sebagai contoh, ia menggabungkan blok pengisytiharan dengan pemilih pendua dan membuang beberapa atribut yang ditimpa. Pertimbangkan CSS berikut:

body { margin: 20px 30px; padding: 100px; margin-left: 0px; }

h1 { font: 200 36px / 1.5 sans-serif; }

Dalam segmen kod ini, h1 { color: #ff6600; } overwrites Deklarasi

sebelumnya. Kami juga menggunakan semula

sebagai pemilih untuk blok pengisytiharan berterusan. Selepas pengoptimuman dan pemampatan, kami mendapat: margin-left margin h1 CSSO memadam ruang yang tidak perlu, garis baru, dan titik koma dan memendekkan

ke

<code>h1 {
    font: 16px / 1.5 'Helvetica Neue', arial, sans-serif;
    width: 80%;
    margin: 10px auto 0px;
}</code>

. CSSO juga menggabungkan sifat -sifat

dan #ff6600 ke dalam perisytiharan () dan menggabungkan blok pemilih #f60 kami ke dalam satu. Sekarang, jika anda meragui bagaimana CSSO akan menulis semula CSS anda, anda boleh melumpuhkan ciri refactoringnya. Cuma gunakan logo margin atau margin-left. Sebagai contoh, berjalan margin: 20px 30px 20px 0 akan mendapat hasil berikut: h1 --restructure-off -off Sekarang CSS kami dimampatkan, tetapi tidak dioptimumkan. Melumpuhkan refactoring akan menghalang fail CSS anda daripada mencapai saiz minimum. Elakkan daripada melumpuhkan refactoring melainkan anda menghadapi masalah. Preprocessor yang diperkenalkan dalam Bab 9 menyediakan keupayaan mampatan dalam set alatnya; csso style.css style.min.css -off

<code>h1{font:16px/1.5 'Helvetica Neue',arial,sans-serif;width:80%;margin:10px auto 0}</code>

soalan yang sering ditanya mengenai menggunakan pengoptimal CSS untuk memampatkan CSS

Apakah kepentingan memampatkan CSS dalam pembangunan web? memampatkan CSS adalah aspek penting dalam pembangunan web kerana ia membantu mengurangkan saiz fail CSS. Mengurangkan saiz fail akan menghasilkan pemuatan laman web yang lebih cepat, dengan itu memberikan pengalaman pengguna yang lebih baik. Fail CSS yang dimampatkan menghilangkan aksara yang tidak perlu seperti ruang, rehat dan komen garis, yang tidak menjejaskan fungsi kod. Proses ini dapat meningkatkan prestasi laman web dengan ketara, terutamanya bagi pengguna dengan sambungan internet yang lebih perlahan.

Bagaimana pengoptimuman CSS berfungsi?

CSS Optimizer berfungsi dengan menganalisis kod CSS anda dan mengeluarkan aksara yang tidak perlu dan redundansi. Ia memampatkan fail CSS dengan menghapuskan ruang, rehat dan komen garis, dan memudahkan struktur kod. Ini akan menghasilkan saiz fail yang lebih kecil dan muat turun lebih cepat dari pelayar web, dengan itu meningkatkan prestasi keseluruhan laman web.

Apakah risiko memampatkan CSS?

Semasa memampatkan CSS dapat meningkatkan prestasi laman web anda dengan ketara, harus diperhatikan bahawa ia juga boleh membuat kod lebih sukar untuk dibaca dan debug. Ini kerana proses itu menghilangkan semua format dan komen yang menjadikan kod itu mudah dibaca. Oleh itu, adalah disyorkan untuk menyimpan fail CSS yang tidak dikompresi asal untuk penyahpepijatan dan pembangunan.

Bolehkah saya memampatkan CSS secara manual?

Ya, anda boleh memampatkan CSS secara manual dengan mengeluarkan semua aksara yang tidak perlu dan memudahkan kod. Walau bagaimanapun, proses ini boleh memakan masa dan rentan kesilapan, terutamanya untuk fail CSS yang lebih besar. Proses ini boleh automatik menggunakan alat seperti pengoptimum CSS untuk memastikan bahawa CSS anda dimampatkan dengan tepat dan cekap.

Bagaimana menggunakan pengoptimum CSS?

Untuk menggunakan pengoptimum CSS, anda hanya menampal kod CSS ke dalam medan input pada laman web CSS Optimizer dan klik butang "Optimizer". Alat ini kemudian akan menganalisis kod anda dan memberi anda versi termampat yang boleh anda salin dan gunakan di laman web anda.

akan memampatkan CSS mempengaruhi fungsi laman web saya?

Tidak, memampatkan CSS tidak akan menjejaskan fungsi laman web anda. Proses ini hanya menghilangkan aksara yang tidak perlu dan memudahkan kod, tetapi tidak mengubah cara penyemak imbas menafsirkan peraturan CSS. Oleh itu, penampilan dan fungsi laman web anda akan tetap sama, tetapi ia akan dimuat lebih cepat kerana saiz fail yang lebih kecil.

Bolehkah saya menggunakan pengoptimum CSS untuk fail CSS yang besar?

Ya, pengoptimum CSS boleh mengendalikan fail CSS yang besar. Walau bagaimanapun, semakin besar fail, semakin lama diperlukan alat untuk menganalisis dan memampatkan kod. Walau bagaimanapun, dengan fail CSS yang besar, menggunakan pengoptimal CSS masih lebih cekap dan tepat daripada cuba memampatkan kod secara manual.

Adakah pengoptimum CSS percuma untuk digunakan?

Ya, pengoptimuman CSS adalah alat percuma yang boleh anda gunakan untuk memampatkan kod CSS. Ia adalah alat berasaskan web supaya anda tidak perlu memuat turun atau memasang apa-apa untuk menggunakannya. Anda hanya perlu melawat laman web CSS Optimizer, tampal kod CSS anda dan anda akan mendapat versi termampat.

Bolehkah saya membalikkan proses ini jika saya perlu menukar CSS?

Ya, anda boleh membalikkan proses ini dengan menggunakan fail CSS yang tidak dikompresi asal. Inilah sebabnya mengapa disyorkan untuk menyimpan salinan fail CSS asal sebelum memampatkannya. Jika anda perlu menukar atau debug kod, anda boleh menggunakan fail asal dan kemudian memampatkannya lagi apabila anda selesai.

Apa amalan lain yang boleh saya gabungkan dengan pemampatan CSS untuk meningkatkan prestasi laman web saya?

Selain memampatkan CSS, anda juga boleh memampatkan fail HTML dan JavaScript. Ini dapat mengurangkan masa pemuatan laman web. Amalan lain termasuk mengoptimumkan imej, menggunakan rangkaian pengedaran kandungan (CDNs), membolehkan pemampatan, dan melaksanakan caching penyemak imbas. Amalan -amalan ini digabungkan dengan pemampatan CSS dapat meningkatkan prestasi dan pengalaman pengguna laman web anda dengan ketara.

Atas ialah kandungan terperinci Meminimumkan CSS dengan pengoptimuman CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!