CSS Minifier

Apa Itu Minifikasi CSS?

Minifikasi CSS adalah proses menghapus semua karakter yang tidak diperlukan dari sebuah stylesheet tanpa mengubah perilakunya. Ini berarti menghilangkan spasi kosong, pemisah baris, komentar, dan sintaks redundan seperti titik koma di akhir dan tanda kutip yang tidak perlu. Browser mengurai CSS yang diminifikasi secara identik dengan yang asli. W3C CSS Syntax Module mendefinisikan tata bahasanya; spasi kosong antar token bersifat opsional kecuali di mana ia memisahkan identifier. Minifikasi memanfaatkan hal ini dengan menyederhanakan semuanya menjadi karakter minimum yang diperlukan.

CSS minifier online mengambil stylesheet berformat Anda dan menghasilkan versi ringkas yang dioptimalkan untuk ukuran transfer. Penghematan tipikal berkisar antara 15% hingga 40% tergantung pada seberapa banyak spasi kosong dan komentar yang ada di sumber. Untuk stylesheet berukuran 50 KB, ini berarti 7–20 KB lebih sedikit byte yang dikirim melalui jaringan di setiap pemuatan halaman. Dikombinasikan dengan kompresi gzip atau Brotli di server, minifikasi mengurangi ukuran transfer akhir lebih jauh karena ukuran output terkompresi dari CSS yang sudah diminifikasi lebih kecil daripada mengompresi CSS sumber asli yang berformat.

Minifikasi adalah langkah standar dalam pipeline build frontend. Alat seperti cssnano, clean-css, dan esbuild menjalankan minifikasi sebagai bagian dari proses build. Namun selama pengembangan, Anda sering perlu meminifikasi satu cuplikan untuk pengujian, menyisipkan blok CSS kritis secara inline, atau memeriksa seberapa besar stylesheet menyusut sebelum menambahkannya ke konfigurasi bundle. Di sinilah CSS minifier berbasis browser berguna: tempel CSS, dapatkan output yang diminifikasi, salin, dan lanjutkan.

/* Main navigation styles */
.nav {
  display: flex;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #1e293b;
}

/* Links inside nav */
.nav a {
  color: #e2e8f0;
  text-decoration: none;
  margin-right: 1.5rem;
  transition: color 0.2s ease;
}

.nav a:hover {
  color: #818cf8;
}

.nav{display:flex;align-items:center;padding:1rem 2rem;background-color:#1e293b}.nav a{color:#e2e8f0;text-decoration:none;margin-right:1.5rem;transition:color .2s ease}.nav a:hover{color:#818cf8}

Mengapa Menggunakan CSS Minifier Ini?

Tempelkan CSS apa pun dan dapatkan output yang diminifikasi dalam hitungan milidetik. Tidak perlu konfigurasi build tool, tidak ada perintah CLI, tidak perlu membuat akun.

Kasus Penggunaan CSS Minifier

Teknik Minifikasi CSS

CSS minifier menerapkan beberapa transformasi untuk mengurangi ukuran file. Setiap transformasi menargetkan jenis redundansi yang berbeda dalam sumber. Tabel di bawah ini mencantumkan teknik utama dan penghematan tipikal pada stylesheet berformat:

Persentase penghematan bervariasi berdasarkan input. File dengan banyak komentar mendapat keuntungan lebih besar dari penghapusan komentar, sementara file yang sudah ringkas mengalami penghematan yang lebih kecil. Keuntungan paling konsisten berasal dari penghapusan spasi kosong dan optimasi shorthand. Minifier canggih seperti cssnano juga menggabungkan selector duplikat, mengubah properti longhand menjadi shorthand (margin-top + margin-right + margin-bottom + margin-left menjadi margin), dan menghapus deklarasi yang ditimpa.

Minifikasi vs. Kompresi Gzip

Minifikasi dan kompresi saling melengkapi, bukan saling menggantikan. Keduanya beroperasi di lapisan yang berbeda dan dapat ditumpuk satu sama lain:

Contoh Kode

Cara meminifikasi CSS secara terprogram dalam berbagai bahasa dan lingkungan:

import postcss from 'postcss'
import cssnano from 'cssnano'

const input = `
.nav {
  display: flex;
  padding: 0px 1rem;
  color: #ffffff;
  /* TODO: update color */
}
`

const result = await postcss([cssnano]).process(input, { from: undefined })
console.log(result.css)
// → ".nav{display:flex;padding:0 1rem;color:#fff}"

import csscompressor

css = """
.nav {
  display: flex;
  padding: 0px 1rem;
  color: #ffffff;
  /* navigation styles */
}
"""

minified = csscompressor.compress(css)
print(minified)
# → ".nav{display:flex;padding:0 1rem;color:#fff}"

package main

import (
	"fmt"
	"github.com/tdewolff/minify/v2"
	"github.com/tdewolff/minify/v2/css"
)

func main() {
	m := minify.New()
	m.AddFunc("text/css", css.Minify)

	input := ".nav { display: flex; padding: 0px 1rem; color: #ffffff; }"
	output, _ := m.String("text/css", input)
	fmt.Println(output)
	// → ".nav{display:flex;padding:0 1rem;color:#fff}"
}

# Using cssnano via PostCSS CLI
npx postcss styles.css --use cssnano -o styles.min.css

# Using clean-css CLI
npx clean-css-cli styles.css -o styles.min.css

# Quick one-liner with Node.js
node -e "const CleanCSS=require('clean-css');console.log(new CleanCSS().minify('body { margin: 0px; }').styles)"
# → "body{margin:0}"

Pertanyaan yang Sering Diajukan