TypeScript अनुप्रयोगों के प्रदर्शन का अनुकूलन: सुझाव और उदाहरण

शुरुआती लोगों के लिए ऑनलाइन Python प्रशिक्षक

Python आसानी से सीखें बिना सिद्धांत के बोझ के। स्वचालित जांच के साथ व्यावहारिक कार्य हल करें और ब्राउज़र में सीधे कोड लिखें।

पाठ्यक्रम शुरू करें

परिचय: TypeScript का प्रदर्शन क्यों महत्वपूर्ण है?

TypeScript बड़े वेब अनुप्रयोगों के विकास के लिए एक वास्तविक मानक बन गया है। यह JavaScript में स्थिर टाइपिंग जोड़ता है, जो विकास के चरण में कई त्रुटियों से बचने में मदद करता है। हालांकि, यदि प्रदर्शन पर ध्यान नहीं दिया जाता है, तो TypeScript अनुप्रयोग शुद्ध JavaScript पर इसके समकक्ष की तुलना में धीमा चल सकता है। ऐसा इसलिए है क्योंकि कंपाइलर अतिरिक्त जाँचें जोड़ता है, और जटिल प्रकार बिल्ड और कोड निष्पादन दोनों को धीमा कर सकते हैं।

इस लेख में, हम TypeScript अनुप्रयोगों को अनुकूलित करने के मुख्य तरीकों पर चर्चा करेंगे: tsconfig.json को कॉन्फ़िगर करने से लेकर कुशल कोड लिखने तक। इन अनुशंसाओं का पालन करके, आप विकास प्रक्रिया और अंतिम उत्पाद दोनों को गति दे सकते हैं।



1. TypeScript कॉन्फ़िगरेशन का अनुकूलन

सबसे पहले, सही tsconfig.json फ़ाइल सेट करना है। गलत या अनावश्यक विकल्प संकलन को काफी धीमा कर सकते हैं।



1.1. प्रोडक्शन में अनावश्यक जाँचें बंद करें

प्रोडक्शन बिल्ड के लिए, उन विकल्पों को अक्षम करने की अनुशंसा की जाती है जो कोड निष्पादन को प्रभावित नहीं करते हैं लेकिन संकलन को धीमा करते हैं:

{  "compilerOptions": {    "strict": true,         // केवल विकास के लिए शामिल करें    "noUnusedLocals": false,    "noUnusedParameters": false,    "skipLibCheck": true    // node_modules में प्रकार जाँच छोड़ें  }}

skipLibCheck विकल्प विशेष रूप से उपयोगी है - यह कंपाइलर को लाइब्रेरी में प्रकार जाँच को अनदेखा करने के लिए मजबूर करता है, जो बिल्ड को 20-30% तक तेज कर सकता है।



1.2. पुनरावृत्त बिल्ड को तेज करने के लिए incremental का उपयोग करें

इंक्रीमेंटल कंपाइलेशन चालू करें। TypeScript पिछले बिल्ड के बारे में जानकारी सहेजेगा और केवल बदली गई फ़ाइलों को फिर से कंपाइल करेगा:

{  "compilerOptions": {    "incremental": true,    "tsBuildInfoFile": ".tsbuildinfo"  }}

यह विशेष रूप से बड़ी परियोजनाओं के लिए प्रासंगिक है, जहां पूर्ण पुनर्संकलन में मिनट लग सकते हैं।



1.3. target और module सेट करें

target को आधुनिक मानक (जैसे, ES2020 या ESNext) पर सेट करें। यह TypeScript को छोटा और तेज़ कोड उत्पन्न करने की अनुमति देगा, क्योंकि पुरानी सुविधाओं का अनुकरण करने की आवश्यकता नहीं होगी:

{  "compilerOptions": {    "target": "ES2020",    "module": "ESNext"  }}


2. प्रकार और डेटा संरचनाओं का अनुकूलन

जटिल या गलत तरीके से डिज़ाइन किए गए प्रकार संकलन और कोड निष्पादन दोनों को धीमा कर सकते हैं। आइए मुख्य तकनीकों पर विचार करें।



2.1. अनावश्यक union-प्रकारों से बचें

union-प्रकार में जितने अधिक विकल्प होंगे, प्रकार जाँच उतनी ही धीमी होगी। उदाहरण के लिए, इसके बजाय:

type Status = 'loading' | 'success' | 'error' | 'idle' | 'pending' | 'canceled';

बेहतर होगा कि तर्क के अनुसार उप-प्रकारों में विभाजित करें:

type LoadingStatus = 'loading' | 'idle';type ResultStatus = 'success' | 'error' | 'pending' | 'canceled';type Status = LoadingStatus | ResultStatus;

यह न केवल संकलन को गति देता है, बल्कि कोड को अधिक पठनीय भी बनाता है।



2.2. ऑब्जेक्ट के लिए type के बजाय interface का उपयोग करें

हालांकि type और interface काफी हद तक विनिमेय हैं, interface प्रकार जाँच में तेज़ी से काम करता है, विशेष रूप से जटिल पदानुक्रमों में। इसके अलावा, interface इनहेरिटेंस को बेहतर समर्थन देता है:

// तेज़interface User {  id: number;  name: string;}

// धीमाtype User = { id: number; name: string;};


2.3. प्रकारों की गहरी नेस्टिंग से बचें

गहरे रिकर्सिव प्रकार (जैसे, JSON के साथ काम करने के लिए) कंपाइलर को काफी धीमा कर सकते हैं। मैन्युअल विवरण के बजाय Partial, Pick या Omit जैसी उपयोगिताओं का उपयोग करें:



                
                

ब्लॉग

पुस्तक अनुशंसाएँ