A legegyszerűbb módja a folyékony változók felhasználásával készült Shopify CSS kicsinyítésének

Parancsfájl kicsinyítése a Shopify Liquid CSS-fájlokhoz

Kiépítettük a ShopifyPlus webhely egy olyan ügyfél számára, amely számos stílusbeállítással rendelkezik az aktuális témafájlban. Bár ez nagyon előnyös a stílusok egyszerű beállításához, ez azt jelenti, hogy nincs statikus lépcsőzetes stíluslapja (CSS) fájlt, amelyet egyszerűen elkészíthet kisebbít (csökkentse a méretét). Néha ezt CSS-nek is nevezik összenyomás és a tömörítő az Ön CSS-je.

Mi az a CSS-minifikáció?

Amikor stíluslapra ír, egyszer meghatározza egy adott HTML-elem stílusát, majd újra és újra felhasználja tetszőleges számú weboldalon. Például, ha be akarok állítani néhány konkrétumot arra vonatkozóan, hogyan nézzenek ki a betűtípusaim a webhelyemen, a CSS-t a következőképpen rendezhetem:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

A stíluslapon belül minden szóköz, sor visszatérés és tabulátor helyet foglal. Ha az összeset eltávolítom, a stíluslap méretét több mint 40%-kal csökkenthetem, ha a CSS le van csökkentve! Az eredmény ez…

h1{font-size:30px}h2{font-size:25px}h3{font-size:20px}p{font-size:18px}

CSS kicsinyítés elengedhetetlen, ha fel szeretné gyorsítani webhelyét, és számos online eszköz található, amelyek segítségével hatékonyan tömörítheti a CSS-fájlt. Csak keress tömörített CSS eszköz or CSS eszköz minimalizálása online.

Képzeljen el egy nagy CSS-fájlt, és mennyi helyet takaríthat meg a CSS-jének lekicsinyítésével… ez általában minimum 20%, és akár a költségvetés 40%-a is lehet. Ha egy kisebb CSS-oldalra hivatkozik az egész webhelyen, az minden egyes oldalon megtakaríthatja a betöltési időt, növelheti a webhely rangsorolását, javíthatja az elköteleződést, és végső soron javíthatja a konverziós mutatókat.

A hátránya természetesen az, hogy egyetlen sor van a tömörített CSS-fájlban, így hihetetlenül nehéz a hibaelhárítás vagy a frissítés.

Shopify CSS Liquid

A Shopify témán belül olyan beállításokat alkalmazhat, amelyeket egyszerűen frissíthet. Szeretjük ezt megtenni, amikor webhelyeket tesztelünk és optimalizálunk, hogy a témát csak vizuálisan tudjuk testreszabni, ahelyett, hogy beleásnánk magunkat a kódba. Tehát a stíluslapunk a Liquiddel (a Shopify szkriptnyelvével) épül fel, és változókat adunk hozzá a stíluslap frissítéséhez. Így nézhet ki:

{%- assign fontsize_h1 = settings.fontsize_h1 -%}
{%- assign fontsize_h2 = settings.fontsize_h1 -%}
{%- assign fontsize_h3 = settings.fontsize_h1 -%}
{%- assign fontsize_p = settings.fontsize_p -%}
h1 {
  font-size: {{ fontsize_h1 }}
}
h2 {
  font-size: {{ fontsize_h2 }}
}
h3 {
  font-size: {{ fontsize_h3 }}
}
p {
  font-size: {{ fontsize_p }}
}

Bár ez jól működik, nem lehet egyszerűen másolni a kódot, és online eszközzel kicsinyíteni, mert a szkript nem érti a folyékony címkéket. Valójában teljesen tönkreteszi a CSS-t, ha megpróbálja! A nagyszerű hír az, hogy mivel a Liquid-del készült… valójában HASZNÁLHATSZ szkriptet a kimenet minimalizálására!

Shopify CSS Minification In Liquid

A Shopify lehetővé teszi a változók egyszerű szkriptelését és a kimenet módosítását. Ebben az esetben valójában becsomagolhatjuk CSS-ünket egy tartalmi változóba, majd manipulálhatjuk azt, hogy eltávolítsuk az összes tabulátort, sorvisszaadást és szóközt! Ezt a kódot a Shopify közösség ból ből Tim (tairli) és zseniálisan működött!

{%- capture content %}

ALL Your CSS CODE HERE

{%- endcapture -%}
{%- assign before =  content.size -%}
{%- assign content =  content | strip_newlines | split: " " | join: " " | split: "*/" -%}
{%- assign new_content = "" -%}
{%- for word in content -%}
{%- assign new_word = word | split: "/*" | first | strip | replace: "; ", ";" | replace: "} ", "}" | replace: "{ ", "{" | replace: " {", "{" -%}
{%- assign new_content = new_content | append: new_word -%}
{%- endfor -%}
/* CSS minifed: {{ before }} --> {{ new_content.size }} */
{{- new_content  }}

Tehát a fenti példámban a theme.css.liquid oldalam így nézne ki:

{%- capture content %}

{%- assign fontsize_h1 = settings.fontsize_h1 -%}
{%- assign fontsize_h2 = settings.fontsize_h1 -%}
{%- assign fontsize_h3 = settings.fontsize_h1 -%}
{%- assign fontsize_p = settings.fontsize_p -%}
h1 {
  font-size: {{ fontsize_h1 }}
}
h2 {
  font-size: {{ fontsize_h2 }}
}
h3 {
  font-size: {{ fontsize_h3 }}
}
p {
  font-size: {{ fontsize_p }}
}

{%- endcapture -%}
{%- assign before =  content.size -%}
{%- assign content =  content | strip_newlines | split: " " | join: " " | split: "*/" -%}
{%- assign new_content = "" -%}
{%- for word in content -%}
{%- assign new_word = word | split: "/*" | first | strip | replace: "; ", ";" | replace: "} ", "}" | replace: "{ ", "{" | replace: " {", "{" -%}
{%- assign new_content = new_content | append: new_word -%}
{%- endfor -%}
/* CSS minified: {{ before }} --> {{ new_content.size }} */
{{- new_content  }}

Amikor futtatom a kódot, a kimeneti CSS a következő, tökéletesen kicsinyítve:

/* CSS minified: 119 --> 71 */h1{font-size:30px}h2{font-size:25px}h3{font-size:20px}p{font-size:18px}