Ugrás a tartalomhoz

Gyorsítótárazás és tömörítés

A folyamat három, éles környezetet érintő feladata: elkerülni az azonos bemenet újrafordítását, a fordító minden kérésnél történő felépítésének költségét, valamint a létrehozott CSS méretének csökkentését. Mindhárom a fordító köré épülő, PHP oldali segédfunkció.

Gyorsítótárazás

A CSS előállítása minden híváskor végigfuttatja a teljes folyamatot. Ha a tartalom nem változik a kérések között, a fájlalapú gyorsítótár lemezre írja az eredményt, majd a következő hívásoknál onnan szolgálja ki.

Adja át a cache értéket a tw::generate() számára – true az alapértelmezett könyvtár, egy elérési út pedig egyéni könyvtár megadására szolgál:

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
]);

A gyorsítótár könyvtára automatikusan létrejön, ha még nem létezik.

Gyorsítótárkulcs

A kulcs a tartalomból, a CSS konfigurációból és a minify jelzőből származik; a rendszer a fájlnévbe hash-eli tailwind_<hash>.css. A jelölőnyelv, a CSS bemenet vagy a tömörítés állapotának bármely változása új kulcsot, így új fájlt eredményez.

A kulcsban szereplő CSS konfiguráció az inline css és a importPaths által megnevezett fájlok tartalmából áll. Két bemenet nem része: az ezekben a fájlokban lévő beágyazott @import által behúzott fájlok, valamint a TailwindPHP verziója. Beágyazott import szerkesztése vagy a csomag frissítése után ürítse ki a gyorsítótárat, különben továbbra is a régi kimenetet kapja.

Élettartam

A cacheTtl másodpercben megadott élettartam. Találat esetén a fájl módosítási idejét a rendszer összeveti az aktuális idővel; ha a fájl régebbi, mint cacheTtl, találat helyett újrafordít. cacheTtl nélkül a bejegyzések sosem járnak le – törölje őket kézzel.

A gyorsítótár ürítése

A tw::clearCache() (vagy a clearCache() függvény) törli a gyorsítótár könyvtárában lévő tailwind_*.css fájlokat, és visszaadja a törölt fájlok számát.

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

A fordítóállapot gyorsítótára

A kimeneti gyorsítótár csak akkor segít, ha ugyanaz a tartalom tér vissza. Ha a tartalom minden híváskor változik, a költséges rész maga a fordító felépítése: a @import "tailwindcss" feloldása, a csomagolt erőforrások elemzése és a téma összeállítása. Ez a fázis csak a bemeneti CSS értéktől függ, ezért eltárolható és újra felhasználható.

Adja át a stateCacheFile értéket a tw::compile() (vagy a new TailwindCompiler($css, $options)) számára:

PHP
use TailwindPHP\tw;

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

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

Az első példányosításkor az állapot egyszerű PHP fájlként íródik az adott elérési útra, így az OPcache megoszthatja a kérések között; a későbbi példányosítások újraelemzés helyett betöltik. A kimenet bájtról bájtra azonos a gyorsítótár nélküli fordítóéval.

  • A fájlt a rendszer egy motor-ujjlenyomathoz (a TailwindPHP forrásainak és erőforrásainak méretéhez és módosítási idejéhez), a bemeneti CSS és a base, valamint importSearchPaths beállításokból képzett kulcshoz, továbbá minden behúzott fájl méretéhez és módosítási idejéhez viszonyítva ellenőrzi. Eltérés esetén újraépíti és újraírja, így a TailwindPHP frissítése vagy egy behúzott fájl szerkesztése nem igényel kézi lépést.
  • Az elérési út kezelése az Ön feladata: minden külön bemeneti CSS számára külön fájlt használjon egy olyan könyvtárban, amelybe a webszerver írhat. Az írás atomi (ideiglenes fájl, majd rename()).
  • Egyéni importResolver-t használó bemenetek megkerülik a gyorsítótárat, mert a feloldó viselkedése nem ujjlenyomatozható.
  • Ugyanez a gyorsítótár az alacsonyabb szintű compile() tömb API köré is elérhető, TailwindPHP\StateCache\compileCssCached($css, $cacheFile, $options) néven.

A tw::generate() nem fogad stateCacheFile értéket; minden híváskor új fordítót épít. Ha számít a felépítés költsége, használjon fordítópéldányt.

Tömörítés

A tömörítés csökkenti a kimenet méretét éles környezethez. A minify jelző közvetlenül a szerializálás során állít elő tömörített CSS kimenetet, ezért ez a leggyorsabb és legpontosabb út; a tw::minify() a karakterláncalapú tömörítőt (src/_tailwindphp/CssMinifier.php) futtatja egy meglévő CSS karakterláncon:

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);

A két út szerkezete egyenértékű, de bájtszinten eltér. A szerializáló út megőrzi azokat a leszármazott :not() szelektorokat, amelyeket a karakterláncfeldolgozás összevon; ezért létrehozott kimenethez a minify jelzőt részesítse előnyben, a tw::minify() pedig csak karakterláncként érkező CSS esetén használja.

Működése

Mindkét út ugyanazokat a méretcsökkentő lépéseket alkalmazza:

Lépés Hatás
Megjegyzések eltávolítása Eltávolítja a /* … */ blokkokat
Üres helyek összevonása Összevonja az üres karakterek sorozatait, és eltávolítja őket a { } ; : , és a szelektorkombinátorok körül
Hexadecimális színek rövidítése #ffffff → #fff, #aabbcc → #abc
Nulla mértékegységek eltávolítása 0px → 0 (a 0s/0ms időértékek megmaradnak)
Betűvastagság rövidítése font-weight:normal → 400, font-weight:bold → 700
Üres szabályok eltávolítása Eltávolítja az üres deklarációs blokkokat tartalmazó szelektorokat

Szándékosan nem vonja össze a duplikált szelektorokat és nem kombinálja a rövidített tulajdonságokat – mindkettő nehezíti a hibakeresést, és a kaszkádra is hatással lehet.

CLI: --minify vagy --optimize

A CLI két jelzőn keresztül teszi elérhetővé a szerializáló tömörítési útját:

Shell
# 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

A jelenlegi kiadásban a --optimize is tömörít, így mindkét parancs ugyanazokat a bájtokat írja ki (#9). A lightningcss-nek megfelelő átalakítások minden build során lefutnak, így az egyszerű kimenet (jelző nélkül) is már optimalizált és jól olvasható.

A nyilvános API többi részéről – tw::generate(), tw::compile(), vizsgálati metódusok és bemeneti formátumok – lásd az API referenciát.