Minifikasiya — bu nədir, kodun minifikasiya prinsipləri və alətləri

Minifikasiya nədir?

Minifikasiya — mənbə kodunun avtomatik çevrilməsi prosesi olub, proqramın icrasına təsir etməyən bütün simvolların silindiyi bir əməliyyatdır. Boşluqlar, tabulyasiyalar, sətir keçidi simvolları, şərhlər və artıq mötərizələr silinir və ya qısaldılır. Minifikasiya JavaScript, CSS, HTML və daha az hallarda JSON konfiqurasiyalarına istehsala buraxılmazdan əvvəl tətbiq edilir.

Minifikasiyanın əsas məqsədi şəbəkə üzərindən ötürülən faylların ölçüsünü azaltmaqdır. 300 KB ölçüsündə JavaScript faylı minifikasiyadan sonra 120–150 KB yer tuta bilər ki, bu da yavaş 3G bağlantısında yüklənmə müddətini 200–400 ms qısaldır. Google PageSpeed Insights və Lighthouse birbaşa kodun minifikasiyasını tövsiyə edir: bu performans və Core Web Vitals qiymətləndirmə meyarlarından biridir.

Minifikasiya qurma boru kəmərinin (build pipeline) ayrılmaz hissəsidir. TypeScript və ya Babel transilyasiyasından sonra kod Tree Shaking-dən (istifadə olunmayan funksiyaların silinməsi), sonra minifikatordan keçir və yalnız bundan sonra yekun bundle-ə yığılır. Müasir bundler-lərdə (Webpack, Rollup, esbuild) minifikasiya qurmanın son mərhələsində plaginlər vasitəsilə yerinə yetirilir.

Minifikasiya nəyi silir

Minifikasiya necə işləyir: əsas texnikalar

Boşluqların və sətir keçidlərinin silinməsi — ən sadə və aydın texnikadır. Minifikatorun parseri AST (Abstract Syntax Tree) üzərindən keçir və sətir literalının bir hissəsi olmayan bütün boşluq simvollarını silir. Əksər minifikatorlar əlavə olaraq operatorları bir sətirdə birləşdirir ki, bu da GZip və ya Brotli ilə sıxışdırmada əlavə qənaət verir.

Dəyişən adlarının qısaldılması (mangling) — daha aqressiv texnikadır. Lokal dəyişənlər və funksiya parametrləri birhərfli identifikatorlara: a, b, c-yə çevrilir. Bu, ölçüsü əlavə 15–30% azaldır. Terser və esbuild müəyyən adların qorunması seçimi ilə mangling-i dəstəkləyir (məsələn, mangle.props.reserved vasitəsilə publik API).

İstifadə olunmayan kodun silinməsi

Dead code elimination (DCE) — heç vaxt icra olunmayan kod budaqlarının silinməsidir. Minifikator həmişə yalan olan şərtləri (if (false)) təhlil edir və müvafiq blokları silir. Daha qabaqcıl təhlil Tree Shaking mərhələsində minifikasiyadan əvvəl aparılır, lakin minifikator səviyyəsində DCE modul səviyyəsində aşkar edilməmiş lokal ölü kod hallarını tutur.

Dəyişən adlarının qısaldılması (Mangling)

Mangling — lokal dəyişənlərin və funksiya parametrlərinin qısa identifikatorlara (bir-iki hərf) çevrilməsidir. Terser mangling-i skoup əsasında yerinə yetirir: bir funksiya daxilindəki dəyişənlər xarici skouplarla toqquşmayan unikal qısa adlar alır. mangle.reserved seçimi müəyyən adları qorumağa imkan verir — məsələn, kitabxanaların publik API-lərini.

Mangling qlobal dəyişənlərə, obyekt xassələrinə (əgər mangle.props aktiv deyilsə) və new ilə istifadə olunan sinif adlarına təsir etmir. Kitabxanaların publik API-lərini mangling-dən qorumaq üçün mangle.props.reserved-i müntəzəm ifadələrlə istifadə etmək lazımdır: reserved: ["_prop", /^private_/]. Bu tənzimləmə olmadan mangling kitabxananı sındıra bilər, əgər xarici kod obyektin xassələrinə adla müraciət edirsə.

Nümunə: minifikasiyadan əvvəl və sonra

// Mənbə kodu
function calculateTotal(price, tax) {
    var result = price + (price * tax);
    // Yekun məbləği qaytarırıq
    return result;
}

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

// Terser minifikasiyasından sonra
function calculateTotal(a, b){return a + a * b}
var c = calculateTotal(100, .2);
console.log(c);

İkinci nümunədə Terser şərhləri, boşluqları və sətir keçidlərini sildi, price-i a, tax-ı b, result-u c olaraq dəyişdi. Ölçü 197 simvoldan 79-a qədər azaldı — 60% qənaət. Bununla belə kodun funksionallığı tam qorunub: calculateTotal(100, 0.2) 120 qaytarır.

Minifikasiya alətləri: Terser, esbuild, UglifyJS

Terser — Webpack ekosistemində və müasir bundler-lərin əksəriyyətində standart JavaScript minifikatorudur. Terser ES6+ sintaksisini (arrow funksiyalar, async/await, spread), publik API-nin qorunması ilə mangling, source maps və CPU sayı qədər paralel işə salmanı dəstəkləyir. 5.16 versiyasından etibarən Terser TypeScript üçün optimallaşdırmaları — type-only importların və interfeyslərin silinməsini əhatə edir.

