JavaScript Minify કરો _

JavaScript મિનિફિકેશન કેવી રીતે કામ કરે છે

Terser તમારા code ના Abstract Syntax Tree પર ચાર તબક્કામાં કામ કરે છે. દરેક તબક્કો સ્વતંત્ર છે, તેથી તમે બાકીનાને તોડ્યા વગર તેમાંથી કોઈ પણ ચાલુ કે બંધ કરી શકો છો.

1. Parse. Terser તમારા JavaScript ને AST માં parse કરે છે. કોઈ પણ syntax error અહીં તેને કારણભૂત token અને line સાથે સામે આવે છે, જેથી કોઈ રૂપાંતર ચાલે તે પહેલાં તમને અસલી સમસ્યા મળી જાય. Parser નવીનતમ stage-4 proposals સુધીના દરેક માનક ECMAScript construct ને સ્વીકારે છે.
2. Compress. Compressor AST ને walk કરે છે અને દસેક semantics-જાળવનારા રૂપાંતરો લાગુ કરે છે: constant folding, dead-branch elimination, ટૂંકા pure functions નું inlining, ક્રમિક var declaration નું collapsing, અને સમકક્ષ statement સ્વરૂપોનું પુનર્લેખન (if/else ને ternaries માં, comparison-chain shortening, conditional return collapsing). દરેક રૂપાંતર સૈદ્ધાંતિક રીતે ઉલટાવી શકાય તેવું છે; compressor ક્યારેય અવલોકનક્ષમ વર્તન બદલતું નથી.
3. Mangle. Mangler દરેક scope ની અંદર local binding ને સૌથી ટૂંકા અનન્ય identifier (a, b, c, …) થી નામ બદલે છે. ફક્ત એ જ નામો બદલાય છે જે module સીમાથી બહાર નીકળી શકતા નથી, તેથી exported binding, property key, અને global સંદર્ભો અસ્પૃશ્ય રહે છે. પરિણામ એ કોઈ પણ તબક્કાની સૌથી મોટી એક જ બાઇટ બચત છે.
4. Render. Terser રૂપાંતરિત AST ને પાછું એક JavaScript સ્ટ્રિંગ માં છાપે છે, જેમાં ખાલી જગ્યા સંકોચાયેલી હોય અને statement વિભાજકો વ્યાકરણ સ્વીકારે તે ન્યૂનતમ સુધી ઘટાડેલા હોય. જ્યાં સુધી preserve-license toggle /*! … */ blocks ન રાખે ત્યાં સુધી ટિપ્પણીઓ કાઢી નખાય છે, જે રાખવાનું મોટાભાગના CDN license તમારી પાસેથી માગે છે.

JavaScript minify કેમ

• ઝડપી page loads. નાની scripts વહેલા parse અને execute થાય છે. 4G mobile connection પર 40-ટકા બાઇટ ઘટાડો Time to Interactive માંથી અસલી સેકન્ડ ઘટાડે છે, જે એ metric છે જેને Google ની PageSpeed Insights સૌથી આક્રમક રીતે માપે છે.
• ઓછા CDN egress bills. CloudFront, Cloudflare, અને Fastly egress ના પ્રતિ gigabyte બિલ કરે છે. દર મહિને લાખો page view માં 40-ટકા script ઘટાડો કોઈ પણ છબી અથવા CSS કામ ઊતરે તે પહેલાં અસલી બચતમાં ભેગો થાય છે. ગણિત gzip અને brotli પછી પણ ટકી રહે છે — minification એ token દૂર કરે છે જે compressor ને અન્યથા એન્કોડ કરવા પડત.
• આ મિનિફાયર તમારા page પર ભાર નથી નાખતો. Terser ~1 MB uncompressed છે. મોટાભાગના online minifier પેજ લોડ પર આખી લાઇબ્રેરી મોકલે છે, જે તેમનો પોતાનો Lighthouse સ્કોર ડૂબાડે છે અને user કંઈ ટાઇપ કરે તે પહેલાં પેજને સુસ્ત અનુભવાય છે. આ પેજ Terser ને ફક્ત ત્યારે જ lazy-load કરે છે જ્યારે તમે Minify ક્લિક કરો અથવા Live mode ચાલુ કરો — જેથી પ્રારંભિક render એ Core Web Vitals મર્યાદાઓની નીચે રહે જે સાધન પોતે તમને હાંસલ કરવામાં મદદ કરવાનું વચન આપે છે.
• Core Web Vitals pass. Lighthouse અને PageSpeed Insights મોટા JavaScript ને નબળા Total Blocking Time ના સીધા ફાળાદાર તરીકે ફ્લેગ કરે છે. Vendor લાઇબ્રેરી અને application bundle ને minify કરવું એ Lighthouse ના "Reduce unused JavaScript" અને "Remove duplicate modules" audit પર સૌથી ઝડપી જીત છે — સામાન્ય રીતે દસ કે વીસ point ની એક-વખતની ઘટાડો.

