CSS ಮಿನಿಫಿಕೇಶನ್ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ
ಮಿನಿಫೈಯರ್ ಸ್ಟೇಟ್-ಅವೇರ್ ಟೋಕನೈಸರ್ ಬಳಸಿ ನಿಮ್ಮ ಸ್ಟೈಲ್ಶೀಟ್ ಅನ್ನು ತಿರುಗಿ ನೋಡುತ್ತದೆ, ರಕ್ಷಿತ ಪ್ರದೇಶಗಳನ್ನು (ಸ್ಟ್ರಿಂಗ್ ಲಿಟರಲ್ಗಳು ಮತ್ತು url() ಮೌಲ್ಯಗಳು) ಸಂಪಾದಿಸಬಹುದಾದ ವೈಟ್ಸ್ಪೇಸ್ನಿಂದ ಪ್ರತ್ಯೇಕಿಸುತ್ತದೆ.
- ಸ್ಟ್ರಿಂಗ್ಗಳು ಮತ್ತು URL ಗಳನ್ನು ರಕ್ಷಿಸಿ. ಬೇರೆ ಯಾವುದೇ ಪರಿವರ್ತನೆಗೆ ಮೊದಲು, ಟೋಕನೈಸರ್ ಪ್ರತಿ ಉದ್ಧರಣ ಚಿಹ್ನೆ ಹಾಕಿದ ಸ್ಟ್ರಿಂಗ್ ("…" ಅಥವಾ '…') ಮತ್ತು ಪ್ರತಿ url(…) ಆರ್ಗ್ಯುಮೆಂಟ್ ಗುರುತಿಸಿ ಅವುಗಳನ್ನು ಅಕ್ಷರಶಃ ಸ್ಟ್ಯಾಷ್ ಮಾಡುತ್ತದೆ. ನಂತರದ ಪಾಸ್ಗಳು ಈ ಬೈಟ್ಗಳನ್ನು ಎಂದಿಗೂ ಮುಟ್ಟುವುದಿಲ್ಲ.
- ಕಾಮೆಂಟ್ಗಳನ್ನು ತೆಗೆಯಿರಿ. ಟಾಗಲ್ ಆನ್ ಇರುವಾಗ
/* … */ಬ್ಲಾಕ್ಗಳನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ. ಲೈಸೆನ್ಸ್-ಕಾಮೆಂಟ್ ಟಾಗಲ್ ಆನ್ ಇದ್ದರೆ,/*! … */ಬ್ಲಾಕ್ಗಳು ಉಳಿಯುತ್ತವೆ. - ವೈಟ್ಸ್ಪೇಸ್ ಸಂಕ್ಷಿಪ್ತಗೊಳಿಸಿ. ಸ್ಪೇಸ್ಗಳು, ಟ್ಯಾಬ್ಗಳು ಮತ್ತು ನ್ಯೂಲೈನ್ಗಳ ಪ್ರತಿ ಸರಣಿ ಒಂದೇ ಸ್ಪೇಸ್ಗೆ ಸಂಕ್ಷಿಪ್ತವಾಗುತ್ತದೆ, ನಂತರ CSS ರಚನಾತ್ಮಕ ಅಕ್ಷರಗಳ ಸುತ್ತ ವೈಟ್ಸ್ಪೇಸ್
{,},;,:, ಮತ್ತು,ಸಂಪೂರ್ಣವಾಗಿ ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ. - ಮೌಲ್ಯಗಳನ್ನು ಆಪ್ಟಿಮೈಸ್ ಮಾಡಿ. ಐಚ್ಛಿಕ ಪಾಸ್ಗಳು ಹೆಕ್ಸ್ ಬಣ್ಣ ಕೋಡ್ಗಳನ್ನು ಲೋವರ್ಕೇಸ್ ಮಾಡುತ್ತವೆ, ಜೋಡಿ 6-ಅಂಕಿ ಹೆಕ್ಸ್ ಚಾನೆಲ್ಗಳನ್ನು 3-ಅಂಕಿ ಶಾರ್ಟ್ಹ್ಯಾಂಡ್ಗೆ ಸಂಕ್ಷಿಪ್ತಗೊಳಿಸುತ್ತವೆ (
#aabbcc→#abc), ಮತ್ತು ಝೀರೋ ಮೌಲ್ಯಗಳಿಂದ ಡೈಮೆನ್ಷನ್ ಯೂನಿಟ್ಗಳನ್ನು ತೆಗೆಯುತ್ತವೆ (0px→0). - ಬೈಟ್ ಉಳಿತಾಯ ವರದಿ ಮಾಡಿ. ಮೂಲ ಮತ್ತು ಮಿನಿಫೈ ಮಾಡಿದ ಟೆಕ್ಸ್ಟ್ ಎರಡನ್ನೂ
new TextEncoder().encode(…).byteLengthಬಳಸಿ ಅಳೆಯಲಾಗುತ್ತದೆ. ಮೆಟ್ರಿಕ್ ಸ್ಟ್ರಿಪ್ ಮೂಲ ಗಾತ್ರ, ಮಿನಿಫೈ ಮಾಡಿದ ಗಾತ್ರ, ಉಳಿಸಿದ ಬೈಟ್ಗಳು ಮತ್ತು ಶೇಕಡಾ ಉಳಿತಾಯ ತೋರಿಸುತ್ತದೆ.
CSS ಮಿನಿಫೈ ಏಕೆ ಮಾಡಬೇಕು
- ವೇಗವಾದ ರೆಂಡರ್-ಬ್ಲಾಕಿಂಗ್ ಲೋಡ್. CSS ಪಾರ್ಸ್ ಮಾಡುವ ಮೊದಲು ಬ್ರೌಸರ್ಗಳು ಒಂದೇ ಒಂದು ಪಿಕ್ಸೆಲ್ ಪೇಂಟ್ ಮಾಡುವುದಿಲ್ಲ. 30 ಪ್ರತಿಶತ ಸ್ಟೈಲ್ಶೀಟ್ ಕಡಿತ ಆ ಬ್ಲಾಕ್ ಕಡಿಮೆ ಮಾಡುತ್ತದೆ, First Contentful Paint ಹೆಚ್ಚಿಸುತ್ತದೆ ಮತ್ತು ನೇರವಾಗಿ Lighthouse ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಸ್ಕೋರ್ನಲ್ಲಿ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ.
- ಕಡಿಮೆ CDN ಎಗ್ರೆಸ್ ಬಿಲ್ಗಳು. CloudFront, Cloudflare, ಮತ್ತು Fastly ಪ್ರತಿ ಗಿಗಾಬೈಟ್ ಎಗ್ರೆಸ್ಗೆ ಶುಲ್ಕ ವಿಧಿಸುತ್ತವೆ. ಪ್ರತಿ ಪೇಜ್ ವ್ಯೂನಲ್ಲಿ ಶಿಪ್ ಆಗುವ ಸ್ಟೈಲ್ಶೀಟ್ನಿಂದ 20 ಪ್ರತಿಶತ ಕಡಿಮೆ ಮಾಡುವುದು ಮಾಸಿಕ ಟ್ರಾಫಿಕ್ ಕೆಲವು ಮಿಲಿಯನ್ ವ್ಯೂ ದಾಟಿದ ನಂತರ ನೈಜ ಇನ್ವಾಯ್ಸ್ ಲೈನ್ ಆಗುತ್ತದೆ.
- ಚಿಕ್ಕ ಎಂಬೆಡ್ಗಳು ಮತ್ತು ಇಮೇಲ್ CSS. ಟ್ರಾನ್ಸಾಕ್ಷನಲ್ ಇಮೇಲ್ ಟೆಂಪ್ಲೇಟ್ಗಳು Outlook ಮತ್ತು Gmail ರೆಂಡರಿಂಗ್ ತೊಂದರೆಗಳಿಂದ ಬದುಕಲು CSS ಇನ್ಲೈನ್ ಮಾಡುತ್ತವೆ, ಮತ್ತು ಪ್ರತಿ ಹೆಚ್ಚುವರಿ ಬೈಟ್ Gmail ನ 102 KB ಕ್ಲಿಪ್ ಥ್ರೆಶೋಲ್ಡ್ಗೆ ಹತ್ತಿರ ತರುತ್ತದೆ. ಇನ್ಲೈನ್ ಮಾಡುವ ಮೊದಲು ಮಿನಿಫೈ ಮಾಡುವುದು ಸಂದೇಶವನ್ನು ಮಿತಿಯ ಕೆಳಗೆ ಇಡುತ್ತದೆ.
- ಬಿಲ್ಡ್-ಟೂಲ್ ಅವಲಂಬನೆ ಇಲ್ಲ. ತ್ವರಿತ ಒಂದು-ಬಾರಿ ಕೆಲಸ, ಬಿಲ್ಡ್ ಪೈಪ್ಲೈನ್ ಇಲ್ಲದ ಲೆಗಸಿ ರೆಪೊಗಳು, ಮತ್ತು ಏರ್-ಗ್ಯಾಪ್ ಪರಿಸರಗಳಲ್ಲಿ ಯಾವಾಗಲೂ Node ಟೂಲ್ಚೇನ್ಗೆ ಜಾಗ ಇರುವುದಿಲ್ಲ. PostCSS, cssnano, ಅಥವಾ ಇನ್ನಾವುದನ್ನೂ ಇನ್ಸ್ಟಾಲ್ ಮಾಡದೇ ಇಲ್ಲಿ ಪ್ರಕ್ರಿಯೆ ಮಾಡಬಹುದು.
ಸಾಮಾನ್ಯ ಅನ್ವಯಗಳು
CSS ಮಿನಿಫಿಕೇಶನ್ ಬಹುತೇಕ ಪ್ರತಿ ಫ್ರಂಟ್-ಎಂಡ್ ಬಿಲ್ಡ್ ಪೈಪ್ಲೈನ್ನ ಕೊನೆಯಲ್ಲಿ ಮತ್ತು ಬೈಟ್ ಕೌಂಟ್ ಮುಖ್ಯವಾದ ಹಲವು ರನ್ಟೈಮ್ ಸನ್ನಿವೇಶಗಳಲ್ಲಿ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ.
- ಉತ್ಪಾದನಾ ಬಿಲ್ಡ್ ಪೈಪ್ಲೈನ್ಗಳು: Webpack, Vite, Rollup, ಮತ್ತು Parcel ಎಲ್ಲಾ ತಮ್ಮ ಉತ್ಪಾದನಾ ಮೋಡ್ ಡೀಫಾಲ್ಟ್ಗಳಲ್ಲಿ CSS ಮಿನಿಫಿಕೇಶನ್ ಹಂತ ಶಿಪ್ ಮಾಡುತ್ತವೆ. ಕಮಿಟ್ ಮೊದಲು ಇಲ್ಲಿ ಪ್ರಕ್ರಿಯೆ ಮಾಡಿ ಔಟ್ಪುಟ್ ಮಾನ್ಯಗೊಳಿಸಬಹುದು.
<style>ಟ್ಯಾಗ್ಗಳಲ್ಲಿ CSS ಎಂಬೆಡ್ ಮಾಡುವುದು: HTML ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿ ಕ್ರಿಟಿಕಲ್ CSS ಇನ್ಲೈನ್ ಮಾಡುವ ಸರ್ವರ್-ರೆಂಡರ್ ಮಾಡಿದ ಫ್ರೇಮ್ವರ್ಕ್ಗಳು ಒಂದೇ ಬೈಟ್ ಉಳಿತಾಯದ ಪ್ರಯೋಜನ ಪಡೆಯುತ್ತವೆ.- ಟ್ರಾನ್ಸಾಕ್ಷನಲ್ ಮತ್ತು ಮಾರ್ಕೆಟಿಂಗ್ ಇಮೇಲ್: ಇಮೇಲ್ HTML ಎಲ್ಲಾ CSS ಇನ್ಲೈನ್ ಮಾಡುತ್ತದೆ, ಆದ್ದರಿಂದ ಸ್ಟೈಲ್ಶೀಟ್ನಲ್ಲಿ ಪ್ರತಿ ಕಿಲೋಬೈಟ್ ಒಟ್ಟು ಸಂದೇಶ ಗಾತ್ರಕ್ಕೆ ಸೇರಿಕೊಳ್ಳುತ್ತದೆ. ಇನ್ಲೈನ್ ಮೊದಲು ಮಿನಿಫೈ ಮಾಡಿ ESP ಗಾತ್ರ ಮಿತಿಯ ಒಳಗೆ ಉಳಿಯಿರಿ.
ಕೆಲಸ ಮಾಡಿದ ಉದಾಹರಣೆ
ಎರಡು-ಸ್ಪೇಸ್ ಇಂಡೆಂಟೇಶನ್, ಸೆಲೆಕ್ಟರ್ಗಳ ನಡುವೆ ಖಾಲಿ ಸಾಲುಗಳು, ಮೇಲ್ಭಾಗದಲ್ಲಿ ಲೈಸೆನ್ಸ್ ಕಾಮೆಂಟ್ ಬ್ಲಾಕ್, ಮತ್ತು #FFFFFF ನಂತಹ ವರ್ಬೋಸ್ ಹೆಕ್ಸ್ ಬಣ್ಣಗಳು ಮತ್ತು margin: 0px ನಂತಹ ಝೀರೋ-ಪ್ಯಾಡ್ ಮಾರ್ಜಿನ್ಗಳೊಂದಿಗೆ 1 KB ರೂಲ್ಸೆಟ್ ಪೇಸ್ಟ್ ಮಾಡಿ. ಪ್ರತಿ ಆಯ್ಕೆ ಟಾಗಲ್ ಆನ್ ಮಾಡಿದ ನಂತರ, ಔಟ್ಪುಟ್ ಸುಮಾರು 600 ಬೈಟ್ಗಳಿಗೆ ಸಂಕ್ಷಿಪ್ತವಾಗುತ್ತದೆ — 40 ಪ್ರತಿಶತ ಉಳಿತಾಯ.
ಮಿನಿಫಿಕೇಶನ್ ನನ್ನ CSS ನಡವಳಿಕೆ ಬದಲಾಯಿಸುತ್ತದೆಯೇ?
ಇಲ್ಲ, ಡೀಫಾಲ್ಟ್ ಟಾಗಲ್ಗಳಲ್ಲಿ. ಮಿನಿಫೈಯರ್ CSS ಪಾರ್ಸರ್ ಹೇಗೂ ತಿರಸ್ಕರಿಸುವ ಬೈಟ್ಗಳನ್ನು ಮಾತ್ರ ತೆಗೆದುಹಾಕುತ್ತದೆ — ವೈಟ್ಸ್ಪೇಸ್, ಕಾಮೆಂಟ್ಗಳು, ಐಚ್ಛಿಕ ಕೊನೆಯ ಸೆಮಿಕೋಲನ್. ಪ್ರತಿ ಸೆಲೆಕ್ಟರ್, ಪ್ರಾಪರ್ಟಿ ಮತ್ತು ಮೌಲ್ಯ ಸಂರಕ್ಷಿಸಲ್ಪಡುತ್ತದೆ.
ಇದು SCSS ಅಥವಾ LESS ನೊಂದಿಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆಯೇ?
ಅವುಗಳನ್ನು ಸಾದಾ CSS ಗೆ ಕಂಪೈಲ್ ಮಾಡಿದ ನಂತರ ಮಾತ್ರ. SCSS ಮತ್ತು LESS ಸಿಂಟ್ಯಾಕ್ಸ್ (ವೇರಿಯೇಬಲ್ಗಳು, ನೆಸ್ಟಿಂಗ್, ಮಿಕ್ಸಿನ್ಗಳು, & ಪ್ಯಾರೆಂಟ್ ಸೆಲೆಕ್ಟರ್ಗಳು) ಮಾನ್ಯ CSS ಅಲ್ಲ. ಮೊದಲು ನಿಮ್ಮ ಪ್ರಿಪ್ರೊಸೆಸರ್ ಸೋರ್ಸ್ ಕಂಪೈಲ್ ಮಾಡಿ, ನಂತರ ಕಂಪೈಲ್ ಮಾಡಿದ ಔಟ್ಪುಟ್ ಇಲ್ಲಿ ಪೇಸ್ಟ್ ಮಾಡಿ.
ನನ್ನ ಲೈಸೆನ್ಸ್ ಕಾಮೆಂಟ್ಗಳು ಏಕೆ ತೆಗೆಯಲ್ಪಡುತ್ತವೆ?
"ಕಾಮೆಂಟ್ಗಳನ್ನು ತೆಗೆಯಿರಿ" ಡೀಫಾಲ್ಟ್ನಲ್ಲಿ ಆನ್ ಇದ್ದು ಪ್ರತಿ /* … */ ಬ್ಲಾಕ್ ತೆರವುಗೊಳಿಸುತ್ತದೆ. /*! ನಿಂದ ಶುರುವಾಗುವ ಬ್ಲಾಕ್ಗಳನ್ನು ಉಳಿಸಲು "/*! ಲೈಸೆನ್ಸ್ ಕಾಮೆಂಟ್ಗಳನ್ನು ಉಳಿಸಿ" ಸಕ್ರಿಯಗೊಳಿಸಿ.
ನಾನು ಎಷ್ಟು ಉಳಿಸಬಹುದು?
ಕೈಯಿಂದ ಬರೆದ CSS ಸಾಮಾನ್ಯವಾಗಿ 15 ರಿಂದ 35 ಪ್ರತಿಶತ ಇಳಿಯುತ್ತದೆ. ಹೆಚ್ಚು ಕಾಮೆಂಟ್ ಅಥವಾ ಆಳವಾಗಿ ಇಂಡೆಂಟ್ ಮಾಡಿದ ಫೈಲ್ಗಳು ಹಲವು ಬಣ್ಣ ಲಿಟರಲ್ಗಳೊಂದಿಗೆ 40 ಪ್ರತಿಶತ ತಲುಪಬಹುದು. Sass ಅಥವಾ CSS-in-JS ನಿಂದ ಕಂಪೈಲ್ ಮಾಡಿದ ಔಟ್ಪುಟ್ ಈಗಾಗಲೇ ಭಾಗಶಃ ಮಿನಿಫೈ ಆಗಿರುತ್ತದೆ ಮತ್ತು ಕಡಿಮೆ — ಸಾಮಾನ್ಯವಾಗಿ 5 ರಿಂದ 15 ಪ್ರತಿಶತ — ಉಳಿಸುತ್ತದೆ.
ಬ್ರೌಸರ್ ಟ್ಯಾಬ್ನಲ್ಲಿ CSS ಮಿನಿಫಿಕೇಶನ್ ಮಾಡಿ Node ಟೂಲ್ಚೇನ್ ಸಂಪೂರ್ಣ ತಪ್ಪಿಸಿ. ಮೇಲೆ ಸ್ಟೈಲ್ಶೀಟ್ ಪೇಸ್ಟ್ ಮಾಡಿ, ಆಯ್ಕೆಗಳನ್ನು ಟಾಗಲ್ ಮಾಡಿ, ನಂತರ ಔಟ್ಪುಟ್ ನಕಲಿಸಿ ಅಥವಾ .min.css ಆಗಿ ಡೌನ್ಲೋಡ್ ಮಾಡಿ. ಅಪ್ಲೋಡ್ ಇಲ್ಲ, ಖಾತೆ ಇಲ್ಲ, ವೆಂಡರ್ ಲೈಬ್ರರಿ ಇಲ್ಲ.