Nyahminifikasi dan kemaskan kod anda dalam talian

Nyahminifikasi format tertentu

Setiap format mempunyai halaman tersendiri dengan butiran yang penting untuk bahasa tersebut:

• Nyahminifikasi JavaScriptJavaScript
• Nyahminifikasi CSSCSS
• Nyahminifikasi HTMLHTML
• Nyahminifikasi XMLXML
• Nyahminifikasi JSONJSON

Apakah minifikasi kod?

Pembangun menulis kod untuk dibaca oleh pembangun lain. Oleh itu, kod mengandungi komen, inden, baris kosong antara blok dan nama pemboleh ubah yang menerangkan kandungannya. Semua ini membantu manusia, tetapi tidak diperlukan oleh pelayar. Minifikasi ialah langkah dalam proses binaan yang membuang perkara yang tidak diperlukan oleh mesin: ruang kosong, pemisah baris, komen dan selalunya nama asal pemboleh ubah serta fungsi, yang digantikan dengan satu huruf. Tingkah laku program kekal sama sepenuhnya, hanya bentuk penulisannya berubah.

Penjimatan saiznya ketara. Himpunan JavaScript yang diminifikasi lazimnya 30 hingga 70 peratus lebih kecil berbanding sumber asalnya. Ini mengurangkan bait yang dihantar melalui rangkaian, mempercepat paparan awal dan memperbaik Core Web Vitals. Sebab itulah hampir semua laman produksi menyediakan JS, CSS dan HTML yang diminifikasi. Namun, fail yang dimuat turun daripada laman tersebut menjadi satu baris padat yang sukar dibaca. Apabila anda perlu memahami fail itu, menyahpepijatnya atau mengaudit tindakan sebenarnya, langkah pertama ialah menyahminifikasinya.

Apakah yang dilakukan oleh alat nyahminifikasi ini?

LFUnminify mengambil kod yang diminifikasi dan membina semula struktur yang mudah dibaca. Ia memulihkan inden, meletakkan setiap pernyataan pada baris tersendiri, menjarakkan blok dan operator serta menggunakan peraturan pemformatan yang konsisten bagi bahasa yang dikesan. Himpunan empat ribu aksara dalam satu baris bertukar menjadi beberapa ratus baris bersarang dengan betul yang boleh anda telusuri, cari dan fahami.

Alat ini menjalankan Prettier, pemformat yang sudah digunakan oleh kebanyakan pasukan JavaScript, terus dalam pelayar anda. Hasilnya sepadan dengan output yang dihasilkan oleh penyunting anda untuk fail sumber biasa, jadi gaya kodnya terasa biasa. Pengesanan berlaku secara automatik: tampal kod dan alat ini menentukan sama ada kod itu JavaScript, CSS, HTML, XML atau JSON sebelum memformatkannya mengikut bahasa tersebut.

Satu batasan perlu dijelaskan sejak awal. Nyahminifikasi bukan penyahkompilan. Komen, nama asal pemboleh ubah dan nota pembangun telah dipadamkan semasa proses binaan, dan tiada alat yang boleh memulihkannya. Anda mendapat kod yang tersusun, mudah dibaca dan diterokai, tetapi nama pendek yang diberikan oleh peminifikasi masih dikekalkan. Biasanya ini sudah mencukupi untuk mengikuti logik, mencari fungsi atau mengenal pasti data yang dihantar oleh skrip serta destinasinya.

Format kod yang disokong

Satu penyunting untuk lima bahasa. LFUnminify membaca kandungan yang anda tampal, mengenal pasti bahasanya dan menyerahkannya kepada penghurai yang sesuai dengan sintaks tersebut. Anda tidak perlu memilih format daripada menu, malah fail dengan sambungan yang salah masih diproses dengan betul:

• JavaScript, termasuk sintaks ES6 dan lebih baharu, modul, kod tak segerak dan JSX. Contoh lazim ialah himpunan yang dihasilkan oleh webpack, Vite, esbuild atau Terser.
• CSS, termasuk sintaks moden, sifat tersuai, pertanyaan media dan peraturan bersarang. Sesuai untuk helaian gaya yang dikompil oleh Tailwind, Sass atau PostCSS.
• HTML, termasuk blok script dan style terbenam yang diformatkan bersama penanda dokumen dan tidak dibiarkan sebagai satu baris panjang.
• XML, termasuk peta laman, suapan RSS, fail SVG, sampul SOAP dan fail konfigurasi yang diterima tanpa sebarang pemisah baris.
• JSON, termasuk respons API bersarang dalam, manifes pakej, fail konfigurasi dan muatan data log.

Bila anda memerlukan alat nyahminifikasi kod

Nyahminifikasi jarang dilakukan sekadar kerana ingin tahu. Selalunya inilah cara terpantas untuk menjawab soalan tertentu tentang kod orang lain, atau kod anda sendiri yang tidak lagi mudah dibaca:

