Как "уменьшить" код Javascript

JQuery имеет две версии для загрузки, одна из них - Production (19KB, Minified и Gzipped), и другой - разработка (120 КБ, несжатый код).

Теперь компактная версия 19kb, если вы ее загрузите, вы увидите, что все еще исполняемый код javascript. Как они их компактифицировали? И как я могу также "уменьшить" мой код?

Ответ 2

Сделай сам

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

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

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

И в отношении jQuery... я не использую jQuery.jQuery для старых браузеров, это было сделано по соображениям совместимости.. check caniuse.com, почти все работает в каждом браузере (также это стандартизован теперь10), теперь я думаю просто для того, чтобы замедлить работу вашего веб-приложения... если вам нравится $() вы должны создать свою собственную простую функцию. И зачем пытаться сжать свой код, если вашим клиентам нужно каждый раз загружать скрипт jquery 100kb? Насколько велика ваша несжатая код? 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
}

Но нужны ли все эти вары, ifs, циклы и определения?

В большинстве случаев НЕТ !

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

ДОПОЛНИТЕЛЬНО (увеличивает производительность и более короткий код)

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

Теперь, если 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 медленно читает этот fooobar.com/questions/232/...

чисел

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, если вы ищете свою любимую поисковую систему.

Я мог бы ходить один час. Но я думаю, что этого достаточно.

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

И запомни

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

Ответ 4

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

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

С уважением
К

Ответ 5

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

Ответ 6

Мне недавно нужно было выполнить ту же задачу. В то время как компрессоры, перечисленные в JavaScript CompressorRater, делают большую работу, и этот инструмент очень полезен, компрессоры не играли хорошо с некоторым кодом jQuery я Я использую ($.getScript и jQuery.fn проверки). Даже Google Closure Compressor забился в одних и тех же строках. В то время как я мог бы в конце концов сгладить изломы, это было далеко не так много, чтобы делать постоянно.

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

Ответ 7

Существует также бесплатный Minifier от Microsoft на codeplex. Microsoft Ajax Minifier 1.1: http://ajaxmin.codeplex.com/

Легко работать и делать хорошую работу.

Гал

Ответ 9

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

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

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

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

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

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

Ответ 10

Я написал крошечный script, который вызывает API, чтобы получить ваш script minified, проверьте его:

#!/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 [..]