Как «преуменьшать» Javascript код

Question

JQuery имеет две версии для загрузки, один Производство (19Кб, уменьшенная и сжат GZIP), а другой развития (120KB, несжатый код).

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

Answer 1

Там хорошая comparison of JavaScript compressors вы должны смотреть на.

Answer 2

Вы можете использовать один из множества доступных javascript-минификаторов.

• YUI Compressor
• Google closure compiler
• Dean Edwards packer
• JSMin

Answer 3

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

google javascript compiler

С уважением
K

Answer 4

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

Легко работать и хорошо работать.

Gal

Answer 5

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

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

Answer 6

DIY минификация

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

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

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

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

Оригинальный код

Когда вы пишете функцию у вас есть идея, начать писать вещи, и иногда вы в конечном итоге с чем-то вроде следующего кода code.The 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; 
} 

Здесь 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. Удалить ненужным, если петля, вар
2. Держите копию исходного кода
3. Используйте Minifier

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

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

Теперь, если Minifier с сжать код, который вы делаете неправильно.

Никакой минералог не может надлежащим образом сжать код.

DIY

function myFunction(a,b,c){ 
for(b=[],c={};a--;)b[a]=a,c[a]=a+1+''; 
return[b,c] 
} 

Он делает то же самое, что и выше кодов.

Performance

http://jsperf.com/diyminify

Вы всегда должны думать, что вам нужно:

Перед тем как сказать «Нун бы написать код, как один ниже» пойти и проверить первый 10 вопросов здесь ...

Вот несколько коммо n примеров я вижу каждые десять минут.

Хочет многоразовое состояние

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/

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

Я мог бы пойти один в течение нескольких часов .. но я думаю, что этого достаточно.

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

И помните

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

Answer 7

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

Answer 8

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

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

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

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

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

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

Answer 9

я написал маленький скрипт, который вызывает к 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 [..]