JQuery имеет две версии для загрузки, одна из них - Production (19KB, Minified и Gzipped), и другой - разработка (120 КБ, несжатый код).
Теперь компактная версия 19kb, если вы ее загрузите, вы увидите, что все еще исполняемый код javascript. Как они их компактифицировали? И как я могу также "уменьшить" мой код?
Theres a nice сравнение компрессоров JavaScript вы должны посмотреть.
Сделай сам
Никакой минификатор не может правильно скомпоновать плохой код.
В этом примере я просто хочу показать, насколько это делает мини-экскаватор.
Что вы должны сделать, прежде чем вы
И в отношении 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, циклы и определения?
В большинстве случаев НЕТ !
ДОПОЛНИТЕЛЬНО (увеличивает производительность и более короткий код)
Math)while, for... not forEach)"{}","()",";",spaces,newlinesТеперь, если minifier может сжать код, вы делаете это неправильно.
Никакой минификатор не может правильно скомпоновать плохой код.
DIY
function myFunction(a,b,c){
for(b=[],c={};a--;)b[a]=a,c[a]=a+1+'';
return[b,c]
}
Он делает то же самое, что и коды выше.
Представление
Вам всегда нужно думать, что вам нужно:
Прежде чем вы скажете: "Никто не напишет код, подобный приведенному ниже", перейдите и проверьте первые 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.jquery4u.com/javascript/shorthand-javascript-techniques/
Также есть много сайтов jsperf, показывающих производительность сокращенного и bitwsie, если вы ищете свою любимую поисковую систему.
Я мог бы ходить один час. Но я думаю, что этого достаточно.
если у вас есть вопросы, просто спросите.
И запомни
Никакой минификатор не может правильно скомпоновать плохой код.
Вы можете использовать один из многих доступных javascript minifiers.
Google только что предоставил компилятор javascript, который может минимизировать ваш код, устраняет ветки мертвого кода и больше оптимизаций.
С уважением
К
Наряду с минимизацией вы можете также закодировать base64. Это делает ваш файл намного более сжатым. Я уверен, что вы видели js файлы, которые обернуты внутри функции eval() с переданными параметрами (p, a, c, k, e, r). Я прочитал его в этой статье Как минимизировать файл Javascript?
Мне недавно нужно было выполнить ту же задачу. В то время как компрессоры, перечисленные в JavaScript CompressorRater, делают большую работу, и этот инструмент очень полезен, компрессоры не играли хорошо с некоторым кодом jQuery я Я использую ($.getScript и jQuery.fn проверки). Даже Google Closure Compressor забился в одних и тех же строках. В то время как я мог бы в конце концов сгладить изломы, это было далеко не так много, чтобы делать постоянно.
Тот, который, наконец, работал без проблем, был UglifyJS (спасибо @Aries51), и сжатие было лишь немного меньше всех остальных. И, похоже, Google имеет HTTP API. Packer также хорош и имеет реализацию языка в Perl, PHP и .NET.
Существует также бесплатный Minifier от Microsoft на codeplex. Microsoft Ajax Minifier 1.1: http://ajaxmin.codeplex.com/
Легко работать и делать хорошую работу.
Гал
Другой вариант немного лучше, чем компрессор YUI. http://openwaf-js-mini.appspot.com/
В настоящее время существует два способа минимизации кода:
http://yui.github.io/yuicompressor/
Многие такие инструменты доступны для Node и npm, а также - хорошая практика для автоматизации использования Javascript с помощью Grunt.
Я написал крошечный 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 [..]