Cara Membuat Tool JavaScript Minifier di Blogger

Cara Membuat Tool JavaScript Minifier di Blogger – Situs pengguna platform Blogger.com umumnya terdiri dari HTML, CSS dan JavaScript.

HTML sebagai “kerangka” yang menentukan bentuk dan layout dari situs, CSS yang digunakan untuk menghias situs dan JavaScript yang memastikan seluruh fungsi dapat berjalan dengan benar.

JavaScript sebagai sumber utama yang memastikan seluruh fitur dapat berfungsi tentu menjadi salah satu file penting yang terus dimuat saat situs diakses oleh visitor.

Sayangnya banyak yang tidak menyadari bahwa kode JavaScript yang tidak diminifikasi akan membuat situs menjadi lambat ketika diakses.

Sehingga diperlukan Minify JavaScript agar situs menjadi lebih ringan dan fast load saat dibuka oleh pengunjung.

Cara Buat Tool JavaScript Minifier di Blogger

Perlu diketahui, proses Minifikasi Javascript tidak semudah yang dibayangkan, karena salah melakukan minify javascript sedikit saja dapat membuat kode menjadi tidak berfungsi.

Apabila kalian seorang pemula yang belum terlalu paham cara coding javascript dasar yang benar sebaiknya menyerahkan masalah ini kepada ahlinya.

Karena tidak seperti pengguna WordPress Self-host, jika mereka ingin melakukan minify Javascript maka hanya perlu menggunakan plugin cache.

Sedangkan bagi pengguna Blogger.com harus melakukan coding JS secara manual, dimana proses Minifikasi JavaScript dilakukan dengan cara menghapus karakter yang tidak diperlukan sehingga memperpendek susunan kode JavaScript agar ukuran File menjadi lebih kecil.

Namun jika kalian tetap ingin mencoba melakukan Minify JS, ONLEN.ID sudah membagikan cara membuat tool javascript minifier blogger, yang dapat kalian gunakan untuk membantu proses minifikasi JS dengan mudah.

Berikut ini tutorial buat tool JS Minifier di Blogger :

• Buka Blogger.com
• Sign In dengan Akun kalian
• Buat Halaman Baru dan Beri Judul “JavaScript Minifier”
• Setelah itu ubah mode penulisan menjadi Tampilan HTML, seperti pada gambar berikut ini :

• Jika sudah, silahkan masukkan script kode berikut ini :

a. HTML

<div id="js-tool">
  <h2>JavaScript Minify &amp; Beautify Tool</h2>
  <textarea id="inputJS" rows="10"></textarea>
  <div class="button-group">
    <button onclick="minifyJS()">Minify</button>
    <button class="beautify-btn" onclick="beautifyJS()">Beautify</button>
    <button class="copy-btn" onclick="copyOutput()">Salin Kode</button>
    <button class="clear-btn" onclick="clearOutput()">Hapus Kode</button>
  </div>
  <textarea id="outputJS" rows="10"></textarea>
</div>

b. CSS

#js-tool {
    border: 2px solid #ccc;
    border-radius: 10px;
    padding: 20px;
    width: 90%;
    max-width: 800px;
    margin: 20px auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  #js-tool textarea {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    font-family: monospace;
    margin-top: 10px;
    resize: vertical;
  }

  #js-tool .button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  #js-tool button {
    flex: 1;
    min-width: 100px;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
  }

  #js-tool button:hover {
    background-color: #45a049;
  }

  #js-tool .beautify-btn {
    background-color: #007BFF;
  }

  #js-tool .beautify-btn:hover {
    background-color: #0066cc;
  }

  #js-tool .copy-btn {
    background-color: #FFC107;
    color: #333;
  }

  #js-tool .copy-btn:hover {
    background-color: #e0a800;
  }

  #js-tool .clear-btn {
    background-color: #f44336;
  }

  #js-tool .clear-btn:hover {
    background-color: #d32f2f;
  }

c. JavaScript

