İçeriğe geç

Önbelleğe Alma ve Küçültme

Üretim sürecinde ardışık düzenin sonunda üç konu ele alınır: aynı girdiyi yeniden derlemekten kaçınmak, her istekte derleyici oluşturma maliyetinden kaçınmak ve oluşturulan CSS çıktısını küçültmek. Bu üçü de derleyiciyi çevreleyen PHP tarafı yardımcılarıdır.

Önbelleğe Alma

CSS oluşturma işlemi her çağrıda tüm ardışık düzeni çalıştırır. İstekler arasında değişmeyen içerikler için dosya tabanlı önbellek sonucu diske yazar ve sonraki çağrılarda sunar.

Varsayılan dizin için true veya özel bir dizin için yol dizgesi olmak üzere, cache değerini tw::generate() öğesine iletin:

PHP
use TailwindPHP\tw;

// Cache to the default directory: sys_get_temp_dir() . '/tailwindphp'
$css = tw::generate([
    'content' => '<div class="flex p-4">Hello</div>',
    'cache' => true,
]);

// Cache to a custom directory
$css = tw::generate([
    'content' => '<div class="flex p-4">Hello</div>',
    'cache' => '/path/to/cache',
]);

// With a time-to-live (seconds)
$css = tw::generate([
    'content' => '<div class="flex p-4">Hello</div>',
    'cache' => true,
    'cacheTtl' => 3600, // expire after 1 hour
]);

Önbellek dizini yoksa otomatik olarak oluşturulur.

Önbellek anahtarı

Anahtar; içerikten, CSS yapılandırmasından ve minify işaretinden türetilir, ardından dosya adına tailwind_<hash>.css olarak hash'lenir. Biçimlendirmede, CSS girdisinde veya küçültmenin açık olup olmadığında yapılan her değişiklik farklı bir anahtar ve dolayısıyla farklı bir dosya oluşturur.

Anahtardaki CSS yapılandırması, satır içi css ile importPaths içinde adı geçen dosyaların içeriklerinden oluşur. İki girdi bu kapsama girmez: bu dosyalardaki iç içe @import aracılığıyla alınan dosyalar ve TailwindPHP sürümü. İç içe bir içe aktarmayı düzenledikten veya paketi yükselttikten sonra önbelleği temizleyin; aksi takdirde eski çıktı sunulmaya devam eder.

Yaşam süresi

cacheTtl saniye cinsinden bir kullanım süresidir. Önbellek isabetinde dosyanın değiştirilme zamanı geçerli zamanla karşılaştırılır; dosya cacheTtl değerinden eskiyse önbellek kaçırması sayılır ve yeniden derlenir. cacheTtl yoksa girdilerin süresi dolmaz; bunları açıkça temizleyin.

Önbelleği temizleme

tw::clearCache() (veya clearCache() işlevi), önbellek dizinindeki tailwind_*.css dosyalarını siler ve silinen dosya sayısını döndürür.

PHP
use TailwindPHP\tw;
use function TailwindPHP\clearCache;

$deleted = tw::clearCache();                  // default directory
$deleted = tw::clearCache('/path/to/cache');  // custom directory
clearCache('/path/to/cache');                 // function form

Derleyici durumu önbelleği

Çıktı önbelleği yalnızca aynı içerik yeniden geldiğinde işe yarar. İçerik her çağrıda değişiyorsa maliyetli kısım derleyicinin kendisini oluşturmaktır: @import "tailwindcss" çözümleme, paketlenmiş kaynakları ayrıştırma ve temayı biriktirme. Bu aşama yalnızca girdi CSS değerine bağlıdır; bu nedenle saklanıp yeniden kullanılabilir.

stateCacheFile değerini tw::compile() (veya new TailwindCompiler($css, $options)) öğesine iletin:

PHP
use TailwindPHP\tw;

$compiler = tw::compile($themeCss, [
    'stateCacheFile' => __DIR__ . '/cache/tailwind-state.php',
]);

$css = $compiler->generateExact($html, true);

