MoreOnlineTools
ESC

Pemampat & Pencantik CSS/JS

Mampatkan kod untuk pengeluaran atau cantikkan untuk kebolehbacaan

Input Kod
Output Diproses

0 B

Saiz Asal

0 B

Saiz Hasil

0%

Penjimatan

0

Baris Dibuang

Contoh Penggunaan

Pemampatan CSS

Mampatkan fail CSS dengan membuang komen, ruang putih dan mengoptimumkan peraturan untuk penempatan pengeluaran.

body { margin: 0; padding: 0; font-family: Arial; }...
Pencantikan JS

Ubah JavaScript yang dimampatkan menjadi kod yang boleh dibaca dan berinden dengan betul untuk nyahpepijat dan pembangunan.

function UserManager(){this.users=[];this.nextId=1}...
Binaan Pengeluaran

Sediakan kod JavaScript untuk pengeluaran dengan membuang komen dan ruang putih yang tidak diperlukan.

const AppConfig = { apiBaseUrl: "https://api.example.com" }...

Ciri-ciri

Pemampatan CSS

Buang komen, ruang putih dan optimumkan peraturan CSS

Pemampatan JS

Mampatkan JavaScript sambil mengekalkan literal rentetan

Pencantikan Kod

Format kod yang dimampatkan dengan inden yang betul

Analisis Saiz

Bandingkan saiz asal dan hasil dengan peratusan penjimatan

Cara Menggunakan?

1

Pilih Mod

Pilih mod CSS atau JavaScript bergantung pada jenis kod anda.

2

Masukkan Kod

Tampal kod anda ke kawasan input atau muat naik fail.

3

Proses

Klik Mampatkan untuk memampatkan atau Cantikkan untuk memformat kod.

4

Gunakan Hasil

Salin kod yang diproses atau muat turun sebagai fail.

Soalan Lazim

