Tree Shaking: یہ کیا ہے، مردہ کوڈ ہٹانے کا طریقہ کار اور اوزار

Tree Shaking کیا ہے؟

Tree Shaking ایک کوڈ اصلاحی تکنیک ہے جو حتمی بنڈل سے غیر استعمال شدہ ماڈیولز اور فنکشنز کو خارج کرتی ہے۔ یہ اصطلاح 2015 میں Rollup ٹیم نے متعارف کروائی تھی اور یہ عمل کو استعاراتی طور پر بیان کرتی ہے: انحصار کے درخت کو ہلایا (shake) جاتا ہے اور غیر استعمال شدہ شاخیں گر جاتی ہیں۔ دستی اصلاح کے برعکس، Tree Shaking بلڈ مرحلے پر خود بخود انجام دیا جاتا ہے۔

Tree Shaking صرف ES-ماڈیولز (ECMAScript Modules) کے ساتھ کام کرتا ہے، جہاں انحصار import اور export کے ذریعے جامد طور پر متعین کیا جاتا ہے۔ CommonJS (require/module.exports) Tree Shaking کو سپورٹ نہیں کرتا کیونکہ require متحرک طور پر انجام دیا جاتا ہے — بنڈلر پہلے سے طے نہیں کر سکتا کہ کون سے فنکشنز حقیقت میں استعمال ہوتے ہیں۔ جدید لائبریریاں (Lodash، Moment.js، RxJS) Tree Shaking کو سپورٹ کرنے کے لیے ES ورژن جاری کرتی ہیں۔

Rollup: Tree Shaking کا علمبردار

Rollup پہلا بنڈلر تھا جس نے 2015 میں Tree Shaking کو نافذ کیا۔ Webpack کے برعکس، Rollup شروع سے ES-ماڈیولز کے لیے ڈیزائن کیا گیا تھا اور یہ زیادہ جارحانہ مردہ کوڈ ہٹاتا ہے۔ Rollup نہ صرف انفرادی برآمدات بلکہ پورے ماڈیولز کا تجزیہ کرتا ہے: اگر کسی ماڈیول میں کوئی ضمنی اثر نہیں ہے اور کوئی برآمد استعمال نہیں کی گئی، تو Rollup پورے ماڈیول کو بنڈل سے خارج کر دیتا ہے۔

Rollup خاص طور پر لائبریریوں اور SDKs کے لیے مؤثر ہے جہاں ہر کلو بائٹ اہمیت رکھتا ہے۔ Vue.js فریم ورک اپنے پروڈکشن ورژن کی تعمیر کے لیے Rollup استعمال کرتا ہے۔ React 2020 میں Rollup پر منتقل ہوا۔ ایپلیکیشنز کے لیے، Webpack اپنے زیادہ وسیع پلگ ان ماحولیاتی نظام (Hot Module Replacement، code splitting، CSS modules) کی وجہ سے زیادہ عام طور پر استعمال ہوتا ہے، لیکن لائبریریاں بناتے وقت زیادہ سے زیادہ Tree Shaking کے لیے، Rollup صنعت کا معیار بنا ہوا ہے۔

Tree Shaking سے بچت کا انحصار پروجیکٹ کے فن تعمیر پر بہت زیادہ ہے۔ Ant Design لائبریری استعمال کرنے والی React ایپلیکیشن میں، Tree Shaking UI اجزاء کے 70% تک کوڈ کو ہٹا سکتا ہے۔ ایسے پروجیکٹ میں جہاں تمام import مخصوص اور ہدف شدہ ہوں، بچت 5–15% ہوگی۔ Webpack تحقیق کے مطابق، اوسط بچت بنڈل سائز کا 30–40% ہے۔

مردہ کوڈ کیا ہے

Tree Shaking کیسے کام کرتا ہے: ماڈیولز کا جامد تجزیہ

Tree Shaking کا طریقہ کار ایک انحصاری گراف پر مبنی ہے جسے بنڈلر پروجیکٹ میں تمام import/export بیانات سے بناتا ہے۔ پہلے مرحلے میں، بنڈلر اندراج نقطہ (entry point) سے تمام فائلوں کا سفر کرتا ہے اور ماڈیولز کا درخت جمع کرتا ہے۔ دوسرے مرحلے میں، یہ تجزیہ کرتا ہے کہ ہر ماڈیول سے کون سی برآمدات حقیقت میں دوسرے ماڈیولز میں درآمد کی گئی ہیں۔

