Minification — ما هي، مبادئ التصغير وأدوات الكود

ما هو التصغير (Minification)؟

التصغير — تحويل تلقائي للكود المصدري يزيل جميع الأحرف التي لا تؤثر على تنفيذ البرنامج. تتم إزالة أو تقصير المسافات وعلامات التبويب وأحرف السطر الجديد والتعليقات والأقواس الزائدة. يُطبق التصغير على JavaScript و CSS و HTML، وفي حالات أقل، على تكوينات JSON قبل النشر في الإنتاج.

الهدف الرئيسي من التصغير هو تقليل حجم الملفات المنقولة عبر الشبكة. ملف JavaScript بحجم 300 كيلوبايت بعد التصغير يمكن أن يشغل 120–150 كيلوبايت، مما يقلل وقت التحميل بمقدار 200–400 مللي ثانية على اتصال 3G بطيء. توصي Google PageSpeed Insights و Lighthouse مباشرة بتصغير الكود: فهو أحد معايير تقييم الأداء و Core Web Vitals.

التصغير جزء لا يتجزأ من خط أنابيب البناء. بعد التحويل البرمجي باستخدام TypeScript أو Babel، يمر الكود عبر Tree Shaking (إزالة الوظائف غير المستخدمة)، ثم عبر أداة التصغير، وبعدها فقط يتم تجميعه في الحزمة النهائية. في أدوات التجميع الحديثة (Webpack، Rollup، esbuild)، يتم التصغير بواسطة إضافات في المرحلة النهائية من البناء.

ما يزيله التصغير

كيف يعمل التصغير: التقنيات الرئيسية

إزالة المسافات وفواصل الأسطر — أبسط وأوضح تقنية. يمر محلل أداة التصغير عبر AST (شجرة البنية المجردة) ويزيل جميع أحرف المسافات البيضاء التي ليست جزءًا من النصوص الحرفية. تقوم معظم أدوات التصغير أيضًا بدمج العوامل في سطر واحد، مما يوفر توفيرًا إضافيًا عند الضغط باستخدام GZip أو Brotli.

استبدال أسماء المتغيرات (mangling) — تقنية أكثر عدوانية. يتم إعادة تسمية المتغيرات المحلية ومعلمات الدوال إلى معرفات من حرف واحد: a، b، c. يقلل هذا الحجم بنسبة 15–30% إضافية. تدعم Terser و esbuild خاصية mangling مع خيار الاحتفاظ بأسماء معينة (مثل API العامة عبر mangle.props.reserved).

إزالة الكود الميت

إزالة الكود الميت (DCE) — تزيل فروع الكود التي لا يتم تنفيذها أبدًا. يحلل أداة التصغير الشروط التي تكون دائمًا خاطئة (if (false)) ويزيل الكتل المقابلة. يتم إجراء التحليل الأكثر تقدمًا في مرحلة Tree Shaking قبل التصغير، لكن DCE على مستوى أداة التصغير يكتشف الحالات المحلية للكود الميت غير المكتشفة على مستوى الوحدات.

تشويه أسماء المتغيرات (Mangling)

Mangling — إعادة تسمية المتغيرات المحلية ومعلمات الدوال إلى معرفات قصيرة (حرف أو حرفان). تقوم Terser بتنفيذ mangling بناءً على النطاق: المتغيرات داخل دالة واحدة تحصل على أسماء قصيرة فريدة لا تتعارض مع النطاقات الخارجية. يتيح خيار mangle.reserved الاحتفاظ بأسماء معينة — على سبيل المثال، APIs العامة للمكتبات.

لا يؤثر Mangling على المتغيرات العامة أو خصائص الكائنات (ما لم يتم تمكين mangle.props) أو أسماء الفئات المستخدمة مع new. لحماية API العامة للمكتبة من mangling، يجب استخدام mangle.props.reserved مع التعبيرات النمطية: reserved: [«_prop», /^private_/]. بدون هذا الإعداد، يمكن أن يكسر mangling المكتبة إذا كان الكود الخارجي يصل إلى خصائص الكائن بالاسم.

مثال: قبل وبعد التصغير

// الكود المصدري
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.

أدوات التصغير: Terser، esbuild، UglifyJS

Terser — أداة التصغير القياسية لـ JavaScript في نظام Webpack ومعظم أدوات التجميع الحديثة. تدعم Terser صيغة ES6+ (دوال السهم، async/await، spread)، و mangling مع حماية API العامة، و source maps، والتنفيذ المتوازي باستخدام عدد وحدات المعالجة المركزية. منذ الإصدار 5.16، تتضمن Terser تحسينات لـ TypeScript — إزالة imports من النوع فقط والواجهات.

