Minification — یہ کیا ہے، منیفکیشن کے اصول اور کوڈ کے اوزار

Minification کیا ہے؟

Minification سورس کوڈ کی ایک خودکار تبدیلی ہے جو پروگرام کے عمل درآمد کو متاثر نہ کرنے والے تمام حروف کو ہٹا دیتی ہے۔ خالی جگہیں، ٹیبز، نئی سطر کے حروف، تبصرے اور اضافی قوسین ہٹا دیے جاتے ہیں یا مختصر کر دیے جاتے ہیں۔ Minification پروڈکشن میں تعیناتی سے پہلے JavaScript، CSS، HTML اور شاذ و نادر ہی JSON کنفیگریشنز پر لاگو کیا جاتا ہے۔

Minification کا بنیادی مقصد نیٹ ورک پر منتقل ہونے والی فائلوں کے سائز کو کم کرنا ہے۔ 300 KB کی JavaScript فائل minification کے بعد 120–150 KB رہ سکتی ہے، جو سست 3G کنکشن پر لوڈنگ کا وقت 200–400 ms کم کرتی ہے۔ Google PageSpeed Insights اور Lighthouse براہ راست کوڈ کو منیفائی کرنے کی سفارش کرتے ہیں: یہ کارکردگی کی تشخیص اور Core Web Vitals کے معیار میں سے ایک ہے۔

Minification بلڈ پائپ لائن کا ایک لازمی حصہ ہے۔ TypeScript یا Babel کے ساتھ ٹرانسپائل کرنے کے بعد، کوڈ Tree Shaking (غیر استعمال شدہ فنکشنز کو ہٹانا) سے گزرتا ہے، پھر منیفائر سے، اور اس کے بعد ہی حتمی بنڈل میں جمع ہوتا ہے۔ جدید بنڈلرز (Webpack, Rollup, esbuild) میں، minification بلڈ کے آخری مرحلے میں پلگ انز کے ذریعے کیا جاتا ہے۔

Minification کیا ہٹاتا ہے

Minification کیسے کام کرتا ہے: اہم تکنیکیں

خالی جگہوں اور سطر کے وقفوں کو ہٹانا سب سے آسان اور واضح تکنیک ہے۔ منیفائر کا پارسر AST (Abstract Syntax Tree) کو عبور کرتا ہے اور تمام وائٹ اسپیس حروف کو ہٹا دیتا ہے جو سٹرنگ لٹرلز کا حصہ نہیں ہیں۔ زیادہ تر منیفائر اضافی طور پر آپریٹرز کو ایک سطر میں یکجا کرتے ہیں، جو GZip یا Brotli کے ساتھ کمپریس کرتے وقت اضافی بچت فراہم کرتا ہے۔

متغیر کے ناموں کی تبدیلی (mangling) ایک زیادہ جارحانہ تکنیک ہے۔ مقامی متغیرات اور فنکشن پیرامیٹرز کو ایک حرف والے شناخت کنندگان (a, b, c) میں تبدیل کر دیا جاتا ہے۔ یہ سائز کو مزید 15–30% کم کرتا ہے۔ Terser اور esbuild بعض ناموں کو محفوظ رکھنے کے اختیار کے ساتھ mangling کو سپورٹ کرتے ہیں (مثال کے طور پر، mangle.props.reserved کے ذریعے عوامی API)۔

مردہ کوڈ کا خاتمہ

مردہ کوڈ کا خاتمہ (DCE) کوڈ کی ان شاخوں کو ہٹاتا ہے جو کبھی عمل میں نہیں آتیں۔ منیفائر ان شرائط کا تجزیہ کرتا ہے جو ہمیشہ غلط ہوتی ہیں (if (false)) اور متعلقہ بلاکس کو ہٹا دیتا ہے۔ مزید جدید تجزیہ minification سے پہلے Tree Shaking مرحلے میں کیا جاتا ہے، لیکن منیفائر کی سطح پر DCE ماڈیول کی سطح پر نہ پائے جانے والے مردہ کوڈ کے مقامی معاملات کو پکڑ لیتا ہے۔

متغیر کے نام کا Mangling

Mangling مقامی متغیرات اور فنکشن پیرامیٹرز کو مختصر شناخت کنندگان (ایک یا دو حروف) میں تبدیل کرتا ہے۔ Terser دائرہ کار کی بنیاد پر mangling انجام دیتا ہے: ایک فنکشن کے اندر متغیرات منفرد مختصر نام حاصل کرتے ہیں جو بیرونی دائرہ کار سے متصادم نہیں ہوتے۔ mangle.reserved آپشن بعض ناموں کو محفوظ رکھنے کی اجازت دیتا ہے — مثال کے طور پر، عوامی لائبریری APIs۔

