如何“微调”Javascript代码
JQuery有两个版本供下载，一个是生产（19KB，Minified和Gzipped） ，另一个是开发（120KB，未压缩的代码） 。
现在紧凑的19kb版本，如果你下载它，你会看到仍然是一个JavaScript的可执行代码。 他们是如何实现它的？ 而且我怎样才能把这样的代码“缩小”呢？
有一个比较好的JavaScript压缩器，你应该看看。
DIY缩小
没有缩小器可以正确压缩一个错误的代码。
在这个例子中，我只想显示一个缩小器的function。
在你缩小之前你应该做什么
而对于jQuery …我不使用jQuery.jQuery是旧的浏览器，它是出于兼容性的原因..检查caniuse.com，几乎一切工作在每个浏览器（也ie10是现在标准化），我想现在它是只是在这里放慢你的web应用程序…如果你喜欢$()你应该创build自己的简单函数。如果你的客户端需要下载100kb的jquery脚本每一天，为什么还要压缩你的代码？码？ 5-6kb ..？ 不要谈论你添加的插件，以使其更容易。
原始代码
当你写一个函数，你有一个想法，开始写东西，有时你会得到类似于下面的代码。代码works.Now大多数人停止思考，并将其添加到缩小器，并发布它。
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 }
但是，所有这些变数，ifs，循环和定义都是必要的吗？
大部分时间没有 ！
- 删除不必要的if，loop，var
- 保留原始代码的副本
- 使用缩小器
可选 （增加性能和更短的代码）
- 使用速记运算符
- 使用按位运算符（不要使用
Math） - 使用a，b，c …作为临时variables
- 使用旧的语法（
while，for… notforEach） - 使用函数参数作为占位符（在某些情况下）
- 删除不必要的
"{}","()",";",spaces,newlines - 使用缩小器
现在，如果一个缩小器可以压缩代码，你做错了。
没有缩小器可以正确压缩一个错误的代码。
DIY
function myFunction(a,b,c){ for(b=[],c={};a--;)b[a]=a,c[a]=a+1+''; return[b,c] }
它和上面的代码完全一样。
性能
你总是需要考虑你需要什么：
在你说“没有人会写下面的代码”之前，先去看看这里的前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
将数字转换为string或反之亦然
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=abcde}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;
一些不错的文章/网站我发现关于bitwise /速记：
http://mudcu.be/journal/2011/11/bitwise-gems-and-other-optimizations/
http://www.jquery4u.com/javascript/shorthand-javascript-techniques/
如果你用自己喜欢的search引擎进行search，还有很多jsperf站点显示速记和bitwsie的performance。
我可以去一个小时..但我认为现在已经够了。
如果你有问题就问。
记住
没有缩小器可以正确压缩一个错误的代码。
您可以使用许多可用的javascript缩小器之一。
- YUI压缩机
- Google封闭编译器
- 院长Edwards包装员
- JSMin
谷歌只是提供了一个JavaScript编译器，可以缩小您的代码，消除死代码分支和更多的优化。
谷歌JavaScript编译器
问候
ķ
随着minifying你可以base64编码了。 它使你的文件更加压缩。 我相信你已经看到js文件被包装在一个eval（）函数中，参数（p，a，c，k，e，r）被传递。 我在这篇文章中阅读它如何最小化JavaScript文件？
我最近需要执行相同的任务。 虽然JavaScript CompressorRater上列出的压缩器做得非常好，而且该工具非常有用，但是压缩器对于我正在使用的一些jQuery代码（$ .getScript和jQuery.fn检查）不是很好。 即使是Google Closure Compressor也在同一行上窒息。 虽然我本来可以最终解决这个问题，但是要不断地做到这一点，还有很多事情要做。
最后没有问题的那个人是UglifyJS （谢谢@ Aries51 ），压缩比其他所有压缩只稍微less一些。 和Google类似，它有一个HTTP API。 Packer也很好，并且在Perl，PHP和.NET中有语言实现。
还有微软在Codeplex上的免费Minifier。 Microsoft Ajax Minifier 1.1： http : //ajaxmin.codeplex.com/
这很容易与工作和做一个好工作。
加尔
另外一个选项稍好于YUI Compressor .. http://openwaf-js-mini.appspot.com/
目前有两种缩小代码的方法：
- 你在你的应用程序的后端应用缩小器 – 这里的好处是你可以应用版本控制，更多地控制你的代码 – 你几乎可以完全自动化缩小的过程，最好的做法是在你的代码之前应用它上传到服务器 – 当你有很多前端（被缩小）时，这是最好的使用Javascript和CSS代码：
http://yui.github.io/yuicompressor/
许多这样的工具可用于Node和npm – 这是一个很好的做法，使用Grunt自动化JavaScript的Mnification。
- 您可以使用一些现有的在线免费工具进行缩小，这些工具实际上允许您执行相同的操作，但需要手动进行。 我会build议你使用他们的时候你的javascript / css代码的数量较小 – 不是很多文件
我已经写了一个小脚本调用一个API来让你的脚本缩小，检查出来：
#!/usr/bin/perl use strict; use warnings; use LWP::UserAgent; use HTTP::Request; use Fcntl; my %api = ( css => 'https://cssminifier.com/raw', js => 'https://javascript-minifier.com/raw' ); my $DEBUG = 0; my @files = @ARGV; unless ( scalar(@files) ) { die("Filename(s) not specified"); } my $ua = LWP::UserAgent->new; foreach my $file (@files) { unless ( -f $file ) { warn "Ooops!! $file not found...skipping"; next; } my ($extn) = $file =~ /\.([az]+)/; unless ( defined($extn) && exists( $api{$extn} ) ) { warn "type not supported...$file...skipping..."; next; } warn "Extn: $extn, API: " . $api{$extn}; my $data; sysopen( my $fh, $file, O_RDONLY ); sysread( $fh, $data, -s $file ); close($fh); my $output_filename; if ( $file =~ /^([^\/]+)\.([az]+)$/ ) { $output_filename = "$1.min.$2"; } my $resp = $ua->post( $api{$extn}, { input => $data } ); if ( $resp->is_success ) { my $resp_data = $resp->content; print $resp_data if ($DEBUG); print "\nOutput: $output_filename"; sysopen( my $fh, $output_filename, O_CREAT | O_WRONLY | O_TRUNC ); if ( my $sz_wr = syswrite( $fh, $resp_data ) ) { print "\nOuput written $sz_wr bytes\n"; my $sz_org = -s $file; printf( "Size reduction %.02f%%\n\n", ( ( $sz_org - $sz_wr ) / $sz_org ) * 100 ); } close($fh); } else { warn: "Error: $file : " . $resp->status_line; } }
用法：
./minifier.pl a.js c.css b.js cc.css t.js j.js [..]
