HTML ಮಿನಿಫೈ ಮಾಡಿ _

HTML ಮಿನಿಫಿಕೇಶನ್ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ

ಮಿನಿಫೈಯರ್ ಸಣ್ಣ ಸ್ಟೇಟ್ ಮಷೀನ್ ಬಳಸಿ ನಿಮ್ಮ ಇನ್‌ಪುಟ್ ನಡೆಯುತ್ತದೆ, ಸಂರಕ್ಷಿತ ಪ್ರದೇಶಗಳನ್ನು (<pre>, <textarea>, <script>, <style>) ಸಂಪಾದಿಸಬಹುದಾದ ಪ್ರದೇಶಗಳಿಂದ ಪ್ರತ್ಯೇಕಿಸುತ್ತದೆ.

1. preserve ಬ್ಲಾಕ್‌ಗಳನ್ನು ಟೋಕನೈಸ್ ಮಾಡಿ. ಸ್ಕ್ಯಾನರ್ ಇನ್‌ಪುಟ್ ಅನ್ನು ಅಕ್ಷರದಿಂದ ಅಕ್ಷರಕ್ಕೆ ಓದಿ <pre>, <textarea>, <script>, ಅಥವಾ <style> ತೆರೆಯುವ ಟ್ಯಾಗ್ ಎದುರಾದಾಗ preserve ಸ್ಥಿತಿಗೆ ಬದಲಾಗುತ್ತದೆ. ಆ ಟ್ಯಾಗ್‌ಗಳ ಒಳಗಿರುವ ಎಲ್ಲವೂ ಮ್ಯಾಚಿಂಗ್ ಕ್ಲೋಸರ್ ವರೆಗೆ ಬೈಟ್-ಫಾರ್-ಬೈಟ್ ಇಡಲ್ಪಡುತ್ತದೆ.
2. ಸಂಪಾದಿಸಬಹುದಾದ ವೈಟ್‌ಸ್ಪೇಸ್ ಸಂಕ್ಷಿಪ್ತಗೊಳಿಸಿ. ಸಂಪಾದಿಸಬಹುದಾದ ಪ್ರದೇಶಗಳಲ್ಲಿ ಸ್ಕ್ಯಾನರ್ ಸ್ಪೇಸ್‌ಗಳು, ಟ್ಯಾಬ್‌ಗಳು ಮತ್ತು ನ್ಯೂಲೈನ್‌ಗಳ ಪ್ರತಿ ಸರಣಿ ಒಂದೇ ಸ್ಪೇಸ್‌ಗೆ ಸಂಕ್ಷಿಪ್ತಗೊಳಿಸಿ ಟ್ಯಾಗ್ ಗಡಿಗಳ ಸುತ್ತ ಮುಂದಿನ ಮತ್ತು ಹಿಂದಿನ ವೈಟ್‌ಸ್ಪೇಸ್ ಟ್ರಿಮ್ ಮಾಡುತ್ತದೆ.
3. ಕಾಮೆಂಟ್‌ಗಳನ್ನು ತೆಗೆಯಿರಿ. ಟಾಗಲ್ ಆನ್ ಇರುವಾಗ <!-- ... --> ಕಡತಿಪ್ಪಣಿ ಬ್ಲಾಕ್‌ಗಳನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ. IE ಷರತ್ತುಬದ್ಧ ಕಡತಿಪ್ಪಣಿಗಳು (<!--[if IE]> ... <![endif]-->) preserve-conditional ಟಾಗಲ್ ಆನ್ ಇದ್ದಾಗ ಉಳಿಯುತ್ತವೆ, ಏಕೆಂದರೆ ಹಳೆಯ ಇ-ಮೇಲ್ ಗ್ರಾಹಕಗಳು ಇನ್ನೂ ಅವುಗಳ ಮೇಲೆ ಅವಲಂಬಿಸಿವೆ.
4. Boolean attributes ಸಂಕ್ಷಿಪ್ತಗೊಳಿಸಿ. checked="checked", disabled="disabled", ಮತ್ತು required="required" ಗಂತಹ ವರ್ಬೋಸ್ ರೂಪಗಳು ಕೇವಲ attribute ಹೆಸರಿಗೆ ಕುಗ್ಗುತ್ತವೆ. HTML5 ಸ್ಪೆಸ್ ಕೇವಲ ರೂಪವನ್ನು ಅರ್ಥಗರ್ಭಿತವಾಗಿ ಒಂದೇ ಎಂದು ಪರಿಗಣಿಸುತ್ತದೆ.
5. ಬೈಟ್ ಡೆಲ್ಟಾ ವರದಿ ಮಾಡಿ. ಮೂಲ ಮತ್ತು ಮಿನಿಫೈ ಮಾಡಿದ ಟೆಕ್ಸ್ಟ್ ಎರಡನ್ನೂ new TextEncoder().encode(...).byteLength ಬಳಸಿ ಅಳೆಯಲಾಗುತ್ತದೆ. ಮೆಟ್ರಿಕ್ ಸ್ಟ್ರಿಪ್ ಮೂಲ ಗಾತ್ರ, ಮಿನಿಫೈ ಗಾತ್ರ, ಉಳಿಸಿದ ಬೈಟ್‌ಗಳು ಮತ್ತು ಶೇಕಡಾ ತೋರಿಸುತ್ತದೆ.