Pengecilan membuang segala-galanya dalam CSS atau JavaScript anda yang tidak diperlukan untuk kod tersebut berjalan: komen (// dan /* */ dalam JS, /* */ dalam CSS), ruang kosong dan indentasi yang tidak perlu, aksara baris baharu antara pernyataan, tanda noktah koma yang berlebihan (dalam beberapa konteks JS), dan dalam sesetengah kes memendekkan nama pembolehubah (untuk minifier JS lanjutan). Kod yang dihasilkan adalah serupa secara fungsional dengan yang asal — pelayar akan menganalisis dan melaksanakannya dengan cara yang sama — tetapi menggunakan kurang bait. Penjimatan tipikal: CSS 20-50%, JavaScript 30-70% bergantung kepada berapa banyak komen dan jumlah indentasi yang terkandung dalam kod asal.

Kecantikanan adalah kebalikannya: ia mengambil kod yang padat atau dikecilkan dan mengubah formatnya dengan indentasi yang konsisten, baris baharu antara pengisytiharan, dan jarak yang betul. Anda memerlukannya apabila menyahpepijat pustaka pihak ketiga yang telah dikecilkan (salin kod yang dikecilkan, cantikkan, kemudian baca), apabila bekerja dengan CSS/JS yang dihasilkan atau digabungkan tanpa sebarang format, apabila menyemak kod lama yang tidak pernah diformat dengan betul, atau apabila semakan kod memerlukan perbezaan (diff) yang boleh dibaca. Ia tidak menambah komen atau mengembalikan nama pembolehubah asal — hanya format sahaja yang dibina semula.

Minifier alat ini adalah konservatif — ia hanya membuang ruang kosong dan komen, yang tidak pernah mempunyai makna semantik. String literal (petikan tunggal, petikan dua, dan template literals dalam JS), ekspresi regular, pemilih CSS dan nilai ciri semuanya dikekalkan dengan tepat. Satu kesilapan biasa: jika JavaScript anda bergantung pada kemasukan noktah koma automatik (ASI) dan kod disusun secara samar, pengecilan yang meletakkan beberapa pernyataan dalam satu baris secara teorinya boleh menyebabkan masalah. Pendekatan paling selamat adalah dengan sentiasa menggunakan noktah koma secara eksplisit dan menguji hasil pengecilan dalam pelayar sasaran anda.

Untuk projek produksi dengan aliran kerja pembangunan: gunakan alat binaan (Webpack, Vite, Rollup, esbuild, atau Parcel) yang menyepadukan pengecilan ke dalam saluran paip binaan anda. Alat ini menawarkan pengoptimuman yang lebih maju: tree-shaking, pembungkusan modul, pembahagian kod, peta sumber (source maps), dan pemprosesan selepas. Alat dalam talian ini paling sesuai untuk: pengecilan sekali sahaja bagi fail lama tanpa sistem binaan, menyemak saiz pengecilan dengan cepat sebelum membuat perubahan pada saluran paip binaan, membaca kod yang dikecilkan milik orang lain dengan mencantikkannya, atau projek kecil di mana menyediakan sistem binaan adalah terlalu rumit.

Muat naik fail .css atau .js sehingga 5MB setiap fail. Alat ini mengesan mod secara automatik berdasarkan sambungan fail. Untuk input teks (mod tampal), tiada had saiz tetapi fail yang sangat besar mungkin mengambil masa untuk diproses. Hasil boleh dimuat turun sebagai fail .css atau .js. SCSS, TypeScript, dan format praproses lain mesti dikompilasi kepada CSS atau JavaScript biasa terlebih dahulu sebelum pengecilan.

Pengecilan mengurangkan saiz fail dengan membuang aksara yang berlebihan. Pemampatan Gzip (yang digunakan oleh pelayan web untuk penghantaran) kemudian memampatkan lagi fail yang telah dikecilkan itu. Fakta penting: kod yang dikecilkan lebih mudah dimampatkan daripada kod asal kerana ia mempunyai kepelbagaian aksara yang lebih sedikit. Gabungan pengecilan + Gzip biasanya mencapai pengurangan keseluruhan sebanyak 60-85%. Menghantar fail CSS 100KB: asal + Gzip ≈ 25KB, dikecilkan + Gzip ≈ 15KB. Pengecilan menjimatkan 10KB selepas Gzip. Tanpa Gzip yang dikonfigurasi pada pelayan anda, pengecilan menjimatkan lebih banyak dalam istilah mutlak tetapi keuntungan relatif adalah lebih kecil.

Tidak. Semua pengecilan dan kecantikanan berlaku di dalam pelayar anda menggunakan JavaScript. Kod CSS dan JavaScript anda, yang mungkin mengandungi logik hak milik, titik akhir API, atau konfigurasi sensitif, tidak akan pernah meninggalkan peranti anda.

Tidak secara terus — alat ini memproses CSS dan JavaScript secara berasingan kerana mereka mempunyai peraturan sintaks yang berbeza. Jika anda mempunyai fail HTML dengan blok <style> dan <script> yang disertapak, anda perlu mengekstrak setiap bahagian, mengecilkan mereka secara berasingan, kemudian memasukkannya semula. Untuk pengecilan penuh HTML+CSS+JS dalam satu langkah, gunakan pengecil HTML yang mengendalikan blok kod disertapak, atau gunakan alat binaan yang memproses semua jenis aset bersama-sama.

Apa itu Pemampat & Pencantik CSS/JS?

Skor PageSpeed anda jatuh sebab CSS dan JS yang tidak dimampatkan? Tampal kod anda, klik mampatkan dan dapat versi sedia untuk pengeluaran tanpa semua yang berlebihan. Atau sebaliknya - cantikkan kod yang dimampatkan bila anda perlu nyahpepijat kekusutan mampatan orang lain.

Manfaat Menggunakan Pemampat CSS/JS

Anda boleh kurangkan 30-80% saiz fail CSS dan JS, dan ia buat perbezaan sebenar pada masa pemuatan halaman. Pencantik tu penyelamat nyawa bila anda cuba faham kod pihak ketiga yang dimampatkan. Semua diproses dalam pelayar - tiada kod dimuat naik ke mana-mana.

Keselamatan dan Privasi

Keselamatan data anda adalah keutamaan kami

Pemprosesan Tempatan

Semua pemprosesan berlaku dalam pelayar anda

Tiada Pemindahan Data

Data anda tidak dihantar ke pelayan kami

Tiada Penyimpanan Data

Tiada data disimpan atau dikongsi

Penyulitan SSL

Penyulitan SSL untuk sambungan selamat

Langkah Seterusnya

Pemformat HTML

Cantikkan atau kecilkan kod HTML anda

Pemampat Teks

Buang ruang, pemisah baris dan ruang putih yang tidak perlu dari teks anda untuk menjadikannya lebih...

Alat Berkaitan

Pencari Laluan JSON

Tampal JSON dan klik mana-mana nilai untuk mendapatkan ekspresi JSONPath serta-m...

Pemformat JSON

Sahkan, format dan optimumkan data JSON

Perpustakaan Corak Regex

Layari, cari dan uji 35+ corak regex sedia guna dengan penguji terbina dalam

Penjana CSS Grid

Taman permainan visual CSS Grid dengan pratonton langsung dan penjanaan kod

Penjana Ungkapan Cron

Pembina ungkapan cron visual dengan pratetap

Penjana Border Radius

Jana CSS border-radius dengan pratonton visual dan kod sedia guna

Lebih Banyak di MoreOnlineTools

Alat Dalam Talian Percuma

109 alat untuk teks, imej, keselamatan dan pembangunan

Semak Semua Alat →
Helaian Rujukan Pembangun

Rujukan pantas untuk Regex, Git, kod HTTP, CSS, Markdown dan lagi

Semak Helaian Rujukan →
Kalkulator Dalam Talian

BMI, pinjaman, peratusan, tip, umur dan kalkulator praktikal lain

Semak Kalkulator →
Koleksi Alat

Aliran kerja terpilih: pembangunan API, saluran imej, audit keselamatan dan lagi

Semak Koleksi →