function minifyJS() {
    var input = document.getElementById('inputJS').value;
    var output = input.replace(/s{2,}/g, ' ')
                      .replace(//*[^*]**+([^/][^*]**+)*//g, '')
                      .replace(///.*/g, '')
                      .replace(/s*([{};:(),=+-])s*/g, '$1')
                      .replace(/;}/g, '}');
    document.getElementById('outputJS').value = output;
  }

  function beautifyJS() {
    var input = document.getElementById('inputJS').value;
    var formatted = input.replace(/;/g, ';n')
                         .replace(/{/g, ' {n')
                         .replace(/}/g, 'n}n')
                         .replace(/,/g, ', ')
                         .replace(/s{2,}/g, ' ')
                         .replace(/ns*n/g, 'n')
                         .trim(); 
    document.getElementById('outputJS').value = formatted;
  }

  function copyOutput() {
    var output = document.getElementById('outputJS');
    output.select();
    output.setSelectionRange(0, 99999);
    document.execCommand('copy');
    alert('Kode berhasil disalin!');
  }

  function clearOutput() {
    document.getElementById('inputJS').value = '';
    document.getElementById('outputJS').value = '';
  }

• Jika sudah silahkan Publikasikan

Apabila script kode di atas sulit untuk disalin, kalian juga bisa menyalinnya melalui GitHub ONLEN.ID yang dapat kalian akses melalui tautan berikut ini => https://github.com/onlendotid/tool-javascript-minifier

Pengujian Tool JavaScript Minifier

Jika halaman sudah dipublikasikan, ada baiknya kalian melakukan testing tool javascript minifier blogger yang sudah dibuat tadi, untuk memastikan bahwa tool dapat berfungsi dengan benar.

Kalian buka terlebih dahulu halaman dari tool JS minifier yang sudah kalian buat, sebagai contoh milik ONLEN.ID ada di sini => https://www.onlen.id/p/javascript-minifier.html

Tools ini memiliki 4 tombol antara lain Minify, Beautify, Salin Kode dan Hapus Kode. Yang memiliki fungsi antara lain :

• Minify : Untuk melakukan minify file css sehingga menjadi lebih “kecil” dan “singkat” dibanding bentuk aslinya
• Beautify : Untuk membuat file css yang sebelumnya sudah diminify menjadi bentuk semula atau bentuk standar coding CSS
• Salin Kode : Untuk menyalin atau copy hasil kode yang sudah diminify atau dibeautify
• Hapus Kode : Untuk menghapus seluruh kode yang ada di tools tersebut dengan cepat

a. Berikut ini contoh Script JavaScript sebelum diminify

function minifyJS() {
    var input = document.getElementById('inputJS').value;
    var output = input.replace(/s{2,}/g, ' ')
                      .replace(//*[^*]**+([^/][^*]**+)*//g, '')
                      .replace(///.*/g, '')
                      .replace(/s*([{};:(),=+-])s*/g, '$1')
                      .replace(/;}/g, '}');
    document.getElementById('outputJS').value = output;
  }

  function beautifyJS() {
    var input = document.getElementById('inputJS').value;
    var formatted = input.replace(/;/g, ';n')
                         .replace(/{/g, ' {n')
                         .replace(/}/g, 'n}n')
                         .replace(/,/g, ', ')
                         .replace(/s{2,}/g, ' ')
                         .replace(/ns*n/g, 'n')
                         .trim(); 
    document.getElementById('outputJS').value = formatted;
  }

  function copyOutput() {
    var output = document.getElementById('outputJS');
    output.select();
    output.setSelectionRange(0, 99999);
    document.execCommand('copy');
    alert('Kode berhasil disalin!');
  }

  function clearOutput() {
    document.getElementById('inputJS').value = '';
    document.getElementById('outputJS').value = '';
  }

b. Berikut ini contoh Script JavaScript setelah diminify

function minifyJS(){var input=document.getElementById('inputJS').value;var output=input.replace(/s{2,}/g,' ').replace(//*[^*]**+([^/][^*]**+)*

Penutup

Itulah cara membuat tool javascript minifier di blogger yang bisa kalian buat untuk membantu proses minifikasi javascript secara manual menjadi lebih mudah. Semoga dapat membantu dalam mengembangkan situs kalian menjadi lebih baik lagi.

Tool ini bisa digunakan oleh siapapun tidak terbatas hanya untuk pelanggan Jasa Pembuatan Website Murah dari ONLEN.ID, siapapun yang menggunakan platform blogger.com boleh menggunakan tools ini di situs kalian.