如何“缩小”的Javascript代码如何“缩小”的Javascript代码(How to '

2019-05-08 16:49发布

站内文章 / 前端开发
10 0 0

JQuery的有两个版本的下载，一个是另一种是发展（120KB，无压缩码）。

现在紧凑19KB版本，如果你下载它，你会看到仍然是一个JavaScript可执行代码。 他们是如何紧凑化呢？ 而且我怎么能“再压缩”我的代码，这样的吗？

Answer 1:

DIY缩小

没有minifier可以适当压缩糟糕的代码。

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

您压缩之前，你应该做些什么

而关于jQuery的......我不使用jQuery.jQuery是旧的浏览器，这是为了兼容性的原因。检查caniuse.com发，几乎所有的工作在每一个浏览器（也IE10现在是标准化的），我认为现在是只是在这里放慢你的Web应用程序...如果你喜欢$()你应该建立自己的简单function.And何苦来压缩你的代码，如果您的客户端需要下载100KB jQuery脚本everythime？你有多大的未压缩码？ 5-6kb ..？ 不要谈论你加入，使其更容易吨插件。

原始代码

当你写，你有一个想法的功能，开始写东西，有时你结束了类似下面的代码code.The最works.Now人停止思考，这添加到minifier并发布。 

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

这里ISS缩小的代码（ⅰ添加的新行）

使用精缩 （ 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，循环和定义？

大多数时候NO！

  1. 删除不必要的如果，循环，VAR
  2. 保持你的原始代码的副本
  3. 使用minifier

可选的 （增加的性能和更短的代码）

  1. 使用速记运营商
  2. 使用按位运算符（不使用Math ）
  3. 使用，B，C ...您的临时瓦尔
  4. 使用旧的语法（ while ， for ...不是forEach ）
  5. 使用函数参数作为占位符（在某些情况下）
  6. 除去不必要的"{}","()",";",spaces,newlines
  7. 使用minifier

现在，如果minifier可以压缩代码，你这样做是错误的。

没有minifier可以适当压缩糟糕的代码。

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/

也有显示，如果你用你喜欢的搜索引擎搜索速记和bitwsie的性能的许多jsperf网站。

我可以去一个小时..但我认为这是够了。

如果你有一些问题，只是问。

请记住

没有minifier可以适当压缩糟糕的代码。



Answer 2:

您可以使用许多可用的JavaScript minifiers之一。

  • YUI压缩机
  • 谷歌关闭编译
  • 院长爱德华包装机
  • JSMin


Answer 3:

谷歌只是提供一个JavaScript编译器，可以运行如下代码，elimiated死代码分行和更多的优化。

谷歌JavaScript编译器

问候
ķ



Answer 4:

随着涅槃您可以Base64编码它。 它使您的文件更加压缩。 我相信你已经看到了被包裹的eval（）函数内部进行传递的参数（P，A，C，K，E，R）js文件。 我在这篇文章中阅读它如何缩小JavaScript文件？



Answer 5:

我最近需要执行相同的任务。 而在列出的压缩机中的JavaScript CompressorRater做大量的工作和工具是非常有用的，压缩机不玩我使用（$ .getScript和jQuery.fn检查）的一些jQuery代码不错。 即使是谷歌关闭压缩机哽咽在同一行。 虽然我可以最终冰释前嫌的疑难问题还远远没有到多少眯着眼睛不断地做。

终于工作没有问题之一是UglifyJS （感谢@ Aries51 ），压缩只是比其他人略少。 而类似于谷歌它有一个HTTP API。 帕克也不错，具有在Perl，PHP和.NET语言实现。



Answer 6:

目前涅槃代码的2种方式：

  1. 你在你的应用程序的后端一侧施加minifiers - 这里的好处是，你可以应用版本，而且更在你的代码的控制 - 你几乎可以完全自动化缩小的过程中，最好的做法是将其应用在你的代码上传到服务器 - 这时候你有很多前端（被精缩）Javascript和CSS代码最好使用：

http://yui.github.io/yuicompressor/

许多这样的工具可用于节点和故宫以及 - 这是为Javascript的mnification与咕噜自动化好的做法。

  1. 你可以使用一些用于缩小现有的免费工具，在网上运行 - 这几乎让你做同样的，但手动。 我会建议你使用它们的时候你的JavaScript / CSS代码量小了 - 没有多少文件

http://www.modify-anything.com/



Answer 7:

我写了一个小脚本调用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 =~ /\.([a-z]+)/;

    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 =~ /^([^\/]+)\.([a-z]+)$/ ) {
        $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 [..]


文章来源: How to 'minify' Javascript code
标签： javascript gzip
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~