javascript - 如何 'minify' Javascript代码

Question

JQuery有两个版本可供下载，一个是Production(19KB，压缩和 Gzipped)，另一个是Development(120KB，未压缩代码)。

现在压缩版只有19kb，如果你下载它，你会看到仍然是一段javascript可执行代码。他们是如何压缩它的？我怎样才能像那样“缩小”我的代码？

Answer 1

DIY 缩小

没有压缩器可以正确压缩错误代码。

在这个例子中，我只想展示一个 minifier 做了多少。

在缩小之前你应该做什么

关于 jQuery...我不使用 jQuery。jQuery 是用于旧浏览器的，它是出于兼容性原因而制作的..检查 caniuse.com，几乎所有内容都适用于每个浏览器(现在 ie10 已标准化) ，我认为现在它只是为了减慢您的 Web 应用程序...如果您喜欢 $() 您应该创建自己的简单函数。如果您的客户需要，为什么还要费心压缩您的代码每次都下载 100kb 的 jquery 脚本？你的未压缩代码有多大？ 5-6kb..？更不用说您为了简化操作而添加的大量插件。

原始代码

当你写一个函数时，你有一个想法，开始写东西，有时你最终会得到类似下面代码的东西。代码有效。现在大多数人停止思考并将它添加到压缩器并发布它。

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;
}

这是精简代码(我添加了新行)

缩小使用 ( 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
}

但是所有这些变量、if、循环和定义都是必要的吗？

大多数时候不!

1. 删除不必要的if、loop、var
2. 保留原始代码的副本
3. 使用压缩器

可选(提高性能并缩短代码)

1. 使用速记运算符
2. 使用按位运算符(不要使用Math)
3. 使用 a,b,c... 作为您的临时变量
4. 使用旧语法(while，for...而不是forEach)
5. 使用函数参数作为占位符(在某些情况下)
6. 删除不必要的 "{}","()",";",空格，换行符
7. 使用压缩器

现在，如果一个压缩器可以压缩代码，那你就错了。

没有压缩器可以正确压缩错误代码。

DIY

function myFunction(a,b,c){
 for(b=[],c={};a--;)b[a]=a,c[a]=a+1+'';
 return[b,c]
}

它的作用与上面的代码完全相同。

性能

http://jsperf.com/diyminify

你总是需要思考你需要什么:

在你说“没有人会编写像下面这样的代码”之前，请检查这里的前 10 个问题......

以下是我每十分钟看到的一些常见示例。

想要一个可重复使用的条件

if(condition=='true'){
 var isTrue=true;
}else{
 var isTrue=false;
}
//same as
var isTrue=!!condition

只有存在时才提示是

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

警报是或否

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

将数字转换为字符串，反之亦然

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

四舍五入

var a=10.3899845
var b=Math.round(a);
//same as
var b=(a+.5)|0;//numbers up to 10 decimal digits (32bit)

楼层数

var a=10.3899845
var b=Math.floor(a);
//same as
var b=a|0;//numbers up to 10 decimal digits (32bit)

开关盒

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);

尝试捕捉

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);

更多如果

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');

但是 indexOf 读起来很慢 https://stackoverflow.com/a/30335438/2450730

数字

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;

我发现了一些关于按位/速记的好文章/网站:

http://mudcu.be/journal/2011/11/bitwise-gems-and-other-optimizations/

http://www.140byt.es/

http://www.jquery4u.com/javascript/shorthand-javascript-techniques/

如果您使用自己喜欢的搜索引擎进行搜索，还有许多 jsperf 站点显示速记和 bitwsie 的性能。

我可以坚持几个小时……但我认为现在已经足够了。

如果您有任何问题，请尽管提出。

记住

没有压缩器可以正确压缩错误代码。