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

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

Terser ನಿಮ್ಮ ಕೋಡ್‌ನ Abstract Syntax Tree ಮೇಲೆ ನಾಲ್ಕು ಹಂತಗಳಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಪ್ರತಿ ಹಂತ ಸ್ವತಂತ್ರವಾಗಿದೆ, ಆದ್ದರಿಂದ ನೀವು ಯಾವುದನ್ನಾದರೂ ಇತರರನ್ನು ಮುರಿಯದೆ ಚಾಲು ಅಥವಾ ಸ್ಥಗಿತಗೊಳಿಸಬಹುದು.

1. ಪಾರ್ಸ್. Terser ನಿಮ್ಮ JavaScript ಅನ್ನು AST ಆಗಿ parse ಮಾಡುತ್ತದೆ. ಯಾವುದೇ syntax error ಅನ್ನು ಯಾವ token ಮತ್ತು ಸಾಲಿನಿಂದ ಉಂಟಾಯಿತು ಎಂಬ ಮಾಹಿತಿಯೊಂದಿಗೆ ಇಲ್ಲಿ ತೋರಿಸಲಾಗುತ್ತದೆ, ಇದರಿಂದ ಯಾವುದೇ ರೂಪಾಂತರ ಚಲಾಯಿಸುವ ಮೊದಲು ನೀವು ನಿಜವಾದ ಸಮಸ್ಯೆ ಕಂಡುಹಿಡಿಯಬಹುದು. Parser ಇತ್ತೀಚಿನ stage-4 proposals ವರೆಗೆ ಪ್ರತಿ standard ECMAScript construct ಒಪ್ಪಿಕೊಳ್ಳುತ್ತದೆ.
2. ಕಂಪ್ರೆಸ್. Compressor AST ಅನ್ನು ನಡೆಯುತ್ತದೆ ಮತ್ತು ಹಲವಾರು semantics-preserving transforms ಅನ್ವಯಿಸುತ್ತದೆ: constant folding, dead-branch elimination, ಚಿಕ್ಕ pure functions ನ inlining, sequential var declarations ನ collapsing, ಮತ್ತು ಸಮಾನ statement forms ಅನ್ನು rewrite ಮಾಡುವುದು (if/else ಅನ್ನು ternaries ಆಗಿ, comparison-chain shortening, conditional return collapsing). ಪ್ರತಿ transform ತತ್ವದಲ್ಲಿ ತಿರುಗಿ ಹೋಗಬಹುದಾದದ್ದು; compressor ಕಾಣಬಹುದಾದ ನಡವಳಿಕೆಯನ್ನು ಎಂದಿಗೂ ಬದಲಾಯಿಸುವುದಿಲ್ಲ.
3. ಮ್ಯಾಂಗಲ್. Mangler ಪ್ರತಿ ಸ್ಕೋಪ್‌ನಲ್ಲಿ local bindings ಅನ್ನು ಅತ್ಯಂತ ಚಿಕ್ಕ unique identifiers (a, b, c, …) ಆಗಿ ಮರುನಾಮಕರಣ ಮಾಡುತ್ತದೆ. Module boundary ದಾಟಲಾಗದ ಹೆಸರುಗಳು ಮಾತ್ರ ಮರುನಾಮಕರಣ ಪಡೆಯುತ್ತವೆ, ಆದ್ದರಿಂದ exported bindings, property keys ಮತ್ತು global references ಹಾಗೆಯೇ ಉಳಿಯುತ್ತವೆ. ಇದು ಯಾವುದೇ ಹಂತದಲ್ಲಿ ಅತಿ ದೊಡ್ಡ ಬೈಟ್ ಉಳಿತಾಯ ನೀಡುತ್ತದೆ.
4. ರೆಂಡರ್. Terser ರೂಪಾಂತರಿಸಿದ AST ಅನ್ನು ಕುಸಿದ ವ್ಹೈಟ್‌ಸ್ಪೇಸ್ ಮತ್ತು grammar ಒಪ್ಪಿಕೊಳ್ಳುವ ಕನಿಷ್ಠ statement separators ಸಮೇತ JavaScript string ಆಗಿ ಮುದ್ರಿಸುತ್ತದೆ. preserve-license toggle /*! … */ blocks ಉಳಿಸದಿದ್ದರೆ ಕಾಮೆಂಟ್‌ಗಳನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ, ಅದನ್ನು ಹೆಚ್ಚಿನ CDN licenses ಉಳಿಸಿಕೊಳ್ಳಲು ಬಯಸುತ್ತವೆ.