ہر ماڈیول کے لیے، Webpack یا Rollup برآمدات کو استعمال شدہ یا غیر استعمال شدہ کے طور پر نشان زد کرتا ہے۔ غیر استعمال شدہ برآمدات بنڈل سے خارج کر دی جاتی ہیں۔ تاہم، ماڈیول خود بنڈل میں باقی رہتا ہے اگر اس کی کم از کم ایک برآمد استعمال ہو۔ ماڈیول کو صرف sideEffects جھنڈے کے ذریعے یا اگر ماڈیول میں کوئی ضمنی اثر نہ ہو تو مکمل طور پر خارج کیا جا سکتا ہے۔

مثال: Tree Shaking سے پہلے اور بعد

// utils.js — فنکشنز والا ماڈیول
export function formatDate(date) {
  return date.toISOString().slice(0, 10);
}

export function formatCurrency(amount) {
  return "$" + amount.toFixed(2);
}

export function slugify(text) {
  return text.toLowerCase().replace(/\s+/g, "-");
}

// app.js — اندراج نقطہ
import { formatDate } from "./utils";

const today = formatDate(new Date());
console.log(today);

// Tree Shaking کے بعد — بنڈل میں صرف formatDate
function formatDate(date) {
  return date.toISOString().slice(0, 10);
}
const today = formatDate(new Date());
console.log(today);

Tree Shaking نے app.js میں درآمد نہ ہونے کی وجہ سے formatCurrency اور slugify کو حتمی بنڈل سے خارج کر دیا۔ utils.js ماڈیول کا سائز 3 فنکشنز سے کم ہو کر 1 رہ گیا۔ اگر utils.js میں ضمنی اثرات ہوں (مثال کے طور پر، عالمی ابتدائیہ)، Tree Shaking غیر استعمال شدہ برآمدات کو بھی نہیں ہٹا سکتا۔

Webpack میں Tree Shaking: ترتیب اور اصلاح

Webpack پروڈکشن موڈ میں TerserPlugin کے ذریعے بلٹ ان Tree Shaking سپورٹ شامل کرتا ہے۔ Tree Shaking کو فعال کرنے کے لیے، دو شرائط کافی ہیں: mode کو production پر سیٹ کیا گیا ہو (mode: "production") اور ماڈیولز ES نحو (import/export) استعمال کریں۔ Webpack خود بخود غیر استعمال شدہ برآمدات کو نشان زد کرتا ہے اور ہٹانے کے لیے Terser کو بھیجتا ہے۔

optimization.webpack.config.js میں اضافی usedExports: true ترتیب ایک ماڈیول کے اندر برآمدات کے استعمال کا تفصیلی تجزیہ فعال کرتی ہے۔ یہ اختیار طے کرتا ہے کہ کون سی برآمدات حقیقت میں استعمال ہوتی ہیں اور کون سی صرف فراہم کی گئی ہیں (provided)۔ usedExports اور Terser کا امتزاج زیادہ سے زیادہ مردہ کوڈ ہٹانے کی کارکردگی دیتا ہے۔

Tree Shaking کے لیے Webpack ترتیب

// webpack.config.js — Tree Shaking ترتیب
module.exports = {
  mode: "production",
  entry: "./src/app.js",
  output: {
    filename: "bundle.js",
  },
  optimization: {
    usedExports: true,
    minimize: true,
    concatenateModules: true,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules\/(?!(my-lib)\/).*/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              ["@babel/preset-env", { modules: false }],
            ],
          },
        },
      },
    ],
  },
};

اہم پیرامیٹر @babel/preset-env میں modules: false ہے۔ ڈیفالٹ طور پر، Babel ES-ماڈیولز کو CommonJS میں تبدیل کرتا ہے، جو Tree Shaking کو ختم کر دیتا ہے۔ modules: false Babel کو import/export تبدیل کرنے سے روکتا ہے، Webpack کے لیے ES نحو کو محفوظ رکھتا ہے۔ concatenateModules اضافی طور پر ماڈیولز کو مشترکہ دائرہ کار میں ضم کرتا ہے، IIFE کی تعداد کم کرتا ہے اور بنڈل سائز گھٹاتا ہے۔

Side effects کا مسئلہ اور sideEffects جھنڈا

Side effects (ضمنی اثرات) — ماڈیول کے درآمد ہونے پر کیے جانے والے اعمال جو برآمد کردہ اقدار سے متعلق نہیں ہیں: عالمی اسٹائل (import "./styles.css")، polyfills (import "core-js/stable")، عالمی متغیرات کی ابتدا یا Service Worker رجسٹریشن۔ اگر کسی ماڈیول میں ضمنی اثرات ہیں، تو بنڈلر اسے بنڈل سے محفوظ طریقے سے نہیں ہٹا سکتا، چاہے اس کی کوئی بھی برآمد استعمال نہ کی گئی ہو۔

