Ձեր Shopify CSS-ը փոքրացնելու ամենահեշտ ձևը, որը կառուցված է հեղուկ փոփոխականների միջոցով

Minify Script Shopify Liquid CSS ֆայլերի համար

Մենք կառուցել ենք ա Shopify Plus- ը կայք հաճախորդի համար, որն ունի մի շարք կարգավորումներ իրենց ոճերի համար իրական թեմայի ֆայլում: Թեև դա իսկապես ձեռնտու է ոճերը հեշտությամբ կարգավորելու համար, դա նշանակում է, որ դուք չունեք ստատիկ կասկադային ոճերի թերթիկներ (CSS) ֆայլ, որը կարող եք հեշտությամբ ականապատել (նվազեցնել չափը): Երբեմն սա կոչվում է CSS սեղմում և սեղմում ձեր CSS-ը:

Ի՞նչ է CSS Minification-ը:

Երբ դուք գրում եք ոճաթերթի վրա, դուք մեկ անգամ սահմանում եք ոճը որոշակի HTML տարրի համար, այնուհետև այն կրկին ու կրկին օգտագործում եք ցանկացած թվով վեբ էջերում: Օրինակ, եթե ես ցանկանայի որոշ առանձնահատկություններ սահմանել իմ տառատեսակների տեսքով իմ կայքում, ես կարող եմ կազմակերպել իմ CSS-ը հետևյալ կերպ.

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Այդ ոճաթերթի ներսում յուրաքանչյուր բացատ, տող վերադարձ և ներդիր տեղ են զբաղեցնում: Եթե ​​ես հեռացնեմ այդ բոլորը, ես կարող եմ նվազեցնել այդ ոճաթերթի չափը ավելի քան 40%-ով, եթե CSS-ը փոքրացվի: Արդյունքը սա է…

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

CSS-ի փոքրացում պարտադիր է, եթե ցանկանում եք արագացնել ձեր կայքը, և կան մի շարք գործիքներ առցանց, որոնք կարող են օգնել ձեզ արդյունավետորեն սեղմել ձեր CSS ֆայլը: Պարզապես փնտրեք սեղմել CSS գործիքը or փոքրացնել CSS գործիքը Թեմա.

Պատկերացրեք մի մեծ CSS ֆայլ և որքան տարածք կարող է խնայվել՝ նվազեցնելով դրա CSS-ը… դա սովորաբար նվազագույնը 20% է և կարող է լինել ավելի քան 40% իրենց բյուջեի: Ձեր կայքում ավելի փոքր CSS էջ ունենալը կարող է խնայել բեռնման ժամանակը յուրաքանչյուր էջի վրա, կարող է բարձրացնել ձեր կայքի վարկանիշը, բարելավել ձեր ներգրավվածությունը և, ի վերջո, բարելավել ձեր փոխակերպման չափումները:

Բացասական կողմը, իհարկե, այն է, որ սեղմված CSS ֆայլում կա մեկ տող, այնպես որ դրանք աներևակայելի դժվար է լուծել կամ թարմացնել:

Shopify CSS Liquid

Shopify թեմայի շրջանակներում կարող եք կիրառել կարգավորումներ, որոնք հեշտությամբ կարող եք թարմացնել: Մենք սիրում ենք դա անել, երբ մենք փորձարկում և օպտիմիզացնում ենք կայքերը, որպեսզի կարողանանք պարզապես տեսողականորեն հարմարեցնել թեման, այլ ոչ թե կոդի մեջ փորփրել: Այսպիսով, մեր Stylesheet-ը կառուցված է Liquid-ով (Shopify-ի սկրիպտային լեզու) և մենք փոփոխականներ ենք ավելացնում Stylesheet-ը թարմացնելու համար: Այն կարող է այսպիսի տեսք ունենալ.

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

Թեև սա լավ է աշխատում, դուք չեք կարող պարզապես պատճենել կոդը և օգտագործել առցանց գործիք՝ այն փոքրացնելու համար, քանի որ նրանց սցենարը չի հասկանում հեղուկ պիտակները: Փաստորեն, դուք ամբողջովին կկործանեք ձեր CSS-ը, եթե փորձեք: Հիանալի նորությունն այն է, որ քանի որ այն կառուցված է Liquid-ով… դուք կարող եք իրականում ՕԳՏԱԳՈՐԾԵԼ scripting-ը նվազագույնի հասցնելու արդյունքը:

Shopify CSS Minification In Liquid-ում

Shopify-ը Ձեզ հնարավորություն է տալիս հեշտությամբ գրավորել փոփոխականները և փոփոխել ելքը: Այս դեպքում մենք կարող ենք իրականում փաթաթել մեր CSS-ը բովանդակության փոփոխականի մեջ և այնուհետև շահարկել այն՝ հեռացնելու բոլոր ներդիրները, տողերի վերադարձը և բացատները: Ես գտա այս կոդը Shopify համայնք - ից Թիմ (Թեյրլի) և այն փայլուն աշխատեց:

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

Այսպիսով, իմ վերը նշված օրինակի համար իմ 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  }}

Երբ ես գործարկում եմ կոդը, ելքային CSS-ը հետևյալն է՝ կատարելապես փոքրացված.

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