İlk oluşturma sırasında durum, belirtilen yola düz PHP dosyası olarak yazılır ve OPcache bunu istekler arasında paylaşabilir; sonraki oluşturmalarda yeniden ayrıştırmak yerine bu dosya yüklenir. Çıktı, önbellek kullanılmayan derleyicinin çıktısıyla bayt bayt aynıdır.

  • Dosya; bir motor parmak izine (TailwindPHP kaynaklarının ve kaynak dosyalarının boyutu ile değiştirilme zamanı), girdi CSS değerinden ve base ile importSearchPaths seçeneklerinden türetilen bir anahtara ve girdinin içe aktardığı her dosyanın boyutuna ve değiştirilme zamanına göre doğrulanır. Uyumsuzluk dosyayı yeniden oluşturup yazar; böylece TailwindPHP yükseltmek veya içe aktarılan bir dosyayı düzenlemek elle işlem gerektirmez.
  • Yolun sahibi sizsiniz: her farklı girdi CSS için web sunucusunun yazabildiği bir dizinde ayrı dosya kullanın. Yazma işlemleri atomiktir (geçici dosya ve rename() kullanılır).
  • Özel importResolver kullanan girdiler önbelleği atlar; çünkü çözümleyicinin davranışı parmak iziyle belirlenemez.
  • Aynı önbellek, daha alt düzeydeki compile() dizi API çevresinde TailwindPHP\StateCache\compileCssCached($css, $cacheFile, $options) olarak da kullanılabilir.

tw::generate(), stateCacheFile almaz; her çağrıda yeni bir derleyici oluşturur. Oluşturma maliyeti önemliyse bir derleyici örneği kullanın.

Küçültme

Küçültme, üretim için çıktıyı küçültür. minify işareti, serileştirme sırasında küçültülmüş CSS çıktısını doğrudan üretir; bu hem en hızlı hem de en hassas yoldur. tw::minify() ise dize tabanlı küçültücüyü (src/_tailwindphp/CssMinifier.php) mevcut bir CSS dizesine uygular:

PHP
use TailwindPHP\tw;

// Minify during generation (serializer path, preferred)
$css = tw::generate([
    'content' => '<div class="flex p-4">Hello</div>',
    'minify' => true,
]);

// Or minify an existing string (string-based post-pass)
$css = tw::generate('<div class="flex p-4">Hello</div>');
$minified = tw::minify($css);

İki yol eşdeğer yapı üretir ancak baytları aynı değildir. Serileştirici yolu, dize aşamasının daralttığı alt öğe :not() seçicilerini korur. Bu nedenle oluşturulan çıktı için minify işaretini tercih edin; dize olarak gelen CSS için tw::minify() kullanın.

Yaptığı işler

Her iki yol da aynı boyut küçültme adımlarını uygular:

Adım Etkisi
Yorumları kaldırma /* … */ bloklarını kaldırır
Boşlukları daraltma Boşluk dizilerini daraltır ve { } ; : , çevresindeki boşluklarla seçici birleştiricilerinin çevresindeki boşlukları kaldırır
Onaltılık renkleri kısaltma #ffffff → #fff, #aabbcc → #abc
Sıfır birimlerini kaldırma 0px → 0 (0s/0ms zaman değerlerini korur)
Font ağırlığını kısaltma font-weight:normal → 400, font-weight:bold → 700
Boş kuralları kaldırma Bildirim bloğu boş olan seçicileri kaldırır

Tasarım gereği yinelenen seçicileri birleştirmez veya kısaltılmış özellikleri bir araya getirmez; ikisi de hata ayıklamayı zorlaştırabilir ve basamaklandırmayı etkileyebilir.

CLI: --minify ve --optimize

CLI, serileştiricinin küçültme yolunu iki işaret üzerinden sunar:

Kabuk
# Optimize and minify (smallest output)
tailwindphp -i ./src/app.css -o ./dist/styles.css --minify   # or -m

# Meant to optimize without minifying
tailwindphp -i ./src/app.css -o ./dist/styles.css --optimize

Mevcut sürümde --optimize de küçültme yapar; dolayısıyla iki komut da aynı baytları yazar (#9). lightningcss eşdeğeri dönüşümler her derlemede çalışır; bu nedenle düz çıktı (işaretsiz) zaten optimize edilmiş ve okunabilir biçimdedir.

Diğer herkese açık API arayüzler — tw::generate(), tw::compile(), inceleme yöntemleri ve girdi biçimleri — için API başvuru sayfasına bakın.