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 ਕਟੌਤੀ ਬਿੱਲ ਤੇ ਅਸਲ ਬੱਚਤ ਵਿੱਚ ਜੋੜਦੀ ਹੈ।
• ਸਾਫ਼ ਪੁੱਲ-ਰਿਕੁਏਸਟ diff. ਰਿਪੋਜ਼ ਵਿੱਚ ਕਮਿਟ ਕੀਤਾ ਪ੍ਰੀ-ਬਿਲਟ ਸਟੈਟਿਕ HTML ਸ਼ੋਰੀਲਾ ਹੋ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਹਰ ਟੈਂਪਲੇਟ ਬਦਲਾਅ ਇੰਡੈਂਟੇਸ਼ਨ ਰੀਫਲੋ ਕਰਦਾ ਹੈ। dist ਫੋਲਡਰ ਵਿੱਚ ਮਿਨੀਫਾਈ HTML ਤੰਗ PR diff ਤਿਆਰ ਕਰਦਾ ਹੈ।
• ਛੋਟੇ ਏਮਬੈੱਡ ਅਤੇ ਸਨਿੱਪਟ. ਈਮੇਲ ਟੈਂਪਲੇਟ, ਤੀਜੀ-ਧਿਰ ਵਿਜੇਟ ਸਨਿੱਪਟ, ਅਤੇ JSON ਜਾਂ YAML ਕਨਫਿਗਾਂ ਅੰਦਰ ਸਟੋਰ HTML ਸਾਰੇ ਇੱਕੋ ਬਾਈਟ ਕਟੌਤੀ ਤੋਂ ਲਾਭ ਉਠਾਉਂਦੇ ਹਨ। ਮਿਨੀਫਾਈ ਏਮਬੈੱਡ ਟ੍ਰਾਂਜ਼ੈਕਸ਼ਨਲ ਈਮੇਲਾਂ ਨੂੰ ESP ਆਕਾਰ ਸੀਮਾਵਾਂ ਦੇ ਅੰਦਰ ਰੱਖਦੇ ਹਨ।

ਆਮ ਵਰਤੋਂਆਂ

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> ਟੈਗਾਂ ਦੀ ਸਮੱਗਰੀ ਨੂੰ ਜਿਉਂ-ਦੀ-ਤਿਉਂ ਰੱਖਦਾ ਹੈ, ਉਹ ਟੌਗਲ ਚਾਲੂ ਹੋਣ ਤੇ IE ਸ਼ਰਤੀ ਟਿੱਪਣੀਆਂ ਨੂੰ ਬਰਕਰਾਰ ਛੱਡ ਦਿੰਦਾ ਹੈ, ਅਤੇ ਕੇਵਲ ਉਹ ਖਾਲੀ ਥਾਂ ਸੰਕੁਚਿਤ ਕਰਦਾ ਹੈ ਜਿਸਨੂੰ HTML5 ਪਾਰਸਰ ਪਹਿਲਾਂ ਤੋਂ ਹੀ ਮਹੱਤਵਹੀਣ ਵਜੋਂ ਸ਼੍ਰੇਣੀਬੱਧ ਕਰਦਾ ਹੈ। ਰੈਂਡਰ ਕੀਤਾ DOM ਟ੍ਰੀ ਸਰੋਤ ਨਾਲ ਬਾਈਟ-ਬਰਾਬਰ ਹੁੰਦਾ ਹੈ। ਹਮਲਾਵਰ ਟੌਗਲ (ਖਾਲੀ-ਐਟ੍ਰੀਬਿਊਟ-ਹਟਾਓ) ਉਹਨਾਂ ਸਨਿੱਪਟਾਂ ਲਈ ਵਿਹਾਰ ਬਦਲ ਸਕਦੇ ਹਨ ਜੋ ਜਾਣਬੁੱਝ ਕੇ value="" ਜਾਂ alt="" ਵਰਤਦੇ ਹਨ, ਇਸ ਲਈ ਜੇ ਤੁਸੀਂ ਉਹਨਾਂ ਨੂੰ ਚਾਲੂ ਕਰਦੇ ਹੋ ਤਾਂ ਆਉਟਪੁੱਟ ਦੀ ਸਮੀਖਿਆ ਕਰੋ।

ਕੀ ਇਹ ਇਨਲਾਈਨ CSS ਅਤੇ JS ਮਿਨੀਫਾਈ ਕਰਦਾ ਹੈ?

ਇਸ ਸਾਧਨ ਵਿੱਚ ਨਹੀਂ। ਇਨਲਾਈਨ <style> ਅਤੇ <script> ਬਾਡੀਜ਼ ਜਿਉਂ-ਦੀ-ਤਿਉਂ ਰੱਖੀਆਂ ਜਾਂਦੀਆਂ ਹਨ। CSS-ਵਿਸ਼ੇਸ਼ ਮਿਨੀਫਿਕੇਸ਼ਨ ਲਈ CSS ਮਿਨੀਫਾਇਰ ਵਰਤੋ; JS ਲਈ JS ਮਿਨੀਫਾਇਰ ਵਰਤੋ। HTML ਮਿਨੀਫਾਇਰ ਮਾਰਕਅੱਪ ਤੇ ਕੇਂਦ੍ਰਿਤ ਹੈ।

