JS minimizatoru

JS minimizatoru JavaScript kodundan lazımsız simvolları silən, minimallaşdırmadan əvvəlki və sonrakı simvol sayını göstərən pulsuz alətdir.

JavaScript minimallaşdırılması hansı problemi həll edir?

JavaScript minimallaşdırılması brauzerin endirməli olduğu mənbə kodunun həcmini azaldır. Adətən JavaScript sintaksisi üçün vacib olmayan girintilər, sətirsonları və boşluqlar kimi formatlama simvolları silinir.

Skriptin kiçilməsi ötürülən məlumatın həcmini və kodun təhlili üçün görülən işi azalda bilər. Bu, xüsusən sayt bir neçə böyük paket yüklədikdə əhəmiyyətlidir. Brotli və ya gzip kimi HTTP sıxışdırması yenə də vacibdir, çünki minimallaşdırma ilə ötürmə zamanı sıxışdırma problemin fərqli hissələrini həll edir. Minimallaşdırma mənbə kodundakı simvolları silir, sıxışdırma isə təkrarlanan məlumatları ötürmə zamanı daha yığcam kodlaşdırır.

Bu əməliyyat adətən saytı yayımlamazdan əvvəl yığım mərhələsində aparılır. Minimallaşdırılmamış üçüncü tərəf skriptini yoxlayarkən, paket ölçülərini müqayisə edərkən və ya yığım prosesi olmayan sayt üçün ayrıca fayl hazırlayarkən də faydalıdır.

Minimallaşdırma JavaScript kodunun düzgün işlədiyini sübut etmir. Skript uğurla minimallaşdırılsa belə, onda yanlış API çağırışları, əlçatmaz dəyişənlər və ya yalnız icra zamanı üzə çıxan xətalar ola bilər.

JS minimizatorundan necə istifadə etmək olar?

JavaScript kodunu JS sahəsinə yerləşdirib aləti işə sal, sonra Minimallaşdırılmış JS sahəsində qaytarılan nəticəni köçür. Oxunaqlı mənbə kodunu əvəz etmə. Orijinal faylı versiya nəzarətində saxla və yayımlama üçün onun yığcam nüsxəsindən istifadə et.

1. Əvvəlcə mənbə kodunda sintaksis yoxlamasını, linteri və avtomatlaşdırılmış testləri işə sal.
2. Fayla aid modul importları və ya əhatələyici funksiyalar daxil olmaqla bütün skripti JS sahəsinə yerləşdir.
3. Simvol sayındakı dəyişikliyi görmək üçün JS simvolları və Minimallaşdırılmış JS simvolları göstəricilərini müqayisə et.
4. Minimallaşdırılmış JavaScript kodunun istehsal faylı ilə eyni brauzer və yayımlama mühitində düzgün işlədiyini yoxla.
5. Minimallaşdırılmış və oxunaqlı versiyalar birlikdə saxlanacaqsa, app.min.js kimi asan tanınan fayl adından istifadə et.

Emal serverdə aparılır. Daxil etdiyin məlumat HTTPS üzərindən serverə ötürülür və saxlanmır. Bununla belə, JavaScript kodunu emal etmək üçün server onu qəbul etməlidir. Buna görə təşkilatının xarici xidmətə göndərilməsini qadağan etdiyi mənbə kodunu daxil etmə.

Minimallaşdırılmış nəticədə nə olur?

Nəticədə yığcam JavaScript kodu və iki simvol sayı göstərilir. JS simvolları daxil edilən kodun uzunluğunu, Minimallaşdırılmış JS simvolları isə qaytarılan Minimallaşdırılmış JS nəticəsinin uzunluğunu göstərir.

Bu göstəricilər PHP-nin mb_strlen funksiyası ilə hesablanır. Funksiya sadəcə baytların sayını deyil, çoxbaytlı sətrin uzunluğunu ölçür. Buna görə simvol sayı şəbəkə üzərindən ötürülən yekun fayl ölçüsü ilə eyni deyil. UTF-8 simvolları bir baytdan çox yer tuta bilər, gzip və ya Brotli isə ötürülən faylı daha da kiçildə bilər.

Bu alət ayrıca doğrulama və ya diaqnostika sahəsi qaytarmır. Onun hər çatışmayan mötərizəni, səhv qurulmuş müntəzəm ifadəni və ya dəstəklənməyən dil imkanını müəyyən edəcəyini gözləmə. Xüsusən dırnaqsız xassə adları və ya sondakı vergüllər kimi JSON ilə əlaqəli xətalar JavaScript kodunu yoxlamaq üçün etibarlı meyar deyil. Səbəb JavaScript obyekt literalının sintaksisi ilə JSON sintaksisinin fərqli olmasıdır. JSON məlumatları üçün JSON validatoru və gözəlləşdiricisi alətindən istifadə et.

Kiçik nümunələr və mürəkkəb girişlər

Boşluqların sadə şəkildə silinməsini belə göstərmək olar.

Giriş

function add(a, b) { return a + b; }

Yığcam forma

function add(a,b){return a+b;}

Obyektin ətrafındakı formatlamanı da xassələrin dəyərlərinə toxunmadan silmək olar.

Giriş

const settings = { theme: "dark", retries: 2 };

Yığcam forma

const settings={theme:"dark",retries:2};

Dəqiq format minimizatorlar arasında fərqlənə bilər. Bu, xüsusən ixtiyari nöqtəli vergüllərin ətrafında özünü göstərir. Hər boşluğu və ya sətirsonunu silməklə JavaScript kodunu təhlükəsiz şəkildə yığcamlaşdırmaq mümkün deyil. Təhlükəsiz minimallaşdırma formatlama simvollarını proqramın işinə təsir edən simvollardan ayırmaq üçün leksik və sintaktik konteksti nəzərə almalıdır.