HTML ಮಿನಿಫೈ ಏಕೆ ಮಾಡಬೇಕು

• ವೇಗವಾದ ಪೇಜ್ ಲೋಡ್‌ಗಳು. ಚಿಕ್ಕ HTML ಬ್ರೌಸರ್ ತ್ವರಿತವಾಗಿ ತಲುಪುತ್ತದೆ ಮತ್ತು ಪಾರ್ಸರ್ ಮೊದಲೇ ಮುಗಿಯುತ್ತದೆ. ಮೊಬೈಲ್ ನೆಟ್‌ವರ್ಕ್‌ಗಳಲ್ಲಿ ಬೈಟ್ ಉಳಿತಾಯ ನೇರವಾಗಿ ವೇಗವಾದ First Contentful Paint ಮತ್ತು ಉತ್ತಮ Lighthouse ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಸ್ಕೋರ್‌ಗೆ ಪರಿವರ್ತನೆ ಮಾಡುತ್ತದೆ.
• ಕಡಿಮೆ CDN ಎಗ್ರೆಸ್ ಬಿಲ್‌ಗಳು. CloudFront, Cloudflare ಮತ್ತು Fastly ಪ್ರತಿ ಗಿಗಾಬೈಟ್ ಎಗ್ರೆಸ್‌ಗೆ ಬಿಲ್ ಮಾಡುತ್ತವೆ. ಮಾಸಿಕ ಲಕ್ಷಾಂತರ ವ್ಯೂಗಳಲ್ಲಿ 20 ಪ್ರತಿಶತ HTML ಕಡಿತ ಇನ್‌ವಾಯ್ಸ್‌ನಲ್ಲಿ ನೈಜ ಉಳಿತಾಯಕ್ಕೆ ಸಂಯೋಜಿಸುತ್ತದೆ.
• ಶುದ್ಧ pull-request ಡಿಫ್‌ಗಳು. ರೆಪೊಗೆ ಕಮಿಟ್ ಮಾಡಿದ ಪ್ರಿ-ಬಿಲ್ಟ್ ಸ್ಥಿರ HTML ಪ್ರತಿ ಟೆಂಪ್ಲೇಟ್ ಟ್ವೀಕ್ ಇಂಡೆಂಟೇಶನ್ ರೀಫ್ಲೋ ಮಾಡಿದಾಗ ಶಬ್ದ ಮಾಡುತ್ತದೆ. dist ಫೋಲ್ಡರ್‌ನಲ್ಲಿ ಮಿನಿಫೈ ಮಾಡಿದ HTML ಅಸಲಿ ವಿಷಯ ಬದಲಾವಣೆಗಳ ಮೇಲೆ ಕೇಂದ್ರೀಕರಿಸುವ ಬಿಗಿಯಾದ PR ಡಿಫ್‌ಗಳನ್ನು ಉತ್ಪಾದಿಸುತ್ತದೆ.
• ಚಿಕ್ಕ ಎಂಬೆಡ್‌ಗಳು ಮತ್ತು ಸ್ನಿಪೆಟ್‌ಗಳು. ಇಮೇಲ್ ಟೆಂಪ್ಲೇಟ್‌ಗಳು, ಥರ್ಡ್-ಪಾರ್ಟಿ ವಿಜೆಟ್ ಸ್ನಿಪೆಟ್‌ಗಳು, ಮತ್ತು JSON ಅಥವಾ YAML ಕಾನ್ಫಿಗ್‌ಗಳಲ್ಲಿ ಸಂಗ್ರಹಿಸಿದ HTML ಎಲ್ಲಾ ಒಂದೇ ಬೈಟ್ ಕಡಿತದ ಪ್ರಯೋಜನ ಪಡೆಯುತ್ತವೆ.

ಸಾಮಾನ್ಯ ಅನ್ವಯಗಳು