સામાન્ય applications

JavaScript minification એ આધુનિક web project ના લગભગ દરેક તબક્કે દેખાય છે.

• Pre-commit hooks: repo માં commit કરતા પહેલાં વ્યક્તિગત utility scripts ને minify કરો જેથી committed artifact production-ready હોય અને diff ખાલી જગ્યાના વલોણાને બદલે logic ફેરફારો બતાવે.
• Third-party widget audits: કોઈ vendor નો embed snippet paste કરો અને ચકાસો કે તે પહેલેથી minified છે કે લાખો user ને serve કરતા પહેલાં વધુ સંકોચી શકાય છે.
• Legacy script cleanup: જૂના jQuery plugins અને હાથે લખેલી scripts જે તમારી વર્તમાન build પાઇપલાઇન કરતા જૂની છે તેને source tree ને સ્પર્શ્યા વગર compress કરો.

Worked example

એક નાનું function લો: function add(firstNumber, secondNumber) { /* sums two numbers */ return firstNumber + secondNumber; } console.log(add(1, 2)); — ટિપ્પણી સહિત લગભગ 130 બાઇટ. તેને ઉપર Mangle અને Compress બંને ચાલુ કરીને paste કરો. આઉટપુટ આશરે function add(n,o){return n+o}console.log(add(1,2)); સુધી ટૂંકું થાય છે — લગભગ 55 બાઇટ, 58-ટકાનો ઘટાડો. Function નામ add ટકી રહે છે કારણ કે તે console.log કૉલમાં સંદર્ભિત છે; parameter નામ firstNumber અને secondNumber એક-એક અક્ષરમાં ટૂંકા થાય છે કારણ કે તે function body ના local છે. ખાલી જગ્યા collapse કરતા અને ટિપ્પણી છોડતા છતાં વાંચી શકાય તેવા parameter નામ રાખવા માટે Mangle બંધ કરો.

FAQ

શું આ મારા બ્રાઉઝરમાં ચાલે છે?

હા. Terser પ્રથમ વખત તમે Minify ક્લિક કરો અથવા Live mode સક્ષમ કરો ત્યારે lazy-load થાય છે — લગભગ 200 KB compressed તમારા browser cache માં આવે છે, પછી આગળ કંઈ ડાઉનલોડ થતું નથી. તમારો code ક્યારેય પેજ છોડતો નથી.

Name mangling શું છે અને શું તે સલામત છે?

Mangling બાઇટ બચાવવા માટે local variable ને એક-એક અક્ષરમાં નામ બદલે છે. તે સ્વ-સમાવિષ્ટ scripts અને IIFE bundle માટે સલામત છે કારણ કે નામ-બદલાવ ક્યારેય scope છોડતા નથી. તે એવી scripts માટે સલામત નથી જે wrapper વગર નામથી globals ઉઘાડે છે (દા.ત. window.myLib = …). અનિશ્ચિત હો ત્યારે Mangle બંધ કરો.

મિનિફિકેશન પછી મારો code કેમ તૂટી ગયો?

ત્રણ સામાન્ય શંકાસ્પદો: eval અથવા with જે variables ને સ્ટ્રિંગ થી સંદર્ભિત કરે છે; Function.name અથવા arguments.callee વાંચન જે મૂળ identifier પર આધાર રાખે છે; અથવા એવા નામથી ઉઘાડેલા globals જે નામ-બદલાયા હતા. નામ-બદલાવ કે Compress રૂપાંતર કારણ છે કે કેમ તે અલગ પાડવા માટે પહેલાં Mangle બંધ કરો.

શું આ આધુનિક syntax (ES2020+) સપોર્ટ કરે છે?

હા. ECMAScript target ને ES2020 અથવા Next પર સેટ કરો અને Terser optional chaining, nullish coalescing, top-level await, અને logical-assignment operators જાળવી રાખે છે. તેને ES5 પર સેટ કરો અને Terser જ્યાં શક્ય હોય ત્યાં down-compile કરે છે, પણ તે સંપૂર્ણ transpiler નથી — એવા syntax માટે Babel વાપરો જે ES5 બિલકુલ રજૂ કરી શકતું નથી.

Terser browser-side JavaScript minification build tool ઉમેર્યા વિના production-quality output. Script paste, ECMAScript target pick, result copy download. Upload, account, build pipeline — nothing. Minifier ફક્ત request — page open few kilobytes, megabyte.