TypeScript को अधिकतम करना: कोड को 10 गुना तेज़ कैसे करें

आपका TypeScript कोड धीमा चल रहा है? अब हुड के नीचे झाँकने का समय है

आपने TypeScript में एक आदर्श कोड लिखा है। टाइप्स सही हैं, एब्स्ट्रैक्शन सुंदर हैं, टेस्ट पास हो रहे हैं। लेकिन प्रोडक्शन सर्वर "लैग" कर रहा है, और React कम्पोनेंट देरी से री-रेंडर हो रहे हैं। परिचित लगता है? अक्सर समस्या लॉजिक में नहीं, बल्कि TypeScript प्रदर्शन में होती है, जिसे हम तब तक नोटिस नहीं करते जब तक लोड वास्तविक नहीं हो जाता।

इस लेख में, हम कंपाइलेशन स्पीड के बारे में बात नहीं करेंगे - यह एक अलग चर्चा का विषय है। हम रनटाइम प्रदर्शन पर ध्यान केंद्रित करेंगे: तैयार कोड को कैसे प्रोफाइल करें, "बॉटलनेक" खोजें और TypeScript को ऑप्टिमाइज़ करें ताकि एप्लिकेशन तेज़ी से चले। आप जानेंगे कि map, forEach से 10 गुना तेज़ क्यों है, GC कैसे FPS को मारता है, और प्रोफाइलिंग के लिए कौन से टूल अपने पास रखने चाहिए।

TypeScript प्रोफाइलिंग टूल: Chrome से Node.js तक

कुछ भी ऑप्टिमाइज़ करने से पहले, यह समझना ज़रूरी है कि मिलीसेकंड कहाँ खो रहे हैं। इसके लिए TypeScript में प्रोफाइलिंग के तीन मुख्य दृष्टिकोण हैं।

1. Chrome DevTools Performance Tab

यदि आप फ्रंटएंड लिखते हैं, तो आपका सबसे अच्छा दोस्त Chrome DevTools में Performance टैब है। प्रोफाइल रिकॉर्ड करने से आपको पूरी तस्वीर मिलेगी: कौन सा JavaScript सबसे लंबा चल रहा है, गार्बेज कलेक्शन में कितना समय लग रहा है, और FPS में गिरावट कहाँ हो रही है। TypeScript कंपाइल होने के बाद शुद्ध JavaScript है, इसलिए प्रोफाइलर वही देखता है जो चल रहा है।

// उदाहरण: ब्राउज़र में "भारी" गणना को प्रोफाइल करना\nfunction processLargeArray(items: number[]): number[] {\n  const result: number[] = [];\n  for (let i = 0; i < items.length; i++) {\n    // भारी काम का सिमुलेशन\n    result.push(items[i] * Math.sqrt(items[i]));\n  }\n  return result;\n}\n\nconsole.time('processLargeArray');\nconst data = Array.from({ length: 100000 }, (_, i) => i);\nprocessLargeArray(data);\nconsole.timeEnd('processLargeArray');\n

Performance Tab खोलें, Record दबाएँ, यह कोड चलाएँ - और आपको सटीक निष्पादन समय और कॉल स्टैक दिखाई देगा। यदि कोई फ़ंक्शन 100ms से अधिक लेता है, तो TypeScript कोड के अनुकूलन के बारे में सोचने का समय है।

2. Node.js Profiler (--prof और --inspect)

TypeScript के साथ Node.js पर बैकएंड के लिए, बिल्ट-इन प्रोफाइलर का उपयोग करें। एप्लिकेशन को --prof फ्लैग के साथ चलाएँ:

node --prof dist/server.js\n

काम पूरा होने के बाद, isolate-*.log फ़ाइल बनती है। इसे पढ़ने योग्य रूप में बदलें:

node --prof-process isolate-*.log > processed.txt\n

फ़ाइल में आप देखेंगे कि कौन से फ़ंक्शन (कंपाइल किए गए TypeScript सहित) सबसे अधिक CPU का उपभोग कर रहे हैं। यह प्रोडक्शन में TypeScript प्रोफाइलिंग के लिए एक अपरिहार्य उपकरण है।

3. Clinic.js के माध्यम से V8 CPU Profiler

अधिक दृश्य विश्लेषण के लिए, Clinic.js का उपयोग करें। यह सुंदर फ्लेम चार्ट बनाता है और दिखाता है कि TypeScript कोड कहाँ "लैग" कर रहा है।

npm install -g clinic\nclinic doctor -- node dist/server.js\n

परीक्षण के बाद, HTML रिपोर्ट खोलें - आप देखेंगे कि कौन से फ़ंक्शन 90% समय ले रहे हैं। अक्सर ये अप्रत्याशित स्थान होते हैं: जैसे JSON.parse के बार-बार कॉल या अनऑप्टिमाइज़्ड लूप।

TypeScript कोड अनुकूलन की शीर्ष 5 तकनीकें

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

1. यदि forEach चाहिए तो map से बचें

अजीब लगता है, लेकिन map एक नया ऐरे बनाता है, भले ही आप इसका उपयोग न करें। यदि आपको केवल एक क्रिया करनी है, तो forEach या क्लासिक for का उपयोग करें।

// धीमा - अनावश्यक ऐरे बनाता है\nconst ids = users.map(user => {\n  sendEmail(user.email);\n  return user.id;\n});\n\n// तेज़