• Sətrlərdəki boşluqlar məlumatdır. "Newcastle upon Tyne" daxilindəki boşluq saxlanmalıdır.
• Punktuasiya işarələri sintaksisin bir hissəsi ola bilər. a + +b ifadəsindəki boşluğun silinməsi fərqli token ardıcıllığı yarada bilər.
• Sətirsonları bəzən avtomatik nöqtəli vergül əlavə edilməsinə təsir edir. Buraya return, break və ya continue ifadələrindən sonra gələn kod daxildir. throw ifadəsindən dərhal sonra sətirsonuna icazə verilmir, çünki ona aid ifadə eyni sətirdə başlamalıdır.
• Vurğulu və latın əlifbasına aid olmayan simvollar sətrlərdə, JavaScript identifikator qaydalarının icazə verdiyi hallarda isə identifikatorlarda işlənə bilər. Onların bayt ölçüsü simvol sayından fərqlənə bilər.
• Ədədlər simvol sayına dair göstəriş deyil, mənbə kodunun tokenləridir. Minimizator daha qısa ekvivalent yazılış seçsə belə, onların ədədi mənasını qorumalıdır.

JavaScript kodunu nə vaxt minimallaşdırmağa dəyməz?

Fayl artıq minimallaşdırılıbsa, prosesi təkrarlamağa adətən dəymir. İkinci keçid çox az yer qazandıra və ya heç bir fərq yaratmaya bilər. Eyni zamanda, yığım nəticəsini izləmək çətinləşə və mövcud mənbə xəritələrinin işi pozula bilər.

Yalnız maşının oxuyacağı JavaScript kodunu əvvəlcə formatlayıb sonra yenidən minimallaşdırmağın da mənası azdır. Texniki xidmət üçün oxunaqlı mənbə kodunu saxla və yayımlama artefaktlarını həmin koddan yarat. Mövcud tətbiqlər üçün esbuild, Rollup və ya webpack kimi yığım alətləri adətən daha uyğundur, çünki modul paketlənməsini və mənbə xəritələrinin yaradılmasını avtomatlaşdıra bilir. Minimallaşdırma alətə daxil ola, konfiqurasiya və ya plagin vasitəsilə əlavə edilə bilər. Terser isə xüsusi minimizator kimi hazırlanıb.

Minimallaşdırmanı obfuskasiya və ya girişə nəzarət vasitəsi sayma. Funksiya və dəyişən adları görünə bilər, sətir literalları hələ də oxuna bilər, brauzerin tərtibatçı alətləri isə yığcam kodu yenidən formatlaya bilər. Məxfi məlumatlar, şəxsi açarlar və imtiyazlı giriş məlumatları heç vaxt müştəri tərəfli JavaScript koduna yerləşdirilməməlidir.

Səhifənin bütün statik resurslarını hazırlayırsansa, CSS minimallaşdırıcısı və HTML minimallaşdırıcısı müvafiq formatlarda eyni əməliyyatı yerinə yetirə bilər. Hər formatı öz alətində emal et, çünki onların təhlil və boşluq qaydaları fərqlidir.

Tez-tez verilən suallar

Alət mənbə xəritəsi yaradır?

Xeyr, ayrıca mənbə xəritəsi sahəsi qaytarılmır. İstehsal mühitindəki xəta steklərini orijinal fayllarla uyğunlaşdırmaq lazımdırsa, minimallaşdırılmış skripti və ona uyğun .map faylını eyni yığım prosesində yarat. Başqa yığımdan götürülmüş mənbə xəritəsini yayımlamaq sətir və sütun nömrələrinin yanlış göstərilməsinə səbəb ola bilər.

Minimallaşdırma JavaScript kodumun köçürülməsinin qarşısını alır?

Xeyr. Brauzer icra edilə bilən müştəri tərəfli kodu qəbul etməlidir, buna görə ziyarətçi onu endirib yoxlaya bilər. Minimallaşdırma mənbə kodunun oxunmasını çətinləşdirir, lakin məxfiliyi, lisenziya tələblərinin icrasını və ya koda yerləşdirilmiş məxfi məlumatların effektiv qorunmasını təmin etmir.

API açarları olan kodu daxil edə bilərəm?

Məxfi API açarlarını, tokenləri və ya şəxsi giriş məlumatlarını daxil etmə. Daxil etdiyin məlumat HTTPS üzərindən göndərilir və saxlanmır, lakin emal serverdə aparılır. Qəsdən hər ziyarətçiyə təqdim edilən açıq brauzer açarları üçün də, müvafiq xidmət dəstəkləyirsə, domen, mənbə, kvota və ya icazə məhdudiyyətləri təyin edilməlidir.

Simvol sayı azalanda səhifə həmişə daha sürətli açılır?

Xeyr. Nəticə orijinal faylın ölçüsündən, keşləmədən, bağlantı şəraitindən, server sıxışdırmasından və brauzerin nə qədər JavaScript kodunu təhlil edib icra etməli olduğundan asılıdır. Simvolların ümumi sayı ilə yanaşı, sıxışdırılmış ötürmə ölçüsünü və icra zamanı davranışı da yoxla.

Minimallaşdırmadan sonra .js uzantısını saxlamalıyam?

Bəli. Minimallaşdırılmış JavaScript adətən .js uzantısını saxlayır. Hər iki versiya mövcud olduqda adlandırma qaydası kimi .min.js istifadə edilir. Yayımlamazdan əvvəl serverin uyğun JavaScript məzmun növünü göndərdiyini, HTML və ya modul importunun isə nəzərdə tutulan fayla yönəldiyini yoxla.