Mangling عالمی متغیرات، آبجیکٹ کی خصوصیات (جب تک mangle.props فعال نہ ہو) یا new کے ساتھ استعمال ہونے والے کلاس کے ناموں کو متاثر نہیں کرتا۔ لائبریری کے عوامی API کو mangling سے بچانے کے لیے، ریگولر ایکسپریشنز کے ساتھ mangle.props.reserved استعمال کریں: reserved: ["_prop", /^private_/]۔ اس ترتیب کے بغیر، اگر بیرونی کوڈ نام سے آبجیکٹ کی خصوصیات تک رسائی حاصل کرتا ہے تو mangling لائبریری کو توڑ سکتا ہے۔

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

// سورس کوڈ
function calculateTotal(price, tax) {
    var result = price + (price * tax);
    // کل رقم لوٹائیں
    return result;
}

var total = calculateTotal(100, 0.2);
console.log(total);

// Terser منیفکیشن کے بعد
function calculateTotal(a, b){return a + a * b}
var c = calculateTotal(100, .2);
console.log(c);

دوسری مثال میں، Terser نے تبصرے، خالی جگہیں اور سطر کے وقفے ہٹا دیے، price کو a میں، tax کو b میں، result کو c میں تبدیل کر دیا۔ سائز 197 حروف سے کم ہو کر 79 ہو گیا — 60% کی بچت۔ اس کے ساتھ ساتھ، کوڈ کی فعالیت مکمل طور پر محفوظ ہے: calculateTotal(100, 0.2) 120 لوٹاتا ہے۔

Minification کے اوزار: Terser, esbuild, UglifyJS

Terser Webpack ایکو سسٹم اور زیادہ تر جدید بنڈلرز میں معیاری JavaScript منیفائر ہے۔ Terser ES6+ نحو (ایرو فنکشنز، async/await، spread)، عوامی API تحفظ کے ساتھ mangling، سورس میپس اور CPU کی تعداد کے ساتھ متوازی عملدرآمد کو سپورٹ کرتا ہے۔ ورژن 5.16 سے، Terser میں TypeScript کی اصلاح شامل ہے — صرف ٹائپ امپورٹس اور انٹرفیس کو ہٹانا۔

esbuild Go میں لکھا ہوا ایک منیفائر ہے، جو اسی نام کے بنڈلر میں شامل ہے۔ esbuild مقامی کوڈ اور متوازی پروسیسنگ کی وجہ سے Terser سے 10–100 گنا تیزی سے minification انجام دیتا ہے۔ تاہم، esbuild کم اصلاحات کو سپورٹ کرتا ہے: یہ خصوصیت کے تحفظ کے ساتھ mangling نہیں کرتا، صرف ٹائپ امپورٹس کو نہیں ہٹاتا اور اظہار کو کم جارحانہ طور پر بہتر بناتا ہے۔

Webpack میں Terser کنفیگریشن

// webpack.config.js — TerserPlugin کنفیگریشن
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true,
            drop_debugger: true,
            dead_code: true,
          },
          mangle: {
            reserved: ["React", "Component"],
          },
          output: {
            comments: false,
          },
        },
        parallel: true,
      }),
    ],
  },
};

TerserPlugin کنفیگریشن میں تین اہم بلاکس شامل ہیں۔ compress اظہار کی اصلاح کو سنبھالتا ہے: drop_console console.log کو ہٹاتا ہے، drop_debugger debugger کو ہٹاتا ہے، dead_code ناقابل رسائی شاخوں کو ہٹاتا ہے۔ mangle عوامی ناموں کے تحفظ کے لیے reserved کے ساتھ متغیر کی تبدیلی کو کنٹرول کرتا ہے۔ parallel CPU کی تعداد کے ساتھ ملٹی تھریڈنگ کو فعال کرتا ہے۔

esbuild کے ساتھ CSS Minification

// esbuild: JS اور CSS منیفکیشن کے لیے CLI کمانڈ
// esbuild app.js --bundle --minify --outfile=dist/app.min.js
// esbuild app.css --bundle --minify --outfile=dist/app.min.css

const esbuild = require("esbuild");

esbuild.build({
  entryPoints: ["src/app.js", "src/styles.css"],
  bundle: true,
  minify: true,
  sourcemap: true,
  target: ["es2015"],
  outdir: "dist",
}).catch(() => process.exit(1));

