ലിക്വിഡ് വേരിയബിളുകൾ ഉപയോഗിച്ച് നിർമ്മിച്ച നിങ്ങളുടെ Shopify CSS ചെറുതാക്കാനുള്ള എളുപ്പവഴി

Shopify ലിക്വിഡ് CSS ഫയലുകൾക്കായുള്ള സ്ക്രിപ്റ്റ് ചെറുതാക്കുക

ഞങ്ങൾ നിർമ്മിച്ചത് എ ഷോപ്പിഫൈ പ്ലസ് യഥാർത്ഥ തീം ഫയലിൽ അവരുടെ ശൈലികൾക്കായി നിരവധി ക്രമീകരണങ്ങൾ ഉള്ള ഒരു ക്ലയന്റിനായുള്ള സൈറ്റ്. ശൈലികൾ എളുപ്പത്തിൽ ക്രമീകരിക്കുന്നതിന് ഇത് ശരിക്കും പ്രയോജനകരമാണെങ്കിലും, അതിനർത്ഥം നിങ്ങൾക്ക് ഒരു സ്റ്റാറ്റിക് കാസ്കേഡിംഗ് സ്റ്റൈൽ ഷീറ്റുകൾ ഇല്ല എന്നാണ് (സി.എസ്.എസ്) നിങ്ങൾക്ക് എളുപ്പത്തിൽ കഴിയുന്ന ഫയൽ ചെറുതാക്കുക (വലിപ്പം കുറയ്ക്കുക). ചിലപ്പോൾ ഇതിനെ CSS എന്ന് വിളിക്കുന്നു കംപ്രഷൻ ഒപ്പം കംപ്രസ്സുചെയ്യുന്നു നിങ്ങളുടെ CSS.

എന്താണ് CSS Minification?

നിങ്ങൾ ഒരു സ്റ്റൈൽഷീറ്റിലേക്ക് എഴുതുമ്പോൾ, ഒരു പ്രത്യേക HTML ഘടകത്തിനായുള്ള ശൈലി നിങ്ങൾ ഒരിക്കൽ നിർവചിക്കുന്നു, തുടർന്ന് ഏത് വെബ് പേജുകളിലും അത് വീണ്ടും വീണ്ടും ഉപയോഗിക്കുക. ഉദാഹരണത്തിന്, എന്റെ സൈറ്റിൽ എന്റെ ഫോണ്ടുകൾ എങ്ങനെ കാണപ്പെടുന്നു എന്നതിന് ചില പ്രത്യേകതകൾ സജ്ജീകരിക്കാൻ ഞാൻ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, ഞാൻ എന്റെ CSS ഇനിപ്പറയുന്ന രീതിയിൽ ക്രമീകരിക്കാം:

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

ആ സ്‌റ്റൈൽഷീറ്റിനുള്ളിൽ, ഓരോ സ്‌പെയ്‌സും ലൈൻ റിട്ടേണും ടാബും ഇടം പിടിക്കുന്നു. ഞാൻ അവയെല്ലാം നീക്കം ചെയ്‌താൽ, CSS ചെറുതാക്കിയാൽ ആ സ്റ്റൈൽഷീറ്റിന്റെ വലുപ്പം 40% വരെ കുറയ്ക്കാൻ എനിക്ക് കഴിയും! ഫലം ഇതാണ്…

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 ലിക്വിഡ്

ഒരു Shopify തീമിനുള്ളിൽ, നിങ്ങൾക്ക് എളുപ്പത്തിൽ അപ്‌ഡേറ്റ് ചെയ്യാൻ കഴിയുന്ന ക്രമീകരണങ്ങൾ പ്രയോഗിക്കാൻ കഴിയും. സൈറ്റുകൾ പരീക്ഷിക്കുകയും ഒപ്റ്റിമൈസ് ചെയ്യുകയും ചെയ്യുമ്പോൾ ഞങ്ങൾ ഇത് ചെയ്യാൻ ഇഷ്ടപ്പെടുന്നു, അതുവഴി കോഡിലേക്ക് നോക്കുന്നതിന് പകരം തീം ദൃശ്യപരമായി ഇഷ്ടാനുസൃതമാക്കാൻ കഴിയും. അതിനാൽ, ഞങ്ങളുടെ സ്റ്റൈൽഷീറ്റ് ലിക്വിഡ് (ഷോപ്പിഫൈയുടെ സ്ക്രിപ്റ്റിംഗ് ഭാഷ) ഉപയോഗിച്ചാണ് നിർമ്മിച്ചിരിക്കുന്നത്, സ്റ്റൈൽഷീറ്റ് അപ്ഡേറ്റ് ചെയ്യുന്നതിന് ഞങ്ങൾ വേരിയബിളുകൾ ചേർക്കുന്നു. ഇത് ഇതുപോലെ കാണപ്പെടാം:

{%- 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 പൂർണ്ണമായും നശിപ്പിക്കും! ഇത് ലിക്വിഡ് ഉപയോഗിച്ചാണ് നിർമ്മിച്ചിരിക്കുന്നത് എന്നത് വലിയ വാർത്തയാണ്... ഔട്ട്‌പുട്ട് ചെറുതാക്കാൻ നിങ്ങൾക്ക് സ്‌ക്രിപ്റ്റിംഗ് ഉപയോഗിക്കാം!

Shopify CSS Minification in Liquid

Shopify വേരിയബിളുകൾ എളുപ്പത്തിൽ സ്‌ക്രിപ്റ്റ് ചെയ്യാനും ഔട്ട്‌പുട്ട് പരിഷ്‌ക്കരിക്കാനും നിങ്ങളെ പ്രാപ്‌തമാക്കുന്നു. ഈ സാഹചര്യത്തിൽ, നമുക്ക് യഥാർത്ഥത്തിൽ ഞങ്ങളുടെ CSS-നെ ഒരു ഉള്ളടക്ക വേരിയബിളിലേക്ക് പൊതിയുകയും തുടർന്ന് എല്ലാ ടാബുകളും ലൈൻ റിട്ടേണുകളും സ്‌പെയ്‌സുകളും നീക്കം ചെയ്യാൻ അത് കൈകാര്യം ചെയ്യുകയും ചെയ്യാം! എന്നതിൽ ഞാൻ ഈ കോഡ് കണ്ടെത്തി ഷോപ്പിഫൈ കമ്മ്യൂണിറ്റി നിന്ന് ടിം (തൈർലി) അത് ഉജ്ജ്വലമായി പ്രവർത്തിച്ചു!

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