Kompresor JavaScript: Bagaimana dan Mengapa Memperkecil JS Anda

Kita semua pernah ke sana, kamu belajar cara membuat situs web yang luar biasa , tetapi begitu Anda memublikasikannya, itu sangat lambat.

Memperkecil javascript Anda adalah salah satu cara untuk mempercepat waktu respons situs web (bersama dengan mengompresi HTML ), dan untungnya bagi Anda, ini adalah proses yang mudah. Hari ini saya akan menunjukkan kepada Anda semua yang perlu Anda ketahui.

Apa Artinya Minify?

Proses dari minifikasi (atau mengecilkan ) adalah konsep sederhana. Saat Anda menulis kode dalam JavaScript atau bahasa lain, ada banyak fitur yang hanya diperlukan untuk membuat kode lebih mudah dipahami manusia -- komputer tidak peduli apa yang Anda sebut variabel Anda, atau berapa banyak jarak yang ada di sekitar tanda kurung, Misalnya.

Dengan mengecilkan kode, Anda dapat mengurangi ukuran file secara drastis. Oleh karena itu, file yang lebih kecil akan lebih cepat diunduh oleh pengguna Anda. Jika Anda hanya menulis satu atau dua baris JavaScript, mungkin tidak akan ada peningkatan yang nyata. Namun, jika Anda menulis banyak kode, atau menggunakan perpustakaan besar seperti jQuery, peningkatan kinerja yang nyata dan ukuran file yang berkurang secara drastis dapat dengan mudah dicapai!

Jika Anda memuat kode dari CDN eksternal, seperti Perpustakaan yang Dihosting Google , Anda telah menggunakan kode yang diperkecil.

cara mengunduh musik dari google play ke pemutar mp3

Seperti Apa Tampilan Kode yang Dikecilkan?

Mari kita lihat beberapa contoh. Sulit untuk melihat dampak minifikasi pada basis kode kecil, jadi saya mohon maaf sebelumnya karena panjangnya.

Berikut beberapa tidak diperkecil JavaScript dari panduan kami untuk menggunakan JSON dengan Python dan JavaScript :

// setup some JSON to use  
var cars = [  
 { 'make':'Porsche', 'model':'911S' },  
 { 'make':'Mercedes-Benz', 'model':'220SE' },  
 { 'make':'Jaguar','model': 'Mark VII' }  
];  
window.onload = function() {  
 // setup the button click  
 document.getElementById('theButton').onclick = function() {  
 doWork()  
 };  
}  
function doWork() {  
 // ajax the JSON to the server  
 $.post('receiver', cars, function(){  
 });  
 // stop link reloading the page  
 event.preventDefault();  
}

Berikut kode yang diperkecil:

function doWork(){$.post('receiver',cars,function(){}),event.preventDefault()}var cars=[{make:'Porsche',model:'911S'},{make:'Mercedes-Benz',model:'220SE'},{make:'Jaguar',model:'Mark VII'}];window.onload=function(){document.getElementById('theButton').onclick=function(){doWork()}};

Versi kode yang diperkecil ini adalah 39 persen lebih kecil. Dalam contoh ini, nama variabel tetap sama, tetapi semua spasi dan komentar telah dihapus.

Berikut contoh lain dari panduan kami ke jQuery :

// dfd == deferred  
var dfd = $.Deferred();  
function doThing() {  
 $.get('some/slow/url', function() {  
 dfd.resolve();  
 });  
 return dfd.promise();  
}  
$.when(doThing()).then(function(){  
 console.log('YAY, it is finished');  
});

Berikut kode yang diperkecil:

function doThing(){return $.get('some/slow/url',function(){dfd.resolve()}),dfd.promise()}var dfd=$.Deferred();$.when(doThing()).then(function(){console.log('YAY, it is finished')});

Kali ini hanya ada 26 persen pengurangan -- itu masih sangat bagus untuk blok kode yang begitu kecil.

Berikut ini satu contoh terakhir dari panduan kami untuk Javascript dan DOM :

//declare a new variable to hold a new h1 element  
var newHeading = document.createElement('h1');  
//add the text node to the document  
var h1Text = document.createTextNode('Heading Level 1');  
//make it a child node of the new heading  
newHeading.appendChild(h1Text);  
//append this as a child of element defined as 'bt'  
document.getElementById('bt').appendChild(newHeading);

Perhatikan bagaimana ada banyak komentar dan spasi. Versi yang diperkecil mengurangi ukuran file sebesar 52 persen :

berapa banyak perangkat yang dapat saya tonton di netflix dalam satu akun

var newHeading=document.createElement('h1'),h1Text=document.createTextNode('Heading Level 1');newHeading.appendChild(h1Text),document.getElementById('bt').appendChild(newHeading);

Berikut adalah ukuran beberapa Pustaka JavaScript umum dibandingkan dengan versi yang diperkecil:

grafik tinggi: 1 MB > 201 KB
jQuery: 270 KB > 90 KB
Alat Moo: 164 KB > 93 KB

Beberapa perpustakaan ini menunjukkan pengurangan ukuran yang signifikan saat dikompresi ( ~80 persen ), sementara yang lain tidak begitu baik ( ~40 persen ). Meskipun demikian, penghematan apa pun akan membuat situs web Anda lebih cepat bagi pengguna Anda, dan mengurangi beban pada server web Anda.

