TypeScript अनुप्रयोगों के प्रदर्शन का अनुकूलन: व्यवहार में

परिचय: TypeScript धीमा क्यों हो सकता है?

TypeScript एक शक्तिशाली उपकरण है जो JavaScript में स्थैतिक टाइपिंग जोड़ता है। हालाँकि, डेवलपर्स अक्सर पाते हैं कि "बॉक्स से बाहर" TypeScript एप्लिकेशन शुद्ध JS की तुलना में धीमी गति से चलते हैं। मुख्य कारण अत्यधिक ट्रांसपाइलिंग, गलत कंपाइलर कॉन्फ़िगरेशन और सबऑप्टिमल कोड पैटर्न हैं। इस लेख में, हम अनुकूलन के व्यावहारिक तरीकों पर चर्चा करेंगे जो आपके एप्लिकेशन की बिल्ड प्रक्रिया और रनटाइम दोनों को गति देने में मदद करेंगे।

1. प्रोफाइलिंग और बाधाओं का पता लगाना

कुछ भी अनुकूलित करने से पहले, यह समझना आवश्यक है कि वास्तव में क्या धीमा कर रहा है। ब्राउज़र और Node.js के अंतर्निहित टूल का उपयोग करें।

1.1. Chrome DevTools Performance

एप्लिकेशन निष्पादन प्रोफ़ाइल रिकॉर्ड करें। लंबे कार्यों (Long Tasks) और बार-बार गार्बेज कलेक्टर (GC) कॉल पर ध्यान दें। कंपाइलेशन के बाद TypeScript कोड सामान्य JavaScript है, इसलिए सभी मानक प्रोफाइलिंग विधियाँ काम करती हैं।

1.2. बिल्ड समय का विश्लेषण (tsc --generateTrace)

यदि कंपाइलेशन स्वयं धीमा है, तो --generateTrace फ़्लैग का उपयोग करें:

tsc --generateTrace trace_output

फिर Chrome में chrome://tracing पर trace_output/trace.json फ़ाइल खोलें। आप देखेंगे कि कौन सी फ़ाइलें सबसे अधिक समय ले रही हैं। अक्सर ये बड़ी लाइब्रेरी या अत्यधिक इम्पोर्ट वाली फ़ाइलें होती हैं।

2. अधिकतम गति के लिए tsconfig.json सेटअप

गलत कॉन्फ़िगरेशन प्रदर्शन का मुख्य दुश्मन है। आइए प्रमुख विकल्पों पर नज़र डालें।

2.1. strict: true — जल्दबाजी न करें

strict मोड सभी सख्त टाइप चेक को सक्षम करता है। यह कंपाइलेशन को धीमा कर देता है। प्रोडक्शन बिल्ड के लिए उपयोग करें:

{\n  "compilerOptions": {\n    "strict": false,\n    "noImplicitAny": true,\n    "strictNullChecks": true\n  }\n}

ये दो विकल्प 90% त्रुटियों को कवर करते हैं, लेकिन पूर्ण strict से तेज़ काम करते हैं।

2.2. बिल्ड को गति देने के विकल्प

\n
• incremental: true — इंक्रीमेंटल कंपाइलेशन सक्षम करता है। TypeScript पिछले बिल्ड की जानकारी सहेजता है और केवल बदली हुई फ़ाइलों को पुनः कंपाइल करता है।
\n
• skipLibCheck: true — डिक्लेरेशन फ़ाइलों (.d.ts) में टाइप चेकिंग बंद करता है। यह गति में महत्वपूर्ण वृद्धि देता है, खासकर यदि कई थर्ड-पार्टी लाइब्रेरी का उपयोग किया जाता है।
\n
• isolatedModules: true — tsc के बजाय तेज़ ट्रांसपाइलर (जैसे esbuild) का उपयोग करने की अनुमति देता है।
\n

डेवलपमेंट के लिए अनुकूलित कॉन्फ़िगरेशन का उदाहरण:

{\n  "compilerOptions": {\n    "target": "ES2020",\n    "module": "ESNext",\n    "moduleResolution": "node",\n    "incremental": true,\n    "skipLibCheck": true,\n    "strict": false,\n    "noImplicitAny": true,\n    "strictNullChecks": true,\n    "outDir": "./dist"\n  },\n  "include": ["src/**/*"],\n  "exclude": ["node_modules", "**/*.test.ts"]\n}

3. रनटाइम अनुकूलन: प्रकार और डेटा संरचनाएँ

TypeScript प्रकार कंपाइलेशन के बाद गायब हो जाते हैं, लेकिन उनका "निशान" कंपाइलर द्वारा उत्पन्न कोड के रूप में रहता है।

3.1. रनटाइम में जटिल सशर्त प्रकारों से बचें

जटिल conditional types बहुत अधिक कोड उत्पन्न कर सकते हैं। इसके बजाय सरल union-प्रकारों का उपयोग करें:

// बुरा: जटिल सशर्त प्रकार\ntype ResponseType<T> = T extends string ? { data: string } : { data: number };\nfunction handleResponse<T>(value: T): ResponseType<T> { ... }\n\n// अच्छा: सरल union\ntype ResponseType = { data: string } | { data: number };\nfunction handleResponse(value: string | number): ResponseType { ... }

3.2. स्थिरांक के लिए as const का उपयोग करें

यह TypeScript को अधिक सटीक प्रकार निकालने में मदद करता है, जिससे चेक की संख्या कम हो जाती है:

const COLORS = ['red', 'green',