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

Question

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

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

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

110

javascript gzip

Источник

user196462 15 ноя '09 в 12:11

12 ответов

Решение

Сделай сам Минификация

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

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

Что вы должны сделать перед минификацией

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

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

Большую часть времени НЕТ!

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

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

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

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

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

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 медленно это читать /questions/19344032/kak-proverit-soderzhit-li-massiv-obekt-v-javascript/19344051#19344051

чисел

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, если вы выполняете поиск с помощью вашего любимого поисковика.

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

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

И запомни

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

54

Источник

user2450730 25 янв '14 в 16:21

Вы можете использовать один из многих доступных миниатюр Javascript.

37

Источник

user29407 15 ноя '09 в 12:12

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

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

С уважением
К

13

Источник

user37817 15 ноя '09 в 12:15

Если вы используете редактор VSCode, доступно множество плагинов / расширений.

В MinifyAll например, очень хороший - совместим со многими расширениями.

Установите его и перезагрузите VSCode. Затем щелкните свой файл, откройте палитру команд (Ctrl+Shift+p), тип муравья минимизирует этот документ (Ctrl+alt+m) другие доступные опции, такие как сохранить исходный документ и так далее! Легко!

8

Источник

user4599710 25 авг '20 в 15:01

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

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

3

Источник

user1812854 09 сен '13 в 15:17

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

3

Источник

user5618601 29 ноя '15 в 18:40

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

3

Источник

user235961 14 окт '17 в 10:45

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

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

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

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

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

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

1

Источник

user5998418 01 мар '16 в 13:58

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

С ним легко работать и он хорошо справляется.

гал

0

Источник

user211423 15 ноя '09 в 13:04

Попробуйте этот JavaScript с минификаторсайта fixcode.org . Это очень эффективный инструмент для минимизации JavaScript.

Импортировать код через URL
импорт из файла
копировать / скачивать вывод

-1

Источник

user7327747 12 авг '21 в 13:45

Вы можете использовать javascript- минификатор ubercompute.com для минимизации вашего кода, он уменьшит ваш javascript-код до 75% от его исходной версии.

-1

Источник

user11341113 30 май '20 в 18:25

Другие вопросы по тегам javascript gzip

user53114 15 ноя '09 в 12:16 2009-11-15 12:16 · Accepted Answer · 2009-11-15 12:16

Есть хорошее сравнение JavaScript-компрессоров, на которые стоит обратить внимание.

87

Источник

user53114 15 ноя '09 в 12:16