CSS ਮਿਨੀਫਿਕੇਸ਼ਨ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀ ਹੈ
ਮਿਨੀਫਾਇਰ ਇੱਕ ਸਟੇਟ-ਅਵੇਅਰ ਟੋਕਨਾਈਜ਼ਰ ਨਾਲ ਤੁਹਾਡੇ ਸਟਾਈਲਸ਼ੀਟ ਨੂੰ ਪੜ੍ਹਦਾ ਹੈ ਜੋ ਸੁਰੱਖਿਅਤ ਖੇਤਰਾਂ (ਸਤਰ ਲਿਟਰਲਜ਼ ਅਤੇ url() ਮੁੱਲ) ਨੂੰ ਸੰਪਾਦਨਯੋਗ ਖਾਲੀ ਥਾਂ ਤੋਂ ਵੱਖ ਕਰਦਾ ਹੈ।
- ਸਤਰਾਂ ਅਤੇ URLs ਸੁਰੱਖਿਅਤ ਕਰੋ. ਕਿਸੇ ਹੋਰ ਪਰਿਵਰਤਨ ਤੋਂ ਪਹਿਲਾਂ, ਟੋਕਨਾਈਜ਼ਰ ਹਰ ਉੱਧਰਿਤ ਸਤਰ ("…" ਜਾਂ '…') ਅਤੇ ਹਰ url(…) ਆਰਗੂਮੈਂਟ ਦੀ ਪਛਾਣ ਕਰਦਾ ਹੈ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਸੁਰੱਖਿਅਤ ਰੱਖਦਾ ਹੈ। ਬਾਅਦ ਵਾਲੇ ਪਾਸ ਇਹਨਾਂ ਬਾਈਟਾਂ ਨੂੰ ਕਦੇ ਨਹੀਂ ਛੂਹਦੇ।
- ਟਿੱਪਣੀਆਂ ਹਟਾਓ.
/* … */ਬਲਾਕ ਟੌਗਲ ਚਾਲੂ ਹੋਣ ਤੇ ਹਟਾਏ ਜਾਂਦੇ ਹਨ। ਜੇ ਲਾਇਸੈਂਸ-ਟਿੱਪਣੀ ਟੌਗਲ ਵੀ ਚਾਲੂ ਹੈ,/*! … */ਬਲਾਕ ਬਚੇ ਰਹਿੰਦੇ ਹਨ ਤਾਂ ਕਿ MIT, Apache ਅਤੇ BSD ਲਾਇਸੈਂਸ ਹੈਡਰ ਆਉਟਪੁੱਟ ਵਿੱਚ ਰਹਿਣ। - ਖਾਲੀ ਥਾਂ ਸੰਕੁਚਿਤ ਕਰੋ. ਸਪੇਸ, ਟੈਬ ਅਤੇ ਨਿਊਲਾਈਨਾਂ ਦੀ ਹਰ ਲੜੀ ਇੱਕ ਸਿੰਗਲ ਸਪੇਸ ਵਿੱਚ ਸੰਕੁਚਿਤ ਹੋ ਜਾਂਦੀ ਹੈ, ਫਿਰ CSS ਢਾਂਚਾ ਅੱਖਰਾਂ
{,},;,:, ਅਤੇ,ਦੁਆਲੇ ਖਾਲੀ ਥਾਂ ਪੂਰੀ ਤਰ੍ਹਾਂ ਹਟਾਈ ਜਾਂਦੀ ਹੈ। - ਮੁੱਲ ਅਨੁਕੂਲਿਤ ਕਰੋ. ਵਿਕਲਪਿਕ ਪਾਸ hex ਰੰਗ ਕੋਡਾਂ ਨੂੰ ਛੋਟੇ ਅੱਖਰਾਂ ਵਿੱਚ ਬਦਲਦੇ ਹਨ, ਜੋੜੇ ਵਾਲੇ 6-ਅੰਕ hex ਚੈਨਲਾਂ ਨੂੰ 3-ਅੰਕ ਸ਼ਾਰਟਹੈਂਡ (
#aabbcc→#abc) ਵਿੱਚ ਸੰਕੁਚਿਤ ਕਰਦੇ ਹਨ, ਅਤੇ ਜ਼ੀਰੋ ਮੁੱਲਾਂ ਤੋਂ ਡਾਇਮੈਂਸ਼ਨ ਯੂਨਿਟ ਹਟਾਉਂਦੇ ਹਨ (0px→0)। ਜ਼ੀਰੋ-ਯੂਨਿਟ ਪਾਸtransform()ਕਾਲਾਂ ਦੇ ਅੰਦਰਲੇ ਮੁੱਲਾਂ ਨੂੰ ਛੱਡ ਦਿੰਦਾ ਹੈ ਜਿੱਥੇ ਯੂਨਿਟ ਮਹੱਤਵਪੂਰਨ ਹੁੰਦੇ ਹਨ। - ਬਾਈਟ ਬੱਚਤ ਦੱਸੋ. ਅਸਲ ਅਤੇ ਮਿਨੀਫਾਈ ਕੀਤੇ ਟੈਕਸਟ ਦੋਵੇਂ
new TextEncoder().encode(…).byteLengthਨਾਲ ਮਾਪੇ ਜਾਂਦੇ ਹਨ। ਮੈਟ੍ਰਿਕ ਪੱਟੀ ਅਸਲ ਆਕਾਰ, ਮਿਨੀਫਾਈ ਆਕਾਰ, ਬਚਾਏ ਬਾਈਟ ਅਤੇ ਪ੍ਰਤੀਸ਼ਤ ਬੱਚਤ ਦਿਖਾਉਂਦੀ ਹੈ।
CSS ਮਿਨੀਫਾਈ ਕਿਉਂ ਕਰੋ
- ਤੇਜ਼ ਰੈਂਡਰ-ਬਲੌਕਿੰਗ ਲੋਡ. ਬ੍ਰਾਊਜ਼ਰ CSS ਪਾਰਸ ਕੀਤੇ ਬਿਨਾਂ ਇੱਕ ਪਿਕਸਲ ਵੀ ਨਹੀਂ ਪੇਂਟ ਕਰਦਾ। 30 ਪ੍ਰਤੀਸ਼ਤ ਸਟਾਈਲਸ਼ੀਟ ਕਟੌਤੀ ਉਸ ਬਲਾਕ ਨੂੰ ਛੋਟਾ ਕਰਦੀ ਹੈ ਅਤੇ First Contentful Paint ਵਿੱਚ ਸੁਧਾਰ ਕਰਦੀ ਹੈ।
- ਘੱਟ CDN ਆਊਟਬਾਊਂਡ ਖਰਚੇ. CloudFront, Cloudflare ਅਤੇ Fastly ਸਾਰੇ ਪ੍ਰਤੀ ਗਿਗਾਬਾਈਟ ਆਊਟਬਾਊਂਡ ਚਾਰਜ ਕਰਦੇ ਹਨ। ਹਰ ਪੰਨੇ ਦੇ ਦ੍ਰਿਸ਼ ਤੇ ਭੇਜੇ ਜਾਣ ਵਾਲੇ ਸਟਾਈਲਸ਼ੀਟ ਤੋਂ 20 ਪ੍ਰਤੀਸ਼ਤ ਕੱਟਣਾ ਮਹੀਨਾਵਾਰ ਬਿੱਲ ਤੇ ਅਸਲ ਫ਼ਰਕ ਪਾਉਂਦਾ ਹੈ।
- ਛੋਟੇ ਏਮਬੈੱਡ ਅਤੇ ਈਮੇਲ CSS. ਟ੍ਰਾਂਜ਼ੈਕਸ਼ਨਲ ਈਮੇਲ ਟੈਂਪਲੇਟਸ ਆਪਣੀ CSS ਇਨਲਾਈਨ ਕਰਦੇ ਹਨ ਅਤੇ ਹਰ ਵਾਧੂ ਬਾਈਟ ਤੁਹਾਨੂੰ Gmail ਦੀ 102 KB ਕੱਟ ਸੀਮਾ ਦੇ ਨੇੜੇ ਲੈ ਜਾਂਦਾ ਹੈ। ਇਨਲਾਈਨਿੰਗ ਤੋਂ ਪਹਿਲਾਂ ਮਿਨੀਫਾਈ ਕਰਨਾ ਸੰਦੇਸ਼ ਨੂੰ ਸੀਮਾ ਦੇ ਅੰਦਰ ਰੱਖਦਾ ਹੈ।
- ਕੋਈ ਬਿਲਡ-ਟੂਲ ਨਿਰਭਰਤਾ ਨਹੀਂ. ਤੇਜ਼ ਇਕ-ਵਾਰੀ ਕੰਮ, ਬਿਲਡ ਪਾਈਪਲਾਈਨ ਤੋਂ ਬਿਨਾਂ ਪੁਰਾਣੇ ਰਿਪੋਜ਼, ਅਤੇ ਬੰਦ ਵਾਤਾਵਰਣਾਂ ਲਈ ਹਮੇਸ਼ਾ Node ਟੂਲਚੇਨ ਦੀ ਲੋੜ ਨਹੀਂ ਹੁੰਦੀ। PostCSS, cssnano ਜਾਂ ਕੁਝ ਵੀ ਇੰਸਟੌਲ ਕੀਤੇ ਬਿਨਾਂ ਇੱਥੇ ਪਾਸ ਚਲਾਓ।
ਆਮ ਵਰਤੋਂਆਂ
CSS ਮਿਨੀਫਿਕੇਸ਼ਨ ਲਗਭਗ ਹਰ ਫ੍ਰੰਟ-ਐਂਡ ਬਿਲਡ ਪਾਈਪਲਾਈਨ ਦੇ ਅੰਤ ਵਿੱਚ ਅਤੇ ਕਈ ਰਨਟਾਈਮ ਸੰਦਰਭਾਂ ਵਿੱਚ ਦਿਖਾਈ ਦਿੰਦੀ ਹੈ ਜਿੱਥੇ ਬਾਈਟ ਗਿਣਤੀ ਮਹੱਤਵਪੂਰਨ ਹੈ।
- ਉਤਪਾਦਨ ਬਿਲਡ ਪਾਈਪਲਾਈਨਾਂ: Webpack, Vite, Rollup ਅਤੇ Parcel ਸਾਰੇ ਆਪਣੇ ਉਤਪਾਦਨ ਮੋਡ ਡਿਫਾਲਟਸ ਵਿੱਚ CSS ਮਿਨੀਫਿਕੇਸ਼ਨ ਕਦਮ ਸ਼ਿਪ ਕਰਦੇ ਹਨ। ਕਮਿਟ ਤੋਂ ਪਹਿਲਾਂ ਇੱਥੇ ਪਾਸ ਚਲਾਉਣਾ ਤੁਹਾਨੂੰ ਪੂਰੀ ਬਿਲਡ ਚਲਾਏ ਬਿਨਾਂ ਆਉਟਪੁੱਟ ਪ੍ਰਮਾਣਿਤ ਕਰਨ ਦਿੰਦਾ ਹੈ।
- CSS
<style>ਟੈਗਾਂ ਵਿੱਚ ਏਮਬੈੱਡ ਕਰਨਾ: ਸਰਵਰ-ਰੈਂਡਰ ਕੀਤੇ ਫ੍ਰੇਮਵਰਕ ਜੋ ਕ੍ਰਿਟੀਕਲ CSS HTML ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਇਨਲਾਈਨ ਕਰਦੇ ਹਨ ਉਹਨਾਂ ਨੂੰ ਇਕੱਲੇ ਸਟਾਈਲਸ਼ੀਟਾਂ ਵਰਗੀ ਹੀ ਬਾਈਟ ਬੱਚਤ ਮਿਲਦੀ ਹੈ। - ਟ੍ਰਾਂਜ਼ੈਕਸ਼ਨਲ ਅਤੇ ਮਾਰਕੀਟਿੰਗ ਈਮੇਲ: ਈਮੇਲ HTML ਸਾਰੀ CSS ਇਨਲਾਈਨ ਕਰਦੀ ਹੈ, ਇਸ ਲਈ ਸਟਾਈਲਸ਼ੀਟ ਵਿੱਚ ਹਰ ਕਿਲੋਬਾਈਟ ਕੁੱਲ ਸੰਦੇਸ਼ ਆਕਾਰ ਵਿੱਚ ਜੋੜਦੀ ਹੈ।
ਕੰਮ ਕੀਤੀ ਉਦਾਹਰਣ
1 KB ਰੂਲਸੈੱਟ ਨੂੰ ਦੋ-ਸਪੇਸ ਇੰਡੈਂਟੇਸ਼ਨ, ਸਿਲੈਕਟਰਾਂ ਵਿਚਕਾਰ ਖਾਲੀ ਲਾਈਨਾਂ, ਉੱਪਰ ਲਾਇਸੈਂਸ ਟਿੱਪਣੀ ਬਲਾਕ, ਅਤੇ #FFFFFF ਵਰਗੇ ਵਰਬੋਜ਼ hex ਰੰਗ ਅਤੇ margin: 0px ਵਰਗੇ ਜ਼ੀਰੋ-ਪੈਡ ਮਾਰਜਿਨਾਂ ਸਮੇਤ ਪੇਸਟ ਕਰੋ। ਹਰ ਵਿਕਲਪ ਚਾਲੂ ਕਰਨ ਨਾਲ, ਆਉਟਪੁੱਟ ਲਗਭਗ 600 ਬਾਈਟ — 40 ਪ੍ਰਤੀਸ਼ਤ ਬੱਚਤ — ਤੱਕ ਸੰਕੁਚਿਤ ਹੋ ਜਾਂਦਾ ਹੈ।
ਕੀ ਮਿਨੀਫਿਕੇਸ਼ਨ ਮੇਰੇ CSS ਵਿਵਹਾਰ ਨੂੰ ਬਦਲਦੀ ਹੈ?
ਨਹੀਂ, ਡਿਫਾਲਟ ਟੌਗਲਾਂ ਤੇ। ਮਿਨੀਫਾਇਰ ਕੇਵਲ ਉਹ ਬਾਈਟ ਹਟਾਉਂਦਾ ਹੈ ਜੋ CSS ਪਾਰਸਰ ਵੈਸੇ ਵੀ ਰੱਦ ਕਰਦਾ ਹੈ — ਖਾਲੀ ਥਾਂ, ਟਿੱਪਣੀਆਂ, ਵਿਕਲਪਿਕ ਆਖਰੀ ਸੈਮੀਕੋਲਨ — ਅਤੇ transform() ਅੰਦਰ ਨਹੀਂ ਜਾਂਦਾ। ਹਰ ਸਿਲੈਕਟਰ, ਪ੍ਰੌਪਰਟੀ ਅਤੇ ਮੁੱਲ ਸੁਰੱਖਿਅਤ ਰਹਿੰਦਾ ਹੈ।
ਕੀ ਇਹ SCSS ਜਾਂ LESS ਨਾਲ ਕੰਮ ਕਰਦਾ ਹੈ?
ਕੇਵਲ ਉਹਨਾਂ ਨੂੰ ਸਾਦੀ CSS ਵਿੱਚ ਕੰਪਾਈਲ ਕਰਨ ਤੋਂ ਬਾਅਦ। SCSS ਅਤੇ LESS ਸੰਟੈਕਸ (ਵੇਰੀਏਬਲ, ਨੈਸਟਿੰਗ, ਮਿਕਸਿਨ, & ਪੇਰੈਂਟ ਸਿਲੈਕਟਰ) ਵੈਧ CSS ਨਹੀਂ ਹੈ। ਪਹਿਲਾਂ ਕੰਪਾਈਲ ਕਰੋ, ਫਿਰ ਕੰਪਾਈਲ ਕੀਤਾ ਆਉਟਪੁੱਟ ਇੱਥੇ ਪੇਸਟ ਕਰੋ।
ਮੇਰੀਆਂ ਲਾਇਸੈਂਸ ਟਿੱਪਣੀਆਂ ਕਿਉਂ ਹਟਾਈਆਂ ਗਈਆਂ?
"ਟਿੱਪਣੀਆਂ ਹਟਾਓ" ਡਿਫਾਲਟ ਤੌਰ ਤੇ ਚਾਲੂ ਹੈ ਅਤੇ ਹਰ /* … */ ਬਲਾਕ ਹਟਾਉਂਦਾ ਹੈ। /*! ਨਾਲ ਸ਼ੁਰੂ ਹੋਣ ਵਾਲੇ ਬਲਾਕ ਰੱਖਣ ਲਈ "/*! ਲਾਇਸੈਂਸ ਟਿੱਪਣੀਆਂ ਰੱਖੋ" ਸਮਰੱਥ ਕਰੋ।
ਮੈਂ ਕਿੰਨਾ ਬਚਾ ਸਕਦਾ ਹਾਂ?
ਹੱਥ-ਲਿਖਤ CSS ਆਮ ਤੌਰ ਤੇ 15 ਤੋਂ 35 ਪ੍ਰਤੀਸ਼ਤ ਘੱਟ ਜਾਂਦੀ ਹੈ। ਭਾਰੀ ਟਿੱਪਣੀਆਂ ਜਾਂ ਡੂੰਘੀ ਇੰਡੈਂਟੇਡ ਫਾਈਲਾਂ ਜਿਹਨਾਂ ਵਿੱਚ ਕਈ ਰੰਗ ਲਿਟਰਲ ਹੋਣ 40 ਪ੍ਰਤੀਸ਼ਤ ਤੱਕ ਪਹੁੰਚ ਸਕਦੀਆਂ ਹਨ। Sass ਜਾਂ CSS-in-JS ਤੋਂ ਕੰਪਾਈਲ ਕੀਤਾ ਆਉਟਪੁੱਟ ਅਕਸਰ ਪਹਿਲਾਂ ਤੋਂ ਥੋੜ੍ਹਾ ਮਿਨੀਫਾਈ ਹੁੰਦਾ ਹੈ ਅਤੇ ਘੱਟ ਬਚਾਉਂਦਾ ਹੈ।
ਬ੍ਰਾਊਜ਼ਰ ਟੈਬ ਵਿੱਚ CSS ਮਿਨੀਫਿਕੇਸ਼ਨ ਚਲਾਓ ਅਤੇ Node ਟੂਲਚੇਨ ਪੂਰੀ ਤਰ੍ਹਾਂ ਛੱਡੋ। ਉੱਪਰ ਸਟਾਈਲਸ਼ੀਟ ਪੇਸਟ ਕਰੋ, ਵਿਕਲਪ ਟੌਗਲ ਕਰੋ, ਫਿਰ ਆਉਟਪੁੱਟ ਕਾਪੀ ਕਰੋ ਜਾਂ .min.css ਵਜੋਂ ਡਾਊਨਲੋਡ ਕਰੋ। ਕੋਈ ਅੱਪਲੋਡ, ਕੋਈ ਖਾਤਾ, ਕੋਈ ਵਿਕਰੇਤਾ ਲਾਇਬ੍ਰੇਰੀ ਨਹੀਂ।