Helpoin tapa pienentää nestemäisten muuttujien avulla rakennettua Shopify CSS:ää

Minify Script Shopify Liquid CSS -tiedostoille

Rakensimme a ShopifyPlus sivusto asiakkaalle, jolla on useita asetuksia tyyleilleen varsinaisessa teematiedostossa. Vaikka se on todella edullista tyylien helpossa säätämisessä, se tarkoittaa, että sinulla ei ole staattisia peräkkäisiä tyylisivuja (CSS) tiedosto, jonka voit helposti tehdä minify (pienennä kokoa). Joskus tätä kutsutaan CSS:ksi puristus että puristamalla CSS.

Mikä on CSS Minification?

Kun kirjoitat tyylitaulukkoon, määrität tietyn HTML-elementin tyylin kerran ja käytät sitä sitten yhä uudelleen millä tahansa Web-sivuilla. Jos esimerkiksi haluan määrittää tiettyjä tietoja siitä, miltä kirjasimeni näyttävät sivustollani, voisin järjestää CSS:ni seuraavasti:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Tyylitaulukossa jokainen välilyönti, rivinvaihto ja sarkain vievät tilaa. Jos poistan ne kaikki, voin pienentää tyylitaulukon kokoa yli 40 %, jos CSS:ää pienennetään! Tulos on tämä…

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

CSS-vähennys on pakollinen, jos haluat nopeuttaa sivustoasi, ja verkossa on useita työkaluja, joiden avulla voit pakata CSS-tiedostosi tehokkaasti. Etsi vain Pakkaa CSS-työkalu or pienennä CSS-työkalua verkossa.

Kuvittele suuri CSS-tiedosto ja kuinka paljon tilaa voidaan säästää minimoimalla sen CSS… se on yleensä vähintään 20 % ja voi olla yli 40 % budjetista. Pienemmän CSS-sivun käyttäminen kaikkialla sivustossasi voi säästää latausaikoja jokaisella sivulla, parantaa sivustosi sijoitusta, parantaa sitoutumistasi ja viime kädessä parantaa tulosmittareitasi.

Huono puoli on tietysti se, että pakatussa CSS-tiedostossa on yksi rivi, joten niiden vianmääritys tai päivittäminen on uskomattoman vaikeaa.

Shopify CSS Liquid

Shopify-teeman sisällä voit käyttää asetuksia, joita voit helposti päivittää. Haluamme tehdä tämän, kun testaamme ja optimoimme sivustoja, jotta voimme vain muokata teemaa visuaalisesti koodin syventymisen sijaan. Joten tyylitaulukkomme on rakennettu Liquidillä (Shopifyn komentosarjakieli), ja lisäämme muuttujia tyylitaulukon päivittämiseksi. Se voi näyttää tältä:

{%- 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 }}
}

Vaikka tämä toimii hyvin, et voi yksinkertaisesti kopioida koodia ja käyttää online-työkalua sen pienentämiseen, koska heidän komentosarjansa ei ymmärrä nestemäisiä tunnisteita. Itse asiassa tuhoat CSS:si täysin, jos yrität! Loistava uutinen on, että koska se on rakennettu Liquidillä… voit itse asiassa KÄYTÄ komentosarjoja vähentääksesi tulosta!

Shopify CSS Minification In Liquid

Shopifyn avulla voit helposti kirjoittaa muuttujia ja muokata tulosta. Tässä tapauksessa voimme itse asiassa kääriä CSS:n sisältömuuttujaksi ja sitten muokata sitä poistaaksemme kaikki sarkaimet, rivinvaihdot ja välilyönnit! Löysin tämän koodin Shopify-yhteisö alkaen Tim (tairli) ja se toimi loistavasti!

{%- 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  }}

Joten yllä olevassa esimerkissäni theme.css.liquid-sivuni näyttäisi tältä:

{%- 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  }}

Kun suoritan koodia, CSS-tulostus on seuraava, täydellisesti pienennettynä:

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