JavaScript சுருக்கு _

JavaScript மினிஃபிகேஷன் எவ்வாறு வேலை செய்கிறது

Terser உங்கள் code-ன் Abstract Syntax Tree-ல் நான்கு stages-ல் வேலை செய்கிறது. ஒவ்வொரு stage-உம் independent, எனவே மற்றவற்றை சிதைக்காமல் எதையும் on அல்லது off செய்யலாம்.

1. பாகுபடுத்தல். Terser உங்கள் JavaScript-ஐ AST-க்கு parse செய்கிறது. எந்த syntax error-உம் இதை caused token மற்றும் line-உடன் இங்கே surface ஆகும், இதனால் எந்த transformation இயங்குவதற்கு முன்பே real problem கண்டுபிடிக்கலாம். Parser சமீபத்திய stage-4 proposals வரை ஒவ்வொரு standard ECMAScript construct-ஐயும் ஏற்கிறது.
2. சுருக்கம். Compressor AST-ஐ நடந்து பல semantics-preserving transforms பயன்படுத்துகிறது: constant folding, dead-branch elimination, short pure functions inlining, sequential var declarations சுருக்கல், மற்றும் equivalent statement forms மீண்டும் எழுதுவது (if/else-ஐ ternaries-ஆக, comparison-chain சுருக்கல், conditional return சுருக்கல்). ஒவ்வொரு transform-உம் கொள்கையளவில் reversible; compressor observable behaviour-ஐ ஒருபோதும் மாற்றாது.
3. மேலோட்டமாக்கல். Mangler ஒவ்வொரு scope-க்குள்ளும் local bindings-ஐ குறுகிய unique identifiers (a, b, c, …) ஆக மீண்டும் பெயரிடுகிறது. Module boundary-ஐ escape செய்ய முடியாத names மட்டுமே மீண்டும் பெயரிடப்படுகின்றன, எனவே exported bindings, property keys மற்றும் global references தொடவே தொடாமல் survive ஆகின்றன. முடிவு எந்த stage-ஐயும் விட மிகப்பெரிய single byte saving.
4. வெளியீடு. Terser transformed AST-ஐ whitespace சுருங்கி மற்றும் statement separators grammar ஏற்கும் minimum-க்கு குறைந்த JavaScript string-க்கு மீண்டும் print செய்கிறது. Comments நீக்கப்படுகின்றன, preserve-license toggle /*! … */ blocks வைத்திருக்கும்படி செய்தால் தவிர, பெரும்பாலான CDN licenses retain செய்யப்படும்படி கோருகின்றன.

JavaScript-ஐ ஏன் சுருக்க வேண்டும்

• வேகமான page loads. சிறிய scripts விரைவில் parse மற்றும் execute ஆகின்றன. 4G mobile connection-ல் 40-percent byte reduction Time to Interactive-ல் real seconds குறைக்கிறது, இது Google-ன் PageSpeed Insights மிக aggressively அளவிடும் metric.
• குறைந்த CDN egress கட்டணங்கள். CloudFront, Cloudflare மற்றும் Fastly egress gigabyte-க்கு bill செய்கின்றன. மாதாந்திர மில்லியன் page views-ல் 40-percent script reduction எந்த image அல்லது CSS வேலை வருவதற்கு முன்பே real savings-ஆக compound ஆகும். gzip மற்றும் brotli-க்கு பிறகும் math hold ஆகிறது — மினிஃபிகேஷன் compressor otherwise encode செய்ய வேண்டிய tokens-ஐ நீக்குகிறது.
• இந்த மினிஃபையர் உங்கள் page-ஐ slow செய்வதில்லை. Terser ~1 MB uncompressed. பெரும்பாலான online minifiers page load-ல் முழு library ship செய்கின்றன, இது அவர்களின் சொந்த Lighthouse score-ஐ குறைக்கிறது மற்றும் user எதையும் தட்டச்சு செய்வதற்கு முன்பே page sluggish ஆக feel ஆகிறது. இந்த page Terser-ஐ நீங்கள் Minify கிளிக் செய்யும்போது அல்லது Live mode on செய்யும்போது மட்டுமே lazy-load செய்கிறது — இதனால் initial render கருவி நீங்கள் hit செய்ய உதவும் Core Web Vitals thresholds-க்கு கீழே இருக்கும்.
• Core Web Vitals pass ஆகுதல். Lighthouse மற்றும் PageSpeed Insights large JavaScript-ஐ poor Total Blocking Time-க்கு direct contributor ஆக flag செய்கின்றன. Vendor libraries மற்றும் application bundles சுருக்குவது Lighthouse "Reduce unused JavaScript" மற்றும் "Remove duplicate modules" audits-ல் fastest win — பொதுவாக பத்து அல்லது இருபது points worth one-shot reduction.

