JavaScript ir CSS minifikavimas paaiškinta

Kas yra minifikavimas?

Minifikavimas yra procesas, kurio metu iš kodo pašalinami visi nereikalingi simboliai. Tai reiškia: tarpai, naujų eilučių ženklai, komentarai ir kitokios nereikalingos dalys. Jūs vis dar gausite tą patį funkcionavimą, bet failai bus daug mažesni.

Pagalvokite apie tai taip: jei jūs rašote el. laišką draugui, jūs gali rašyti su įvairiais tarpais ir naujomis eilutėmis. Bet jei jūs turite siųsti tą laišką labai brangiais paštais, jūs norite jį suspaustą. Minifikavimas yra tik tas — jūsų kodo „suspaudimas".

Kodėl minifikavimas svarbus?

Jūsų svetainės greitis tiesiogiai įtakoja vartotojų patirtį. Kai failai yra didesni, jie ilgiau užsikrauna. Kai jie užsikrauna ilgiau, vartotojai gali greitai nuskriauti prie konkurento. Tai nėra tik teorija — Google jau seniai sako, kad greitis yra rankavimo veiksnys.

Minifikavimas yra vienas iš greičiausių būdų gauti rezultatus. Jūs nekeičiate jokios funkcionalumo. Jūs tik padarote failus mažesnius. Ir mažesni failai = greitesnis greitis.

Minifikavimas praktiniu lygiu

Jei jūs rašote JavaScript arba CSS ranka, jūs neturite minifikuoti jį ranka. Tai būtų gaisras. Vietoj to, naudokite minifikavimo įrankius. Jie yra automatiniai ir tikslūs. Čia yra keletas populiarių variantų:

• UglifyJS – JavaScript minifikavimui. Jis pašalina komentarus, nereikalingus tarpus ir sutrumpina kintamųjų pavadinimus.
• cssnano – CSS minifikavimui. Jis optimizuoja spalvų reikšmes ir pašalina besidubliuojančius taisykles.
• Terser – modernaus JavaScript minifikavimo įrankis su didelėmis optimizavimo galimybėmis.
• PostCSS – CSS transformavimo sistema, kuri gali veikti su minifikavimo papildiniais.

Kaip pradėti su minifikavimo įrankiais

Jei jūs naudojate build sistemą, kaip webpack arba Gulp, minifikavimas yra jau iš karto sumontuotas. Jūs tik turite jį suaktyvinti savo konfigūracijoje. Daugelis šiuolaikinių sistemų automatiškai minifikuoja jūsų kodus gamybos aplinkoje.

Jei jūs nenaudojate jokios build sistemos, galite naudoti internetines minifikavimo paslaugas. Jie yra paprasti: jūs nukopijavote savo kodą, jis minifikuoja jį, ir jūs kopijuojate rezultatą. Tai veikia, bet build sistema yra geresnis ilgalaikis sprendimas.

Kai jūs turite minifikuotus failus, įsitikinkite, kad jūs jų naudojate jūsų svetainėje. Kai kuriais atvejais žmonės minifikuoja failus, bet jų nenaudoja. Tai naudinga tik jei jūs iš tikro jų naudojate.