Denne artikel introducerer dig til et emne kendt som Minify In og undervejs også give dig en detaljeret praktisk demonstration. Følgende punkter vil blive dækket i denne artikel,
- Hvad er minifikation?
- Hvorfor er minifikation nødvendig?
- Hvordan minimerer du CSS, JS, HTML-kode?
- Hvornår skal du gøre det?
- Fordele ved minifikation?
Som navnet antyder os ret godt, handler minificering om at minimere størrelsen på en fil. I en kodebase har vi frihed til at minimere HTML-, CSS- eller Javascript-filer. Her vil vi diskutere om minificering af en CSS-fil.
Når en udvikler koder, sørger han / hun for, at koden er i det bedst læsbare format for at forenkle enhver proces med yderligere ændringer. Så variabelnavne er i et format, der er let forståeligt og optager en hel masse tegn. Derefter tilføjer de også en god mængde blank afstand for at gøre det læsbart nok.
Men i hele processen har vi en tendens til at løsne strengene, som vores filstørrelse øger, hvilket igen øger webstedets indlæsningstid. Især med websteder, der har en stor del af funktionaliteter og tilføjelser, gør en længere kodebase bare webstedet værre.
Google har alligevel et begrænset format til at rangere webstederne på sin søgeside baseret på den optimale brugeroplevelse, som websteder giver. Jo bedre dit websted indlæses, desto bedre rangerer dit websted på søgesiden.
Med så meget på spil ønsker du ikke, at dine brugere skal lide på grund af dårlig indlæsningstid for webstedet og gå videre til den næste. Derfor er minificering af koden ekstremt vigtig.
Infact, mens vi bygger et websted, ved vi, hvad der består af den maksimale kodebase?
Det handler om CSS, HTML og Javascript. Konkurrencen i dag om at få dit websted til at se visuelt tiltalende fremhæver CSS-filen meget, og uden at vide, udnytter vi vores hjemmeside med tung kode.
Indgange, minifikation ..
Fortsætter med denne artikel om Minify CSS
Hvad er minifikation ?
Minificering giver dig mulighed for at fjerne din kode til en minimal filstørrelse, som ikke påvirker koden og alligevel reducerer filstørrelsen. I processen kan du fjerne den unødvendige afstand og tegn, der ingen steder påvirker dit websteds originalitet. Et par ting, som bør undgås fra koden, er:
- Mellemrumstegn
- Nye linjetegn
- Bloker afgrænsere
- Kommentarer
- Afkortning af variabelnavne
Disse faktorer er ikke involveret for at få dit websted til at køre i stedet for bare gøre filen tungere og øge webstedets indlæsningstid.
Kodens læsbarhed er helt eksklusiv hvad maskinen forstår. Webbrowser har ikke brug for en ekstra afstand mellem tegnene for at forstå og køre. Så prøv at reducere dem og minimere CSS og HTML-koden.
Lad os tage et eksempel:
#myContent {font-family: Montserrat} #myContent {font-size: 90%}Minimer min CSS
Næsten en forskel på 48% i den originale og minificerede fil. Reduceret med 178 byte. Efter minifiering
#myContent {font-family: Arialfont-size: 90%}Hej Verden!
Fortsætter med denne artikel om Minify CSS
Hvorfor er minifikation havde brug for?
For at forbedre webstedets indlæsningstid. Ingen kan lide at vente på, at et websted indlæses i henhold til bekvemmeligheden. Med så mange tilgængelige muligheder har folk tendens til at skifte til en anden. Så det er bedre at reducere filstørrelsen.
Fortsætter med denne artikel om Minify CSS
Hvordan har du det? minify CSS, JS, HTML-kode?
For at minimere er der flere forskellige værktøjer tilgængelige online, som kan hjælpe dig med at reducere kodebasen. Du kan også vælge at gøre det manuelt, men for en større kodebase anbefales det at bruge et af følgende værktøjer til at minimere din CSS-fil:
CSSminifier.com: Et ekstremt simpelt værktøj at bruge. Kopier bare koden i venstre side, generer den minificerede fil, og download den. Den minificerede fil vil have en udvidelse .min.
Din minificerede CSS-fil har filtypen demo.min.css.
Smallseotools.com: Kopier enten din kode eller upload din kodefil. Det minimerer din kode og lader dig kopiere den eller downloade den.
Autoptimize: Dette er et plugin, som du kan tilføje til dine WordPress-værktøjer. Som et plugin kan du vælge at minificere din CSS-kode der og da.
Det er lettere for en udvikler at forstå, hvornår filen minificeres, og hvornår ikke. En minificeret fil vil have en udvidelse .min.
Fortsætter med denne artikel om Minify CSS
Hvornår skal du gøre det?
Minificering skal primært udføres, når du har skrevet koden og skal sende den på serveren for at få et svar. Når filerne er minificeret, bruges de minificerede versioner til at distribuere til brugerne.
Fordele ved minifikation ?
Reduktion af filstørrelse: Ved at fjerne den ekstra mellemrum, reducere variabelnavne og fjerne kommentarer reduceres filstørrelsen næsten med 30-60%. Hurtigere indlæsning: Med mindre data, der skal sendes over netværket, indlæses webstedet hurtigere end før. Lavere båndbreddepris: Når unødvendige data fjernes, er den nødvendige båndbredde meget mindre, og det samme er omkostningerne.
Ting at huske:
Selv før forsøg på minificering skal du sørge for, at din kode ikke sprænges uden for grænserne. Strømmen bør ikke forstyrres, og funktionaliteten skal forblive ansigtsløs. Du skal kontrollere, at selv efter minificering kører din kode på samme måde.
Infact, som en bedste praksis kan du altid holde en skabelon klar. Foretag dine ændringer i den indbyggede skabelon, hvilket sparer dig en generøs tid.
Ligner det kompression?
Nå, stærkt NEJ. minifikation er anderledes end komprimering. Komprimering får en formindsket fil til at reducere mere, men påvirker ikke kodestilen og strukturen.
Filen minificeres og komprimeres derefter som en zip og sendes over netværket, når en klient anmoder om at få adgang til webstedet. Filen komprimeres derefter og bruges.
Eksempler:
Før minifikation:
Portefølje
- Hjem
Efter minifiering:
Portefølje
- Hjem
Koden er bestemt sværere at læse og forstå for et menneske, men det er lige så sandsynligt for en maskine at gengive. En maskine er ligeglad med koden og afstanden, den forstår kernen og fungerer i overensstemmelse hermed.
Imponeret nok med minificeringsteknikken?
Så prøv selv. Mindsk byrden af din fil, og lad dit websted flyde frit for alle brugere!
Dette bringer os til slutningen af denne artikel om Minify In CSS.
Hvis du er interesseret i at lære mere om webudvikling, skal du tjekke af Edureka. Webudvikling certificeringstræning hjælper dig med at lære, hvordan du opretter imponerende websteder ved hjælp af HTML5, CSS3, Twitter Bootstrap 3, jQuery og Google API'er og distribuerer det til Amazon Simple Storage Service (S3).
heap og stack hukommelse i java
Hvis du stadig er interesseret Hvis du har spørgsmål, kan du sende det i kommentarsektionen på denne 'Minify In CSS' -blog, og vi vender tilbage til dig så hurtigt som muligt.