Tiada muat naik, 100% setempat, tiada akaun

Minifikasi / Cantikkan

Minifikasi atau cantikkan kod. Semuanya kekal dalam pelayar anda.

Cara Minifikasi / Cantikkan berfungsi

Minify / Beautify memampatkan HTML, CSS, dan JavaScript dengan mengalih keluar ulasan, ruang putih yang tidak perlu, dan aksara berlebihan, atau mengembangkan kod yang diminifikasikan kembali kepada bentuk inden yang boleh dibaca. Semua pemprosesan berlaku dalam pelayar menggunakan penghurai yang dibundel; tiada apa yang anda tampal yang dihantar ke mana-mana. Tiada apa yang anda taip di sini meninggalkan peranti anda.

Minifikasi memberi kesan langsung terhadap prestasi muatan halaman: fail yang lebih kecil dipindahkan lebih cepat, dihuraikan lebih cepat, dan menggunakan lebar jalur yang lebih sedikit. Untuk penggunaan pengeluaran, aset yang diminifikasi adalah standard. Alat ini berguna apabila anda menerima fail yang diminifikasi yang perlu anda baca (cantikkan), apabila anda ingin memeriksa apa yang dilakukan oleh minifier pada potongan sebelum mengintegrasikannya ke dalam saluran pembinaan, atau apabila anda memerlukan minifikasi satu kali tanpa menyediakan alat pembinaan.

Ditulis oleh Bastien Sulyan

Cara menggunakan Minifikasi / Cantikkan, langkah demi langkah

  1. Tampal kod HTML, CSS, atau JavaScript anda ke dalam kawasan input.
  2. Pilih jenis bahasa dari dropdown (HTML, CSS, atau JavaScript).
  3. Klik 'Minifikasi' untuk menghasilkan versi yang dimampatkan, atau 'Cantikkan' untuk mengembangkan dan membuat inden kod.
  4. Salin hasilnya dari kawasan output menggunakan butang salin.
  5. Tampal kod yang berbeza dan ulang mengikut keperluan.

Kes penggunaan biasa

  • Pembangun bahagian hadapan ingin meminifikasi potongan CSS kritikal untuk menyisipkannya dalam kepala HTML bagi prestasi di atas lipatan.
  • Pembangun menerima skrip pihak ketiga yang diminifikasi dan perlu mencantikkannya untuk memahami logiknya semasa semakan keselamatan.
  • Penulis teknikal memerlukan versi yang dicantikkan dari teg skrip JSON-LD yang diminifikasi untuk dimasukkan dalam dokumentasi.
  • Pembangun web menyemak penjimatan bait dari meminifikasi fail CSS sebelum memutuskan sama ada hendak menambah langkah pembinaan.

Soalan lazim

Adakah kod yang saya tampal dihantar ke mana-mana pelayan untuk diminifikasi?

Tidak. Minifikasi dan pencantikan dijalankan oleh kod halaman itu sendiri, ditulis khusus untuk alat ini dan bukan diambil daripada minifier pihak ketiga. Semua pemprosesan kekal dalam tab pelayar. Tiada apa yang anda tampal di sini yang dihantar kepada Sunasty atau mana-mana pihak ketiga.

Adakah minifikasi JavaScript mengekalkan tingkah laku asal kod?

Minifier yang baik mengekalkan tingkah laku dengan hanya mengalih keluar ruang putih, memendekkan nama pembolehubah dalam skop yang terkawal, dan melucutkan ulasan. Alat ini menyasarkan transformasi selamat. Pengoptimuman agresif seperti penghapusan kod mati atau pelurusan fungsi secara amnya tidak digunakan, kerana ia memerlukan analisis program penuh.

Bolehkah saya meminifikasi dan kemudian mencantikkan hasilnya untuk mengesahkan?

Ya. Minifikasi kod dahulu, kemudian tampal output yang diminifikasi kembali ke dalam input dan klik Cantikkan. Versi yang dicantikkan akan kelihatan berbeza dari sumber asal (nama pembolehubah mungkin dipendekkan, ulasan dialih keluar) tetapi akan setara dari segi struktur.

Adakah minifikasi HTML mengalih keluar semua ulasan?

Alat ini melucutkan ulasan HTML standard (<!-- ... -->) semasa minifikasi. Ulasan bersyarat yang digunakan oleh versi IE lama (<!--[if IE]...-->) sentiasa dikekalkan, jadi mengalih keluar ulasan tidak akan merosakkan tingkah laku warisan yang bergantung kepadanya.

Adakah terdapat had saiz pada kod yang boleh saya minifikasi?

Hadnya ialah memori yang tersedia pada tab pelayar anda. Kod sehingga beberapa ratus kilobait diproses dengan cepat. Untuk bundle JavaScript yang besar (megabait), alat pembinaan khusus seperti esbuild, Terser, atau Lightning CSS adalah lebih cepat dan lebih sesuai untuk kegunaan pengeluaran.