ວິທີທີ່ງ່າຍທີ່ສຸດທີ່ຈະຫຼຸດຜ່ອນ Shopify CSS ຂອງທ່ານທີ່ສ້າງຂຶ້ນໂດຍໃຊ້ຕົວແປຂອງແຫຼວ

ຫຍໍ້ Script ສໍາລັບ Shopify Liquid CSS Files

ພວກເຮົາກໍ່ສ້າງອອກ a ShopifyPlus ເວັບໄຊທ໌ສໍາລັບລູກຄ້າທີ່ມີຈໍານວນການຕັ້ງຄ່າສໍາລັບຮູບແບບຂອງເຂົາເຈົ້າຢູ່ໃນໄຟລ໌ຫົວຂໍ້ຕົວຈິງ. ໃນຂະນະທີ່ມັນເປັນປະໂຫຍດແທ້ໆສໍາລັບການປັບຮູບແບບໄດ້ຢ່າງງ່າຍດາຍ, ມັນຫມາຍຄວາມວ່າທ່ານບໍ່ມີແຜ່ນແບບ cascading ແບບຄົງທີ່ (CSS) ໄຟລ​໌​ທີ່​ທ່ານ​ສາ​ມາດ​ໄດ້​ຢ່າງ​ງ່າຍ​ດາຍ​ mini (ຫຼຸດ​ຂະ​ຫນາດ​)​. ບາງຄັ້ງອັນນີ້ເອີ້ນວ່າ CSS compression ແລະ ການບີບອັດ CSS ຂອງທ່ານ.

CSS Minification ແມ່ນຫຍັງ?

ເມື່ອທ່ານກໍາລັງຂຽນໃສ່ stylesheet, ທ່ານກໍານົດຮູບແບບສໍາລັບອົງປະກອບ 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… ຕົວຈິງແລ້ວທ່ານສາມາດນໍາໃຊ້ scripting ເພື່ອຫຼຸດຜ່ອນຜົນຜະລິດ!

Shopify CSS Minification ໃນ Liquid

Shopify ຊ່ວຍໃຫ້ທ່ານສາມາດປ່ຽນຕົວແປສະຄິບໄດ້ງ່າຍແລະດັດແປງຜົນໄດ້ຮັບ. ໃນ​ກໍ​ລະ​ນີ​ນີ້, ພວກ​ເຮົາ​ໃນ​ຕົວ​ຈິງ​ສາ​ມາດ​ຫໍ່ CSS ຂອງ​ພວກ​ເຮົາ​ເຂົ້າ​ໄປ​ໃນ​ຕົວ​ປ່ຽນ​ແປງ​ເນື້ອ​ໃນ​ແລະ​ຫຼັງ​ຈາກ​ນັ້ນ​ການ​ຈັດ​ການ​ມັນ​ເພື່ອ​ເອົາ​ແຖບ​ທັງ​ຫມົດ​, ການ​ກັບ​ຄືນ​ເສັ້ນ​, ແລະ​ຊ່ອງ​ຫວ່າງ​! ຂ້ອຍພົບລະຫັດນີ້ຢູ່ໃນ ຊຸມຊົນ Shopify ຈາກ ທິມ (ຫາງລີ) ແລະ​ມັນ​ເຮັດ​ວຽກ brilliantly!

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