HTML మినిఫై చేయండి _

HTML మినిఫికేషన్ ఎలా పనిచేస్తుంది

మినిఫైయర్ చిన్న స్టేట్ మెషిన్‌తో మీ ఇన్‌పుట్‌ను వాక్ చేస్తుంది, ప్రిజర్వ్-యాజ్-ఈజ్ రీజియన్లు (<pre>, <textarea>, <script>, <style>) ను ఎడిటేబుల్ రీజియన్ల నుండి వేరు చేస్తుంది.

1. ప్రిజర్వ్ బ్లాక్లు టోకెనైజ్ చేయండి. స్క్యానర్ అక్షరం అక్షరంగా ఇన్‌పుట్ చదివి <pre>, <textarea>, <script>, లేదా <style> ఓపెనింగ్ ట్యాగ్ తాకినప్పుడు ప్రిజర్వ్ స్టేట్‌లో ఫ్లిప్ అవుతుంది. మ్యాచింగ్ క్లోజర్ వరకు ఆ ట్యాగ్ల లోపలి అన్నీ బైట్-ఫర్-బైట్ ఉంచబడతాయి.
2. ఎడిటేబుల్ వైట్‌స్పేస్ కంప్రెస్ చేయండి. ఎడిటేబుల్ రీజియన్లలో స్క్యానర్ స్పేస్లు, ట్యాబ్లు, మరియు న్యూలైన్ల ప్రతి రన్‌ను ఒకే స్పేస్‌కు కంప్రెస్ చేస్తుంది, అప్పుడు ట్యాగ్ బౌండరీల చుట్టూ లీడింగ్ మరియు ట్రెయిలింగ్ వైట్‌స్పేస్ ట్రిమ్ చేస్తుంది.
3. కామెంట్లు స్ట్రిప్ చేయండి. టోగుల్ ఆన్ అయినప్పుడు <!-- ... --> బ్లాక్లు తొలగించబడతాయి. IE కండిషనల్ కామెంట్లు (<!--[if IE]> ... <![endif]-->) ప్రిజర్వ్-కండిషనల్ టోగుల్ ఆన్ అయినప్పుడు నిలుస్తాయి, ఎందుకంటే లెగసీ ఇమెయిల్ క్లయింట్లు ఇంకా వాటిపై ఆధారపడుతున్నాయి.
4. బూలియన్ అట్రిబ్యూట్లు కంప్రెస్ చేయండి. checked="checked", disabled="disabled", మరియు required="required" వంటి వెర్బోస్ ఫారమ్లు బేర్ అట్రిబ్యూట్ పేరుకు తగ్గిపోతాయి. HTML5 స్పెక్ బేర్ ఫారమ్‌ను సెమాంటిక్కల్లీ ఐడెంటికల్‌గా చూస్తుంది, కాబట్టి రెండర్ చేయబడిన DOM మారదు.
5. బైట్ డెల్టాలు నివేదించండి. అసలు మరియు మినిఫైడ్ వచనం రెండూ new TextEncoder().encode(...).byteLength తో కొలవబడతాయి. మెట్రిక్ స్ట్రిప్ అసలు సైజు, మినిఫైడ్ సైజు, సేవ్ అయిన బైట్లు, మరియు శాతం చూపిస్తుంది.

HTML మినిఫై ఎందుకు చేయాలి

• వేగవంతమైన పేజ్ లోడ్లు. చిన్న HTML బ్రౌజర్‌కు త్వరగా చేరి పార్సర్ ముందే పూర్తవుతుంది. మొబైల్ నెట్‌వర్క్లలో బైట్ సేవింగ్స్ నేరుగా వేగవంతమైన First Contentful Paint మరియు మెరుగైన Lighthouse పెర్ఫార్మెన్స్ స్కోర్‌గా మారుతాయి.
• తక్కువ CDN ఎగ్రెస్ ఖర్చులు. CloudFront, Cloudflare, మరియు Fastly ఎగ్రెస్ గిగాబైట్ కు బిల్ చేస్తాయి. నెలవారీ మిలియన్ల వ్యూలలో 20 శాతం HTML తగ్గింపు ఇన్‌వాయిస్‌లో నిజమైన సేవింగ్స్‌గా మారుతుంది.
• క్లీనర్ పుల్-రిక్వెస్ట్ diffs. రెపోకు కమిట్ చేయబడిన ప్రీ-బిల్ట్ స్టాటిక్ HTML ప్రతి టెంప్లేట్ ట్వీక్ ఇండెంటేషన్ రీఫ్లో చేసినప్పుడు నాయిజీగా అవుతుంది. dist ఫోల్డర్‌లో మినిఫైడ్ HTML వైట్‌స్పేస్ చర్న్ బదులు నిజమైన కంటెంట్ మార్పులపై దృష్టి పెట్టే టైట్ PR diffs తయారు చేస్తుంది.
• చిన్న ఎంబెడ్లు మరియు స్నిప్పెట్లు. ఇమెయిల్ టెంప్లేట్లు, థర్డ్-పార్టీ విడ్జెట్ స్నిప్పెట్లు, మరియు JSON లేదా YAML కాన్ఫిగ్లలో నిల్వ చేయబడిన HTML అన్నీ అదే బైట్ కట్ నుండి ప్రయోజనం పొందుతాయి.

సాధారణ అప్లికేషన్లు

HTML మినిఫికేషన్ దాదాపు ప్రతి స్టాటిక్-సైట్ లేదా JAMstack బిల్డ్ పైప్‌లైన్ చివర, ప్లస్ సోర్స్ రీడబిలిటీ కంటే బైట్లు ముఖ్యమైన కొన్ని రన్‌టైమ్ సందర్భాల్లో కనిపిస్తుంది.

