Minification — چیست، اصول مینی‌فیکیشن و ابزارهای کد

Minification چیست؟

Minification (مینی‌فیکیشن) — تبدیل خودکار کد منبع که طی آن همه کاراکترهای مؤثر بر اجرای برنامه حذف می‌شوند. فاصله‌ها، تب‌ها، کاراکترهای خط جدید، کامنت‌ها و پرانتزهای اضافی حذف یا کوتاه می‌شوند. Minification برای JavaScript، CSS، HTML و به ندرت برای تنظیمات JSON قبل از استقرار در محیط تولید اعمال می‌شود.

هدف اصلی مینی‌فیکیشن کاهش اندازه فایل‌های ارسالی از طریق شبکه است. یک فایل JavaScript با اندازه 300 کیلوبایت پس از مینی‌فیکیشن می‌تواند 120–150 کیلوبایت حجم داشته باشد که زمان بارگذاری را در اتصال 3G کند 200–400 میلی‌ثانیه کاهش می‌دهد. Google PageSpeed Insights و Lighthouse مستقیماً مینی‌فیکیشن کد را توصیه می‌کنند: این یکی از معیارهای ارزیابی عملکرد و Core Web Vitals است.

Minification بخش جدایی‌ناپذیر خط لوله ساخت (build pipeline) است. پس از ترنسپایل TypeScript یا Babel، کد از Tree Shaking (حذف توابع استفاده نشده)، سپس از مینی‌فایر عبور می‌کند و تنها پس از آن در باندل نهایی جمع‌آوری می‌شود. در باندلرهای مدرن (Webpack، Rollup، esbuild) مینی‌فیکیشن توسط پلاگین‌ها در مرحله نهایی ساخت انجام می‌شود.

مینی‌فیکیشن چه چیزهایی را حذف می‌کند

مینی‌فیکیشن چگونه کار می‌کند: تکنیک‌های اصلی

حذف فاصله‌ها و شکست‌های خط — ساده‌ترین و بدیهی‌ترین تکنیک. پارسر مینی‌فایر از AST (Abstract Syntax Tree) عبور می‌کند و همه کاراکترهای فضای خالی که بخشی از literals رشته‌ای نیستند را حذف می‌کند. اکثر مینی‌فایرها additionally اپراتورها را در یک خط ترکیب می‌کنند که صرفه‌جویی اضافی در فشرده‌سازی با GZip یا Brotli ایجاد می‌کند.

جایگزینی نام متغیرها با نام‌های کوتاه (mangling) — تکنیک تهاجمی‌تر. متغیرهای محلی و پارامترهای توابع به شناسه‌های یک‌حرفی: a، b، c تغییر نام می‌یابند. این کار اندازه را 15–30% اضافی کاهش می‌دهد. Terser و esbuild از mangling با گزینه حفظ نام‌های خاص (مثلاً API عمومی از طریق mangle.props.reserved) پشتیبانی می‌کنند.

حذف کد استفاده نشده

Dead code elimination (DCE) — حذف شاخه‌های کدی که هرگز اجرا نمی‌شوند. مینی‌فایر شرایطی را که همیشه false هستند (if (false)) تحلیل می‌کند و بلوک‌های مربوطه را حذف می‌کند. تحلیل پیشرفته‌تر در مرحله Tree Shaking قبل از مینی‌فیکیشن انجام می‌شود، اما DCE در سطح مینی‌فایر موارد محلی کد مرده را که در سطح ماژول تشخیص داده نشده‌اند، می‌گیرد.

کوتاه‌سازی نام متغیرها (Mangling)

Mangling — تغییر نام متغیرهای محلی و پارامترهای توابع به شناسه‌های کوتاه (یک-دو حرف). Terser mangling را بر اساس scope انجام می‌دهد: متغیرهای داخل یک تابع نام‌های کوتاه منحصربه‌فردی دریافت می‌کنند که با scopeهای خارجی تداخل ندارند. گزینه mangle.reserved امکان حفظ نام‌های خاص را فراهم می‌کند — مثلاً API عمومی کتابخانه‌ها.

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 و اجرای موازی با تعداد CPU پشتیبانی می‌کند. از نسخه 5.16، Terser شامل بهینه‌سازی‌هایی برای TypeScript — حذف importهای type-only و رابط‌ها است.

esbuild — مینی‌فایر به زبان Go، تعبیه‌شده در باندلر همنام. esbuild مینی‌فیکیشن را 10–100 برابر سریع‌تر از Terser به لطف کد بومی و پردازش موازی انجام می‌دهد. با این حال esbuild از بهینه‌سازی‌های کمتری پشتیبانی می‌کند: mangling با حفظ خصوصیات انجام نمی‌دهد، importهای type-only را حذف نمی‌کند و عبارات را کمتر تهاجمی بهینه می‌کند.

پیکربندی 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 چندنخی را به تعداد CPU فعال می‌کند.

مینی‌فیکیشن 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));

esbuild API پیکربندی یک خطی را می‌پذیرد. minify: true مینی‌فیکیشن JS و CSS را فعال می‌کند. sourcemap: true نقشه‌های کد را برای دیباگ تولید می‌کند. target حداقل سطح ES را تعیین می‌کند — esbuild به طور خودکار کد مدرن را به نسخه انتخاب شده ترنسپایل می‌کند. esbuild به ویژه برای پروژه‌هایی که زمان ساخت بحرانی است مؤثر است: خطوط لوله CI/CD، Hot Module Replacement و نمونه‌سازی سریع.

مینی‌فیکیشن در 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 پشتیبانی می‌کنند مهم است.

تفاوت مینی‌فیکیشن با فشرده‌سازی

Minification و فشرده‌سازی (gzip, brotli) — مراحل مختلف بهینه‌سازی هستند. Minification در سطح کد منبع کار می‌کند و تعداد کاراکترها را قبل از ارسال به سرور کاهش می‌دهد. فشرده‌سازی در سطح پروتکل حمل ونقل کار می‌کند و توسط سرور (nginx، Apache، CDN) هنگام ارسال فایل به کلاینت اعمال می‌شود. Minification اندازه را قبل از فشرده‌سازی کاهش می‌دهد که اثر دوچندان دارد: gzip داده‌های از پیش کوتاه شده را فشرده می‌کند.

اندازه فایل JavaScript 300 کیلوبایت پس از مینی‌فیکیشن — 120 کیلوبایت، پس از gzip — 35–40 کیلوبایت. اگر فقط gzip به فایل مینی‌فای نشده اعمال شود، اندازه 55–70 کیلوبایت خواهد بود. Minification + gzip نتیجه 30–40% بهتری نسبت به gzip به تنهایی می‌دهد. Brotli (سطح 6) پس از مینی‌فیکیشن 15–20% مؤثرتر از gzip فشرده می‌کند.