14 Alat Untuk Meminimumkan Javascript

Pengurangan Javascript adalah teknik yang menggabungkan skrip anda menjadi jejak yang jauh lebih kecil. Anda kehilangan pembacaan manusia tetapi anda mengekalkan jalur lebar yang banyak - pada akhirnya, Javascript dimaksudkan untuk penyemak imbas anda bukan untuk pengguna anda.

Kebanyakan laman web pengeluaran menggunakan pengurangan Javascript tetapi cara ini dicapai amat berbeza. Dari penukar dalam talian mudah untuk alat GUI yang lebih komprehensif kepada antara muka baris arahan, pilihan kami agak berbeza. Dalam artikel ini kita akan melihat bagaimana kelayakan Javascript berfungsi, bagaimana kita dapat membinanya ke dalam alur kerja kita dan apakah kebaikan dan keburukan untuk meminimumkan.

Bagaimana Minification berfungsi

Cara terbaik untuk mengetahui apa yang berlaku apabila anda memantapkan kod anda ialah melihat Repositori UglifyJS Github. Skrip ini digunakan dalam banyak penukar dalam talian serta alat GUI dan alat arahan seperti Grunt. Berikut adalah beberapa transformasi yang digunakan untuk membuat kod anda lebih pendek:

Menghapus ruang yang tidak perlu
Pendekkan nama variabel, biasanya kepada aksara tunggal
Bergabung dengan deklarasi var berturut-turut
Tukar array untuk objek jika mungkin
Mengoptimumkan jika pernyataan
Mengira ungkapan tetap sederhana
dan lain-lain.

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

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

halo ('Selamat datang ke artikel');

Mari kita lihat apa yang berlaku apabila kita meminimumkan ini. Perhatikan penyingkiran ruang dan lekukan dan pemendekan pemboleh ubah teks.

fungsi hello (e) document.write (e) hello ("Selamat datang ke artikel")

Alat Pengurangan Javascript

Alat yang digunakan untuk meminimumkan Javascript boleh secara luas dikategorikan kepada 3 kumpulan: alat dalam talian, alat GUI dan alat baris perintah.

Dengan alatan dalam talian, biasanya masalah menyisipkan kod anda dan menyalin hasilnya dengan segera.
Alat GUI sering mengandungi lebih banyak fungsi; Pembombaan JS hanyalah bahagian kecil dari apa yang mereka lakukan.
Alat baris perundingan juga biasanya lebih komprehensif, menawarkan pengurangan sebagai modul.

Alat Dalam Talian

javascript-minifier.com adalah alat yang bagus dengan API
Pemampat YUI dalam talian adalah alat yang lebih berkuasa yang menggunakan pemampat YUI, dengan banyak pilihan dan kemampuan pengurangan CSS juga.
jscompress.com adalah peminat tanpa perkhidmatan tetapi ia mendapat kerja yang dilakukan
jsmini.com adalah satu lagi pilihan mudah tetapi boleh digunakan sepenuhnya

Perkara yang hebat tentang alat dalam talian adalah kelajuan yang membolehkan anda bekerja dengan mereka. GUI Kompleks dan alat baris perintah meminimumkan dengan lebih cepat tetapi anda perlu menyediakan projek untuk berfungsi dengan baik. Kelemahan kepada alat ini adalah kebanyakannya memberikan sedikit penyesuaian, sekurang-kurangnya apabila dibandingkan dengan alat baris perintah.

Alat GUI

Koala adalah alat percuma untuk LESS, kompilasi SASS, pengurangan JS dan banyak lagi
Prepros adalah aplikasi berbayar rentas platform yang memberi anda lebih banyak pilihan
Codekit adalah aplikasi pilihan saya. Ia adalah aplikasi Mac sahaja yang menawarkan kompilasi kod, pengecilan, pelayan pratonton, pengurusan pakej bower, dan banyak lagi
AjaxminGui adalah alat Windows percuma, satu tujuan untuk meminimumkan JS anda
UltraMinifier adalah aplikasi percuma untuk OS X yang memantulkan CSS dan JS dengan seret dan lepaskan
Lebih kecil adalah alat OS X yang meminimumkan dan menggabungkan fail untuk anda

Saya telah menyebut dua jenis aplikasi GUI di sini. Aplikasi pembombaan satu langkah mudah seperti rakan sejawat dalam talian mereka. Mereka sangat cepat digunakan kerana anda hanya boleh drag-and-drop fail ke dalamnya, tiada persediaan diperlukan. Yang berkata, mereka menyediakan hampir tiada penyesuaian.

Alat GUI yang lebih besar (Prepros, Koala, Codekit) sangat baik dalam menguruskan projek-projek dan memberikan anda sedikit pilihan untuk mampatan tetapi mereka lakukan memerlukan sedikit persediaan. Pembetulan JS cepat akan mengambil masa kira-kira 20 saat persediaan yang banyak, berbanding dengan 2 proses kedua dalam talian atau alat GUI mudah.

Sebaliknya, mereka menawarkan lebih banyak ciri secara umum dan menyediakan anda dengan automasi. Fail JS anda akan diminimumkan setiap kali anda menyimpannya, tidak perlu mengecilkannya secara manual. Jika anda membangun sesuatu dalam Javascript ini pasti cara untuk pergi.

Alat Talian Perintah

Minify adalah untuk mereka yang ingin memecahkan JS dari baris arahan tetapi tidak mahu membuat apa-apa yang mewah dalam Grunt atau Gulp
Uglify.js yang telah kami sebutkan tadi juga tersedia sebagai alat baris arahan yang berasingan
Grunt mempunyai sambungan untuk pengurangan Javascript bernama grunt-contrib-uglify
Gulp juga telah meminimumkan JS menggunakan Uglify.js melalui gulp-uglify

Alat baris perintah bukan hanya untuk geeks Linux! Saya tidak hebat di terminal tetapi menubuhkan perkara seperti Grunt dan Gulp mudah melalui dokumentasi hebat mereka. Peranti garisan baris terbalik adalah jumlah fleksibiliti yang anda gemari dari pilihan untuk output.

Sebaliknya, terdapat a sedikit kurva pembelajaran. Mendapatkan ke baris arahan mengambil beberapa (tidak banyak) amalan yang anda akan dapati ketat sebelum anda mula menikmati faedah.

Gambaran keseluruhan

Jika anda baru dalam pembangunan web, saya akan mencadangkan salah satu daripada tiga alat GUI yang pertama. Mereka akan membantu anda menguruskan projek anda secara umum dan menawarkan lebih daripada sekadar pengurangan JS.

Jika anda seorang pro yang berpengalaman, anda mungkin perlu melihatnya Grunt atau Gulp kerana ini menawarkan kawalan yang paling ke atas tugas automasi. Jika anda perlu memendekkan skrip dengan cepat tanpa menyediakan projek, alat arahan boleh menjimatkan banyak masa.

Setiap kumpulan alat mempunyai kebaikan dan keburukan mereka dan secara kebetulan anda mungkin akan menggunakan salah satu daripada satu atau lebih. Perlu diingat bahawa apabila dalam persekitaran pengeluaran, anda harus selalu memedulikan Javascript dan CSS anda!