• స్టాటిక్-సైట్ బిల్డ్ స్టెప్లు: Eleventy, Hugo, Astro, మరియు Next.js ప్రొడక్షన్ బిల్డ్లు dist ఫోల్డర్‌కు రాయడానికి ముందు HTML ని మినిఫైయర్ ద్వారా రన్ చేస్తాయి.
• ట్రాన్సాక్షనల్ ఇమెయిల్లు: ESPs (SendGrid, Postmark, Mailgun) HTML బాడీ సైజు క్యాప్ చేస్తాయి. పంపే ముందు బాడీ మినిఫై చేయడం మెసేజ్‌ను క్యాప్ కింద ఉంచుతుంది.
• ఎంబెడ్డెడ్ విడ్జెట్లు: ఇన్‌లైన్ HTML గా షిప్ చేయబడిన థర్డ్-పార్టీ విడ్జెట్లు మరియు చాట్ స్నిప్పెట్లు ప్రతి బైట్ కట్ నుండి ప్రయోజనం పొందుతాయి, ఎందుకంటే హోస్ట్ పేజ్ ప్రతి విజిట్‌లో వాటిని డౌన్‌లోడ్ చేయాల్సి ఉంటుంది.

పని చేసిన ఉదాహరణ

రెండు-స్పేస్ ఇండెంటేషన్, వరుసల మధ్య మూడు లైన్ బ్రేక్లు, పైన HTML కామెంట్ బ్లాక్, మరియు <input type="checkbox" checked="checked" /> తో 500-బైట్ వెర్బోస్ ఫారమ్ స్నిప్పెట్ పేస్ట్ చేయండి. ప్రతి ఆప్షన్ ఆన్ చేస్తే, అవుట్‌పుట్ దాదాపు 300 బైట్లకు కంప్రెస్ అవుతుంది — దాదాపు 40 శాతం సేవింగ్ — రెండర్ చేయబడిన DOM ట్రీ సోర్స్‌కు బైట్-ఈక్వల్‌గా ఉంటుంది.

మినిఫికేషన్ నా HTML విచ్ఛిన్నం చేస్తుందా?

లేదు, డిఫాల్ట్ టోగుల్స్ తో ఉపయోగించినప్పుడు. మినిఫైయర్ <pre>, <textarea>, <script>, మరియు <style> ట్యాగ్ల కంటెంట్లు యథాతథంగా నిలుపుతుంది, ఆ టోగుల్ ఆన్ అయినప్పుడు IE కండిషనల్ కామెంట్లు అలాగే ఉంచుతుంది, మరియు HTML5 పార్సర్ ఇప్పటికే అమూల్యమైనవిగా వర్గీకరించే వైట్‌స్పేస్ మాత్రమే కంప్రెస్ చేస్తుంది. రెండర్ చేయబడిన DOM ట్రీ సోర్స్‌కు బైట్-ఈక్వల్.

ఇది ఇన్‌లైన్ CSS మరియు JS మినిఫై చేస్తుందా?

ఈ టూల్‌లో కాదు. ఇన్‌లైన్ <style> మరియు <script> బాడీలు యథాతథంగా నిలుపబడతాయి. CSS-స్పెసిఫిక్ మినిఫికేషన్ కోసం CSS Minifier ఉపయోగించండి; JS కోసం JS Minifier ఉపయోగించండి. HTML Minifier మార్కప్ పైనే దృష్టి పెడుతుంది.

నేను ఎంత సేవ్ చేయగలను?

హ్యాండ్-రాసిన HTML లో సాధారణ సేవింగ్స్ 10 నుండి 30 శాతం వరకు ఉంటాయి, సోర్స్ ఇండెంటేషన్, ఖాళీ లైన్లు, మరియు వెర్బోస్ అట్రిబ్యూట్ ఫారమ్లు ఎంత ఉపయోగిస్తుందో దానిపై ఆధారపడి. Next.js వంటి ఫ్రేమ్‌వర్క్ల నుండి ప్రీ-బిల్ట్ స్టాటిక్ HTML తరచుగా 15 నుండి 25 శాతం సేవ్ చేస్తుంది. భారీగా కామెంట్ చేయబడిన టెంప్లేట్లు మరియు ఇమెయిల్-స్టైల్ HTML 40 శాతం లేదా అంతకంటే ఎక్కువ వరకు చేరవచ్చు.

pre కంటెంట్ నిలుపబడుతుందా?

అవును. మినిఫైయర్ స్పష్టంగా <pre>, <textarea>, <script>, మరియు <style> బ్లాక్లను ప్రిజర్వ్-యాజ్-ఈజ్ రీజియన్లుగా టోకెనైజ్ చేసి వాటి కంటెంట్లను బైట్-ఫర్-బైట్ అవుట్‌పుట్‌కు కాపీ చేస్తుంది. ఆ ట్యాగ్ల లోపల వైట్‌స్పేస్, లైన్ బ్రేక్లు, మరియు ఇండెంటేషన్ మినిఫికేషన్ తర్వాత ఖచ్చితంగా అలాగే రెండర్ అవుతాయి.

బ్రౌజర్-సైడ్ HTML మినిఫికేషన్ మీ బిల్డ్ పైప్‌లైన్‌ను సులభంగా మరియు మీ మార్కప్‌ను చిన్నగా ఉంచుతుంది. పైన ఏ HTML అయినా పేస్ట్ చేయండి, ఆప్షన్ టోగుల్స్ ట్వీక్ చేయండి, మరియు మినిఫైడ్ అవుట్‌పుట్ కాపీ లేదా డౌన్‌లోడ్ చేయండి — అప్‌లోడ్ లేదు, అకౌంట్ లేదు, వెండర్ లైబ్రరీ లేదు.