CSS Küçültme Online: CSS Minify Aracı

Küçültülmüş Çıktı

Küçültme modunda çalışan biçimlendirici, yukarıdaki girdide şunu üretir:

.container{max-width:1200px;margin:0 auto;padding:0 1rem}.header{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;border-bottom:1px solid #e5e7eb}.nav-link{color:#374151;text-decoration:none;font-weight:500;transition:color .15s ease}.nav-link:hover{color:#3b82f6}.card{background:#fff;border-radius:.75rem;border:1px solid #e5e7eb;padding:1.5rem;box-shadow:0 1px 2px rgba(0,0,0,.05)}

Tüm yorumlar gitmiştir. Kurallar arasındaki, iki nokta üst üstelerden ve virgüllerden sonraki boşluklar kaldırılmıştır. #ffffff #fff olarak kısaltılmıştır. 0.15s ve 0.05 içindeki baştaki 0 atılmıştır. Sonuç tek bir sürekli satırdır.

Küçültme Neyi Kaldırır

Küçültme, sözdizimsel olarak yazma için gerekli ancak CSS ayrıştırıcısı için önemsiz olan karakterleri hedef alır:

Yorumlar: /* ... */ blokları geliştiriciye hizmet eder, tarayıcıya değil. Her yorum kaldırılır.

Boşluk: Parçalanmış CSS’de yeni satırlar, girintiler ve :, {, }, ve , etrafındaki boşlukların tümü isteğe bağlıdır. Ayrıştırıcı yalnızca yapısal karakterlere ihtiyaç duyar.

Gereksiz karakterler: Kapanış } öncesindeki son noktalı virgül CSS spesifikasyonuna göre isteğe bağlıdır. Küçültücüler, kural bloğu başına bir karakter kurtarmak için bunu kaldırır.

Renk kısaltması: #ffffff ve #000000 #fff ve #000 olur. rgba(0, 0, 0, 0.05) her virgülden sonraki boşluğu kaybeder.

Baştaki sıfırlar: 0.75rem .75rem olur. 0.15s .15s olur.

Bu optimizasyonlar birlikte tipik olarak sıkıştırılmamış dosya boyutunu yüzde 15 ila 30 oranında keser.

Küçültme ve Sıkıştırma: Gerçek Rakamlar

Küçültme ve HTTP sıkıştırması farklı mekanizmalardır. Her ikisi de aktarılan baytları azaltır, ancak farklı şekilde birleşirler:

Gzip, tekrarlayan desenleri sıkıştırdığı için büyük farkla kazanır ve CSS boşluğu son derece tekrarlayıcıdır. Gzip üzerine küçültme eklemek, iyi sıkışmayan içeriği (benzersiz metinli yorumlar, uzun renk değerleri) kaldırdığı için birkaç kilobayt daha kazandırır.

Pratik sonuç: önce web sunucunuzda her zaman gzip veya Brotli’yi etkinleştirin. Ardından küçültmeyi ekleyin. Hiçbir adımı atlamayın, ancak HTTP sıkıştırmasının işin çoğunu yaptığını anlayın.

Derleme Aracı Entegrasyonu

Modern frontend projelerinin çoğunda CSS küçültme otomatik olarak yapılır:

Vite ve Rollup, üretim derlemeleri için esbuild kullanır. Yapılandırma gerektirmez. vite build çalıştırmak varsayılan olarak küçültülmüş CSS çıktısı üretir.

webpack, css-loader ile css-minimizer-webpack-plugin gerektirir:

npm install css-minimizer-webpack-plugin --save-dev

// webpack.config.js
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [new CssMinimizerPlugin()],
  },
};

PostCSS ile cssnano size en fazla kontrolü verir. cssnano, yapılandırılabilir bir optimizasyon kümesi uygulayan bir PostCSS eklentisidir. Varsayılan ön ayar güvenlidir ve özellikleri yeniden sıralamaz veya görüntülemeyi bozabilecek dönüşümler uygulamaz:

npm install cssnano postcss postcss-cli --save-dev

// postcss.config.js
module.exports = {
  plugins: [require('cssnano')({ preset: 'default' })],
};

Derleme aracı olmadan tek seferlik küçültme için komut satırı seçeneği cleancss:

npm install clean-css-cli --save-dev
npx cleancss -o output.min.css input.css

Online Küçültücü Ne Zaman Kullanılır

Online bir küçültücü, bir derleme aracı kurulumuna geçmeden önce bir dosyanın ne kadar agresif küçültüleceğini kontrol etmeniz gerektiğinde veya derleme boru hattı olmayan bir projeye ait olmayan bir CSS parçasıyla çalışırken doğru araçtır. Ayrıca bir projeye kopyaladığınız üçüncü taraf bir CSS dosyasını hızlıca küçültmek için de kullanışlıdır.

Yinelenen olarak üretime gönderilen her şey için, otomatik çalışması için küçültmeyi derleme boru hattınıza entegre edin. Manuel küçültme, özellikle dosyalar güncellendiğinde unutulan bir adımdır. Diff denetleyici, orijinal ve küçültülmüş sürümleri karşılaştırmak ve dağıtmadan önce çıktının doğru göründüğünü doğrulamak için kullanışlıdır.