பொதுவான பயன்பாடுகள்

JavaScript மினிஃபிகேஷன் modern web project-ன் கிட்டத்தட்ட ஒவ்வொரு stage-லும் காட்சியளிக்கிறது.

• Pre-commit hooks: repo-க்கு commit செய்வதற்கு முன்பு individual utility scripts-ஐ சுருக்குங்கள், இதனால் committed artifact production-ready மற்றும் diff whitespace churn-ஐ விட logic changes காட்டுகிறது.
• Third-party widget audits: vendor-ன் embed snippet ஒட்டி அது ஏற்கனவே minify ஆகியுள்ளதா அல்லது மில்லியன் users-க்கு serve செய்வதற்கு முன்பு மேலும் சுருக்க முடியுமா என சரிபார்க்கவும்.
• Legacy script cleanup: source tree-ஐ தொடாமல் தற்போதைய build pipeline-க்கு முந்தைய பழைய jQuery plugins மற்றும் hand-authored scripts-ஐ compress செய்யுங்கள்.

ஒரு worked example

ஒரு சிறிய function எடுங்கள்: function add(firstNumber, secondNumber) { /* sums two numbers */ return firstNumber + secondNumber; } console.log(add(1, 2)); — comment உட்பட சுமார் 130 bytes. Mangle மற்றும் Compress இரண்டும் on ஆக மேலே ஒட்டுங்கள். வெளியீடு தோராயமாக function add(n,o){return n+o}console.log(add(1,2));-க்கு சுருங்குகிறது — சுமார் 55 bytes, 58-percent reduction. Function name add survive ஆகிறது ஏனெனில் console.log call-ல் reference செய்யப்படுகிறது; parameter names firstNumber மற்றும் secondNumber function body-க்கு local என்பதால் single letters-க்கு சுருங்குகின்றன. Whitespace சுருக்கி comment நீக்கும்போதும் readable parameter names வைத்திருக்க Mangle off செய்யுங்கள்.

FAQ

இது என் உலாவியில் இயங்குகிறதா?

ஆம். நீங்கள் Minify கிளிக் செய்யும்போது அல்லது Live mode enable செய்யும்போது முதல் முறை Terser lazy-load ஆகிறது — உங்கள் browser cache-ல் சுமார் 200 KB compressed வருகிறது, பிறகு எதுவும் மேலும் download ஆவதில்லை. உங்கள் code page-ஐ விட்டு வெளியே செல்வதே இல்லை.

Name mangling என்றால் என்ன, அது பாதுகாப்பானதா?

Mangling bytes சேமிக்க local variables-ஐ single letters-க்கு மீண்டும் பெயரிடுகிறது. Self-contained scripts மற்றும் IIFE bundles-க்கு பாதுகாப்பானது ஏனெனில் renames scope-ஐ விட்டு வெளியே செல்வதில்லை. Wrapper இல்லாமல் name-ஆல் globals expose செய்யும் scripts-க்கு (எ.கா. window.myLib = …) பாதுகாப்பற்றது. சந்தேகம் இருக்கும்போது Mangle off செய்யுங்கள்.

Minification-க்கு பிறகு என் code ஏன் break ஆனது?

மூன்று usual suspects: string-ஆல் variables reference செய்யும் eval அல்லது with; அசல் identifier-ஐ சார்ந்திருக்கும் Function.name அல்லது arguments.callee reads; அல்லது மீண்டும் பெயரிடப்பட்ட name-ஆல் expose ஆகும் globals. Renaming அல்லது Compress transform காரணம் என்று isolate செய்ய முதலில் Mangle off செய்யுங்கள்.

இது modern syntax (ES2020+) ஆதரிக்குமா?

ஆம். 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 வெளியீடு தருகிறது. ஒரு script ஒட்டுங்கள், ECMAScript target தேர்ந்தெடுங்கள், முடிவை நகலெடுங்கள் அல்லது பதிவிறக்குங்கள். எதுவும் upload ஆவதில்லை, கணக்கு இல்லை, build pipeline இல்லை. மினிஃபையர் நீங்கள் கேட்டபோது மட்டுமே load ஆகிறது — இதனால் இந்த page திறப்பதால் ஒரு megabyte அல்ல, சில kilobytes மட்டுமே செலவாகும்.