Bagaimana Anda Memperkecil?

Sekarang Anda tahu cara kerjanya dan seperti apa, mari selami cara melakukannya. Jangan khawatir, tidak perlu mengubah kode Anda secara manual sama sekali! Ada berbagai alat yang tersedia secara bebas yang menangani proses untuk Anda.

Ini bekerja dalam beberapa cara. Sebagian besar alat online memungkinkan Anda menyalin dan menempelkan kode, yang kemudian akan diproses dan dikembalikan kepada Anda di halaman. Alat-alat ini akan sering memungkinkan Anda mengunggah banyak file juga.

Berikut adalah ringkasan singkat dari alat online. Mereka sebagian besar bekerja sama sehingga Anda tidak perlu terlalu khawatir tentang mana yang harus dipilih.

JSCompress -- Saya pribadi paling sering menggunakan situs web ini jika itu hanya pekerjaan cepat. Ini cepat untuk dijalankan dan mereka bahkan menunjukkan alat yang mereka gunakan untuk membuatnya.

JavaScript Minifier -- Alat ini bekerja dengan baik, tetapi benar-benar bersinar sebagai API . Ini memungkinkan Anda membangun integrasi atau layanan Anda sendiri di atas situs web mereka yang sudah ada.

JavaScript Minifier -- Situs web lain dengan nama yang sama, alat ini sangat sederhana. Tidak ada pilihan atau menu, hanya satu tombol.

Mengecilkan -- Situs web ini terlihat luar biasa, dan para pengembang telah dengan jelas memperhatikan detailnya di sini.

Daftar ini bisa berlangsung selamanya. Ada begitu banyak alat online untuk mengecilkan situs web sehingga sulit untuk salah.

Alat pengecilan juga ada sebagai alat baris perintah atau plugin untuk Editor JavaScript . Alat-alat ini seringkali lebih cepat digunakan, dan 'berfungsi' dengan kode yang ada. Tidak perlu menyalin dan menempel, dan Anda tidak perlu mengekstrak JavaScript dari HTML atau CSS apa pun yang mungkin berada dalam file yang sama.

Jika Anda menggunakan Microsoft Visual Studio, Bundel dan Miniifier ekstensi dari pasar memiliki lebih dari 600.000 pemasangan! Tidak hanya itu, tetapi juga diperbarui secara berkala dan tersedia di GitHub .

Jika Anda penggemar Teks Sublim seperti saya, maka Mengecilkan paket adalah yang Anda inginkan. Dengan lebih dari 61.000 pemasangan, ini adalah paket yang sangat populer, dan juga tersedia di GitHub , jika Anda ingin berkontribusi pada proyek sumber terbuka .

Akhirnya, jika Anda seorang PyCharm pengguna, Anda bisa konfigurasikan untuk mengintegrasikan langsung dengan banyak alat kompresi umum seperti kompresor YUI . Banyak dari alat ini secara langsung memberi daya pada alat online yang tercantum di atas.

Peringatan

Di sana memiliki menjadi tangkapan yang tepat? Tidak ada yang pernah bisa sempurna. Ya, ada satu masalah, tetapi cukup kecil dan mudah diatasi:

Kode yang diperkecil tidak dapat dikembalikan ke keadaan semula.

Saat Anda mengecilkan kode apa pun, bentuk aslinya akan hilang. Anda perlu menyimpan salinannya jika Anda ingin memiliki harapan untuk membuat perubahan besar dengan mudah -- tidak cukup menggunakan kontrol versi .

Meskipun mungkin untuk unminify kode Anda, tidak pernah sama lagi. Semua komentar berharga Anda hilang, untuk satu hal.

Ini bukan masalah besar, tetapi Anda harus mengingatnya saat membuat kode. Sebagai aturan dasar, tidak terkompresi > mengembangkan dan terkompresi > produksi.

Sekarang Anda tahu semua yang perlu diketahui tentang mengecilkan JavaScript! Memperkecil kode adalah salah satu cara untuk memeras kinerja server, dan semua situs web besar melakukannya.

Alat apa yang Anda gunakan untuk mengecilkan kode Anda? Apakah Anda bahkan repot-repot? Beri tahu kami di komentar di bawah!

cara melihat profil facebook yang diblokir

Kredit Gambar: NavinTar melalui Shutterstock

Membagikan Membagikan Menciak Surel Hapus File dan Folder Windows Ini untuk Mengosongkan Ruang Disk

Perlu mengosongkan ruang disk di komputer Windows Anda? Berikut adalah file dan folder Windows yang dapat dihapus dengan aman untuk mengosongkan ruang disk.

Baca Selanjutnya Topik-topik yang berkaitan

Pemrograman
JavaScript
Jawa
Desain web

Tentang Penulis Joe Coburn(136 Artikel Diterbitkan)

Joe adalah lulusan Ilmu Komputer dari University of Lincoln, Inggris. Dia adalah pengembang perangkat lunak profesional, dan ketika dia tidak menerbangkan drone atau menulis musik, dia sering terlihat sedang mengambil foto atau membuat video.

Berlangganan newsletter kami

Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!

Klik di sini untuk berlangganan