ಈ ಉಪಕರಣದ ಬಗ್ಗೆ
CSS ಮಿನಿಫಿಕೇಶನ್ ಬ್ರೌಸರ್ಗಳಿಗೆ ಸೇವೆ ಸಲ್ಲಿಸುವ ಮೊದಲು ಅದರ ಗಾತ್ರವನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಸ್ಟೈಲ್ಶೀಟ್ನಿಂದ ವೈಟ್ಸ್ಪೇಸ್, ಕಾಮೆಂಟ್ಗಳು ಮತ್ತು ಅನಗತ್ಯ ಅಕ್ಷರಗಳನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ. ನಿಜವಾದ ನಿಯಮಗಳು ಬದಲಾಗದೆ ಇರುತ್ತವೆ: ಚಿಕ್ಕದಾದ ಸ್ಟೈಲ್ಶೀಟ್ ಪುಟಗಳನ್ನು ಅನ್ಮಿನಿಫೈಡ್ ಮೂಲಕ್ಕೆ ಒಂದೇ ರೀತಿ ನೀಡುತ್ತದೆ. ಹೊಸ ರೇಖೆಗಳು, ಅನಗತ್ಯ ಸೆಮಿಕೋಲನ್ಗಳು, ಕಾಮೆಂಟ್ಗಳು, ಹೆಕ್ಸ್-ಕಲರ್ ಶಾರ್ಟ್ಹ್ಯಾಂಡ್ ಅವಕಾಶಗಳು ಮತ್ತು ಶೂನ್ಯ-ಯೂನಿಟ್ ಶಾರ್ಟ್ಕಟ್ಗಳನ್ನು ತೆಗೆದುಹಾಕುವುದರಿಂದ ಉಳಿತಾಯವು ಬರುತ್ತದೆ (0px ಅನ್ನು 0 ನೊಂದಿಗೆ ಬದಲಾಯಿಸುವುದು).
ಡಜನ್ಗಟ್ಟಲೆ ಶೈಲಿಯ ನಿಯಮಗಳನ್ನು ಹೊಂದಿರುವ ಆಧುನಿಕ ವೆಬ್ಸೈಟ್ಗಳಲ್ಲಿ, ವಿಶಿಷ್ಟವಾದ ಕಡಿತವು 20-40% ಮತ್ತು ಅನಿಯಂತ್ರಿತ ಮೂಲವಾಗಿದೆ. ಸರ್ವರ್ನಲ್ಲಿ ಜಿಜಿಪ್ ಕಂಪ್ರೆಷನ್ನೊಂದಿಗೆ ಸಂಯೋಜಿತವಾಗಿ, ಕನಿಷ್ಠ ಉಳಿತಾಯವು ಕುಗ್ಗುತ್ತದೆ - ಜಿಜಿಪ್ ಈಗಾಗಲೇ ಪುನರಾವರ್ತಿತ ಪಠ್ಯವನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಸಂಕುಚಿತಗೊಳಿಸುತ್ತದೆ - ಆದರೆ ಸಂಯೋಜನೆಯು ಇನ್ನೂ ಸಂಕೋಚನವನ್ನು ಮಾತ್ರ ಸೋಲಿಸುತ್ತದೆ, ವಿಶೇಷವಾಗಿ ಸ್ಟೈಲ್ಶೀಟ್ಗಳನ್ನು ಸಂಗ್ರಹಿಸಿದಾಗ ಮತ್ತು ಅನೇಕ ಸಂದರ್ಶಕರಿಗೆ ಸೇವೆ ಸಲ್ಲಿಸಿದಾಗ.
ಈ ಮಿನಿಫೈಯರ್ CSS ಅನ್ನು ಒಂದೇ ಪಾಸ್ನಲ್ಲಿ ಪ್ರಕ್ರಿಯೆಗೊಳಿಸುತ್ತದೆ, url() ಮೌಲ್ಯಗಳ ಹೊರಗಿನ ಕಾಮೆಂಟ್ಗಳನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ, ವೈಟ್ಸ್ಪೇಸ್ ಅನ್ನು ಕುಗ್ಗಿಸುತ್ತದೆ, ಕಟ್ಟುಪಟ್ಟಿಗಳನ್ನು ಮುಚ್ಚುವ ಮೊದಲು ಅನಗತ್ಯವಾದ ಅರ್ಧವಿರಾಮ ಚಿಹ್ನೆಗಳನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ, ಶೂನ್ಯ-ಘಟಕ ಶಾರ್ಟ್ಹ್ಯಾಂಡ್ ಅನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ ಮತ್ತು ಸಾಧ್ಯವಿರುವಲ್ಲಿ ಆರು-ಅಂಕಿಯ ಹೆಕ್ಸ್ ಬಣ್ಣಗಳನ್ನು ಮೂರು-ಅಂಕಿಯ ರೂಪಕ್ಕೆ ಪರಿವರ್ತಿಸುತ್ತದೆ (#ffffff → #fff). ಯಾವುದೇ ಬ್ರೌಸರ್ ಸರಿಯಾಗಿ ಪಾರ್ಸ್ ಮಾಡುವ ಔಟ್ಪುಟ್ ಮಾನ್ಯ CSS ಆಗಿ ಉಳಿಯುತ್ತದೆ.
ಸಿಎಸ್ಎಸ್ ಅನ್ನು ಏಕೆ ಕಡಿಮೆಗೊಳಿಸಬೇಕು
ಸಣ್ಣ CSS ಫೈಲ್ಗಳು ವೇಗವಾಗಿ ಲೋಡ್ ಆಗುತ್ತವೆ ಮತ್ತು ರೆಂಡರ್-ಬ್ಲಾಕ್ ಮಾಡುವ ಸಮಯ ಡ್ರಾಪ್ಗಳು, ಇವೆರಡೂ ಮೊದಲ ಕಂಟೆಂಟ್ಫುಲ್ ಪೇಂಟ್ ಮತ್ತು ದೊಡ್ಡ ಕಂಟೆಂಟ್ಫುಲ್ ಪೇಂಟ್ ಸ್ಕೋರ್ಗಳನ್ನು ಸುಧಾರಿಸುತ್ತದೆ. ಕೋರ್ ವೆಬ್ ವೈಟಲ್ಗಳು ಹುಡುಕಾಟ ಶ್ರೇಯಾಂಕದ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುವ ಸೈಟ್ಗಳಿಗೆ, ಪ್ರತಿ ಕಿಲೋಬೈಟ್ ರೆಂಡರ್-ಬ್ಲಾಕಿಂಗ್ CSS ಶೇವ್ ಮಾಡಿದ ಪ್ರಯತ್ನಕ್ಕೆ ಯೋಗ್ಯವಾಗಿದೆ.
ಬ್ಯಾಂಡ್ವಿಡ್ತ್ ವೆಚ್ಚಗಳು ಸಹ ಪ್ರಮಾಣದಲ್ಲಿ ಮುಖ್ಯವಾಗುತ್ತವೆ. ಲಕ್ಷಾಂತರ ಪುಟ ವೀಕ್ಷಣೆಗಳನ್ನು ಒದಗಿಸುವ ಸೈಟ್ಗಳು ಅವುಗಳ ಸ್ಟೈಲ್ಶೀಟ್ಗಳು 30% ಚಿಕ್ಕದಾಗಿದ್ದರೆ ಅಳೆಯಬಹುದಾದ ಮೊತ್ತವನ್ನು ಉಳಿಸುತ್ತವೆ. CDN ಬಿಲ್ಗಳು, ಮೊಬೈಲ್ ಡೇಟಾ ಬಳಕೆ ಮತ್ತು ಶಕ್ತಿಯ ಬಳಕೆ ಎಲ್ಲವೂ ಸ್ವಲ್ಪಮಟ್ಟಿಗೆ ಪ್ರಯೋಜನ ಪಡೆಯುತ್ತವೆ. ಮಿನಿಫಿಕೇಶನ್ ಮೂಲಭೂತವಾಗಿ ಉಚಿತವಾಗಿದೆ - ಯಾವುದೇ ನಿರ್ವಹಣಾ ವೆಚ್ಚವಿಲ್ಲದೆ ಒಂದು-ಬಾರಿ ನಿರ್ಮಾಣ ಹಂತ.
ತಾಂತ್ರಿಕ ವಿವರಗಳು
CSS ಮಿನಿಫಿಕೇಶನ್ ಹೆಚ್ಚಾಗಿ ಸಂಪ್ರದಾಯವಾದಿ ವೈಟ್ಸ್ಪೇಸ್ ತೆಗೆಯುವಿಕೆಯಾಗಿದೆ. ಸೆಲೆಕ್ಟರ್ಗಳು, ಘೋಷಣೆಗಳು ಮತ್ತು ಮೌಲ್ಯಗಳ ಒಳಗೆ ವೈಟ್ಸ್ಪೇಸ್ ಮಹತ್ವದ್ದಾಗಿರುವಲ್ಲಿ ಸಂರಕ್ಷಿಸಲಾಗಿದೆ; ಹೊರಗಿನ ಜಾಗವು ಕುಸಿದಿದೆ. ಕಾಮೆಂಟ್ಗಳು /* ನೊಂದಿಗೆ ಪ್ರಾರಂಭವಾಗದ ಹೊರತು ಅವುಗಳನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ! (ಪರವಾನಗಿ ಸಂರಕ್ಷಣೆಯ ಕಾಮೆಂಟ್ಗಳು).
ಸಾಮಾನ್ಯ ಶಾರ್ಟ್ಕಟ್ಗಳು: 0px, 0em, ಮತ್ತು ಇದೇ ರೀತಿಯ ಶೂನ್ಯ-ಘಟಕ ಮೌಲ್ಯಗಳು 0 ಆಗುತ್ತವೆ; ಜೋಡಿ ಅಂಕಿಗಳೊಂದಿಗೆ ಆರು-ಅಂಕಿಯ ಹೆಕ್ಸ್ ಬಣ್ಣಗಳು (#ffffff, #336699) ಮೂರು-ಅಂಕಿಯ (#fff, #369); } ಮೊದಲು ಕೊನೆಯ ಅರ್ಧವಿರಾಮ ಚಿಹ್ನೆಯನ್ನು ತೆಗೆದುಹಾಕಲಾಗಿದೆ. ಬಣ್ಣ ಹೆಸರುಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಹೆಕ್ಸ್ಗೆ ಪರಿವರ್ತಿಸಲಾಗುವುದಿಲ್ಲ ಏಕೆಂದರೆ ಹೆಕ್ಸ್ ಕೆಲವೊಮ್ಮೆ ಉದ್ದವಾಗಿರುತ್ತದೆ (ಕೆಂಪು ಉದ್ದ #f00 ಗಿಂತ ಚಿಕ್ಕದಾಗಿದೆ; #ff0000 ಕೆಂಪುಗಿಂತ ಉದ್ದವಾಗಿದೆ).
ಇನ್ಪುಟ್ ಅನ್ನು ಸ್ವೀಕರಿಸುವ ಯಾವುದೇ CSS ವ್ಯಾಲಿಡೇಟರ್ ಅನ್ನು ಔಟ್ಪುಟ್ ರವಾನಿಸಬೇಕು. ಬ್ರೌಸರ್ ಬೆಂಬಲವು ಬದಲಾಗುವುದಿಲ್ಲ - ಮಿನಿಫಿಕೇಶನ್ ನಿಯಮಗಳನ್ನು ಸ್ವತಃ ಮಾರ್ಪಡಿಸುವುದಿಲ್ಲ, ಅವುಗಳ ಪಠ್ಯ ಪ್ರಾತಿನಿಧ್ಯವನ್ನು ಮಾತ್ರ.
ಪದೇ ಪದೇ ಕೇಳಲಾಗುವ ಪ್ರಶ್ನೆಗಳು
- CSS ಮಿನಿಫಿಕೇಶನ್ ಏನು ತೆಗೆದುಹಾಕುತ್ತದೆ?
- ವೈಟ್ಸ್ಪೇಸ್ (ಸ್ಪೇಸ್ಗಳು, ಟ್ಯಾಬ್ಗಳು, ಹೊಸ ಲೈನ್ಗಳು), ಕಾಮೆಂಟ್ಗಳು (/* ... */), ಅನಗತ್ಯ ಸೆಮಿಕೋಲನ್ಗಳು, ಅನಗತ್ಯ ಸೊನ್ನೆಗಳು (0.5 → .5), ಶಾರ್ಟ್ಹ್ಯಾಂಡ್ ಆಪ್ಟಿಮೈಸೇಶನ್ಗಳು (#ffffff → #fff), ಮತ್ತು ಅನಗತ್ಯ ಘಟಕಗಳು (0px → 0).
- ಉತ್ಪಾದನೆಯಲ್ಲಿ ಬಳಸಲು ಮಿನಿಫೈಡ್ CSS ಸುರಕ್ಷಿತವೇ?
- ಹೌದು. Minification ಎಲ್ಲಾ CSS ನಿಯಮಗಳು, ಆಯ್ಕೆದಾರರು ಮತ್ತು ಆಸ್ತಿ ಮೌಲ್ಯಗಳನ್ನು ಸಂರಕ್ಷಿಸುತ್ತದೆ. ಔಟ್ಪುಟ್ ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಒಂದೇ ಆಗಿರುತ್ತದೆ - ಬ್ರೌಸರ್ಗಳು ಅದನ್ನು ನಿಖರವಾಗಿ ಅದೇ ರೀತಿಯಲ್ಲಿ ಅರ್ಥೈಸುತ್ತವೆ. ಇದು ಎಲ್ಲಾ ಉತ್ಪಾದನಾ ವೆಬ್ಸೈಟ್ಗಳಿಗೆ ಪ್ರಮಾಣಿತ ಅಭ್ಯಾಸವಾಗಿದೆ.
- ನಾನು ಎಷ್ಟು ಗಾತ್ರದ ಕಡಿತವನ್ನು ನಿರೀಕ್ಷಿಸಬೇಕು?
- ಉತ್ತಮವಾಗಿ ಬರೆಯಲಾದ CSS ಗಾಗಿ ಸಾಮಾನ್ಯವಾಗಿ 20-50%. ವರ್ಬೋಸ್ ಫಾರ್ಮ್ಯಾಟಿಂಗ್ನೊಂದಿಗೆ ಹೆಚ್ಚು ಕಾಮೆಂಟ್ ಮಾಡಿದ ಕೋಡ್ ದೊಡ್ಡ ಕಡಿತಗಳನ್ನು ನೋಡುತ್ತದೆ. ಈಗಾಗಲೇ-ಕಾಂಪ್ಯಾಕ್ಟ್ CSS ಕೇವಲ 10-15% ಕುಗ್ಗಬಹುದು.
- ನಾನು gzip ಅನ್ನು ಬಳಸುತ್ತಿದ್ದರೆ ನಾನು CSS ಅನ್ನು ಕಡಿಮೆ ಮಾಡಬೇಕೇ?
- ಹೌದು, ಎರಡೂ. Gzip ಪುನರಾವರ್ತಿತ ಮಾದರಿಗಳನ್ನು ಸಂಕುಚಿತಗೊಳಿಸುತ್ತದೆ, ಆದರೆ ಮಿನಿಫಿಕೇಶನ್ ಅನಗತ್ಯ ಅಕ್ಷರಗಳನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ. ಒಟ್ಟಿಗೆ ಅವರು ಏಕಾಂಗಿಯಾಗಿರುವುದಕ್ಕಿಂತ ಉತ್ತಮ ಸಂಕೋಚನವನ್ನು ಒದಗಿಸುತ್ತಾರೆ. Minified + gzipped CSS ಸಾಮಾನ್ಯವಾಗಿ ಮೂಲಕ್ಕಿಂತ 85-95% ಚಿಕ್ಕದಾಗಿದೆ.
- ನಾನು ಯಾವಾಗಲೂ ಕಡಿಮೆ ಮಾಡಬೇಕೇ?
- ಉತ್ಪಾದನೆಗೆ ಹೌದು. ಡೆವಲಪ್ಮೆಂಟ್ ಸೋರ್ಸ್ ಫೈಲ್ಗಳಿಗೆ, ಇಲ್ಲ - ನಿರ್ವಹಣೆಗಾಗಿ ಓದಬಹುದಾದ CSS ಅತ್ಯಗತ್ಯ. ಸಂಪಾದನೆಯ ಸಮಯದಲ್ಲಿ ಅಲ್ಲ, ನಿರ್ಮಾಣ ಸಮಯದಲ್ಲಿ ಮಿನಿಫಿಕೇಶನ್ ಅನ್ನು ರನ್ ಮಾಡಿ.
- ನನ್ನ CSS ಅನ್ನು ಸರ್ವರ್ಗೆ ಅಪ್ಲೋಡ್ ಮಾಡಲಾಗಿದೆಯೇ?
- ಇಲ್ಲ. ಮಿನಿಫೈಯರ್ ನಿಮ್ಮ ಬ್ರೌಸರ್ನಲ್ಲಿ ರನ್ ಆಗುತ್ತದೆ.
- ಇದು cssnano ಅಥವಾ csso ಗೆ ಹೇಗೆ ಹೋಲಿಸುತ್ತದೆ?
- cssnano ಮತ್ತು csso ಪ್ರೊಡಕ್ಷನ್ ಬಿಲ್ಡ್ಗಳಿಗಾಗಿ ಪೋಸ್ಟ್ಸಿಎಸ್ಎಸ್ ಪ್ಲಗಿನ್ಗಳಾಗಿವೆ; ಅವರು ಅನಗತ್ಯ ನಿಯಮಗಳನ್ನು ವಿಲೀನಗೊಳಿಸುವಂತಹ ಹೆಚ್ಚು ಆಕ್ರಮಣಕಾರಿ ರೂಪಾಂತರಗಳನ್ನು ನೀಡುತ್ತಾರೆ. ಈ ಉಪಕರಣವು ಬಿಲ್ಡ್ ಸೆಟಪ್ ಇಲ್ಲದೆಯೇ ತಾತ್ಕಾಲಿಕ ಬಳಕೆಗಾಗಿ ಮೂಲಭೂತ ಮಿನಿಫಿಕೇಶನ್ ಅನ್ನು ಒಳಗೊಂಡಿದೆ.
- ಮಿನಿಫಿಕೇಶನ್ ಮೂಲ ನಕ್ಷೆಗಳನ್ನು ಮುರಿಯುತ್ತದೆಯೇ?
- ಮಿನಿಫಿಕೇಶನ್ ಮೂಲ ನಕ್ಷೆಗಳನ್ನು ರಚಿಸುವುದಿಲ್ಲ; ಈ ಉಪಕರಣವು ಮಿನಿಫೈಡ್ ಔಟ್ಪುಟ್ ಅನ್ನು ಮಾತ್ರ ಉತ್ಪಾದಿಸುತ್ತದೆ. ಉತ್ಪಾದನೆಯಲ್ಲಿ ಮಿನಿಫೈಡ್ CSS ಅನ್ನು ಡೀಬಗ್ ಮಾಡಲು, ನಿಮ್ಮ ನಿರ್ಮಾಣದ ಭಾಗವಾಗಿ ಮೂಲ ನಕ್ಷೆಗಳನ್ನು ರಚಿಸಿ.