HTML ಮಿನಿಫಿಕೇಶನ್ ಬಹುತೇಕ ಪ್ರತಿ ಸ್ಥಿರ-ಸೈಟ್ ಅಥವಾ JAMstack ಬಿಲ್ಡ್ ಪೈಪ್‌ಲೈನ್‌ನ ಕೊನೆಯಲ್ಲಿ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ.

• ಸ್ಥಿರ-ಸೈಟ್ ಬಿಲ್ಡ್ ಹಂತಗಳು: Eleventy, Hugo, Astro ಮತ್ತು Next.js ಉತ್ಪಾದನಾ ಬಿಲ್ಡ್‌ಗಳು dist ಫೋಲ್ಡರ್‌ಗೆ ಬರೆಯುವ ಮೊದಲು HTML ಅನ್ನು ಮಿನಿಫೈಯರ್ ಮೂಲಕ ಹಾಯಿಸುತ್ತವೆ.
• ಟ್ರಾನ್ಸಾಕ್ಷನಲ್ ಇಮೇಲ್‌ಗಳು: ESP ಗಳು (SendGrid, Postmark, Mailgun) HTML ಬಾಡಿ ಗಾತ್ರ ಮಿತಿಪಡಿಸುತ್ತವೆ. ಕಳುಹಿಸುವ ಮೊದಲು ಬಾಡಿ ಮಿನಿಫೈ ಮಾಡಿ ಸಂದೇಶ ಮಿತಿಯ ಕೆಳಗೆ ಉಳಿಸಿ.
• ಎಂಬೆಡ್ ವಿಜೆಟ್‌ಗಳು: ಇನ್‌ಲೈನ್ HTML ಆಗಿ ಶಿಪ್ ಮಾಡಿದ ಥರ್ಡ್-ಪಾರ್ಟಿ ವಿಜೆಟ್‌ಗಳು ಮತ್ತು ಚಾಟ್ ಸ್ನಿಪೆಟ್‌ಗಳು ಪ್ರತಿ ಬೈಟ್ ಕಡಿತದ ಪ್ರಯೋಜನ ಪಡೆಯುತ್ತವೆ.

ಕೆಲಸ ಮಾಡಿದ ಉದಾಹರಣೆ

ಎರಡು-ಸ್ಪೇಸ್ ಇಂಡೆಂಟೇಶನ್, ಸಾಲುಗಳ ನಡುವೆ ಮೂರು ಲೈನ್ ಬ್ರೇಕ್‌ಗಳು, ಮೇಲ್ಭಾಗದಲ್ಲಿ HTML ಕಾಮೆಂಟ್ ಬ್ಲಾಕ್ ಮತ್ತು <input type="checkbox" checked="checked" /> ಹೊಂದಿರುವ ವರ್ಬೋಸ್ 500-ಬೈಟ್ ಫಾರ್ಮ್ ಸ್ನಿಪೆಟ್ ಪೇಸ್ಟ್ ಮಾಡಿ. ಪ್ರತಿ ಆಯ್ಕೆ ಟಾಗಲ್ ಆನ್ ಮಾಡಿದ ನಂತರ, ಔಟ್‌ಪುಟ್ ಸುಮಾರು 300 ಬೈಟ್‌ಗಳಿಗೆ ಸಂಕ್ಷಿಪ್ತವಾಗುತ್ತದೆ — ಸರಿಸುಮಾರು 40 ಪ್ರತಿಶತ ಉಳಿತಾಯ.

ಮಿನಿಫಿಕೇಶನ್ ನನ್ನ HTML ಮುರಿಯುತ್ತದೆಯೇ?

ಇಲ್ಲ, ಡೀಫಾಲ್ಟ್ ಟಾಗಲ್‌ಗಳೊಂದಿಗೆ ಬಳಸಿದಾಗ. ಮಿನಿಫೈಯರ್ <pre>, <textarea>, <script>, ಮತ್ತು <style> ಟ್ಯಾಗ್‌ಗಳ ವಿಷಯವನ್ನು ಅಕ್ಷರಶಃ ಸಂರಕ್ಷಿಸುತ್ತದೆ ಮತ್ತು HTML5 ಪಾರ್ಸರ್ ಈಗಾಗಲೇ ಅಮುಖ್ಯ ಎಂದು ವರ್ಗೀಕರಿಸಿದ ವೈಟ್‌ಸ್ಪೇಸ್ ಮಾತ್ರ ಸಂಕ್ಷಿಪ್ತಗೊಳಿಸುತ್ತದೆ. ರೆಂಡರ್ ಮಾಡಿದ DOM ಟ್ರೀ ಮೂಲಕ್ಕೆ ಬೈಟ್-ಸಮಾನ.