JavaScript ಮಿನಿಫೈ ಮಾಡುವ ಕಾರಣ

• ವೇಗದ ಪೇಜ್ ಲೋಡ್‌ಗಳು. ಚಿಕ್ಕ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳು ಬೇಗ parse ಮತ್ತು execute ಆಗುತ್ತವೆ. 4G ಮೊಬೈಲ್ ಸಂಪರ್ಕದಲ್ಲಿ 40 ಶೇಕಡ ಬೈಟ್ ಕಡಿತ Time to Interactive ನಿಂದ ನಿಜವಾದ ಸೆಕೆಂಡ್‌ಗಳನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ, ಇದು Google ನ PageSpeed Insights ಅತ್ಯಂತ ಆಕ್ರಮಣಕಾರಿಯಾಗಿ ಅಳೆಯುವ ಮೆಟ್ರಿಕ್ ಆಗಿದೆ.
• ಕಡಿಮೆ CDN egress ಬಿಲ್‌ಗಳು. CloudFront, Cloudflare ಮತ್ತು Fastly ಪ್ರತಿ gigabyte egress ಗೆ ಶುಲ್ಕ ವಿಧಿಸುತ್ತವೆ. ಲಕ್ಷಾಂತರ ಮಾಸಿಕ ಪೇಜ್ ವ್ಯೂಗಳಾದ್ಯಂತ 40 ಶೇಕಡ ಸ್ಕ್ರಿಪ್ಟ್ ಕಡಿತ gzip ಮತ್ತು brotli ನಂತರವೂ ನಿಜವಾದ ಉಳಿತಾಯವಾಗಿ ಸೇರಿಕೊಳ್ಳುತ್ತದೆ — ಮಿನಿಫಿಕೇಶನ್ compressor ಬೇರೆ encode ಮಾಡಬೇಕಾಗಿದ್ದ tokens ತೆಗೆದುಹಾಕುತ್ತದೆ.
• ಈ ಮಿನಿಫೈಯರ್ ನಿಮ್ಮ ಪೇಜ್ ಅನ್ನು ಭಾರ ಮಾಡುವುದಿಲ್ಲ. Terser ~1 MB uncompressed ಆಗಿದೆ. ಹೆಚ್ಚಿನ ಆನ್‌ಲೈನ್ ಮಿನಿಫೈಯರ್‌ಗಳು ಪೇಜ್ ಲೋಡ್‌ನಲ್ಲಿ ಇಡೀ ಲೈಬ್ರರಿ ಶಿಪ್ ಮಾಡುತ್ತವೆ, ಇದು ಅವರ Lighthouse ಸ್ಕೋರ್ ಹಾಳಾಗಿಸುತ್ತದೆ ಮತ್ತು ಬಳಕೆದಾರರು ಏನಾದರೂ ಟೈಪ್ ಮಾಡುವ ಮೊದಲು ಪೇಜ್ ನಿಧಾನ ಅನಿಸಿಸುತ್ತದೆ. ಈ ಪೇಜ್ Terser ಅನ್ನು ನೀವು Minify ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಅಥವಾ Live mode ಚಾಲು ಮಾಡಿದಾಗ ಮಾತ್ರ lazy-load ಮಾಡುತ್ತದೆ.
• Core Web Vitals ಪಾಸ್ ಮಾಡುವುದು. Lighthouse ಮತ್ತು PageSpeed Insights ದೊಡ್ಡ JavaScript ಅನ್ನು ಕಳಪೆ Total Blocking Time ಗೆ ನೇರ ಕಾರಣ ಎಂದು ಫ್ಲ್ಯಾಗ್ ಮಾಡುತ್ತವೆ. Vendor libraries ಮತ್ತು application bundles ಮಿನಿಫೈ ಮಾಡುವುದು Lighthouse "Reduce unused JavaScript" ಮತ್ತು "Remove duplicate modules" audits ನಲ್ಲಿ ಅತ್ಯಂತ ತ್ವರಿತ ಗೆಲುವಾಗಿದೆ.

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

