Tanpa unggah, 100% lokal, tanpa akun

Perkecil / Percantik

Perkecil atau percantik kode. Semuanya tetap di browser Anda.

Cara kerja Perkecil / Percantik

Minify / Beautify mengompresi HTML, CSS, dan JavaScript dengan menghapus komentar, whitespace yang tidak diperlukan, dan karakter yang berlebihan, atau memperluas kode yang diminifikasi kembali ke bentuk yang dapat dibaca dengan indentasi. Semua pemrosesan terjadi di browser menggunakan parser yang disertakan; tidak ada yang Anda tempel yang dikirimkan ke mana pun. Tidak ada yang Anda ketik di sini yang meninggalkan perangkat Anda.

Minifikasi secara langsung mempengaruhi performa pemuatan halaman: file yang lebih kecil ditransfer lebih cepat, diurai lebih cepat, dan mengonsumsi lebih sedikit bandwidth. Untuk penerapan produksi, aset yang diminifikasi adalah standar. Alat ini berguna ketika Anda menerima file yang diminifikasi yang perlu Anda baca (beautify), ketika Anda ingin memeriksa apa yang dilakukan minifier pada cuplikan sebelum mengintegrasikannya ke dalam pipeline build, atau ketika Anda membutuhkan minifikasi satu kali tanpa menyiapkan alat build.

Ditulis oleh Bastien Sulyan

Cara menggunakan Perkecil / Percantik, langkah demi langkah

  1. Tempelkan kode HTML, CSS, atau JavaScript Anda ke area input.
  2. Pilih jenis bahasa dari dropdown (HTML, CSS, atau JavaScript).
  3. Klik 'Minify' untuk menghasilkan versi yang dikompresi, atau 'Beautify' untuk memperluas dan memberi indentasi kode.
  4. Salin hasilnya dari area keluaran menggunakan tombol salin.
  5. Tempelkan kode berbeda dan ulangi sesuai kebutuhan.

Kasus penggunaan umum

  • Seorang pengembang frontend ingin meminifikasi cuplikan CSS kritis untuk dimasukkan sebagai inline di head HTML demi performa above-the-fold.
  • Seorang pengembang menerima skrip pihak ketiga yang diminifikasi dan perlu memperindahnya untuk memahami logikanya selama tinjauan keamanan.
  • Seorang penulis teknis membutuhkan versi yang diperindah dari tag skrip JSON-LD yang diminifikasi untuk disertakan dalam dokumentasi.
  • Seorang pengembang web memeriksa penghematan byte dari meminifikasi file CSS sebelum memutuskan apakah akan menambahkan langkah build.

Pertanyaan yang sering diajukan

Apakah kode yang saya tempel dikirim ke server mana pun untuk diminifikasi?

Tidak. Minifikasi dan beautifikasi dilakukan oleh kode halaman itu sendiri, ditulis khusus untuk alat ini, bukan diambil dari minifier pihak ketiga. Semua pemrosesan tetap di tab browser. Tidak ada yang Anda tempel di sini yang dikirimkan ke Sunasty atau pihak ketiga mana pun.

Apakah minifikasi JavaScript mempertahankan perilaku asli kode?

Minifier yang baik mempertahankan perilaku dengan hanya menghapus whitespace, mempersingkat nama variabel dalam cakupan yang terkontrol, dan menghapus komentar. Alat ini menargetkan transformasi yang aman. Optimasi agresif seperti eliminasi kode mati atau inlining fungsi umumnya tidak diterapkan, karena hal tersebut memerlukan analisis program penuh.

Bisakah saya meminifikasi lalu memperindah hasilnya untuk memverifikasi?

Ya. Minifikasi kode terlebih dahulu, lalu tempelkan keluaran yang diminifikasi kembali ke input dan klik Beautify. Versi yang diperindah akan terlihat berbeda dari sumber aslinya (nama variabel mungkin dipersingkat, komentar dihapus) tetapi akan setara secara struktural.

Apakah minifikasi HTML menghapus semua komentar?

Alat ini menghapus komentar HTML standar (<!-- ... -->) selama minifikasi. Komentar kondisional yang digunakan oleh versi IE lama (<!--[if IE]...-->) selalu dipertahankan, sehingga penghapusan komentar tidak dapat merusak perilaku lama yang bergantung padanya.

Apakah ada batas ukuran kode yang bisa saya minifikasi?

Batasnya adalah memori yang tersedia di tab browser Anda. Kode hingga beberapa ratus kilobyte diproses dengan cepat. Untuk bundle JavaScript yang besar (megabyte), alat build khusus seperti esbuild, Terser, atau Lightning CSS lebih cepat dan lebih cocok untuk penggunaan produksi.