• Menyahpepijat ralat produksi. Jejak tindanan menunjuk ke baris 1, lajur 24815 dalam suatu himpunan. Pemformatan memberikan nombor baris yang berguna dan membantu anda mencari fungsi yang benar-benar mencetuskan ralat.
• Mengaudit skrip pihak ketiga. Sebelum menambah tag analitik, widget sembang atau skrip afiliasi pada laman, nyahminifikasikannya untuk membaca data yang dikumpul, domain yang dihubungi dan maklumat yang ditulis ke storan.
• Membaca helaian gaya yang dikompil. Rangka kerja utiliti menghasilkan fail CSS besar dalam satu baris. Mengemaskannya membolehkan anda mengikuti lata, mencari peraturan yang diutamakan dan memahami sebab penggantian anda diabaikan.
• Memeriksa respons API. Muatan JSON yang disalin daripada tab rangkaian sukar dibaca sebelum diformatkan. Selepas dikemaskan, struktur, sarang dan medan yang hilang dapat dikenal pasti dalam beberapa saat.
• Belajar daripada kod sebenar. Membaca cara pustaka yang dibina dengan baik menyelesaikan masalah membantu anda meningkatkan kemahiran dengan cepat, dan fail yang diformatkan menjadikan pembacaan itu jauh lebih selesa.

Cara menggunakan LFUnminify

Ada tiga cara untuk memasukkan kod ke dalam penyunting. Tampalkannya terus pada panel kiri, klik Pilih fail untuk mengimport fail daripada komputer anda atau seret dan lepaskan fail pada ruang input. Untuk memeriksa sumber daripada laman langsung, bukanya melalui view-source atau DevTools pelayar, salin dan tampalkannya di sini. Anda juga boleh menyimpan fail .js, .css, .html, .xml atau .json dan membukanya melalui Pilih fail.

Pemformatan bermula secara automatik tanpa perlu mencari butang. Alat ini menunggu sehingga anda berhenti menaip, mengesan bahasa dan memaparkan hasil yang dikemaskan pada panel kanan dengan penyerlahan sintaks. Kemudian anda boleh menyalin seluruh output ke papan klip dengan satu klik atau memuat turunnya sebagai fail bernama sesuai untuk dibuka dalam penyunting anda.

Dua perkara kecil membantu apabila mengendalikan fail panjang. Hidupkan nombor baris untuk merujuk lokasi tepat atau membandingkan dua versi, dan pilihan itu akan diingati untuk lawatan seterusnya. Jika format yang dikesan berbeza daripada jangkaan, hal itu sendiri mungkin suatu petunjuk: fail yang dianggap JSON tetapi dikenal pasti sebagai JavaScript sering merupakan respons JSONP atau konfigurasi yang dibalut dalam ungkapan penugasan.

Kod anda tidak pernah meninggalkan komputer anda

Perkara ini perlu dinyatakan dengan jelas. Pemformatan dilakukan secara setempat dalam pelayar menggunakan JavaScript yang dimuatkan sekali bersama halaman. Kod anda tidak dimuat naik, tidak dimasukkan ke baris gilir pelayan, tidak ditulis ke pangkalan data dan tidak direkodkan dalam log. Anda boleh memutuskan sambungan rangkaian selepas halaman dimuatkan dan alat nyahminifikasi masih berfungsi. Itulah bukti paling mudah bahawa tiada apa-apa dihantar.

Ini membolehkan anda menampal kod proprietari, himpunan dalaman, projek pelanggan atau fail konfigurasi yang strukturnya tidak mahu anda kongsikan. Tiada kandungan yang ditampal atau dibuka meninggalkan pelayar anda. Alat ini juga tidak mengambil fail bagi pihak anda, jadi pelayan kami tidak mengetahui kod atau laman yang sedang anda periksa. Tiada akaun diperlukan dan kandungan yang anda tampal tidak dijejaki.

Mengapa LFUnminify percuma?

LFUnminify ialah sebahagian daripada keluarga alat percuma yang dibina oleh Ludovic Frank, bersama penjana kata laluan, penjana favicon, pembina palet warna dan beberapa alat lain. Alasannya mudah: utiliti kecil yang digunakan pembangun beberapa kali seminggu tidak sepatutnya memerlukan pendaftaran, memaparkan iklan yang menghalang atau mengenakan had kredit. Alat ini tidak memerlukan akaun, tidak mempunyai kuota dan tidak menyelitkan tawaran naik taraf berbayar dalam produk.

Ia juga merupakan demonstrasi yang benar-benar berfungsi. Setiap alat dalam keluarga ini ialah aplikasi sebenar yang dibina dan diselenggara dengan cara yang sama seperti projek pelanggan. Ini menunjukkan cara kami bekerja dengan lebih jelas berbanding halaman portfolio. Jika anda memerlukan pembangunan web tersuai, aplikasi yang lengkap dan bukannya templat, atau khidmat nasihat teknikal, anda boleh menemui kami melalui pautan di pengaki.

Soalan lazim