Ny fomba mora indrindra hanalefahana ny Shopify CSS izay namboarina tamin'ny alàlan'ny fiovaovan'ny rano

Minify Script ho an'ny Shopify Liquid CSS Files

Nanamboatra a ShopifyPlus tranokala ho an'ny mpanjifa iray izay manana firafitry ny fombany ao amin'ny rakitra lohahevitra tena izy. Na dia tena mahasoa aza izany amin'ny fanitsiana mora foana ny fomba, midika izany fa tsy manana takelaka static cascading ianao (CSS) rakitra izay azonao mora foana mini (ahena ny habeny). Indraindray izany dia antsoina hoe CSS famatrarana ary manery ny CSS.

Inona no atao hoe CSS Minification?

Rehefa manoratra amin'ny stylesheet ianao, dia mamaritra indray mandeha ny fomba ho an'ny singa HTML iray manokana, ary avy eo dia mampiasa azy io hatrany amin'ny isan'ny pejy web. Ohatra, raha te-hametraka zavatra manokana momba ny fomba fijerin'ny endritsoratra ao amin'ny tranokalako aho, dia azoko atao ny mandamina ny CSS-ko toy izao:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Ao anatin'io stylesheet io, ny habaka tsirairay, ny fiverenan'ny tsipika ary ny tabilao dia maka toerana. Raha esoriko daholo ireo dia azoko ahena mihoatra ny 40% ny haben'io stylesheet io raha ahena ny CSS! Ny vokany dia ity…

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

CSS minification dia tsy maintsy atao raha te hanafaingana ny tranokalanao ianao ary misy fitaovana maromaro amin'ny Internet afaka manampy anao hanery ny rakitra CSS anao amin'ny fomba mahomby. Mitadiava fotsiny compress CSS fitaovana or minify ny fitaovana CSS -tserasera.

Alaivo sary an-tsaina ny rakitra CSS lehibe iray ary ohatrinona ny habaka azo tehirizina amin'ny fampihenana ny CSS-ny… mazàna 20% farafahakeliny izany ary mety hahatratra 40% amin'ny teti-bolany. Ny fananana pejy CSS kely kokoa resahina manerana ny tranokalanao dia afaka mitahiry fotoana enta-mavesatra amin'ny pejy tsirairay, afaka mampitombo ny laharan'ny tranokalanao, manatsara ny firotsahanao ary amin'ny farany dia manatsara ny metrika fiovam-ponao.

Ny lafy ratsiny, mazava ho azy, dia misy andalana tokana ao anaty rakitra CSS voaporitra ka sarotra be ny mamaha olana na manavao azy ireo.

Shopify CSS Liquid

Ao anatin'ny lohahevitra Shopify, azonao atao ny mampihatra ireo fanovana izay azonao havaozina mora foana. Tianay ny manao izany rehefa mitsapa sy manatsara ny tranokala izahay mba hahafahanay mampifanaraka fotsiny ny loha-hevitra amin'ny maso fa tsy mihady ao anaty kaody. Noho izany, ny Stylesheet dia naorina miaraka amin'ny Liquid (fitenin'ny scripting Shopify) ary manampy varimbazaha izahay hanavao ny Stylesheet. Mety ho toy izao izany:

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

Na dia mandeha tsara aza izany dia tsy azonao atao ny mandika tsotra izao ny kaody ary mampiasa fitaovana an-tserasera hanamafisana azy io satria tsy azon'izy ireo ny marika ranon-javatra. Raha ny marina dia hanimba tanteraka ny CSS-nao ianao raha manandrana! Ny vaovao tsara dia satria izy io dia namboarina miaraka amin'ny Liquid… azonao atao ny mampiasa scripting mba hampihenana ny vokatra!

Shopify CSS Minification amin'ny rano

Shopify dia ahafahanao manova mora foana ny fari-pitsipika sy manova ny vokatra. Amin'ity tranga ity, azontsika atao ny mamatotra ny CSS-ntsika amin'ny fari-pahalalana votoaty ary avy eo manodinkodina azy mba hanesorana ireo tabilao, fiverenana an-tsipika ary habaka rehetra! Hitako tao amin'ny Shopify Community avy amin'ny Tim (tairli) ary nandaitra tsara!

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

Noho izany, ho an'ny ohatra nataoko etsy ambony, ny pejiko theme.css.liquid dia ho toy izao:

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

Rehefa mihazakazaka ny kaody aho dia toy izao manaraka izao ny Output CSS:

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