Minifikacja DIY
Żaden minifier nie może poprawnie skompresować złego kodu.
W tym przykładzie chcę tylko pokazać, ile robi minifier.
Co powinieneś zrobić, zanim zminimalizujesz
A jeśli chodzi o jQuery ... nie używam jQuery.jQuery jest dla starych przeglądarek, zostało stworzone ze względu na kompatybilność ... sprawdź caniuse.com, prawie wszystko działa na każdej przeglądarce (również ie10 jest teraz znormalizowane), myślę, że teraz jest tylko tutaj, aby spowolnić swoją aplikację internetową ... jeśli chcesz $(), powinieneś stworzyć własną prostą funkcję. I po co zawracać sobie głowę kompresją kodu, jeśli Twoi klienci muszą za każdym razem pobierać skrypt jquery o rozmiarze 100 kb? jak duży jest twój nieskompresowany kod? 5-6kb ..? Nie wspominając o mnóstwie wtyczek, które dodajesz, aby to ułatwić.
Oryginalny kod
Kiedy piszesz funkcję, masz pomysł, zacznij pisać, a czasami kończy się coś w rodzaju następującego kodu. Kod działa.Teraz większość ludzi przestaje myśleć i dodaje to do minifier i publikuje.
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;
}
Oto zminimalizowany kod (dodałem nowe linie)
Zminimalizowano za pomocą ( 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
}
Ale czy te wszystkie zmienne, jeśli, pętle i definicje są konieczne?
Przez większość czasu NIE !
- Usuń niepotrzebne if, loop, var
- Zachowaj kopię swojego oryginalnego kodu
- Użyj minifier
OPCJONALNIE (zwiększa wydajność i krótszy kod)
- używaj operatorów skrótów
- użyj operatorów bitowych (nie używaj
Math)
- użyj a, b, c ... dla twoich zmiennych temp
- użyj starej składni (
while, for... nie forEach)
- użyj argumentów funkcji jako symbolu zastępczego (w niektórych przypadkach)
- usuń niepotrzebne
"{}","()",";",spaces,newlines
- Użyj minifier
Jeśli minifier może skompresować kod, robisz to źle.
Żaden minifier nie może poprawnie skompresować złego kodu.
majsterkowanie
function myFunction(a,b,c){
for(b=[],c={};a--;)b[a]=a,c[a]=a+1+'';
return[b,c]
}
Robi dokładnie to samo, co powyższe kody.
Występ
http://jsperf.com/diyminify
Zawsze musisz pomyśleć, czego potrzebujesz:
Zanim powiesz „Nikt nie napisałby kodu takiego jak ten poniżej”, przejdź tutaj i sprawdź pierwsze 10 pytań ...
Oto kilka typowych przykładów, które widzę co dziesięć minut.
Chcesz mieć stan wielokrotnego użytku
if(condition=='true'){
var isTrue=true;
}else{
var isTrue=false;
}
//same as
var isTrue=!!condition
Alert tak, tylko jeśli istnieje
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
Alert tak lub nie
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
Zamień liczbę na ciąg lub odwrotnie
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
Zaokrąglij liczbę
var a=10.3899845
var b=Math.round(a);
//same as
var b=(a+.5)|0;//numbers up to 10 decimal digits (32bit)
Piętro numer
var a=10.3899845
var b=Math.floor(a);
//same as
var b=a|0;//numbers up to 10 decimal digits (32bit)
Sprawa przełącznik
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);
próbuj złapać
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);
więcej, jeśli
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');
ale indexOfwolno czytać to https://stackoverflow.com/a/30335438/2450730
liczby
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;
Kilka fajnych artykułów / stron, które znalazłem na temat bitwise / shorthand:
http://mudcu.be/journal/2011/11/bitwise-gems-and-other-optimizations/
http://www.140byt.es/
http://www.jquery4u.com/javascript/shorthand-javascript-techniques/
Istnieje również wiele witryn jsperf pokazujących wydajność shorthand & bitwsie, jeśli szukasz przy użyciu swojej ulubionej wyszukiwarki.
Mógłbym chodzić godzinami ... ale myślę, że na razie wystarczy.
jeśli masz jakieś pytania, po prostu zadaj.
I pamiętaj
Żaden minifier nie może poprawnie skompresować złego kodu.