esbuild — Go dilində yazılmış, eyniadlı bundler-ə daxil edilmiş minifikatordur. esbuild minifikasiyanı Terser-dən 10–100 dəfə sürətli yerinə yetirir, bunun sayəsində native kod və paralel emal sayəsində. Bununla belə esbuild daha az optimallaşdırma dəstəkləyir: xassələrin qorunması ilə mangling etmir, type-only importları silmir və ifadələri daha az aqressiv optimallaşdırır.

Webpack-də Terser konfiqurasiyası

// webpack.config.js — TerserPlugin konfiqurasiyası
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 konfiqurasiyası üç əsas bloku əhatə edir. compress ifadələrin optimallaşdırılmasına cavabdehdir: drop_console console.log-u silir, drop_debugger debugger-i silir, dead_code əlçatmaz budaqları silir. mangle publik adların qorunması üçün reserved ilə dəyişənlərin adlandırılmasını idarə edir. parallel CPU sayı qədər çoxşaxəliliyi aktivləşdirir.

esbuild vasitəsilə CSS minifikasiyası

// esbuild: JS və CSS minifikasiyası üçün CLI əmri
// 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 bir sətirlik konfiqurasiya qəbul edir. minify: true həm JS, həm də CSS minifikasiyasını aktivləşdirir. sourcemap: true debug üçün kod xəritələri yaradır. target minimal ES səviyyəsini təyin edir — esbuild müasir kodu seçilmiş versiyaya avtomatik transpilləyir. esbuild xüsusilə qurma vaxtının kritik olduğu layihələrdə effektivdir: CI/CD boru kəmərləri, Hot Module Replacement və sürətli prototiplər.

React Native və WebView-də minifikasiya

React Native Terser-ə əsaslanan minifikasiyanı özündə birləşdirən öz bundler-i Metro Bundler-dən istifadə edir. İstehsal rejimində Metro avtomatik olaraq tətbiqin JavaScript bundle-nə minifikasiya tətbiq edir. Metro-da minifikasiya konfiqurasiyası metro.config.js faylında transformer.minifierConfig bölməsində təyin edilir. Əlavə olaraq iOS-da bundle ölçüsünü azaltmaq üçün inline-require söndürülə bilər.

Mobil tətbiqlərdə WebView də minifikasiyadan faydalanır. WebView-də yüklənən HTML, CSS və JS tətbiqə yerləşdirilməzdən və ya serverdən yüklənməzdən əvvəl minifikasiyadan keçməlidir. Yerli resurslar (Assets) üçün minifikasiya xüsusilə vacibdir — APK/IPA ölçüsü birbaşa tətbiq mağazalarında quraşdırma konversiyasına təsir edir.

Hermes və minifikasiya

Hermes — Facebook tərəfindən hazırlanmış React Native üçün JavaScript mühərrikidir. Hermes bayt-kodun Ahead-of-Time (AOT) kompilyasiyasını yerinə yetirir ki, bu da tətbiqin işə düşmə vaxtını 30–50% azaldır. Hermes üçün JavaScript bundle-nin minifikasiyası Terser vasitəsilə bayt-koda kompilyasiyadan əvvəl aparılır. Hermes öz HBC (Hermes Bytecode) formatını dəstəkləyir, lakin JS minifikasiya mərhələsi zəruri olaraq qalır.

React Native üçün Metro konfiqurasiyası

// metro.config.js — minifikasiya konfiqurasiyası
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 ilə React Native istehsal bundle-indən bütün console.log-ları silir. mangle.safari10 parametri Safari 10-u (iOS 10) sındıran identifikatorların adlandırılmasının qarşısını alır. Bu, xüsusilə iOS 10/11 ilə köhnə iPad və iPhone 5s cihazlarını dəstəkləyən tətbiqlər üçün vacibdir.

Minifikasiya sıxışdırmadan nə ilə fərqlənir

Minifikasiya və sıxışdırma (gzip, brotli) — optimallaşdırmanın müxtəlif mərhələləridir. Minifikasiya mənbə kodu səviyyəsində işləyir və serverə göndərilməzdən əvvəl simvolların sayını azaldır. Sıxışdırma nəqliyyat protokolu səviyyəsində işləyir və fayl müştəriyə ötürülərkən server (nginx, Apache, CDN) tərəfindən tətbiq edilir. Minifikasiya sıxışdırmadan əvvəl ölçüsü azaldır ki, bu da ikiqat effekt verir: gzip artıq qısaldılmış məlumatları sıxışdırır.

300 KB ölçüsündə JavaScript faylı minifikasiyadan sonra — 120 KB, gzip-dən sonra — 35–40 KB. Əgər yalnız gzip-i minifikasiya olunmamış fayla tətbiq etsəniz, ölçü 55–70 KB olacaq. Minifikasiya + gzip yalnız gzip-dən 30–40% daha yaxşı nəticə verir. Brotli (səviyyə 6) minifikasiyadan sonra gzip-dən əlavə 15–20% daha səmərəli sıxışdırır.