Šis straipsnis supažindins jus su tema, vadinama „Minify In“ ir proceso metu taip pat pateiks jums išsamią praktinę demonstraciją. Tolimesni patarimai bus aptarti šiame straipsnyje,
- Kas yra minifikacija?
- Kodėl reikalinga minifikacija?
- Kaip sumažinti CSS, JS, HTML kodą?
- Kada turėtumėte tai padaryti?
- Minifikavimo nauda?
Kadangi pavadinimas mus gana gerai rodo, suskaidymas reiškia failo dydžio sumažinimą. Kodo bazėje mes turime laisvę sutrumpinti HTML, CSS ar „Javascript“ failus. Čia aptarsime CSS failo susiaurinimą.
Kai kūrėjas koduoja, jis / ji įsitikina, kad kodas yra geriausiai skaitomo formato, kad supaprastintų bet kokių tolesnių pakeitimų procesą. Taigi, kintamųjų pavadinimai yra lengvai suprantamo formato ir apima daugybę simbolių. Tada jie taip pat prideda daug tuščių tarpų, kad būtų pakankamai įskaitomi.
Tačiau per visą procesą mes linkę atlaisvinti eilutes, kad mūsų failo dydis didėja, o tai savo ruožtu ilgina svetainės įkėlimo laiką. Ypač svetainėse, kuriose yra daug funkcijų ir priedų, ilgesnė kodų bazė tiesiog blogina svetainę.
Šiaip ar taip, „Google“ yra riboto formato, kad galėtų reitinguoti svetaines savo paieškos puslapyje, atsižvelgdamas į optimalią svetainių teikiamą vartotojo patirtį. Kuo geriau įkeliama jūsų svetainė, tuo geriau jūsų svetainė užima paieškos puslapį.
Kadangi tiek daug rizikuojama, nenorite, kad jūsų vartotojai kentėtų dėl blogo svetainės įkėlimo laiko ir pereitų prie kitos. Todėl kodo sutrumpinimas yra nepaprastai svarbus.
Tiesą sakant, kurdami svetainę mes žinome, kas yra maksimali kodų bazė?
Viskas apie CSS, HTML ir „Javascript“. Šiandien vykstančios varžybos, kad jūsų svetainė atrodytų vizualiai, labai pabrėžia CSS failą ir nesuprasdami, kad savo svetainę panaudojame sunkiuoju kodu.
Įvedimai, susikaupimas ..
Toliau einant su šiuo straipsniu apie „CSS mažinimą“
Kas yra minifikacija ?
Sumažinus kodą galite nuskaityti minimalų failo dydį, kuris neturi įtakos kodui ir vis tiek sumažina failo dydį. Proceso metu galite pašalinti nereikalingus tarpus ir simbolius, kurie niekur neturi įtakos jūsų svetainės originalumui. Keletas dalykų, kurių reikėtų vengti iš kodo, yra šie:
- Tarpai tarp simbolių
- Nauji eilučių simboliai
- Blokuoti ribotuvus
- Komentarai
- Sutrumpinti kintamųjų pavadinimus
Šie veiksniai nėra įtraukti, kad jūsų svetainė būtų paleista, o paprasčiausiai pasunkinkite failą ir padidinkite svetainės įkėlimo laiką.
Kodo įskaitomumas visiškai nepriklauso nuo to, ką supranta mašina. Žiniatinklio naršyklei suprasti ir paleisti nereikia papildomų tarpų tarp simbolių. Taigi, pabandykite juos sumažinti ir sumažinti CSS ir HTML kodą.
Paimkime pavyzdį:
#myContent {font-family: Montserrat} #myContent {font-size: 90%}Sumažinti mano CSS
Beveik 48% skirtumas pirminėje ir supakuotoje byloje. Sumažinta 178 baitais. Po minimizavimo
#myContent {font-family: Arialfont-size: 90%}Labas pasauli!
Toliau einant su šiuo straipsniu apie „CSS mažinimą“
Kodėl minifikacija reikia?
Norėdami pagerinti svetainės įkėlimo laiką. Niekam nepatinka laukti, kol svetainė bus įkelta pagal patogumą. Turėdami tiek daug galimybių, žmonės linkę pereiti prie kito. Taigi, geriau sumažinti failo dydį.
Toliau einant su šiuo straipsniu apie „CSS mažinimą“
Kaip tu sutrumpinti CSS, JS, HTML kodas?
Norėdami sumažinti, internete yra daugybė įrankių, kurie gali padėti sumažinti kodų bazę. Taip pat galite pasirinkti tai padaryti rankiniu būdu, tačiau norint sukurti didesnę kodų bazę, patartina naudoti bet kurį iš šių įrankių, norint sumažinti CSS failą:
CSSminifier.com: itin paprastas įrankis. Tiesiog nukopijuokite kodą kairėje pusėje, sugeneruokite sutvarkytą failą ir atsisiųskite jį. Sutrumpinto failo plėtinys bus .min.
Jūsų sutrumpinto CSS failo plėtinys bus demo.min.css.
Smallseotools.com: nukopijuokite kodą arba įkelkite kodo failą. Tai sumažins jūsų kodą ir leis jį nukopijuoti arba atsisiųsti.
Automatizuoti: tai yra papildinys, kurį galite pridėti prie savo „WordPress“ įrankių. Kaip papildinį galite pasirinkti susiaurinti savo CSS kodą tada ir ten.
Kūrėjui lengviau suprasti, kada failas sutankinamas, o kada ne. Sutrumpinto failo plėtinys bus .min.
Toliau einant su šiuo straipsniu apie „CSS mažinimą“
Kada turėtumėte tai padaryti?
Sumažinti pirmiausia reikėtų tada, kai parašėte kodą ir turite jį nusiųsti į serverį, kad gautumėte atsakymą. Susirašius failus, suskaidytos versijos naudojamos platinant vartotojams.
Privalumai minifikacija ?
Failo dydžio sumažinimas: pašalinus papildomus tarpus, sumažinus kintamųjų pavadinimus ir pašalinus komentarus, failo dydis beveik sumažėja 30–60%. Greitesnis įkelimas: turint mažiau duomenų, kuriuos reikia siųsti per tinklą, svetainė įkeliama greičiau nei anksčiau. Mažesnė pralaidumo kaina: pašalinus nereikalingus duomenis, reikia daug mažesnio pralaidumo, taigi ir išlaidų.
Įsimintini dalykai:
Dar prieš bandydami sutrumpinti, įsitikinkite, kad kodas neperžengė ribų. Srautas neturėtų sutrikti, o funkcionalumas turėtų likti beveidis. Turite patikrinti, ar net ir susumavus jūsų kodas veikia panašiai.
Iš tikrųjų, kaip geriausią praktiką, jūs visada galite laikyti šabloną paruoštą. Atlikite pakeitimus integruotame šablone, kad sutaupytumėte daug laiko.
Ar tai panašu į suspaudimą?
Na, stipriai NE. minifikacija skiriasi nuo suspaudimo. Suglaudinus suspaustą failą galima sumažinti daugiau, tačiau tai neturi įtakos kodo stiliui ir struktūrai.
Failas sutrinamas, tada suglaudinamas kaip ZIP ir siunčiamas per tinklą, kai klientas pateikia prieigą prie svetainės. Tada failas yra nesuspaustas ir naudojamas.
Pavyzdžiai:
Prieš suskaidymą:
Portfelis
- Namai
Po susumavimo:
Portfelis
- Namai
Kodas žmogui tikrai sunkiau įskaitomas ir suprantamas, tačiau jis yra vienodai patikimas ir mašinai pateikti. Mašinai nelabai rūpi kodo grožis ir tarpai, ji supranta esmę ir veikia atitinkamai.
Pakankamai sužavėtas minifikavimo technika?
sugeneruoti atsitiktinę eilutę java
Tada pabandykite patys. Sumažinkite failo naštą ir leiskite savo svetainei laisvai judėti visiems vartotojams!
Taip pateksime į šio straipsnio „Minify In CSS“ pabaigą.
Jei norite sužinoti daugiau apie žiniatinklio kūrimą, patikrinkite pateikė Edureka. Žiniatinklio kūrimo sertifikavimo mokymai padės jums sužinoti, kaip sukurti įspūdingas svetaines naudojant HTML5, CSS3, „Twitter Bootstrap 3“, „jQuery“ ir „Google“ API ir pritaikyti ją „Amazon Simple Storage Service“ (S3).
Jei vis tiek domitės Jei turite kokių nors klausimų, galite juos paskelbti šio „Minify In CSS“ tinklaraščio komentarų skyriuje, ir mes kuo greičiau susisieksime su jumis.