Pemampat JavaScript: Bagaimana dan Mengapa Meminimumkan JS Anda

Kami semua pernah ke sana, anda belajar bagaimana membina laman web yang hebat , tetapi setelah anda menerbitkannya, ia akan menjadi perlahan.

Meminimumkan javascript anda adalah salah satu cara untuk mempercepat masa tindak balas laman web (bersama dengan memampatkan HTML ), dan untungnya bagi anda, ini adalah proses yang mudah. Hari ini saya akan menunjukkan kepada anda semua yang perlu anda ketahui.

Apa maksud Minify?

Proses dari pengurangan (atau meminimumkan ) adalah konsep sederhana. Apabila anda menulis kod dalam JavaScript atau bahasa lain, terdapat banyak ciri yang hanya diperlukan untuk membuat kod lebih mudah difahami oleh manusia - komputer tidak peduli dengan apa yang anda sebut pemboleh ubah anda, atau berapa jarak jarak di sekitar tanda kurung, sebagai contoh.

Dengan meminimumkan kod, anda dapat mengurangkan ukuran failnya secara drastik. Oleh itu, fail yang lebih kecil akan lebih pantas dimuat turun oleh pengguna anda. Sekiranya anda hanya menulis satu atau dua baris JavaScript, mungkin tidak akan ada peningkatan yang ketara. Walau bagaimanapun, jika anda menulis banyak kod, atau menggunakan perpustakaan besar seperti jQuery, peningkatan prestasi yang ketara dan pengurangan saiz fail secara drastik dapat dicapai dengan mudah!

Sekiranya anda memuatkan kod dari CDN luaran, seperti Perpustakaan Dihoskan Google , anda telah menggunakan kod kecil.

mengapa cakera saya pada 100 peratus

Seperti apa Kod Minified?

Mari lihat beberapa contoh. Sukar untuk melihat kesan pengurangan pada asas kod kecil, jadi saya meminta maaf terlebih dahulu untuk jangka panjang mereka.

Inilah beberapa tidak disatukan 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();  
}

Inilah kod minimum:

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 minimum kod ini adalah 39 peratus lebih kecil. Dalam contoh ini, nama pemboleh ubah tetap sama, tetapi semua ruang kosong dan komen telah dikeluarkan.

Inilah contoh lain dari panduan kami untuk 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');  
});

Inilah kod minimum:

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 peratus pengurangan - itu masih sangat baik untuk sekumpulan kecil kod.

Inilah satu contoh terakhir dari panduan kami ke 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 komen dan ruang kosong. Versi yang dikurangkan mengurangkan ukuran fail sebanyak 52 peratus :

adakah saya memerlukan pembaca adob akrobat dc

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

Berikut adalah ukuran beberapa Perpustakaan JavaScript biasa berbanding dengan versi minimum mereka:

Carta tinggi: 1 MB> 201 KB
jQuery: 270 KB> 90 KB
MooTools: 164 KB> 93 KB

Sebilangan perpustakaan ini menunjukkan pengurangan saiz yang ketara apabila dimampatkan ( ~ 80 peratus ), sementara yang lain tidak begitu baik ( ~ 40 peratus ). Walaupun begitu, penjimatan apa pun akan menjadikan laman web anda lebih cepat untuk pengguna anda, dan mengurangkan tekanan pada pelayan web anda.

Bagaimana Anda Mengurangkan?

Sekarang anda tahu bagaimana ia berfungsi dan bagaimana rupa, mari kita selami cara melakukannya. Jangan risau, tidak perlu mengubah kod anda secara manual! Terdapat pelbagai alat yang tersedia secara bebas yang mengendalikan proses untuk anda.

Ini berfungsi dalam beberapa cara. Sebilangan besar alat dalam talian membolehkan anda menyalin dan menampal kod, yang kemudian mereka proses dan kembalikan kepada anda di halaman. Alat ini akan membolehkan anda memuat naik banyak fail juga.

Berikut adalah sebilangan kecil alat dalam talian. Mereka kebanyakan bekerja sama sehingga anda tidak perlu terlalu risau untuk memilih mana.

JSCompress - Saya secara peribadi menggunakan laman web ini paling banyak jika ia hanya pekerjaan yang cepat. Ia pantas dijalankan dan mereka bahkan menunjukkan kepada anda alat yang mereka gunakan untuk membinanya.