package.json میں sideEffects جھنڈا بنڈلر کو بتاتا ہے کہ پیکیج کے کن ماڈیولز میں کوئی ضمنی اثرات نہیں ہیں۔ ایک پیکیج کے لیے جہاں تمام ماڈیولز خالص ہیں (صرف فنکشن برآمدات)، آپ کو "sideEffects": false بتانا چاہیے۔ CSS یا polyfills والے پیکیج کے لیے — ضمنی اثرات والی فائلوں کے راستوں کی ایک صف: "sideEffects": ["*.css"]۔ اس جھنڈے کے بغیر، Tree Shaking غیر استعمال شدہ فنکشنز کو بھی نہیں ہٹائے گا۔

اپنے کوڈ میں ضمنی اثرات کی نشاندہی کیسے کریں

یہ جاننے کے لیے کہ آیا کسی ماڈیول میں ضمنی اثرات ہیں، یہ سوال پوچھیں: کیا یہ import اقدار برآمد کرنے سے غیر متعلق کوئی اقدامات کرے گا؟ import "./styles.css" DOM میں CSS شامل کرتا ہے — یہ ایک ضمنی اثر ہے۔ import { throttle } from "lodash-es" میں کوئی ضمنی اثرات نہیں ہیں — یہ صرف throttle فنکشن کو دستیاب کرتا ہے۔ Polyfills (import "core-js/stable") میں ضمنی اثرات ہیں — یہ عالمی پروٹوٹائپس میں ترمیم کرتے ہیں۔

اپنے ماڈیولز کے لیے، سفارش کی جاتی ہے: اسٹائل اور polyfills کو علیحدہ اندراج پوائنٹس میں نکالیں، خالص افادیت (بغیر ضمنی اثرات والے فنکشنز) کو ضمنی اثرات والے ماڈیولز (ابتداء، لاگنگ، Service Worker رجسٹریشن) سے الگ کریں۔ اوپری سطح کے پروجیکٹ package.json میں، صرف اس صورت میں "sideEffects": false بتائیں جب تمام ماڈیولز خالص ہوں۔ اگر اسٹائل ہیں، تو عین مطابق "sideEffects": ["*.css"] بتائیں۔

sideEffects ترتیب کی مثال

{
  "name": "my-ui-lib",
  "version": "2.1.0",
  "sideEffects": [
    "*.css",
    "polyfills.js"
  ],
  "module": "dist/index.esm.js",
  "main": "dist/index.cjs.js"
}

"sideEffects": ["*.css", "polyfills.js"] کا مطلب ہے: تمام CSS فائلوں کے ضمنی اثرات ہیں (انہیں نہیں ہٹایا جا سکتا) اور polyfills.js کے بھی ہیں۔ پیکیج کی دیگر تمام JS فائلیں خالص ہیں — انہیں محفوظ طریقے سے shake کیا جا سکتا ہے۔ module فیلڈ پیکیج کے ES ورژن کا راستہ بتاتا ہے جسے بنڈلر Tree Shaking کے لیے CommonJS ورژن (main) کی بجائے استعمال کرے۔

React Native اور Metro میں Tree Shaking

React Native Metro Bundler کے ساتھ Tree Shaking کے ایک محدود ورژن کو سپورٹ کرتا ہے۔ Metro Webpack کی طرح استعمال شدہ برآمدات (usedExports) کا مکمل جامد تجزیہ نہیں کرتا۔ اس کے بجائے، Metro منیفیکیشن کے دوران ماڈیولز کے غیر استعمال شدہ حصوں کو ہٹانے کے لیے Terser پر انحصار کرتا ہے۔ اس نقطہ نظر کی تاثیر Webpack میں مکمل Tree Shaking سے کم ہے۔

React Native پروجیکٹس کی زیادہ سے زیادہ اصلاح کے لیے، سفارش کی جاتی ہے: ES-ماڈیولز والی لائبریریاں استعمال کریں (package.json میں module فیلڈ)، ڈیبگ کوڈ ہٹانے کے لیے babel-plugin-transform-remove-console شامل کریں، اور Terser کے لیے Metro transformer.minifierConfig ترتیب دیں۔ اس کے علاوہ، Ram Bundle (بنڈل کو ماڈیولز میں تقسیم کرنا) غیر استعمال شدہ اسکرینوں کی لوڈنگ کو کم کرتا ہے۔