Preskoči na vsebino

Predpomnjenje in minifikacija

Na robu prevajalne poti so tri produkcijske naloge: izogniti se ponovnemu prevajanju enakih vhodov, strošku gradnje prevajalnika pri vsaki zahtevi in zmanjšati ustvarjeni CSS. Za vse tri poskrbijo pomožne funkcije na strani PHP, ki delujejo ob prevajalniku.

Predpomnjenje

Ustvarjanje CSS ob vsakem klicu izvede celotno pot. Če se vsebina med zahtevami ne spreminja, predpomnilnik na osnovi datotek shrani rezultat na disk in ga ob naslednjih klicih postreže od tam.

Možnosti cache podajte funkciji tw::generate() — true za privzeti imenik ali niz s potjo po meri:

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

Imenik predpomnilnika se ustvari samodejno, če še ne obstaja.

Ključ predpomnilnika

Ključ izhaja iz vsebine, konfiguracije CSS in zastavice minify — zgoščen v ime datoteke tailwind_<hash>.css. Vsaka sprememba oznak, vhoda CSS ali vklopa minifikacije ustvari drugačen ključ in s tem drugo datoteko.

Konfiguracija CSS v ključu je vgrajeni css in vsebina datotek, navedenih v importPaths. Dva vhoda nista vključena: datoteke, uvožene z gnezdenim @import znotraj teh datotek, in različica TailwindPHP. Po urejanju gnezdenega uvoza ali nadgradnji paketa počistite predpomnilnik, sicer bo še naprej prikazoval star izhod.

Čas veljavnosti

cacheTtl je življenjska doba v sekundah. Ob zadetku v predpomnilniku se čas spremembe datoteke primerja s trenutnim časom; če je datoteka starejša od cacheTtl, se obravnava kot zgrešen zadetek in znova prevede. Če cacheTtl ni nastavljen, vnosi nikoli ne potečejo — počistite jih ročno.

Čiščenje predpomnilnika

tw::clearCache() (ali funkcija clearCache()) odstrani datoteke tailwind_*.css iz imenika predpomnilnika in vrne število izbrisanih datotek.

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

Predpomnilnik stanja prevajalnika

Predpomnilnik izhoda pomaga le, ko se ista vsebina ponovi. Če se vsebina spreminja pri vsakem klicu, je drag del sama gradnja prevajalnika: razreševanje @import "tailwindcss", razčlenjevanje priloženih virov in zbiranje teme. Ta faza je odvisna samo od vhodnega CSS, zato jo je mogoče shraniti in znova uporabiti.

Podajte stateCacheFile funkciji tw::compile() (ali new TailwindCompiler($css, $options)):

PHP
use TailwindPHP\tw;

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

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

Ob prvi izdelavi se stanje zapiše na to pot kot navadna datoteka PHP, ki jo OPcache lahko deli med zahtevami; poznejše izdelave jo naložijo, namesto da bi znova razčlenjevale. Izhod je po bajtih enak tistemu, ki ga ustvari prevajalnik brez predpomnjenja.

  • Datoteka se preveri glede na prstni odtis pogona (velikost in čas spremembe izvornih datotek in virov TailwindPHP), ključ, izpeljan iz vhodnega CSS ter možnosti base in importSearchPaths, pa tudi velikost in čas spremembe vsake datoteke, ki jo je vhod uvozil. Ob neujemanjih se znova zgradi in zapiše, zato nadgradnja TailwindPHP ali urejanje uvožene datoteke ne zahtevata ročnega posega.
  • Pot določite sami: uporabite eno datoteko za vsak različen vhodni CSS v imeniku, v katerega lahko spletni strežnik zapisuje. Zapisi so atomski (začasna datoteka in rename()).
  • Vhodi, ki uporabljajo importResolver po meri, zaobidejo predpomnilnik, ker vedenja razreševalnika ni mogoče opredeliti s prstnim odtisom.
  • Isti predpomnilnik je na voljo tudi okoli nizkonivojskega polja compile() API kot TailwindPHP\StateCache\compileCssCached($css, $cacheFile, $options).

tw::generate() ne sprejema stateCacheFile; pri vsakem klicu zgradi nov prevajalnik. Če je pomemben strošek izdelave, uporabite primerek prevajalnika.

Pomanjševanje

Minifikacija zmanjša izhod za produkcijo. Zastavica minify med serializacijo neposredno izpiše minificirani CSS, zato je ta pot hkrati najhitrejša in najnatančnejša; tw::minify() uporabi minifikator na osnovi niza (src/_tailwindphp/CssMinifier.php) za obstoječi niz CSS:

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

Obe poti ustvarita enakovredno strukturo, vendar ne enakih bajtov. Pot serializatorja ohrani izbirnike potomcev :not(), ki jih obdelava nizov združi, zato za ustvarjeni izhod raje uporabite zastavico minify, tw::minify() pa prihranite za CSS, ki prispe kot niz.

Kaj počne

Obe poti uporabita isti nabor zmanjšanj velikosti:

Korak Učinek
Odstranjevanje komentarjev Odstrani bloke /* … */
Strnjevanje presledkov Strne zaporedne presledke in jih odstrani okoli { } ; : , ter kombinatorjev izbirnikov
Skrajšanje šestnajstiških barv #ffffff → #fff, #aabbcc → #abc
Odstranjevanje enot pri ničli 0px → 0 (ohrani časovne vrednosti 0s/0ms)
Skrajšanje debeline pisave font-weight:normal → 400, font-weight:bold → 700
Odstranjevanje praznih pravil Odstrani izbirnike s praznimi bloki deklaracij

Po zasnovi ne združuje podvojenih izbirnikov ali združuje skrajšanih zapisov lastnosti — oboje otežuje odpravljanje napak in lahko vpliva na kaskado.

CLI: --minify v primerjavi z --optimize

CLI omogoča pot serializatorja za minimizacijo z dvema zastavicama:

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

V trenutni izdaji --optimize prav tako minimizira, zato oba ukaza zapišeta iste bajte (#9). Pretvorbe, enakovredne lightningcss, se v vsakem primeru izvedejo pri vsaki gradnji, zato je navaden izhod (brez zastavice) že optimizirana in berljiva oblika.

Za preostali javni API — tw::generate(), tw::compile(), metode za pregled in vhodne oblike — glejte referenco API.