Pengurang JavaScript - Alat ini berfungsi dengan baik, tetapi ia benar-benar bersinar sebagai API. Ini membolehkan anda membina integrasi atau perkhidmatan anda sendiri di atas laman web yang ada.

Pengecil JavaScript - Laman web lain dengan nama yang sama, alat ini semudah mereka datang. Tiada pilihan atau menu, hanya satu butang.

Kecilkan - Laman web ini kelihatan luar biasa, dan para pembangun dengan jelas memperhatikan perinciannya di sini.

Senarai ini boleh kekal selama-lamanya. Terdapat begitu banyak alat dalam talian untuk meminimumkan laman web sehingga sukar untuk salah.

Alat pengecil juga wujud sebagai alat baris perintah atau pemalam untuk anda Penyunting JavaScript . Alat ini selalunya lebih pantas digunakan, dan 'hanya berfungsi' dengan kod anda yang ada. Tidak perlu menyalin dan menempelkan, dan anda tidak perlu mengekstrak JavaScript dari HTML atau CSS mana pun yang mungkin ada dalam fail yang sama.

Sekiranya anda menggunakan Microsoft Visual Studio, yang Bundler dan Minifier peluasan dari pasaran mempunyai lebih daripada 600,000 pemasangan! Bukan itu sahaja, tetapi ia sentiasa dikemas kini dan terdapat di GitHub .

Sekiranya anda peminat Teks Luhur seperti saya, maka Kecilkan pakej adalah yang anda mahukan. Dengan lebih daripada 61,000 pemasangan, ia adalah pakej yang sangat popular, dan juga merupakan pakej yang sangat popular terdapat di GitHub , sekiranya anda ingin menyumbang kepada projek sumber terbuka.

Akhirnya, jika anda seorang PyCharm pengguna, anda boleh konfigurasikan untuk mengintegrasikan secara langsung dengan banyak alat pemampatan biasa seperti Pemampat YUI . Sebilangan besar alat ini secara langsung menggunakan alat dalam talian yang disenaraikan di atas.

Kaveat

Di sana telah menjadi tangkapan bukan? Tidak ada yang sempurna. Ya, ada satu masalah, tetapi agak kecil dan mudah dikendalikan:

Kod kecil tidak dapat dikembalikan ke keadaan asalnya.

Apabila anda meminimumkan sebarang kod, bentuk asalnya hilang. Anda perlu menyimpan salinannya jika anda ingin mempunyai harapan untuk membuat perubahan besar dengan mudah - tidak cukup untuk menggunakan kawalan versi.

Walaupun mungkin untuk unminify kod anda, ia tidak sama lagi. Semua komen berharga anda hilang, satu perkara.

Ini bukan masalah besar, tetapi anda harus ingat semasa membuat pengekodan. Sebagai peraturan asas, tidak termampat > membangun dan dimampatkan > pengeluaran.

Sekarang anda tahu semua yang perlu diketahui mengenai meminimumkan JavaScript! Mengurangkan kod adalah salah satu cara untuk meningkatkan prestasi pelayan, dan semua laman web besar melakukannya.

Alat apa yang anda gunakan untuk meminimumkan kod anda? Adakah anda mengganggu? Beritahu kami dalam komen di bawah!

mengapa saya tidak boleh memotong dalam pratonton

Kredit Imej: NavinTar melalui Shutterstock

Berkongsi Berkongsi Tweet E-mel Padamkan Fail dan Folder Windows Ini untuk Mengosongkan Ruang Cakera

Perlu mengosongkan ruang cakera pada komputer Windows anda? Berikut adalah fail dan folder Windows yang dapat dihapuskan dengan selamat untuk mengosongkan ruang cakera.

Baca Seterusnya Topik-topik yang berkaitan

Pengaturcaraan
JavaScript
Jawa
Reka Bentuk Web

Mengenai Pengarang Joe Coburn(136 Artikel Diterbitkan)

Joe adalah lulusan Sains Komputer dari University of Lincoln, UK. Dia seorang pembangun perisian profesional, dan ketika dia tidak terbang drone atau menulis muzik, dia sering didapati mengambil gambar atau menghasilkan video.

Lagi Dari Joe Coburn

Langgan buletin kami

Sertailah buletin kami untuk mendapatkan petua, ulasan, ebook percuma, dan tawaran eksklusif!

Klik di sini untuk melanggan