An Bealach is Éasca Chun Do CSS Shopify a Mhionlaghdú A Tógadh Ag Úsáid Athróga Leachtacha

Script Minify le haghaidh Comhaid CSS Leachtacha Shopify

Thógamar amach a ShopifyPlus suíomh do chliant a bhfuil roinnt socruithe aige dá stíleanna sa chomhad téama iarbhír. Cé go bhfuil sé sin fíor-bhuntáisteach chun stíleanna a choigeartú go héasca, ciallaíonn sé nach bhfuil stílbhileoga cascáideacha statacha agat (CSS) comhad ar féidir leat go héasca minify (laghdú i méid). Uaireanta tugtar CSS air seo comhbhrú agus compressing do CSS.

Cad is mionú CSS ann?

Agus tú ag scríobh chuig stílbhileog, sainíonn tú an stíl d’eilimint HTML ar leith uair amháin, agus ansin é a úsáid arís agus arís eile ar aon líon leathanaigh ghréasáin. Mar shampla, dá mba mhian liom roinnt sonraí a shocrú maidir le conas a d’fhéach mo chuid clónna ar mo shuíomh, b’fhéidir go n-eagróinn mo CSS mar seo a leanas:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Laistigh den stílbhileog sin, glacann gach spás, aislíne líne agus cluaisín suas spás. Má bhainim iad sin go léir, is féidir liom méid na stílbhileog sin a laghdú níos mó ná 40% má dhéantar miondealú ar an CSS! Is é an toradh seo…

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

Mionsonrú CSS Tá sé riachtanach má tá tú ag iarraidh do shuíomh a bhrostú agus tá roinnt uirlisí ar líne a chabhróidh leat do chomhad CSS a chomhbhrú go héifeachtach. Just a chuardach le haghaidh Comhbhrú uirlis CSS or miniify CSS uirlis ar líne.

Samhlaigh comhad CSS mór agus cé mhéad spáis is féidir a shábháil trína CSS a íoslaghdú… is gnách go mbíonn íosmhéid 20% ann agus féadfaidh sé a bheith os cionn 40% dá bhuiséad. Má dhéantar tagairt do leathanach CSS níos lú ar fud do tsuímh, féadtar amanna ualaigh a shábháil ar gach leathanach amháin, féadann sé rangú do shuíomh a mhéadú, do rannpháirtíocht a fheabhsú, agus ar deireadh do mhéadracht tiontaithe a fheabhsú.

Is é an míbhuntáiste, ar ndóigh, ná go bhfuil líne amháin i gcomhad CSS comhbhrúite agus mar sin tá sé thar a bheith deacair iad a réiteach nó a nuashonrú.

Shopify CSS Leacht

Laistigh de théama Shopify, is féidir leat socruithe a chur i bhfeidhm ar féidir leat a nuashonrú go héasca. Is maith linn é seo a dhéanamh agus muid ag tástáil agus ag optamú suíomhanna ionas gur féidir linn an téama a shaincheapadh go díreach seachas a bheith ag tochailt isteach sa chód. Mar sin, tógtar ár Stílbhileog le Leacht (teanga scriptithe Shopify) agus cuirimid athróga leis chun an Stílbhileog a nuashonrú. Féadfaidh sé breathnú mar seo:

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

Cé go n-oibríonn sé seo go maith, ní féidir leat an cód a chóipeáil go simplí agus uirlis ar líne a úsáid chun é a íoslaghdú toisc nach dtuigeann a script na clibeanna leachtacha. Go deimhin, scriosfaidh tú do CSS go hiomlán má dhéanann tú iarracht! Is é an dea-scéal ná toisc go bhfuil sé tógtha le Leacht… is féidir leat an script a ÚSÁID i ndáiríre chun an t-aschur a íoslaghdú!

Mionnú CSS Shopify i Leacht

Cuireann Shopify ar do chumas athróga a scríobh go héasca agus an t-aschur a mhodhnú. Sa chás seo, is féidir linn ár CSS a fhilleadh isteach in athróg ábhair agus ansin é a ionramháil chun gach cluaisín, aischuir líne agus spásanna a bhaint! Fuair ​​​​mé an cód seo sa Pobal Shopify ó Tim (tairli) agus d’oibrigh sé go hiontach!

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

Mar sin, mar shampla thuas, bheadh ​​cuma mar seo ar mo leathanach theme.css.liquid:

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

Nuair a ritheann mé an cód, tá an CSS aschuir mar a leanas, mionghearrtha go foirfe:

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