JavaScript ಮಿನಿಫಿಕೇಶನ್ ಆಧುನಿಕ ವೆಬ್ ಪ್ರಾಜೆಕ್ಟ್‌ನ ಬಹುತೇಕ ಪ್ರತಿ ಹಂತದಲ್ಲಿ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ.

• Pre-commit hooks: ಪ್ರತ್ಯೇಕ utility scripts ಅನ್ನು repo ಗೆ commit ಮಾಡುವ ಮೊದಲು ಮಿನಿಫೈ ಮಾಡಿ, ಆ ಮೂಲಕ committed artifact production-ready ಆಗಿರುತ್ತದೆ ಮತ್ತು diff ವ್ಹೈಟ್‌ಸ್ಪೇಸ್ ಬದಲಾವಣೆಗಳ ಬದಲು logic ಬದಲಾವಣೆಗಳನ್ನು ತೋರಿಸುತ್ತದೆ.
• Third-party widget audits: ಒಂದು vendor ನ embed snippet ಅನ್ನು paste ಮಾಡಿ ಮತ್ತು ಅದು ಈಗಾಗಲೇ ಮಿನಿಫೈಡ್ ಆಗಿದೆಯೇ ಅಥವಾ ಇನ್ನೂ ಚಿಕ್ಕದಾಗಬಹುದೇ ಎಂದು ಪರೀಕ್ಷಿಸಿ.
• Legacy script cleanup: ನಿಮ್ಮ current build pipeline ಗಿಂತ ಮೊದಲಿನ ಹಳೆಯ jQuery plugins ಮತ್ತು hand-authored scripts ಅನ್ನು source tree ಮುಟ್ಟದೆ compress ಮಾಡಿ.

ಒಂದು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆ

ಒಂದು ಚಿಕ್ಕ function ತೆಗೆದುಕೊಳ್ಳಿ: function add(firstNumber, secondNumber) { /* sums two numbers */ return firstNumber + secondNumber; } console.log(add(1, 2)); — ಕಾಮೆಂಟ್ ಸಮೇತ ಸುಮಾರು 130 bytes. Mangle ಮತ್ತು Compress ಎರಡೂ ಚಾಲು ಮಾಡಿ ಮೇಲೆ paste ಮಾಡಿ. ಔಟ್‌ಪುಟ್ ಸರಿಸುಮಾರು function add(n,o){return n+o}console.log(add(1,2)); ಗೆ ಸಂಕ್ಷಿಪ್ತವಾಗುತ್ತದೆ — ಸುಮಾರು 55 bytes, 58 ಶೇಕಡ ಕಡಿತ. add function ಹೆಸರು ಉಳಿಯುತ್ತದೆ ಏಕೆಂದರೆ ಅದು console.log call ನಲ್ಲಿ ಉಲ್ಲೇಖಿಸಲ್ಪಟ್ಟಿದೆ; firstNumber ಮತ್ತು secondNumber parameter ಹೆಸರುಗಳು single letters ಗೆ ಚಿಕ್ಕದಾಗುತ್ತವೆ ಏಕೆಂದರೆ ಅವು function body ಗೆ local ಆಗಿವೆ.

FAQ

ಇದು ನನ್ನ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಚಲಾಯಿಸಲ್ಪಡುತ್ತದೆಯೇ?

ಹೌದು. Terser ನೀವು ಮೊದಲ ಬಾರಿ Minify ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಅಥವಾ Live mode ಚಾಲು ಮಾಡಿದಾಗ lazy-load ಆಗುತ್ತದೆ — ಸುಮಾರು 200 KB compressed ನಿಮ್ಮ browser cache ನಲ್ಲಿ ಇಳಿಯುತ್ತದೆ, ನಂತರ ಇನ್ನೇನೂ download ಆಗುವುದಿಲ್ಲ. ನಿಮ್ಮ ಕೋಡ್ ಪೇಜ್ ಬಿಡುವುದಿಲ್ಲ.

