Как "минимизировать" код Javascript

DIY Minification

ни один минификатор не может правильно сжать плохой код.

в этом примере я просто хочу показать, сколько минификатор делает.

что вы должны сделать, прежде чем вы сократите

и относительно jQuery... я не использую jQuery.jQuery для старых браузеров, это было сделано по соображениям совместимости .. проверка caniuse.com, почти все работает на каждом браузере (также IE10 теперь стандартизирован) , я думаю, что теперь это просто здесь, чтобы замедлить работу вашего веб-приложения...если вам нравится $() вы должны создать свою собственную простую функцию.И зачем утруждать себя сжатием кода, если вашим клиентам нужно скачать скрипт 100kb jquery everythime?насколько велик ваш несжатый код? 5-6кб..? Не говоря уже о тоннах плагинов, которые вы добавляете, чтобы сделать его проще.

Исходный Код

когда вы пишете функцию, у вас есть идея, начинаешь писать чушь и иногда вы получаете что-то вроде следующего кода.Код работает.Теперь большинство людей перестают думать и добавляют это в минификатор и публикуют его.

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, петли и определения необходимы?

большую часть времени нет !

1. удалите ненужные if, loop, var
2. сохраните копию исходного кода
3. использовать английское сокращение Cups

дополнительно (увеличивает производительность и короткий код)

1. используйте стенографические операторы
2. использовать побитовые операторы (не используйте Math)
3. используйте a,b, c... для вашего temp vars
4. использовать старый синтаксис (while,for... не forEach)
5. использовать аргументы функции в качестве заполнителя (в некоторых случаях)
6. удалить ненужные "{}","()",";",spaces,newlines
7. использовать английское сокращение Cups

теперь, если минификатор может сжать код, вы делаете это неправильно.

ни один минификатор не может правильно сжать плохой код.

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)

переключатель case

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;

некоторые хорошие статьи / сайты, которые я нашел о 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/

есть также много сайтов jsperf, показывающих производительность стенографии и bitwsie, если вы ищете с вашим любимым поисковая машина.

я могу говорить часами.. но я думаю, что пока этого достаточно.

если у вас есть вопросы просто спросить.

и помню

ни один минификатор не может правильно сжать плохой код.

вы можете использовать один из многих доступных на JavaScript minifiers.

• Юи компрессора
• компилятор закрытия Google
• Дин Эдвардс Пакер
• JSMin

Google только что сделал доступным компилятор javascript, который может минимизировать ваш код, устранить мертвые ветви кода и больше оптимизаций.

компилятор Google javascript

в отношении
К

наряду с уменьшением вы можете base64 кодировать его тоже. Это делает ваш файл гораздо более сжатым. Я уверен,что вы видели JS-файлы,которые завернуты в функцию eval() с параметрами (p,a,c,k, e, r). Я читал об этом в этой статье Как минимизировать файл Javascript?

недавно мне нужно было выполнить ту же задачу. В то время как компрессоры перечислены в JavaScript CompressorRater проделайте отличную работу, и инструмент очень полезен, компрессоры не играли хорошо с некоторым кодом jQuery, который я использую ($.getScript и jQuery.проверяет ФН). Даже Компрессор Закрытия Google задохнулся на тех же строках. Хотя я мог бы в конечном итоге сгладить перегибы, это было далеко до того, чтобы постоянно щуриться.

что наконец-то работал без проблем был UglifyJS (спасибо @Aries51), и компрессия была лишь немного меньше, чем у всех остальных. И подобно Google он имеет HTTP API. упаковщик также хорошо и имеет языковую реализацию в Perl, PHP и. NET.

в настоящее время существует 2 способа минимизации кода:

1. вы применяете минификаторы на внутренней стороне вашего приложения-здесь преимущество заключается в том, что вы можете применять управление версиями и больше контролировать свой код - вы можете практически полностью автоматизировать процесс минификации, и лучшей практикой было бы применить его до того, как ваш код будет загружен на сервер - это лучше всего использовать, когда у вас есть много интерфейсов (для минимизации) Javascript и CSS код:

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

многие такие инструменты доступны для Node и npm, а также-это хорошая практика для автоматизации mnification Javascript с Grunt.

1. вы можете использовать некоторые бесплатные инструменты для минификации, которые работают в интернете - это практически позволяют делать то же самое, но вручную. Я бы посоветовал вам использовать их, когда количество вашего кода javascript / css меньше - нет много файлов

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

Я написал крошечный скрипт, который вызывает 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 = ".min.";
    }

    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 [..]