Minifikasi DIY
Tidak ada penambang yang dapat mengompresi kode buruk dengan benar.
Dalam contoh ini saya hanya ingin menunjukkan seberapa banyak minifier dapat bekerja.
Apa yang harus Anda lakukan sebelum mengecilkan
Dan mengenai jQuery ... saya tidak menggunakan jQuery.jQuery untuk browser lama, itu dibuat untuk alasan kompatibilitas .. periksa caniuse.com, hampir semuanya berfungsi di setiap browser (juga ie10 sudah distandarisasi sekarang), saya rasa sekarang sudah hanya di sini untuk memperlambat aplikasi web Anda ... jika Anda suka, $()Anda harus membuat fungsi sederhana Anda sendiri. Dan mengapa repot-repot mengompres kode Anda jika klien Anda perlu mengunduh skrip jquery 100kb setiap kali? seberapa besar kode Anda yang tidak terkompresi? 5-6kb ..? Belum lagi banyak plugin yang Anda tambahkan untuk membuatnya lebih mudah.
Kode Asli
Ketika Anda menulis fungsi, Anda memiliki ide, mulailah menulis sesuatu dan terkadang Anda berakhir dengan sesuatu seperti kode berikut. Kode berfungsi Sekarang kebanyakan orang berhenti berpikir dan menambahkan ini ke minifier dan menerbitkannya.
function myFunction(myNumber){
var myArray = new Array(myNumber);
var myObject = new Object();
var myArray2 = new Array();
for(var myCounter = 0 ; myCounter < myArray.length ; myCounter++){
myArray2.push(myCounter);
var myString = myCounter.toString()
myObject[ myString ] = ( myCounter + 1 ).toString();
}
var myContainer = new Array();
myContainer[0] = myArray2;
myContainer[1] = myObject;
return myContainer;
}
Ini adalah kode minified (saya menambahkan baris baru)
Diperkecil menggunakan ( http://javascript-minifier.com/ )
function myFunction(r){
for(var n=new Array(r),t=new Object,e=new Array,a=0;a<n.length;a++){
e.push(a);
var o=a.toString();
t[o]=(a+1).toString()
}
var i=new Array;
return i[0]=e,i[1]=t,i
}
Tetapi apakah semua vars, if, loop & definisi itu diperlukan?
Sebagian besar waktu TIDAK !
- Hapus if, loop, var
- Simpan salinan kode asli Anda
- Gunakan minifier
OPSIONAL (meningkatkan kinerja & kode yang lebih pendek)
- gunakan operator steno
- gunakan operator bitwise (jangan gunakan
Math)
- gunakan a, b, c ... untuk vars temp Anda
- gunakan sintaks lama (
while, for... tidak forEach)
- gunakan argumen fungsi sebagai placeholder (dalam beberapa kasus)
- hapus yang tidak perlu
"{}","()",";",spaces,newlines
- Gunakan minifier
Sekarang jika penambang dapat memampatkan kode Anda melakukannya dengan salah.
Tidak ada penambang yang dapat mengompresi kode buruk dengan benar.
DIY
function myFunction(a,b,c){
for(b=[],c={};a--;)b[a]=a,c[a]=a+1+'';
return[b,c]
}
Ini persis sama dengan kode di atas.
Performa
http://jsperf.com/diyminify
Anda selalu perlu memikirkan apa yang Anda butuhkan:
Sebelum Anda mengatakan "Tidak ada yang akan menulis kode seperti di bawah ini" buka dan periksa 10 pertanyaan pertama di sini ...
Berikut beberapa contoh umum yang saya lihat setiap sepuluh menit.
Ingin kondisi yang dapat digunakan kembali
if(condition=='true'){
var isTrue=true;
}else{
var isTrue=false;
}
//same as
var isTrue=!!condition
Waspada ya hanya jika ada
if(condition==true){
var isTrue=true;
}else{
var isTrue=false;
}
if(isTrue){
alert('yes');
}
//same as
!condition||alert('yes')
//if the condition is not true alert yes
Waspada ya atau tidak
if(condition==true){
var isTrue=true;
}else{
var isTrue=false;
}
if(isTrue){
alert('yes');
}else{
alert('no');
}
//same as
alert(condition?'yes':'no')
//if the condition is true alert yes else no
Mengonversi angka menjadi string atau sebaliknya
var a=10;
var b=a.toString();
var c=parseFloat(b)
//same as
var a=10,b,c;
b=a+'';
c=b*1
//shorter
var a=10;
a+='';//String
a*=1;//Number
Membulatkan angka
var a=10.3899845
var b=Math.round(a);
//same as
var b=(a+.5)|0;//numbers up to 10 decimal digits (32bit)
Memberi nomor lantai
var a=10.3899845
var b=Math.floor(a);
//same as
var b=a|0;//numbers up to 10 decimal digits (32bit)
kasus saklar
switch(n)
{
case 1:
alert('1');
break;
case 2:
alert('2');
break;
default:
alert('3');
}
//same as
var a=[1,2];
alert(a[n-1]||3);
//same as
var a={'1':1,'2':2};
alert(a[n]||3);
//shorter
alert([1,2][n-1]||3);
//or
alert([1,2][--n]||3);
coba tangkap
if(a&&a[b]&&a[b][c]&&a[b][c][d]&&a[b][c][d][e]){
console.log(a[b][c][d][e]);
}
//this is probably the onle time you should use try catch
var x;
try{x=a.b.c.d.e}catch(e){}
!x||conole.log(x);
lebih jika
if(a==1||a==3||a==5||a==8||a==9){
console.log('yes')
}else{
console.log('no');
}
console.log([1,3,5,8,9].indexOf(a)!=-1?'yes':'no');
tapi indexOflambat baca https://stackoverflow.com/a/30335438/2450730 ini
nomor
1000000000000
//same as
1e12
var oneDayInMS=1000*60*60*24;
//same as
var oneDayInMS=864e5;
var a=10;
a=1+a;
a=a*2;
//same as
a=++a*2;
Beberapa artikel / situs bagus yang saya temukan tentang bitwise / steno:
http://mudcu.be/journal/2011/11/bitwise-gems-and-other-optimizations/
http://www.140byt.es/
http://www.jquery4u.com/javascript/shorthand-javascript-techniques/
Ada juga banyak situs jsperf yang menampilkan performa steno & bitwsie jika Anda mencari dengan mesin pencari favorit Anda.
Saya bisa pergi satu jam .. tapi saya pikir itu cukup untuk saat ini.
jika Anda memiliki beberapa pertanyaan, tanyakan saja.
Dan ingatlah
Tidak ada penambang yang dapat mengompresi kode buruk dengan benar.