Name mangling ಎಂದರೇನು ಮತ್ತು ಅದು ಸುರಕ್ಷಿತವೇ?

Mangling bytes ಉಳಿಸಲು local variables ಅನ್ನು single letters ಆಗಿ ಮರುನಾಮಕರಣ ಮಾಡುತ್ತದೆ. ಇದು self-contained scripts ಮತ್ತು IIFE bundles ಗೆ ಸುರಕ್ಷಿತ ಏಕೆಂದರೆ ಮರುನಾಮಕರಣಗಳು ಸ್ಕೋಪ್ ಬಿಡುವುದಿಲ್ಲ. wrapper ಇಲ್ಲದೆ ಹೆಸರಿನಿಂದ globals expose ಮಾಡುವ scripts ಗೆ (ಉದಾ. window.myLib = …) ಇದು SAFE ಅಲ್ಲ. ಸಂದೇಹ ಇದ್ದಲ್ಲಿ Mangle ಬಂದ್ ಮಾಡಿ.

ಮಿನಿಫಿಕೇಶನ್ ನಂತರ ನನ್ನ ಕೋಡ್ ಏಕೆ ಮುರಿಯಿತು?

ಮೂರು ಸಾಮಾನ್ಯ ಕಾರಣಗಳು: eval ಅಥವಾ with variables ಅನ್ನು string ಮೂಲಕ ಉಲ್ಲೇಖಿಸುವುದು; Function.name ಅಥವಾ arguments.callee reads ಮೂಲ identifier ಅನ್ನು ಅವಲಂಬಿಸಿರುವುದು; ಅಥವಾ ಹೆಸರಿನಿಂದ expose ಆದ globals ಮರುನಾಮಕರಣ ಪಡೆದಿರುವುದು. Mangle ಮೊದಲು ಬಂದ್ ಮಾಡಿ renaming ಅಥವಾ Compress transform ಕಾರಣ ಎಂದು isolate ಮಾಡಿ.

ಇದು ಆಧುನಿಕ syntax (ES2020+) support ಮಾಡುತ್ತದೆಯೇ?

ಹೌದು. ECMAScript target ಅನ್ನು ES2020 ಅಥವಾ Next ಗೆ ಹೊಂದಿಸಿ ಮತ್ತು Terser optional chaining, nullish coalescing, top-level await ಮತ್ತು logical-assignment operators ಉಳಿಸಿಕೊಳ್ಳುತ್ತದೆ. ES5 ಹೊಂದಿಸಿದಾಗ Terser ಸಾಧ್ಯವಾದಲ್ಲಿ down-compile ಮಾಡುತ್ತದೆ, ಆದರೆ ಇದು full transpiler ಅಲ್ಲ — ES5 ನಲ್ಲಿ represent ಮಾಡಲಾಗದ syntax ಗೆ Babel ಬಳಸಿ.

Terser ಮೂಲಕ browser-side JavaScript ಮಿನಿಫಿಕೇಶನ್ ನಿಮಗೆ build tool ಸೇರಿಸದೆ production-quality ಔಟ್‌ಪುಟ್ ನೀಡುತ್ತದೆ. ಸ್ಕ್ರಿಪ್ಟ್ paste ಮಾಡಿ, ECMAScript target ಆಯ್ಕೆ ಮಾಡಿ, ಫಲಿತಾಂಶ copy ಅಥವಾ download ಮಾಡಿ. ಏನೂ upload ಆಗುವುದಿಲ್ಲ, ಖಾತೆ ಇಲ್ಲ, build pipeline ಇಲ್ಲ. ಮಿನಿಫೈಯರ್ ಸ್ವತಃ ನೀವು ಕೇಳಿದಾಗ ಮಾತ್ರ load ಆಗುತ್ತದೆ.