មធ្យោបាយងាយស្រួលបំផុតដើម្បីកាត់បន្ថយ Shopify CSS របស់អ្នកដែលត្រូវបានបង្កើតឡើងដោយប្រើអថេររាវ

បង្រួមស្គ្រីបសម្រាប់ឯកសារ 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... អ្នកពិតជាអាចប្រើស្គ្រីបដើម្បីកាត់បន្ថយទិន្នផល!

Shopify CSS Minification នៅក្នុង 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}