Ipakilala ka ng artikulong ito sa isang paksang kilala bilang Minify In at sa proseso ay bibigyan ka rin ng isang detalyadong praktikal na demonstrasyon. Saklaw ang artikulong ito sa artikulong ito,
- Ano ang minification?
- Bakit kailangan ng minification?
- Paano mo nai-minify ang CSS, JS, HTML code?
- Kailan mo dapat gawin iyon?
- Mga pakinabang ng pagliit?
Tulad ng ipahiwatig sa amin ng pangalan nang maayos, ang pag-minimize ay tungkol sa pag-minimize sa laki ng isang file. Sa isang batayan ng code, mayroon kaming kalayaan upang mai-minify ang mga file ng HTML, CSS, o Javascript. Dito, tatalakayin namin ang tungkol sa pag-minimize ng isang CSS file.
Kapag ang isang code ng developer, tinitiyak niya na ang code ay nasa pinakamahusay na nababasa na format upang gawing simple ang anumang proseso ng mga karagdagang pagbabago. Kaya, ang mga variable na pangalan ay nasa isang format na madaling maintindihan at tatagal ng maraming mga character. Pagkatapos, nagdagdag din sila ng isang mahusay na halaga ng blangkong spacing upang gawin itong sapat na mabasa.
Ngunit sa buong proseso, may posibilidad kaming paluwagin ang mga string na dumarami ang laki ng aming file na sa gayon ay nagdaragdag ng oras ng paglo-load ng website. Lalo na sa mga website na mayroong pangunahing tipak ng mga pagpapaandar at mga add-on, ang isang mas matagal na code base ay pinapalala lamang ang website.
Gayunpaman, ang Google ay may isang pinaghihigpitang format upang ma-ranggo ang mga website sa pahina ng paghahanap nito batay sa pinakamainam na karanasan ng gumagamit na ibinibigay ng mga website. Ang mas mahusay na naglo-load ang iyong site, mas mahusay ang ranggo ng iyong website sa pahina ng paghahanap.
Sa napakaraming nakataya, hindi mo nais na magdusa ang iyong mga gumagamit dahil sa hindi magandang oras sa paglo-load ng site at magpatuloy sa susunod. Samakatuwid, ang pag-minimize ng code ay lubhang mahalaga.
Infact, habang nagtatayo ng isang website, alam namin kung ano ang binubuo ng maximum na base ng code?
Ang lahat ay tungkol sa CSS, HTML, at Javascript. Ang kumpetisyon ngayon upang maipakita ang iyong website na may kaakit-akit na nakakainit na binibigyang diin ang CSS file nang marami at hindi napagtanto na nakukuha namin ang aming website gamit ang mabibigat na code.
Pumasok, pinaliit ..
Nagpapatuloy sa artikulong ito sa Minify CSS
Ano ang pagliit ?
Pinapayagan ka ng Minification na i-strip ang iyong code sa isang maliit na sukat ng file na hindi nakakaapekto sa code at binabawasan pa ang laki ng file. Sa proseso, maaari mong alisin ang hindi kinakailangang spacing at mga character na kahit saan ay nakakaapekto sa pagka-orihinal ng iyong website. Ang ilang mga bagay na dapat iwasan mula sa code ay:
- Mga character na Whitespace
- Mga bagong character ng linya
- I-block ang mga delimiter
- Mga Komento
- Pagpapaikli ng mga variable na pangalan
Ang mga kadahilanang ito ay hindi kasangkot upang patakbuhin ang iyong website sa halip ay gawing mas mabigat ang file at dagdagan ang oras ng paglo-load ng website.
Ang kakayahang mabasa ng code ay ganap na eksklusibo sa kung ano ang nauunawaan ng makina. Ang web browser ay hindi nangangailangan ng labis na spacing sa pagitan ng mga character upang maunawaan at patakbuhin. Kaya, subukang bawasan ang mga ito at i-minify ang CSS at HTML code.
Kumuha tayo ng isang halimbawa:
#myContent {font-family: Montserrat} #myContent {font-size: 90%}I-minify ang aking CSS
Halos isang pagkakaiba ng 48% sa orihinal at pinaliit na file. Nabawasan ng 178 bytes. Pagkatapos ng Minification
#myContent {font-family: laki ng Arialfont: 90%}Kumusta mundo!
Nagpapatuloy sa artikulong ito sa Minify CSS
Bakit pagliit kailangan
Upang mas mahusay ang oras ng paglo-load ng website. Walang may gusto na naghihintay para sa isang website na mai-load ayon sa kaginhawaan. Sa maraming magagamit na mga pagpipilian, ang mga tao ay may posibilidad na lumipat sa isa pa. Kaya, mas mahusay na bawasan ang laki ng file.
Nagpapatuloy sa artikulong ito sa Minify CSS
Paano mo mabawasan CSS, JS, HTML code?
Upang mabawasan, may labing isang bilang ng mga tool na magagamit sa online na maaaring makatulong sa iyo na mabawasan ang base ng code. Maaari ka ring mag-opt in upang gawin ito nang manu-mano ngunit para sa isang mas malaking batayan ng code ipinapayong gamitin ang alinman sa mga sumusunod na tool upang mabawasan ang iyong CSS file:
CSSminifier.com: Isang lubos na simpleng tool na gagamitin. Kopyahin lamang ang code sa kaliwang bahagi, bumuo ng na-minimize na file, at i-download ito. Ang minified file ay magkakaroon ng isang extension .min.
Ang iyong minified CSS file ay magkakaroon ng extension demo.min.css.
Smallseotools.com: Maaaring kopyahin ang iyong code o i-upload ang iyong code ng file. Bawasan nito ang iyong code at hahayaan kang kopyahin ito o i-download ito.
Autoptimize: Ito ay isang plugin na maaari mong idagdag sa iyong mga tool sa WordPress. Bilang isang plugin, maaari kang pumili upang i-minimize ang iyong CSS code pagkatapos at doon.
Mas madaling maintindihan ng isang developer kapag na-minimize ang file at kung hindi. Ang isang minified file ay magkakaroon ng isang extension .min.
Nagpapatuloy sa artikulong ito sa Minify CSS
Kailan mo dapat gawin iyon?
Pangunahin dapat gawin, kapag naisulat mo ang code at ipadala ito sa server para sa isang tugon. Kapag na-minimize ang mga file, ginagamit ang mga minified na bersyon upang ipamahagi sa mga gumagamit.
Magandang maidudulot pagliit ?
Pagbawas ng laki ng file: Sa pamamagitan ng pag-alis ng labis na spacing, pagbawas ng mga variable na pangalan, at pag-aalis ng mga komento, ang laki ng file ay halos mabawasan ng 30-60%. Mas mabilis na paglo-load: Sa mas kaunting data upang maipadala sa network, nag-load ang website nang mas mabilis kaysa dati. Mas mababang gastos sa bandwidth: Kapag inalis ang hindi kinakailangang data, ang bandwidth na kinakailangan ay higit na mas mababa at ganoon din ang gastos.
Bagay na dapat alalahanin:
Bago pa man subukan ang pag-minimize, tiyaking hindi lumalagpas sa mga limitasyon ang iyong code. Ang agos ay hindi dapat magambala at ang pagpapaandar ay dapat manatiling walang mukha. Kailangan mong suriin na kahit na pagkatapos ng pag-minimize ang iyong code ay tumatakbo sa katulad na pamamaraan.
Infact, bilang isang pinakamahusay na kasanayan maaari mong laging mapanatili ang isang template na handa. Gawin ang iyong mga pagbabago sa built-in na template na makatipid sa iyo ng isang mapagbigay na oras.
Ito ba ay katulad ng compression?
Well, Matindi ang HINDI. ang pag-minimize ay naiiba kaysa sa compression. Ginagawa ng compression ang isang pinaliit na file na nagbabawas nang higit pa ngunit hindi nakakaapekto sa estilo ng estilo at istraktura.
Ang file ay pinaliit at pagkatapos ay naka-compress bilang isang zip at ipinadala sa network kapag humiling ang isang client na i-access ang website. Ang file ay pagkatapos ay hindi nai-compress at ginamit.
Mga halimbawa:
Bago ang Minification:
Portfolio
- Bahay
Pagkatapos ng Minification:
java string to date conversion
Portfolio
- Bahay
Ang code ay tiyak na mas mahirap basahin at maunawaan para sa isang tao ngunit pantay na katwiran para sa isang makina na mag-render. Ang isang makina ay hindi talagang nagmamalasakit sa kagandahan ng code at spacing, naiintindihan nito ang diwa at gumagana nang naaayon.
Sapat na na-impression sa diskarteng minification?
Pagkatapos subukan mo para sa iyong sarili. Bawasan ang pasanin ng iyong file at hayaan ang iyong website na malayang dumaloy para sa lahat ng mga gumagamit!
Dinadala tayo nito sa pagtatapos ng artikulong ito sa Minify In CSS.
Kung interesado kang matuto nang higit pa tungkol sa pag-unlad sa web, tingnan ang ni Edureka. Tutulungan ka ng Pagsasanay sa Pagpapatunay sa Pag-unlad ng Web na Alamin kung paano lumikha ng mga kahanga-hangang website gamit ang HTML5, CSS3, Twitter Bootstrap 3, jQuery at Google API at i-deploy ito sa Amazon Simple Storage Service (S3).
Kung interesado ka pa rin Kung mayroon kang anumang katanungan, maaari mo itong mai-post sa seksyon ng komento ng blog na 'Minify In CSS' na ito, at babalikan ka namin sa lalong madaling panahon.