Kini Statically Support Minify CSS, JS, SVG, HTML, XML

Ditulis oleh: Adhy Suryadi

Ditulis pada: 2/11/2020

Kini Statically Support Minify CSS, JS, SVG, HTML, XML - Sebenarnya saya sudah dikasih tahu oleh mas Frans tentang fitur baru dari Statically ini beberapa waktu yang lalu, tetapi saya baru sempat buat postingannya hari ini buat kasih tahu ke teman-teman semua yang belum mengetahuinya.

Jadi sekarang ini Statically sudah support on-the-fly untuk minify file CSS, JS, SVG, HTML, dan XML. Statically akan secara otomatis melakukan minify terhadap file CSS, JS, SVG, HTML, dan XML ketika file-file tersebut ditulis secara standar.

Secara sederhana, minify adalah memadatkan kode dari file-file tersebut agar menjadi memiliki ukuran yang lebih kecil sehingga akan lebih cepat dimuat oleh peramban.

Agar lebih mudah dimengerti, kita contohkan pada kode berikut. Ini adalah kode sebuah js yang ditulis secara standar.

    function loadscript(filename) {

      var scr=document.createElement('script');

      scr.setAttribute("type","text/javascript");

      scr.setAttribute("src",filename);

      document.getElementsByTagName("head")[0].appendChild(scr);

    }

    var waitElm=null;

    function urltinyfyprompt_callback(response) {

      if(waitElm) waitElm.style.display="none";

      var txt="Short URL";

      if(response.title && response.title!="") txt+=' for "'+response.title+'"';

      else if(response.longurl && response.longurl!="") txt+=" for "+response.longurl;

      if(response.tinyurl && response.tinyurl!="")

        prompt(txt+":", response.tinyurl);

      else

        alert("Could not get short URL, try again later." + ((response.error && response.error != "") ? ("nError: " + response.error) : ""));

    }

    function shortenUrl(elm, long_url, service) {

      waitElm=elm.parentNode.nextSibling;

      if(waitElm) waitElm.style.display="inline";

      loadscript("https://urltinyfy.appspot.com/"+service+"?unify=1&url="+encodeURIComponent(long_url) + "&callback=urltinyfyprompt_callback");

    }

Silahkan cek file js tersebut yang saya hosting di Github dan disajikan oleh Statically.

Kemudian file tersebut di minify secara otomatis oleh Statically menjadi seperti berikut.

function loadscript(filename){var scr=document.createElement('script');scr.setAttribute("type","text/javascript");scr.setAttribute("src",filename);document.getElementsByTagName("head")[0].appendChild(scr);}

var waitElm=null;function urltinyfyprompt_callback(response){if(waitElm)waitElm.style.display="none";var txt="Short URL";if(response.title&&response.title!="")txt+=' for "'+response.title+'"';else if(response.longurl&&response.longurl!="")txt+=" for "+response.longurl;if(response.tinyurl&&response.tinyurl!="")

prompt(txt+":",response.tinyurl);else

alert("Could not get short URL, try again later."+((response.error&&response.error!="")?("nError: "+response.error):""));}

function shortenUrl(elm,long_url,service){waitElm=elm.parentNode.nextSibling;if(waitElm)waitElm.style.display="inline";loadscript("https://urltinyfy.appspot.com/"+service+"?unify=1&url="+encodeURIComponent(long_url)+"&callback=urltinyfyprompt_callback");}

Silahkan cek file js yang sudah diminify tersebut untuk membandingkan dengan file sebelumnya.

Untuk bisa seperti itu, caranya cukup mudah yaitu tinggal menambahkan .min di depan ekstensi file seperti .js seperti berikut ini.

https://cdn.statically.io/gh/KompiAjaib/FileX/master/shortenurl.js

Menjadi

https://cdn.statically.io/gh/KompiAjaib/FileX/master/shortenurl.min.js

Bagaimana, cukup mudah bukan? Semoga bermanfat.