esbuild API ایک لائن کی کنفیگریشن قبول کرتا ہے۔ minify: true JS اور CSS دونوں کی minification کو فعال کرتا ہے۔ sourcemap: true ڈیبگنگ کے لیے کوڈ میپس بناتا ہے۔ target کم از کم ES لیول کی وضاحت کرتا ہے — esbuild منتخب کردہ ورژن کے لیے خود بخود جدید کوڈ ٹرانسپائل کرتا ہے۔ esbuild خاص طور پر ان منصوبوں کے لیے موثر ہے جہاں بلڈ کا وقت اہم ہے: CI/CD پائپ لائنز، Hot Module Replacement اور تیز پروٹوٹائپس۔

React Native اور WebView میں Minification

React Native Metro Bundler استعمال کرتا ہے — اپنا بنڈلر جو Terser پر مبنی minification شامل کرتا ہے۔ پروڈکشن موڈ میں، Metro خود بخود ایپلیکیشن کے JavaScript بنڈل پر minification لاگو کرتا ہے۔ Metro میں minification کنفیگریشن transformer.minifierConfig سیکشن میں metro.config.js کے ذریعے سیٹ کی جاتی ہے۔ مزید برآں، iOS پر بنڈل کا سائز کم کرنے کے لیے inline-require کو غیر فعال کیا جا سکتا ہے۔

موبائل ایپلیکیشنز میں WebView بھی minification سے فائدہ اٹھاتا ہے۔ WebView میں لوڈ ہونے والے HTML، CSS اور JS کو ایپلیکیشن میں ایمبیڈ کرنے یا سرور سے لوڈ کرنے سے پہلے منیفائی کیا جانا چاہیے۔ مقامی وسائل (Assets) کے لیے، minification خاص طور پر اہم ہے — APK/IPA کا سائز ایپ اسٹورز میں تنصیب کی تبدیلی کو براہ راست متاثر کرتا ہے۔

Hermes اور Minification

Hermes Facebook کی تیار کردہ React Native کے لیے ایک JavaScript انجن ہے۔ Hermes Ahead-of-Time (AOT) بائٹ کوڈ کمپائلیشن انجام دیتا ہے، جو ایپلیکیشن شروع ہونے کے وقت کو 30–50% کم کرتا ہے۔ Hermes کے لیے، JavaScript بنڈل minification Terser کا استعمال کرتے ہوئے بائٹ کوڈ کمپائلیشن سے پہلے کیا جاتا ہے۔ Hermes اپنے HBC (Hermes Bytecode) فارمیٹ کو سپورٹ کرتا ہے، لیکن JS minification مرحلہ اب بھی ضروری ہے۔

React Native کے لیے Metro کنفیگریشن

// metro.config.js — منیفکیشن کنفیگریشن
const defaultConfig = require("metro-config/src/defaults");

module.exports = require("metro-config").mergeConfig(
  defaultConfig,
  {
    transformer: {
      minifierConfig: {
        compress: {
          drop_console: true,
        },
        mangle: {
          safari10: true,
        },
      },
    },
  }
);

Metro minifierConfig.drop_console کے ساتھ React Native پروڈکشن بنڈل سے تمام console.log کو ہٹاتا ہے۔ mangle.safari10 پیرامیٹر Safari 10 (iOS 10) کو توڑنے والے شناخت کنندگان کی تبدیلی کو روکتا ہے۔ یہ ان ایپلیکیشنز کے لیے خاص طور پر اہم ہے جو iOS 10/11 والے پرانے iPad اور iPhone 5s آلات کو سپورٹ کرتی ہیں۔

Minification اور کمپریشن میں فرق

Minification اور کمپریشن (gzip, brotli) اصلاح کے مختلف مراحل ہیں۔ Minification سورس کوڈ کی سطح پر کام کرتا ہے اور سرور کو بھیجنے سے پہلے حروف کی تعداد کم کرتا ہے۔ کمپریشن ٹرانسپورٹ پروٹوکول کی سطح پر کام کرتا ہے اور کلائنٹ کو فائل منتقل کرتے وقت سرور (nginx, Apache, CDN) کے ذریعے لاگو کیا جاتا ہے۔ Minification کمپریشن سے پہلے سائز کم کرتا ہے، جو دوہرا اثر دیتا ہے: gzip پہلے سے کم کردہ ڈیٹا کو کمپریس کرتا ہے۔

Minification کے بعد 300 KB کی JavaScript فائل — 120 KB، gzip کے بعد — 35–40 KB۔ اگر صرف gzip کو غیر منیفائیڈ فائل پر لاگو کیا جائے تو سائز 55–70 KB ہوگا۔ Minification + gzip صرف gzip سے 30–40% بہتر نتیجہ دیتا ہے۔ Brotli (درجہ 6) minification کے بعد gzip سے اضافی 15–20% زیادہ موثر طریقے سے کمپریس کرتا ہے۔