ਤੁਹਾਡੇ Shopify CSS ਨੂੰ ਘੱਟ ਕਰਨ ਦਾ ਸਭ ਤੋਂ ਆਸਾਨ ਤਰੀਕਾ ਜੋ ਕਿ ਤਰਲ ਵੇਰੀਏਬਲ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬਣਾਇਆ ਗਿਆ ਹੈ

Shopify ਤਰਲ CSS ਫਾਈਲਾਂ ਲਈ ਮਿਨੀਫਾਈ ਸਕ੍ਰਿਪਟ

ਅਸੀਂ ਬਣਾਇਆ ਏ ਸ਼ਾਪੀਫਾਈ ਪਲੱਸ ਇੱਕ ਕਲਾਇੰਟ ਲਈ ਸਾਈਟ ਜਿਸ ਵਿੱਚ ਅਸਲ ਥੀਮ ਫਾਈਲ ਵਿੱਚ ਉਹਨਾਂ ਦੀਆਂ ਸ਼ੈਲੀਆਂ ਲਈ ਕਈ ਸੈਟਿੰਗਾਂ ਹਨ। ਹਾਲਾਂਕਿ ਸਟਾਈਲ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਐਡਜਸਟ ਕਰਨ ਲਈ ਇਹ ਅਸਲ ਵਿੱਚ ਫਾਇਦੇਮੰਦ ਹੈ, ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਤੁਹਾਡੇ ਕੋਲ ਸਥਿਰ ਕੈਸਕੇਡਿੰਗ ਸਟਾਈਲ ਸ਼ੀਟਾਂ ਨਹੀਂ ਹਨ (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 ਤਰਲ

ਇੱਕ 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}