esbuild — أداة تصغير مكتوبة بلغة Go، مضمنة في أداة التجميع التي تحمل الاسم نفسه. تنفذ esbuild التصغير أسرع 10–100 مرة من Terser بفضل الكود الأصلي والمعالجة المتوازية. ومع ذلك، تدعم esbuild تحسينات أقل: فهي لا تقوم بـ mangling مع الحفاظ على الخصائص، ولا تزيل imports من النوع فقط، وتحسّن التعبيرات بشكل أقل عدوانية.

تكوين Terser في Webpack

// 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 يمكّن تعدد الخيوط بعدد وحدات المعالجة المركزية.

تصغير CSS عبر esbuild

// esbuild: أمر CLI لتصغير JS و CSS
// 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));

API esbuild تقبل تكوينًا من سطر واحد. minify: true يمكّن تصغير كل من JS و CSS. sourcemap: true ينشئ خرائط كود للتصحيح. target يحدد الحد الأدنى لمستوى ES — تقوم esbuild تلقائيًا بتحويل الكود الحديث للإصدار المحدد. esbuild فعال بشكل خاص للمشاريع حيث وقت البناء بالغ الأهمية: خطوط أنابيب CI/CD، واستبدال الوحدات الساخن، والنماذج الأولية السريعة.

التصغير في React Native و WebView

React Native يستخدم Metro Bundler — أداة التجميع الخاصة به والتي تتضمن تصغيرًا قائمًا على Terser. في وضع الإنتاج، يطبق Metro تلقائيًا التصغير على حزمة JavaScript الخاصة بالتطبيق. يتم تعيين تكوين التصغير في Metro من خلال metro.config.js في قسم transformer.minifierConfig. بالإضافة إلى ذلك، يمكن تعطيل inline-require لتقليل حجم الحزمة على iOS.

WebView في التطبيقات المحمولة يستفيد أيضًا من التصغير. يجب تصغير HTML و CSS و JS المحملة في WebView قبل تضمينها في التطبيق أو تحميلها من الخادم. بالنسبة للموارد المحلية (Assets)، التصغير مهم بشكل خاص — حجم APK/IPA يؤثر مباشرة على تحويل التثبيتات في متاجر التطبيقات.

Hermes والتصغير

Hermes — محرك JavaScript لـ React Native تم تطويره بواسطة Facebook. يقوم Hermes بتجميع Ahead-of-Time (AOT) للبايت كود، مما يقلل وقت بدء التطبيق بنسبة 30–50%. بالنسبة لـ Hermes، يتم تصغير حزمة JavaScript قبل التحويل البرمجي إلى بايت كود باستخدام Terser. يدعم Hermes تنسيقه الخاص HBC (Hermes Bytecode)، لكن مرحلة تصغير JS تظل ضرورية.

تكوين Metro لـ React Native

// 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 يزيل جميع console.log من حزمة الإنتاج الخاصة بـ React Native. تمنع المعلمة mangle.safari10 إعادة تسمية المعرفات التي تعطل Safari 10 (iOS 10). هذا مهم بشكل خاص للتطبيقات التي تدعم الأجهزة القديمة iPad و iPhone 5s مع iOS 10/11.

الفرق بين التصغير والضغط

التصغير والضغط (gzip، brotli) — مرحلتان مختلفتان من التحسين. يعمل التصغير على مستوى الكود المصدري ويقلل عدد الأحرف قبل الإرسال إلى الخادم. يعمل الضغط على مستوى بروتوكول النقل ويطبقه الخادم (nginx، Apache، CDN) عند نقل الملف إلى العميل. يقلل التصغير الحجم قبل الضغط، مما يعطي تأثيرًا مزدوجًا: gzip يضغط بيانات تم تقليلها بالفعل.

ملف JavaScript بحجم 300 كيلوبايت بعد التصغير — 120 كيلوبايت، بعد gzip — 35–40 كيلوبايت. إذا تم تطبيق gzip فقط على الملف غير المصغر، سيكون الحجم 55–70 كيلوبايت. التصغير + gzip يعطي نتيجة أفضل بنسبة 30–40% من gzip وحده. Brotli (المستوى 6) يضغط أكثر بنسبة 15–20% بكفاءة أكبر من gzip بعد التصغير.