Ọna ti o rọrun julọ lati dinku Shopify CSS rẹ Ti a Kọ ni Lilo Awọn oniyipada Liquid

Minify Afọwọkọ fun Shopify Liquid CSS Awọn faili

A kọ jade a Ṣe afikun Plus Aaye fun alabara ti o ni nọmba awọn eto fun awọn aza wọn ninu faili akori gangan. Lakoko ti iyẹn jẹ anfani gaan fun ni irọrun ṣatunṣe awọn aza, o tumọ si pe o ko ni awọn oju-iwe ara cascading aimi kan (CSS) faili ti o le ni rọọrun mini (din ni iwọn). Nigba miiran eyi ni a tọka si bi CSS funmorawon ati funmorawon CSS rẹ.

Kí ni CSS Minification?

Nigbati o ba nkọwe si iwe-ara kan, o ṣalaye ara fun ẹya HTML kan ni ẹẹkan, ati lẹhinna lo leralera lori nọmba eyikeyi awọn oju-iwe wẹẹbu. Fun apẹẹrẹ, ti MO ba fẹ ṣeto awọn pato fun bii awọn nkọwe mi ṣe wo lori aaye mi, Mo le ṣeto CSS mi gẹgẹbi atẹle:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Ninu iwe aṣa yẹn, aaye kọọkan, ipadabọ laini, ati taabu gba aye. Ti MO ba yọ gbogbo wọn kuro, Mo le dinku iwọn iwe aṣa yẹn nipasẹ diẹ sii ju 40% ti CSS ba dinku! Abajade ni eyi…

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

CSS kekere ni a gbọdọ ti o ba ti o ba fẹ lati titẹ soke rẹ sii ati nibẹ ni o wa nọmba kan ti irinṣẹ lori ayelujara ti o le ran o compress rẹ CSS faili daradara. Kan wa fun compress CSS ọpa or minify CSS ọpa online.

Fojuinu faili CSS nla kan ati iye aaye ti o le wa ni fipamọ nipa idinku CSS rẹ… o jẹ deede o kere ju 20% ati pe o le ga soke ti 40% ti isuna wọn. Nini oju-iwe CSS ti o kere ju ti a tọka si jakejado aaye rẹ le ṣafipamọ awọn akoko fifuye lori oju-iwe kan kọọkan, le mu ipo aaye rẹ pọ si, mu adehun igbeyawo rẹ dara, ati nikẹhin mu awọn metiriki iyipada rẹ dara si.

Apa isalẹ, nitorinaa, ni pe laini kan wa ninu faili CSS fisinuirindigbindigbin nitorinaa wọn nira pupọ lati laasigbotitusita tabi imudojuiwọn.

Shopify CSS Liquid

Laarin akori Shopify kan, o le lo awọn eto ti o le ṣe imudojuiwọn ni rọọrun. A fẹ lati ṣe eyi bi a ṣe n ṣe idanwo ati mu awọn aaye pọ si ki a le kan ṣe akanṣe akori ni oju ju ki o ma walẹ sinu koodu naa. Nitorinaa, Stylesheet wa ni itumọ pẹlu Liquid (Ede kikọ Shopify) ati pe a ṣafikun awọn oniyipada lati ṣe imudojuiwọn Stylesheet naa. O le dabi eyi:

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

Lakoko ti eyi n ṣiṣẹ daradara, o ko le daakọ koodu nirọrun ki o lo ohun elo ori ayelujara lati dinku nitori iwe afọwọkọ wọn ko loye awọn aami omi. Ni otitọ, iwọ yoo pa CSS rẹ run patapata ti o ba gbiyanju! Irohin nla ni pe nitori pe o ti kọ pẹlu Liquid… o le lo iwe afọwọkọ nitootọ lati dinku iṣelọpọ!

Shopify CSS Minification Ni Liquid

Shopify n fun ọ laaye lati ni irọrun awọn oniyipada iwe afọwọkọ ati yipada iṣelọpọ. Ni ọran yii, a le fi ipari si CSS wa sinu oniyipada akoonu ati lẹhinna ṣe afọwọyi lati yọ gbogbo awọn taabu kuro, awọn ipadabọ laini, ati awọn alafo! Mo ti ri yi koodu ni awọn Shopify Community lati Tim (tairli) ati awọn ti o sise brilliantly!

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

Nitorinaa, fun apẹẹrẹ mi loke, oju-iwe mi theme.css.liquid yoo dabi eyi:

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

Nigbati mo ba ṣiṣẹ koodu naa, iṣẹjade CSS jẹ bi atẹle, dinku ni pipe:

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