TypeScript بأقصى طاقته: كيفية تسريع الكود 10 مرات

هل كود TypeScript الخاص بك يعمل ببطء؟ حان الوقت للنظر تحت الغطاء

لقد كتبت كودًا مثاليًا بلغة TypeScript. الأنواع محددة، التجريدات جميلة، والاختبارات خضراء. لكن خادم الإنتاج "يتباطأ"، ومكونات React تعيد الرسم بتأخير. هل هذا مألوف؟ غالبًا ما تكون المشكلة ليست في المنطق، بل في أداء TypeScript الذي لا نلاحظه حتى يصبح الحمل حقيقيًا.

في هذه المقالة، لن نتحدث عن سرعة التجميع - فهذا موضوع لمحادثة منفصلة. سنركز على أداء وقت التشغيل: كيفية تنميط الكود الجاهز، والعثور على "الاختناقات"، وتحسين TypeScript بحيث يطير التطبيق. ستتعرف على سبب كون map أسرع بعشر مرات من forEach، وكيف يقتل جامع القمامة (GC) معدل الإطارات في الثانية (FPS)، وما هي أدوات التنميط التي يجب أن تحملها معك.

أدوات تنميط TypeScript: من Chrome إلى Node.js

قبل تحسين أي شيء، عليك أن تفهم أين تضيع أجزاء الألف من الثانية بالضبط. لهذا، هناك ثلاثة طرق رئيسية للتنميط في TypeScript.

1. علامة تبويب الأداء (Performance Tab) في Chrome DevTools

إذا كنت تكتب واجهة أمامية، فإن أفضل صديق لك هو علامة تبويب الأداء (Performance) في Chrome DevTools. سيعرض لك تسجيل الملف الشخصي الصورة الكاملة: أي 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)، ونفذ هذا الكود - وسترى وقت التنفيذ الدقيق، بالإضافة إلى مكدس الاستدعاءات. إذا استغرقت الدالة أكثر من 100 مللي ثانية، فهذا سبب للتفكير في تحسين كود TypeScript.

2. مُنمّط Node.js (--prof و --inspect)

بالنسبة للواجهة الخلفية على Node.js مع TypeScript، استخدم المُنمّط المدمج. قم بتشغيل التطبيق مع العلم --prof:

node --prof dist/server.js\n

بعد انتهاء العمل، يتم إنشاء ملف isolate-*.log. قم بتحويله إلى شكل قابل للقراءة:

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

في الملف، سترى أي الدوال (بما في ذلك تلك من TypeScript المترجمة) تستهلك أكبر قدر من وحدة المعالجة المركزية (CPU). هذه أداة لا غنى عنها لـ تنميط TypeScript في بيئة الإنتاج.

3. مُنمّط V8 CPU عبر Clinic.js

للحصول على تحليل أكثر وضوحًا، استخدم Clinic.js. إنه يرسم مخططات لهب (flame charts) جميلة ويظهر أين "يتباطأ" كود TypeScript.

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

بعد الاختبار، افتح تقرير HTML - سترى أي الدوال تستغرق 90% من الوقت. غالبًا ما تكون هذه أماكن غير متوقعة: على سبيل المثال، الاستدعاءات المتكررة لـ JSON.parse أو الحلقات غير المحسّنة.

أفضل 5 تقنيات لتحسين كود TypeScript

عندما يُظهر المُنمّط "النقاط الساخنة"، حان الوقت لبدء التحسين. إليك خمس طرق مثبتة لتسريع TypeScript، أستخدمها في مشاريعي.

1. تجنب map إذا كنت بحاجة إلى forEach

يبدو الأمر غريبًا، لكن map ينشئ مصفوفة جديدة، حتى لو كنت لا تستخدمها. إذا كنت تحتاج فقط إلى تنفيذ إجراء، استخدم forEach أو for التقليدية.

// بطيء - ينشئ مصفوفة غير ضرورية\nconst ids = users.map(user => {\n  sendEmail(user.email);\n  return user.id;\n});\n\n// سريع