Pemampat JavaScript

Apakah peminiatur JavaScript?

Peminiatur JavaScript ialah alat yang mengecilkan kod sumber JavaScript dengan membuang aksara yang tidak diperlukan oleh pelayar untuk menjalankannya, seperti ruang tambahan, pemisah baris dan ulasan. Kod itu masih melakukan perkara yang sama selepas dikecilkan. Hanya saiz failnya yang berubah.

Fail JavaScript yang lebih kecil dimuat turun dan dimuatkan dengan lebih pantas, jadi pengecilan kod lazimnya dilakukan sebelum sesebuah laman web diterbitkan.

Cara pengecilan JavaScript berfungsi

Alat ini membaca kod satu aksara pada satu masa dan membinanya semula, dengan membuang perkara yang diperlukan oleh pembaca tetapi tidak diperlukan oleh enjin JavaScript. Alat ini membuang:

Ulasan, iaitu ulasan // single-line satu baris dan ulasan /* multi-line */ berbilang baris, termasuk ulasan gaya JSDoc.
Ruang tambahan, tab dan baris kosong yang hanya wujud untuk memudahkan kod dibaca.

Alat ini tidak menambah atau membuang apa-apa yang lain. Alat ini tidak pernah memadam koma bertitik, tanda kurung atau apa-apa aksara lain yang sudah ada dalam kod, dan tidak pernah menyisipkan tanda baca baharu. Alat ini juga membiarkan beberapa perkara tanpa perubahan:

Teks di dalam rentetan ("like this", 'like this') dan literal templat (`like this`), walaupun teks itu mengandungi ruang atau kelihatan seperti ulasan.
Literal ungkapan nalar, seperti /[a-z]+/g, bersama-sama semua benderanya: d, g, i, m, s, u, v dan y.
Setiap koma bertitik, koma dan tanda kurung siku yang sudah ada dalam kod asal.

Kadangkala ruang antara dua token tidak boleh dibuang tanpa mengubah maknanya. return a tidak boleh menjadi returna kerana itu akan dibaca sebagai satu perkataan. Perkara yang sama berlaku pada nama yang ditulis dengan huruf di luar abjad Inggeris, jadi typeof π mengekalkan ruangnya. Apabila pembuangan ruang akan mencantumkan dua token, alat ini mengekalkan satu ruang.

Pemisah baris juga boleh menjadi penting. JavaScript kadangkala menyisipkan koma bertitik secara automatik pada hujung baris, dalam aturan yang dipanggil Penyisipan Koma Bertitik Automatik. Jika pemadaman pemisah baris boleh mencetuskan atau menghalang aturan itu, atau jika pemisah baris tersebut mengikuti pendakap penutup }, alat ini mengekalkan satu baris baharu di situ. Oleh itu, kod yang dikecilkan tidak semestinya dipadatkan menjadi satu baris: sesetengah pemisah baris mengubah maksud kod dan perlu dikekalkan.

Cara menggunakan peminiatur JavaScript ini

Tampalkan kod JavaScript ke dalam kotak masukan.
Pilih "Minify".
Baca hasil dalam kotak hasil, bersama-sama saiz asal, saiz kod yang dikecilkan dan peratusan pengurangan.
Pilih "Copy" untuk menyalin kod yang dikecilkan.

Pengecilan kod dijalankan dalam tab pelayar, jadi kod tidak dimuat naik ke mana-mana untuk diproses. Alat ini juga menyalin kod yang ditampal ke dalam alamat halaman, yang memudahkan hasil ditandakan buku atau dikongsi. Oleh itu, sesiapa yang dapat melihat alamat tersebut boleh melihat kod itu.

Contoh: mengecilkan fungsi

Sebelum:

1// Calculate the sum of two numbers
2function addNumbers(a, b) {
3    // Return the sum
4    return a + b;
5}
6
7// Call the function with 5 and 10
8const result = addNumbers(5, 10);
9console.log("The sum is: " + result);
10

Selepas:

1function addNumbers(a,b){return a+b;}
2const result=addNumbers(5,10);console.log("The sum is: "+result);
3

Ketiga-tiga ulasan hilang dan lekukan turut dibuang. Koma bertitik selepas a+b kekal kerana alat ini tidak pernah memadam koma bertitik yang sudah ada. Pemisah baris sebelum const juga kekal kerana pemisah itu mengikuti pendakap penutup }.

Contoh: mengecilkan kelas

Sebelum:

1/**
2 * A simple counter class
3 * that increments and decrements a value
4 */
5class Counter {
6    constructor(initialValue = 0) {
7        this.count = initialValue;
8    }
9
10    increment() {
11        return ++this.count;
12    }
13
14    decrement() {
15        return --this.count;
16    }
17
18    getValue() {
19        return this.count;
20    }
21}
22
23// Create a new counter
24const myCounter = new Counter(10);
25console.log(myCounter.increment()); // 11
26console.log(myCounter.increment()); // 12
27console.log(myCounter.decrement()); // 11
28

