JQuery有两个版本可供下载，一个是Production (19KB, Minified and Gzipped)，另一个是Development (120KB, Uncompressed Code)。
现在是19kb的精简版，如果你下载它，你会看到仍然是一个javascript可执行代码。他们是如何压缩它的？我怎样才能像这样“缩小”我的代码？
如何“缩小”Javascript 代码
IT技术
javascript
gzip
2021-01-30 07:44:55
6个回答
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
}
但是所有这些 vars 、 ifs 、 loops 和定义都是必要的吗？
大多数时候不！
- 删除不必要的 if,loop,var
- 保留原始代码的副本
- 使用压缩器
可选（提高性能和缩短代码）
- 使用速记运算符
- 使用按位运算符（不要使用
Math） - 使用 a,b,c... 作为您的临时变量
- 使用旧语法 (
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
将数字转换为字符串，反之亦然
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.jquery4u.com/javascript/shorthand-javascript-techniques/
如果您使用自己喜欢的搜索引擎进行搜索，也有许多 jsperf 站点显示了速记和 bitwsie 的性能。
我可以去一个小时..但我认为现在已经足够了。
如果你有一些问题就问吧。
记住
没有压缩器可以正确压缩错误的代码。
您可以使用许多可用的 javascript 压缩器之一。
如果您使用的是 VSCode 编辑器，则有很多插件/扩展可用。
在MinifyAll比如是一个非常好的一个-有许多扩展兼容。
安装它并重新加载 VSCode。然后点击你的文件，打开命令面板（Ctrl+Shift+p），蚂蚁类型缩小这个文件（Ctrl+alt+m）还有其他可用的选项，比如保留原始文件等等！简单！
我最近需要执行相同的任务。虽然The JavaScript CompressorRater 中列出的压缩器做得很好，而且该工具非常有用，但我使用的一些 jQuery 代码（$.getScript 和 jQuery.fn 检查）时，这些压缩器并没有很好地发挥作用。甚至Google Closure Compressor 也因同样的问题而窒息。虽然我最终可以解决这些问题，但经常眯着眼睛做的事情实在是太多了。
最终没有问题的一个是UglifyJS（感谢@Aries51），压缩率仅比其他所有压缩率略低。与谷歌类似，它有一个 HTTP API。 Packer也很不错，并且在 Perl、PHP 和 .NET 中有语言实现。