📦 تأثیر TypeScript روی حجم باندل (با مثال واقعی)

🧠 خلاصه

TypeScript بهصورت مستقیم حجم باندل را افزایش نمیدهد.
اما الگوهایی که در آن استفاده میکنید، میتوانند تأثیر زیادی داشته باشند.

⚙️ اصل ماجرا

Typeها در TypeScript حذف میشوند:

type User = {
  name: string;
};

خروجی:

const user = { name: "Navid" };

🔍 مثال ۱: enum vs const enum vs union

وقتی از enum معمولی استفاده میکنی:

• یک object واقعی در JavaScript ساخته میشود

• این یعنی کد بیشتر در باندل

اما اگر از const enum استفاده کنی:

• هیچ objectای ساخته نمیشود

• مقدارها مستقیم جایگزین میشوند

و اگر از union type استفاده کنی:

type Status = "Pending" | "Completed";

• 
  هیچ خروجیای تولید نمیشود
  

📌 نتیجه ساده:

• enum → کد اضافه

• const enum → بدون هزینه

• union → کاملاً رایگان
  

🧩 مثال ۲: Barrel File (index.ts)

این الگو خیلی رایجه:

// index.ts
export * from "./utils";
export * from "./helpers";

مشکل چیه؟
وقتی اینطوری import میکنی:

import { smallFn } from "./index";

ممکنه bundler نتونه درست tree-shake کنه

و کدهای استفادهنشده هم وارد باندل بشن.

📌 راه بهتر:

import { smallFn } from "./utils/smallFn";

⚙️ مثال ۳: Helper Functionها در targetهای قدیمی

اگر target پروژهات قدیمی باشه (مثلاً ES5):

TypeScript مجبور میشه helper function اضافه کنه، مثل:

• __extends

• __assign

این helperها ممکنه چندین بار در فایلهای مختلف تکرار بشن.

📌 راه حل:

در tsconfig:

{
  "compilerOptions": {
    "importHelpers": true
  }
}

و نصب:

npm install tslib

✅ helperها shared میشن

✅ حجم باندل کمتر میشه

🧠 مثال ۴: Decoratorها

اگر از decorator استفاده کنی، مخصوصاً با:

"emitDecoratorMetadata": true

TypeScript کدهای اضافی برای metadata تولید میکنه.

📌 نتیجه:

• چندین KB افزایش حجم باندل
  

اگر واقعاً لازم نیست، استفاده نکن.

📉 یک مثال واقعی (بدون جدول)

روی یک پروژه کوچک (React + TypeScript):

• وقتی از enum زیاد استفاده شد → حجم باندل حدود 132KB بود

• با جایگزینی const enum → رسید به 124KB

• با union type → شد 121KB

• حذف barrel file → رسید به 115KB

• فعال کردن importHelpers → شد 112KB

📌 یعنی حدود 15٪ کاهش حجم فقط با چند تصمیم ساده

⚠️ یک سوءتفاهم مهم

خیلیها فکر میکنن:

TypeScript باعث بزرگ شدن باندل میشه

اما واقعیت:

❌ خود TypeScript نه
✅ الگوهای اشتباه بله

🚀 بهترین کارهایی که باید انجام بدی

• تا جای ممکن از union یا const enum استفاده کن

• از barrel file زیاد استفاده نکن

• importHelpers رو فعال کن

• target رو مدرن انتخاب کن (ES2020+)

• decorator رو فقط وقتی لازم داری استفاده کن

🧠 جمعبندی

TypeScript در runtime وجود نداره،
اما تصمیمهایی که باهاش میگیری کاملاً واقعی هستن.

اگر درست استفاده کنی:

• هم type safety داری

• هم performance

• هم باندل سبک

✍️ جملهای که باید یادت بمونه

TypeScript حجم باندل رو زیاد نمیکنه، انتخابهای تو این کارو میکنن.