Шингэн хувьсагч ашиглан бүтээсэн Shopify CSS-ээ багасгах хамгийн хялбар арга

Shopify Liquid CSS файлуудад зориулсан скриптийг багасгах

Бид барьсан ShopifyPlus Бодит сэдвийн файлд өөрийн хэв маягийн хэд хэдэн тохиргоотой үйлчлүүлэгчийн сайт. Энэ нь хэв маягийг хялбархан тохируулахад үнэхээр давуу талтай ч гэсэн танд статик каскадын загварын хуудас байхгүй гэсэн үг (CSS) файлыг хялбархан ашиглах боломжтой багасгах (хэмжээг багасгах). Заримдаа үүнийг CSS гэж нэрлэдэг Шахалт болон шахах таны CSS.

CSS-ийг багасгах гэж юу вэ?

Загварын хуудас руу бичихдээ та тодорхой 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 загвар дотор та хялбархан шинэчлэх боломжтой тохиргоог ашиглах боломжтой. Бид сайтуудыг туршиж, оновчтой болгохдоо үүнийг хийх дуртай бөгөөд ингэснээр бид кодыг ухаж авахын оронд зөвхөн загвараа визуал байдлаар өөрчлөх боломжтой болно. Тиймээс манай Stylesheet нь 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-ээ бүрэн устгах болно! Гайхалтай мэдээ гэвэл энэ нь Liquid-ээр бүтээгдсэн тул та гаралтыг багасгахын тулд скриптийг АШИГЛАХ боломжтой!

Shopify CSS-ийг шингэн хэлбэрээр багасгах

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}