[javascript] 자바 스크립트 코드를 ‘축소’하는 방법

DIY 축소

어떤 minifier도 잘못된 코드를 적절하게 압축 할 수 없습니다.

이 예에서는 minifier가 얼마나 많은지 보여주고 싶습니다.

축소하기 전에해야 할 일

그리고 jQuery와 관련하여 … 나는 jQuery를 사용하지 않습니다 .jQuery는 오래된 브라우저 용입니다. 호환성 이유로 만들어졌습니다. 웹 애플리케이션의 속도를 늦추기 위해 여기에 있습니다 … $()자신 만의 간단한 함수를 만들어야하는 경우 클라이언트가 100kb jquery 스크립트를 매번 다운로드해야하는 경우 코드를 압축해야하는 이유는 무엇입니까? 압축되지 않은 코드는 얼마나 큽니까? 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
}

그러나 모든 vars, ifs, 루프 및 정의가 필요합니까?

대부분 NO !

1. 불필요한 if, loop, var 제거
2. 원본 코드 사본 보관
3. 미니 파이어 사용

선택 사항 (성능 향상 및 코드 단축)

1. 속기 연산자 사용
2. 비트 연산자 사용 (사용하지 마십시오 Math)
3. 임시 변수에 a, b, c … 사용
4. 이전 구문 사용 ( while, for… not forEach)
5. 함수 인수를 자리 표시 자로 사용 (일부 경우)
6. 불필요한 제거 "{}","()",";",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 개의 질문을 확인하십시오.

다음은 내가 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천천히 읽으십시오 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/

좋아하는 검색 엔진으로 검색하면 속기 및 bitwsie의 성능을 보여주는 jsperf 사이트도 많이 있습니다.

몇 시간 동안 갈 수 있지만 .. 지금은 충분하다고 생각합니다.

질문이 있으면 물어보세요.

그리고 기억하세요

어떤 minifier도 잘못된 코드를 적절하게 압축 할 수 없습니다.

답변

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