14 Alat Untuk Meminimalkan Javascript

Minification Javascript adalah teknik yang memadatkan skrip Anda menjadi jejak yang jauh lebih kecil. Anda kehilangan keterbacaan manusia tetapi Anda menghemat bandwidth yang besar - pada akhirnya, Javascript dimaksudkan untuk browser Anda, bukan untuk pengguna Anda.

Sebagian besar situs web produksi menggunakan minifikasi Javascript tetapi cara ini dicapai sangat bervariasi. Dari konverter online sederhana hingga alat GUI yang lebih komprehensif hingga antarmuka baris perintah, opsi kami cukup beragam. Pada artikel ini kita akan melihat cara kerja minification Javascript, bagaimana kita dapat membangunnya ke dalam alur kerja kita dan apa pro dan kontra dari minifying itu.

Cara Kerja Minification

Cara terbaik untuk mempelajari apa yang terjadi ketika Anda mengecilkan kode Anda adalah dengan melihat di UglifyJS Github Repository. Script ini digunakan di banyak konverter online serta alat GUI dan alat baris perintah seperti Grunt. Berikut ini beberapa transformasi yang diterapkan untuk membuat kode Anda lebih pendek:

Menghapus ruang yang tidak perlu
Persingkat nama variabel, biasanya menjadi karakter tunggal
Bergabung dengan deklarasi var berturut-turut
Mengonversi array ke objek jika memungkinkan
Mengoptimalkan pernyataan if
Menghitung ekspresi konstan sederhana
dll.

Sebagai contoh cepat, inilah fungsi yang pada dasarnya menulis beberapa teks yang diberikan.

 fungsi halo (teks) document.write (teks);

halo ('Selamat datang di artikel');

Mari kita lihat apa yang terjadi ketika kita memperkecil ini. Perhatikan penghapusan spasi dan lekukan dan pemendekan variabel teks.

function hello (e) document.write (e) hello ("Selamat datang di artikel")

Alat Minifikasi Javascript

Alat yang digunakan untuk meminimalkan Javascript dapat dikategorikan secara luas menjadi 3 grup: alat online, alat GUI dan alat baris perintah.

Dengan alat online, biasanya masalah menempelkan kode Anda dan segera menyalin hasilnya.
Alat GUI sering mengandung lebih banyak fungsi; Minifikasi JS hanya sebagian kecil dari apa yang mereka lakukan.
Alat baris perintah juga biasanya lebih komprehensif, menawarkan minifikasi sebagai modul.

Alat Online

javascript-minifier.com adalah alat yang terlihat bagus dengan API
Online YUI Compressor adalah alat yang lebih kuat yang menggunakan kompresor YUI, dengan banyak opsi dan kemampuan minifikasi CSS juga
jscompress.com adalah minifier tanpa embel-embel tetapi menyelesaikan pekerjaan
jsmini.com adalah pilihan lain yang sederhana namun sepenuhnya dapat digunakan

Hal hebat tentang alat online adalah kecepatan Anda dapat menggunakannya. Perangkat GUI dan baris perintah yang rumit lebih cepat dikecilkan, tetapi Anda perlu mengatur proyek agar dapat berfungsi dengan baik. Kelemahan dari alat ini adalah sebagian besar dari mereka memberikan sedikit atau tanpa penyesuaian, setidaknya jika dibandingkan dengan alat baris perintah.

Alat GUI

Koala adalah alat gratis untuk KURANG, kompilasi SASS, JS minification dan banyak lagi
Prepros adalah aplikasi berbayar lintas platform yang memberi Anda lebih banyak opsi
Codekit adalah aplikasi pilihan saya. Ini adalah aplikasi khusus Mac berbayar yang menawarkan kompilasi kode, minifikasi, server pratinjau, manajemen paket bower, dan banyak lagi
AjaxminGui adalah alat Windows satu-tujuan gratis untuk meminimalkan JS Anda
UltraMinifier adalah aplikasi gratis untuk OS X yang meminimalkan CSS dan JS dengan drag and drop
Smaller adalah alat OS X yang mengecilkan dan menggabungkan file untuk Anda

Saya telah menyebutkan dua jenis aplikasi GUI di sini. Aplikasi minifikasi satu langkah sederhana sangat mirip dengan rekan daring mereka. Mereka sangat cepat digunakan karena Anda hanya dapat menyeret-dan-meletakkan file ke dalamnya, tidak diperlukan pengaturan. Konon, mereka hampir tidak menyediakan kustomisasi.

Alat GUI yang lebih besar (Prepros, Koala, Codekit) sangat bagus dalam mengelola proyek dan memberi Anda lebih banyak pilihan untuk kompresi tetapi mereka melakukannya perlu sedikit pengaturan. Minifikasi JS cepat akan memakan waktu sekitar 20 detik pengaturan yang banyak, dibandingkan dengan proses 2 detik alat GUI online atau sederhana.

Di sisi lain, mereka menawarkan lebih banyak fitur secara umum dan memberi Anda otomatisasi. File JS Anda akan diperkecil setiap kali Anda menyimpannya, tidak perlu dikecilkan secara manual. Jika Anda mengembangkan sesuatu dalam Javascript, ini jelas cara yang harus dilakukan.

Alat Baris Perintah

Minify adalah untuk mereka yang ingin memperkecil JS dari baris perintah tetapi tidak ingin mengatur sesuatu yang mewah di Grunt atau Gulp
Uglify.js yang telah kami sebutkan sebelumnya juga tersedia sebagai alat baris perintah yang berdiri sendiri
Grunt memiliki ekstensi untuk minifikasi Javascript bernama grunt-contrib-uglify
Gulp juga memiliki minifikasi JS menggunakan Uglify.js melalui gulp-uglify

Alat baris perintah tidak hanya untuk Geeks Linux! Saya tidak hebat di terminal tetapi mengatur hal-hal seperti Grunt dan Gulp mudah melalui dokumentasi hebat mereka. Kelebihan alat baris perintah adalah jumlah fleksibilitas luar biasa yang Anda miliki dari opsi ke output.

Di sisi lain, ada a sedikit kurva belajar. Membiasakan diri dengan baris perintah membutuhkan beberapa (tidak banyak) latihan yang menurut Anda akan membatasi sebelum Anda mulai menikmati manfaatnya.

Ikhtisar

Jika Anda baru mengenal pengembangan web, saya akan merekomendasikan salah satu dari tiga alat GUI pertama. Mereka akan membantu Anda mengelola proyek Anda secara umum dan menawarkan lebih dari sekadar minifikasi JS.

Jika Anda seorang profesional berpengalaman, Anda mungkin harus memeriksa Grunt atau Gulp karena ini menawarkan kontrol paling besar atas tugas otomasi. Jika Anda perlu memperkecil skrip dengan cepat tanpa mengatur proyek, alat baris perintah dapat menghemat banyak waktu.

Setiap kelompok alat memiliki kelebihan dan kekurangan masing-masing dan pada kenyataannya Anda mungkin akan berakhir menggunakan masing-masing pada suatu titik atau lainnya. Perlu diingat bahwa ketika dalam lingkungan produksi Anda harus selalu mengecilkan Javascript dan CSS Anda!