ද්‍රව විචල්‍යයන් භාවිතයෙන් ගොඩනගා ඇති ඔබේ Shopify CSS අවම කිරීමට පහසුම ක්‍රමය

Shopify Liquid CSS ගොනු සඳහා ස්ක්‍රිප්ට් කුඩා කරන්න

අපි ගොඩනැගුවේ a සාප්පු සවාරි සැබෑ තේමා ගොනුව තුළ ඔවුන්ගේ මෝස්තර සඳහා සැකසුම් ගණනාවක් ඇති සේවාදායකයකු සඳහා වන අඩවිය. විලාස පහසුවෙන් සකස් කිරීම සඳහා එය සැබවින්ම වාසිදායක වන අතර, එයින් අදහස් වන්නේ ඔබට ස්ථිතික කැස්කැඩින් මෝස්තර පත්‍ර නොමැති බවයි (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 minify CSS මෙවලම සමඟ අමුත්තන්.

විශාල CSS ගොනුවක් සහ එහි CSS අවම කිරීමෙන් කොපමණ ඉඩ ඉතිරි කර ගත හැකිද යන්න සිතා බලන්න... එය සාමාන්‍යයෙන් අවම වශයෙන් 20%ක් වන අතර ඔවුන්ගේ අයවැයෙන් 40%කට වඩා වැඩි විය හැක. ඔබේ වෙබ් අඩවිය පුරා කුඩා CSS පිටුවක් යොමු කර තිබීමෙන් සෑම පිටුවකම පැටවීමේ වේලාවන් ඉතිරි කර ගත හැක, ඔබේ වෙබ් අඩවියේ ශ්‍රේණිගත කිරීම වැඩි කළ හැක, ඔබේ නියැලීම වැඩි දියුණු කළ හැක, සහ අවසානයේ ඔබේ පරිවර්තන ප්‍රමිතික වැඩිදියුණු කළ හැක.

ඇත්ත වශයෙන්ම, අවාසිය නම්, සම්පීඩිත CSS ගොනුවක තනි පේළියක් තිබීමයි, එබැවින් ඒවා දෝශ නිරාකරණය හෝ යාවත්කාලීන කිරීම ඇදහිය නොහැකි තරම් දුෂ්කර ය.

Shopify CSS දියර

Shopify තේමාවක් තුළ, ඔබට පහසුවෙන් යාවත්කාලීන කළ හැකි සැකසීම් යෙදිය හැක. අපි වෙබ් අඩවි පරීක්‍ෂා කර ප්‍රශස්ත කරන විට මෙය කිරීමට කැමැත්තෙමු, එවිට අපට කේතය හෑරීමට වඩා දෘශ්‍යමය වශයෙන් තේමාව අභිරුචිකරණය කළ හැකිය. එබැවින්, අපගේ මෝස්තර පත්‍රය Liquid (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 අන්තර්ගත විචල්‍යයකට ඔතා සියලු ටැබ්, රේඛා ප්‍රතිලාභ සහ හිස්තැන් ඉවත් කිරීමට එය හැසිරවිය හැක! මම මේ කේතය සොයාගත්තා 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}