Selepas:

1class Counter{constructor(initialValue=0){this.count=initialValue;}
2increment(){return++this.count;}
3decrement(){return--this.count;}
4getValue(){return this.count;}
5}
6const myCounter=new Counter(10);console.log(myCounter.increment());console.log(myCounter.increment());console.log(myCounter.decrement());
7

Perhatikan bahawa pemisah baris kekal sebelum setiap kaedah dan sebelum } penutup kelas. Setiap pemisah itu mengikuti } penutup dalam kod asal, jadi aturan yang melindungi Penyisipan Koma Bertitik Automatik mengekalkannya. Koma bertitik di dalam setiap kaedah juga kekal.

Rumus pengurangan saiz

Alat ini melaporkan tiga nombor di bawah kotak hasil: saiz asal, saiz kod yang dikecilkan dan pengurangan. Semua saiz ialah bilangan aksara, bukan bait. Pengurangan itu ialah peratusan yang dibundarkan kepada nombor bulat terdekat:

1reduction = round((1 - minified characters / original characters) x 100)
2

Contoh fungsi di atas mempunyai 213 aksara sebelum pengecilan dan 103 selepasnya. Jadi 1–103 / 213 = 0.5164, iaitu 51.64%, dan alat ini memaparkan 52%. Contoh kelas berubah daripada 515 aksara kepada 304, iaitu 40.97%, yang dipaparkan sebagai 41%.

Had peminiatur ini

Alat ini hanya membuang ulasan dan ruang kosong. Tidak seperti alat langkah binaan seperti Terser atau UglifyJS, alat ini tidak menamakan semula pemboleh ubah, memadam kod yang tidak digunakan atau menggabungkan fail. Alat tersebut biasanya menghasilkan hasil yang lebih kecil tetapi memerlukan proses binaan untuk dijalankan. Alat ini berfungsi serta-merta dalam pelayar tanpa persediaan, dan sesuai untuk semakan pantas atau coretan kecil, bukannya saluran pengeluaran penuh.

Soalan lazim

Apakah yang dibuang oleh peminiatur JavaScript?

Alat ini membuang ulasan dan ruang kosong yang tidak diperlukan untuk menjalankan kod. Alat ini tidak membuang koma bertitik, tanda kurung atau apa-apa aksara lain yang sudah menjadi sebahagian daripada kod.

Adakah pengecilan JavaScript mengubah cara kod dijalankan?

Tidak. Kod yang dikecilkan sepatutnya menghasilkan keputusan yang sama seperti kod asal. Hanya pemformatannya yang berubah.

Mengapakah kod yang dikecilkan kadangkala masih mempunyai pemisah baris?

Pemisah baris mungkin diperlukan oleh aturan Penyisipan Koma Bertitik Automatik JavaScript, atau mungkin mengikuti pendakap penutup }. Pembuangannya boleh mengubah perkara yang dilakukan oleh kod, jadi alat ini mengekalkan satu baris baharu di tempat tersebut dan bukannya memadamkannya.

Adakah pengecilan sama dengan pemampatan?

Tidak. Pengecilan membuang aksara daripada kod sumber itu sendiri. Pemampatan, seperti gzip atau Brotli, mengekod fail dengan cara yang berbeza untuk penghantaran melalui rangkaian. Laman web lazimnya menggunakan kedua-duanya bersama-sama.

Adakah kod saya dihantar ke pelayan?

Peminiatur itu sendiri berjalan sepenuhnya dalam tab pelayar, dan kod tidak dimuat naik untuk dikecilkan. Kod yang ditampal disimpan dalam alamat halaman supaya hasil boleh dikongsi atau ditandakan buku, jadi kod itu muncul dalam bar alamat pelayar dan sejarahnya.

Bolehkah kod yang dikecilkan dikembalikan kepada kod asal?

Ruang kosong boleh dipulihkan oleh pemformat kod, tetapi ulasan serta nama pemboleh ubah dan fungsi asal telah hilang melainkan peta sumber berasingan telah disimpan.

Rujukan

MDN Web Docs. "Minification." Glosari MDN, https://developer.mozilla.org/en-US/docs/Glossary/Minification
ECMA International. "ECMAScript Language Specification," seksyen 12.10, "Automatic Semicolon Insertion." https://tc39.es/ecma262/#sec-automatic-semicolon-insertion
ECMA International. "ECMAScript Language Specification," seksyen 12.7.1, "Identifier Names." https://tc39.es/ecma262/#sec-names-and-keywords
ECMA International. "ECMAScript Language Specification," seksyen 22.2.6, "Properties of the RegExp Prototype Object" (set bendera d g i m s u v y). https://tc39.es/ecma262/#sec-properties-of-the-regexp-prototype-object

Pemampat JavaScript - Pengoptimasi Kod JS Dalam Talian Percuma

Perihal alat ini

Dokumentasi