HTML சுருக்கு _

HTML மினிஃபிகேஷன் எவ்வாறு வேலை செய்கிறது

மினிஃபையர் உங்கள் உள்ளீட்டை சிறிய state machine-உடன் நடந்து preserve-as-is பகுதிகளை (<pre>, <textarea>, <script>, <style>) whitespace மற்றும் comments சுருக்க பாதுகாப்பான திருத்தக்கூடிய பகுதிகளிலிருந்து வேறுபடுத்துகிறது.

1. Preserve blocks tokenize செய்யுங்கள். scanner உள்ளீட்டை character-by-character படித்து opening <pre>, <textarea>, <script> அல்லது <style> tag பார்க்கும்போது preserve state-க்கு மாறுகிறது. அந்த tags-க்குள் உள்ள எல்லாவற்றையும் matching closer வரை byte-for-byte வைத்திருக்கும்.
2. Editable whitespace சுருக்கவும். திருத்தக்கூடிய பகுதிகளில் scanner spaces, tabs மற்றும் newlines-ன் ஒவ்வொரு run-ஐயும் ஒரே ஒரு space ஆக சுருக்கி, tag boundaries சுற்றி leading மற்றும் trailing whitespace-ஐ trim செய்கிறது. visible text உலாவி render செய்யும் அதே முறையில் reflow ஆகிறது.
3. Comments நீக்கவும். <!-- ... --> blocks toggle on ஆகும்போது நீக்கப்படுகின்றன. IE conditional comments (<!--[if IE]> ... <![endif]-->) preserve-conditional toggle on ஆகும்போது தப்பிக்கின்றன, ஏனெனில் legacy email clients இன்னும் அவற்றை நம்பியிருக்கின்றன.
4. Boolean attributes சுருக்கவும். checked="checked", disabled="disabled" மற்றும் required="required" போன்ற verbose வடிவங்கள் bare attribute name-ஆக சுருங்குகின்றன. HTML5 spec bare வடிவத்தை semantically identical ஆக கருதுகிறது, எனவே rendered DOM மாறாமல் இருக்கும்.
5. Byte deltas தெரிவிக்கவும். அசல் மற்றும் சுருக்கப்பட்ட உரை இரண்டும் new TextEncoder().encode(...).byteLength மூலம் அளவிடப்படுகின்றன, இது CDN அல்லது HTTP server கம்பியில் பார்க்கும் UTF-8 byte count ஆகும். metric strip அசல் அளவு, சுருக்கப்பட்ட அளவு, சேமிக்கப்பட்ட bytes மற்றும் சதவீதம் காட்டுகிறது.

HTML ஐ ஏன் சுருக்க வேண்டும்

• வேகமான page loads. சிறிய HTML உலாவியை விரைவில் அடைகிறது மற்றும் parser முன்கூட்டியே முடிக்கிறது. mobile networks-ல் byte savings நேரடியாக வேகமான First Contentful Paint மற்றும் சிறந்த Lighthouse performance score-ஆக மொழிபெயர்க்கப்படுகின்றன.
• குறைந்த CDN egress கட்டணங்கள். CloudFront, Cloudflare மற்றும் Fastly egress gigabyte-க்கு bill செய்கின்றன. மாதாந்திர மில்லியன் views-ல் 20 சதவீத HTML குறைப்பு image அல்லது script optimisation வருமுன்பே invoice-ல் உண்மையான savings-ஆக compound ஆகும்.
• சுத்தமான pull-request diffs. repo-க்கு commit செய்யப்பட்ட pre-built static HTML ஒவ்வொரு template tweak indentation reflow செய்யும்போது noisy ஆகும். dist folder-ல் minified HTML real content changes-ல் கவனம் செலுத்தும் tighter PR diffs உருவாக்குகிறது.
• சிறிய embeds மற்றும் snippets. Email templates, third-party widget snippets மற்றும் JSON அல்லது YAML configs-ல் சேமிக்கப்பட்ட HTML அனைத்தும் அதே byte cut-ல் பயன்பெறுகின்றன. Minified embeds transactional emails-ஐ ESP size caps-க்கு கீழே வைக்கின்றன மற்றும் widget bundles-ஐ சுருக்குகின்றன.

பொதுவான பயன்பாடுகள்

HTML மினிஃபிகேஷன் கிட்டத்தட்ட ஒவ்வொரு static-site அல்லது JAMstack build pipeline-ன் முடிவிலும் மற்றும் bytes source readability-ஐ விட அதிக முக்கியம் பெறும் சில runtime contexts-லும் காட்சியளிக்கிறது.