ਮੈਂ ਕਿੰਨਾ ਬਚਾ ਸਕਦਾ ਹਾਂ?

ਹੱਥ-ਲਿਖਤ HTML ਤੇ ਆਮ ਬੱਚਤ 10 ਤੋਂ 30 ਪ੍ਰਤੀਸ਼ਤ ਤੱਕ ਹੁੰਦੀ ਹੈ, ਇਸ ਗੱਲ ਤੇ ਨਿਰਭਰ ਕਰਦਿਆਂ ਕਿ ਸਰੋਤ ਕਿੰਨੀ ਇੰਡੈਂਟੇਸ਼ਨ, ਖਾਲੀ ਲਾਈਨਾਂ, ਅਤੇ ਵਿਸਤ੍ਰਿਤ ਐਟ੍ਰੀਬਿਊਟ ਰੂਪ ਵਰਤਦਾ ਹੈ। Next.js ਵਰਗੇ ਫ੍ਰੇਮਵਰਕਾਂ ਤੋਂ ਪ੍ਰੀ-ਬਿਲਟ ਸਟੈਟਿਕ HTML ਅਕਸਰ 15 ਤੋਂ 25 ਪ੍ਰਤੀਸ਼ਤ ਬਚਾਉਂਦਾ ਹੈ ਕਿਉਂਕਿ ਫ੍ਰੇਮਵਰਕ ਪਹਿਲਾਂ ਹੀ ਕੁਝ ਅਨੁਕੂਲਨ ਕਰ ਦਿੰਦਾ ਹੈ ਪਰ ਮਨੁੱਖ-ਪੜ੍ਹਨਯੋਗ ਖਾਲੀ ਥਾਂ ਨੂੰ ਆਪਣੀ ਥਾਂ ਛੱਡ ਦਿੰਦਾ ਹੈ। ਭਾਰੀ ਟਿੱਪਣੀਆਂ ਵਾਲੇ ਟੈਂਪਲੇਟ ਅਤੇ ਡੂੰਘੀ ਨੈਸਟਿੰਗ ਵਾਲਾ ਈਮੇਲ-ਸ਼ੈਲੀ HTML 40 ਪ੍ਰਤੀਸ਼ਤ ਜਾਂ ਵੱਧ ਤੱਕ ਪਹੁੰਚ ਸਕਦਾ ਹੈ।

ਕੀ pre ਸਮੱਗਰੀ ਸੁਰੱਖਿਅਤ ਹੈ?

ਹਾਂ। ਮਿਨੀਫਾਇਰ ਸਪੱਸ਼ਟ ਤੌਰ ਤੇ <pre>, <textarea>, <script>, ਅਤੇ <style> ਬਲਾਕਾਂ ਨੂੰ ਜਿਉਂ-ਦੀ-ਤਿਉਂ ਰੱਖਣ ਵਾਲੇ ਖੇਤਰਾਂ ਵਜੋਂ ਟੋਕਨਾਈਜ਼ ਕਰਦਾ ਹੈ ਅਤੇ ਉਹਨਾਂ ਦੀ ਸਮੱਗਰੀ ਆਉਟਪੁੱਟ ਵਿੱਚ ਬਾਈਟ-ਦਰ-ਬਾਈਟ ਕਾਪੀ ਕਰਦਾ ਹੈ। ਉਹਨਾਂ ਟੈਗਾਂ ਅੰਦਰ ਖਾਲੀ ਥਾਂ, ਲਾਈਨ ਬ੍ਰੇਕ ਅਤੇ ਇੰਡੈਂਟੇਸ਼ਨ ਅਛੂਤੇ ਬਚਦੇ ਹਨ।

ਬ੍ਰਾਊਜ਼ਰ-ਸਾਈਡ HTML ਮਿਨੀਫਿਕੇਸ਼ਨ ਤੁਹਾਡੀ ਬਿਲਡ ਪਾਈਪਲਾਈਨ ਸਰਲ ਅਤੇ ਮਾਰਕਅੱਪ ਛੋਟਾ ਰੱਖਦੀ ਹੈ। ਉੱਪਰ ਕੋਈ ਵੀ HTML ਪੇਸਟ ਕਰੋ, ਵਿਕਲਪ ਟੌਗਲ ਠੀਕ ਕਰੋ, ਅਤੇ ਮਿਨੀਫਾਈ ਕੀਤਾ ਆਉਟਪੁੱਟ ਕਾਪੀ ਜਾਂ ਡਾਊਨਲੋਡ ਕਰੋ — ਕੋਈ ਅੱਪਲੋਡ, ਕੋਈ ਖਾਤਾ, ਕੋਈ ਵਿਕਰੇਤਾ ਲਾਇਬ੍ਰੇਰੀ ਨਹੀਂ।