ಇದು ಇನ್‌ಲೈನ್ CSS ಮತ್ತು JS ಮಿನಿಫೈ ಮಾಡುತ್ತದೆಯೇ?

ಈ ಉಪಕರಣದಲ್ಲಿ ಅಲ್ಲ. ಇನ್‌ಲೈನ್ <style> ಮತ್ತು <script> ಬಾಡಿಗಳನ್ನು ಅಕ್ಷರಶಃ ಸಂರಕ್ಷಿಸಲಾಗುತ್ತದೆ ಮಿನಿಫೈಯರ್ ಸ್ಟ್ರಿಂಗ್ ಲಿಟರಲ್ ಅಥವಾ regex ಒಳಗೆ ವೈಟ್‌ಸ್ಪೇಸ್ ಸಂಕ್ಷಿಪ್ತಗೊಳಿಸಿ CSS ನಿಯಮ ಅಥವಾ JS ಸ್ಟೇಟ್‌ಮೆಂಟ್ ಮುರಿಯದಂತೆ. CSS ಮಿನಿಫಿಕೇಶನ್‌ಗೆ CSS Minifier ಬಳಸಿ; JS ಗೆ JS Minifier ಬಳಸಿ.

ನಾನು ಎಷ್ಟು ಉಳಿಸಬಹುದು?

ಕೈಯಿಂದ ಬರೆದ HTML ನಲ್ಲಿ ಸಾಮಾನ್ಯ ಉಳಿತಾಯ 10 ರಿಂದ 30 ಪ್ರತಿಶತ ವ್ಯಾಪ್ತಿಯಲ್ಲಿರುತ್ತದೆ. Next.js ಗಂತಹ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳಿಂದ ಪ್ರಿ-ಬಿಲ್ಟ್ ಸ್ಥಿರ HTML ಸಾಮಾನ್ಯವಾಗಿ 15 ರಿಂದ 25 ಪ್ರತಿಶತ ಉಳಿಸುತ್ತದೆ. ಹೆಚ್ಚು ಕಾಮೆಂಟ್ ಮಾಡಿದ ಟೆಂಪ್ಲೇಟ್‌ಗಳು 40 ಪ್ರತಿಶತ ಅಥವಾ ಹೆಚ್ಚು ತಲುಪಬಹುದು.

pre ವಿಷಯ ಸಂರಕ್ಷಿಸಲ್ಪಡುತ್ತದೆಯೇ?

ಹೌದು. ಮಿನಿಫೈಯರ್ ಸ್ಪಷ್ಟವಾಗಿ <pre>, <textarea>, <script>, ಮತ್ತು <style> ಬ್ಲಾಕ್‌ಗಳನ್ನು preserve-as-is ಪ್ರದೇಶಗಳಾಗಿ ಟೋಕನೈಸ್ ಮಾಡಿ ಅವುಗಳ ವಿಷಯವನ್ನು ಬೈಟ್-ಫಾರ್-ಬೈಟ್ ಔಟ್‌ಪುಟ್‌ಗೆ ನಕಲಿಸುತ್ತದೆ. ಆ ಟ್ಯಾಗ್‌ಗಳ ಒಳಗಿನ ವೈಟ್‌ಸ್ಪೇಸ್, ಲೈನ್ ಬ್ರೇಕ್‌ಗಳು ಮತ್ತು ಇಂಡೆಂಟೇಶನ್ ಮಿನಿಫಿಕೇಶನ್ ನಂತರ ನಿಖರವಾಗಿ ಒಂದೇ ರೀತಿ ರೆಂಡರ್ ಮಾಡುತ್ತವೆ.

ಬ್ರೌಸರ್-ಸೈಡ್ HTML ಮಿನಿಫಿಕೇಶನ್ ನಿಮ್ಮ ಬಿಲ್ಡ್ ಪೈಪ್‌ಲೈನ್ ಸರಳ ಮತ್ತು ಮಾರ್ಕಪ್ ಚಿಕ್ಕದಾಗಿ ಇಡುತ್ತದೆ. ಮೇಲೆ ಯಾವುದಾದರೂ HTML ಪೇಸ್ಟ್ ಮಾಡಿ, ಆಯ್ಕೆ ಟಾಗಲ್‌ಗಳನ್ನು ಟ್ವೀಕ್ ಮಾಡಿ, ಮತ್ತು ಮಿನಿಫೈ ಮಾಡಿದ ಔಟ್‌ಪುಟ್ ನಕಲಿಸಿ ಅಥವಾ ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ — ಅಪ್‌ಲೋಡ್ ಇಲ್ಲ, ಖಾತೆ ಇಲ್ಲ, ವೆಂಡರ್ ಲೈಬ್ರರಿ ಇಲ್ಲ.