• Static-site build steps: Eleventy, Hugo, Astro மற்றும் Next.js production builds deployed bundle source-ஐ விட சிறியதாக இருக்க dist folder-க்கு எழுதுவதற்கு முன்பு HTML-ஐ ஒரு மினிஃபையர் மூலம் இயக்குகின்றன.
• Transactional emails: ESPs (SendGrid, Postmark, Mailgun) HTML body size-ஐ cap செய்கின்றன மற்றும் inline-CSS expansion அந்த count-ஐ விரைவாக அதிகரிக்கும். அனுப்புவதற்கு முன்பு body-ஐ சுருக்குவது message-ஐ cap-க்கு கீழே வைக்கிறது.
• Embedded widgets: inline HTML ஆக ship செய்யப்பட்ட third-party widgets மற்றும் chat snippets ஒவ்வொரு byte cut-லிருந்தும் பயன்பெறுகின்றன ஏனெனில் host page ஒவ்வொரு visit-லும் அவற்றை download செய்ய வேண்டும்.

ஒரு worked example

இரண்டு-space indentation, rows இடையே மூன்று line breaks, மேலே ஒரு HTML comment block மற்றும் <input type="checkbox" checked="checked" /> உள்ள verbose 500-byte form snippet ஒட்டுங்கள். ஒவ்வொரு option-உம் toggle on செய்யப்பட்டிருக்கும்போது, வெளியீடு சுமார் 300 bytes-ஆக சுருங்குகிறது — தோராயமாக 40 சதவீத சேமிப்பு — render ஆகும் DOM tree மூலத்திற்கு byte-equal ஆக இருக்கும்.

மினிஃபிகேஷன் என் HTML-ஐ சிதைக்குமா?

இல்லை, default toggles-உடன். மினிஃபையர் <pre>, <textarea>, <script> மற்றும் <style> tags-ன் contents-ஐ verbatim பாதுகாக்கிறது, IE conditional comments-ஐ அந்த toggle on ஆகும்போது intact வைக்கிறது, மற்றும் HTML5 parser ஏற்கனவே insignificant ஆக classify செய்யும் whitespace மட்டுமே சுருக்குகிறது. rendered DOM tree மூலத்திற்கு byte-equal. Aggressive toggles (remove-empty-attributes) வேண்டுமென்றே value="" அல்லது alt="" பயன்படுத்தும் snippets-க்கு நடத்தையை மாற்றலாம், எனவே அவற்றை on செய்தால் வெளியீட்டை மதிப்பாய்வு செய்யுங்கள்.

இது inline CSS மற்றும் JS-ஐ சுருக்குமா?

இந்த கருவியில் இல்லை. Inline <style> மற்றும் <script> bodies-ஐ verbatim பாதுகாக்கிறது, இதனால் மினிஃபையர் string literal அல்லது regex-க்குள் whitespace சுருக்கி CSS rule அல்லது JS statement-ஐ ஒருபோதும் சிதைக்காது. CSS-specific மினிஃபிகேஷனுக்கு CSS Minifier பயன்படுத்துங்கள்; JS-க்கு JS Minifier பயன்படுத்துங்கள். HTML Minifier markup-ஐ மட்டுமே கவனிக்கிறது.

நான் எவ்வளவு சேமிக்கலாம்?

கையால் எழுதப்பட்ட HTML-ல் பொதுவான savings 10 முதல் 30 சதவீதம் வரை, source எவ்வளவு indentation, blank lines மற்றும் verbose attribute வடிவங்கள் பயன்படுத்துகிறது என்பதை பொறுத்து. Next.js போன்ற frameworks-லிருந்து pre-built static HTML பெரும்பாலும் 15 முதல் 25 சதவீதம் சேமிக்கும் ஏனெனில் framework ஏற்கனவே சில optimisation செய்கிறது ஆனால் human-readable whitespace வைத்திருக்கிறது. Heavily commented templates மற்றும் deep nesting உடன் email-style HTML 40 சதவீதம் அல்லது அதிகம் எட்டலாம்.

pre content பாதுகாக்கப்படுகிறதா?

ஆம். மினிஃபையர் வெளிப்படையாக <pre>, <textarea>, <script> மற்றும் <style> blocks-ஐ preserve-as-is பகுதிகளாக tokenize செய்து அவற்றின் contents-ஐ byte-for-byte வெளியீட்டிற்கு நகலெடுக்கிறது. அந்த tags-க்குள் உள்ள whitespace, line breaks மற்றும் indentation தொடவே தொடாமல் தப்பிக்கின்றன, எனவே code samples மற்றும் ASCII art மினிஃபிகேஷனுக்கு பிறகும் சரியாக render ஆகும்.

Browser-side HTML மினிஃபிகேஷன் உங்கள் build pipeline-ஐ எளிமையாகவும் markup-ஐ சிறியதாகவும் வைக்கிறது. மேலே எந்த HTML-ஐயும் ஒட்டுங்கள், option toggles-ஐ மாற்றுங்கள், மற்றும் சுருக்கப்பட்ட வெளியீட்டை நகலெடுங்கள் அல்லது பதிவிறக்குங்கள் — upload இல்லை, கணக்கு இல்லை, vendor library இல்லை.