JQueryมีสองรุ่นสำหรับการดาวน์โหลดหนึ่งคือการผลิต (19KB, minified และ Gzipped) , และอื่น ๆ คือการพัฒนา (120KB, บีบอัด Code)
ตอนนี้เป็นรุ่นขนาดกะทัดรัด 19kb หากคุณดาวน์โหลดคุณจะเห็นว่ายังคงเป็นโค้ดปฏิบัติการจาวาสคริปต์ พวกเขากระชับมันได้อย่างไร? และฉันจะ 'ย่อขนาด' โค้ดของฉันแบบนั้นด้วยได้อย่างไร?
คำตอบ:
DIY Minification
ไม่มีตัวย่อใดสามารถบีบอัดโค้ดที่ไม่ถูกต้องได้อย่างถูกต้อง
ในตัวอย่างนี้ฉันแค่อยากจะแสดงให้เห็นว่า minifier ทำได้มากแค่ไหน
สิ่งที่คุณควรทำก่อนลดขนาด
และเกี่ยวกับ jQuery ... ฉันไม่ได้ใช้ jQuery.jQuery สำหรับเบราว์เซอร์รุ่นเก่ามันถูกสร้างขึ้นด้วยเหตุผลด้านความเข้ากันได้ .. ตรวจสอบ caniuse.com เกือบทุกอย่างใช้งานได้บนทุกเบราว์เซอร์ (ตอนนี้ ie10 เป็นมาตรฐาน) ฉันคิดว่าตอนนี้มันเป็น ที่นี่เพื่อทำให้เว็บแอปพลิเคชันของคุณช้าลง ... ถ้าคุณชอบ$()คุณควรสร้างฟังก์ชันง่ายๆของคุณเองและทำไมต้องบีบอัดโค้ดของคุณหากลูกค้าของคุณต้องการดาวน์โหลดสคริปต์ jquery 100kb ทุกครั้งรหัสที่ไม่บีบอัดของคุณใหญ่แค่ไหน? 5-6 กิโล .. ? ไม่ต้องพูดถึงปลั๊กอินมากมายที่คุณเพิ่มเข้าไปเพื่อให้ง่ายขึ้น
รหัสเดิม
เมื่อคุณเขียนฟังก์ชันที่คุณมีความคิดให้เริ่มเขียนสิ่งต่าง ๆ และบางครั้งคุณก็ลงเอยด้วยรหัสต่อไปนี้รหัสใช้งานได้ตอนนี้คนส่วนใหญ่เลิกคิดและเพิ่มสิ่งนี้ลงในตัวย่อขนาดและเผยแพร่
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, loops & definitions จำเป็นทั้งหมดหรือไม่?
ส่วนใหญ่ไม่ !
ไม่บังคับ (เพิ่มประสิทธิภาพและรหัสที่สั้นลง)
Math)while, for... ไม่ใช่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)
ชั้น A
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;
บทความ / ไซต์ดีๆที่ฉันพบเกี่ยวกับ bitwise / shorthand:
http://mudcu.be/journal/2011/11/bitwise-gems-and-other-optimizations/
http://www.jquery4u.com/javascript/shorthand-javascript-techniques/
นอกจากนี้ยังมีไซต์ jsperf จำนวนมากที่แสดงประสิทธิภาพของชวเลข & bitwsie หากคุณค้นหาด้วย Searchengine ที่คุณชื่นชอบ
ฉันสามารถไปได้หลายชั่วโมง .. แต่ฉันคิดว่ามันเพียงพอแล้วสำหรับตอนนี้
หากคุณมีคำถามเพียงแค่ถาม
และจำไว้ว่า
ไม่มีตัวย่อใดสามารถบีบอัดโค้ดที่ไม่ถูกต้องได้อย่างถูกต้อง
(10.4899845 +.5)|0ผลลัพธ์เป็น 10 แทนที่จะเป็น 11
Google เพิ่งเปิดตัวคอมไพเลอร์ javascript ที่สามารถย่อขนาดโค้ดของคุณกำจัดสาขารหัสที่ตายแล้วและการเพิ่มประสิทธิภาพอื่น ๆ
ขอแสดงความนับถือ
K
นอกจากการย่อขนาดแล้วคุณยังสามารถเข้ารหัส base64 ได้ด้วย ทำให้ไฟล์ของคุณถูกบีบอัดมากขึ้น ฉันแน่ใจว่าคุณได้เห็นไฟล์ js ที่อยู่ภายในฟังก์ชัน eval () ที่มีการส่งผ่านพารามิเตอร์ (p, a, c, k, e, r) ฉันอ่านในบทความนี้ จะลดขนาดไฟล์ Javascript ได้อย่างไร?
ฉันได้เขียนสคริปต์เล็ก ๆ ที่เรียก 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 [..]
ฉันเพิ่งต้องทำงานเดียวกัน ในขณะที่คอมเพรสเซอร์ที่อยู่ในรายการJavaScript CompressorRaterทำงานได้ดีและเครื่องมือนี้มีประโยชน์มาก แต่คอมเพรสเซอร์ก็เล่นได้ไม่ดีกับโค้ด jQuery ที่ฉันใช้อยู่ (การตรวจสอบ $ .getScript และ jQuery.fn) แม้แต่Google Closure Compressor ก็สำลักในบรรทัดเดียวกัน ในขณะที่ในที่สุดฉันก็สามารถรีดความหงิกงอได้ แต่มันก็ไกลเกินกว่าที่จะเหล่ไปมา
สิ่งที่ใช้งานได้โดยไม่มีปัญหาในที่สุดคือUglifyJS (ขอบคุณ@ Aries51 ) และการบีบอัดนั้นน้อยกว่าที่อื่น ๆ ทั้งหมดเพียงเล็กน้อย และคล้ายกับ Google คือมี HTTP API Packerยังดีและมีการใช้งานภาษาใน Perl, PHP และ. NET
ขณะนี้มี 2 วิธีในการลดขนาดรหัสของคุณ:
http://yui.github.io/yuicompressor/
เครื่องมือดังกล่าวจำนวนมากพร้อมใช้งานสำหรับ Node และ npm เช่นกันซึ่งเป็นแนวทางปฏิบัติที่ดีในการทำให้การจำ Javascript เป็นแบบอัตโนมัติด้วย Grunt
คุณสามารถใช้javascript minifierของ ubercompute.com เพื่อลดขนาดโค้ดของคุณได้ซึ่งจะลดขนาดโค้ดจาวาสคริปต์ของคุณไม่เกิน 75% ของเวอร์ชันดั้งเดิม
หากคุณกำลังใช้โปรแกรมแก้ไข VSCode มีปลั๊กอิน / ส่วนขยายมากมาย
MinifyAllเช่นเป็นหนึ่งที่ดีมาก - เข้ากันได้กับส่วนขยายจำนวนมาก
ติดตั้งและโหลด VSCode ใหม่ จากนั้นคลิกที่ไฟล์ของคุณเปิดจานคำสั่ง ( Ctrl+Shift+p) ประเภทมดย่อขนาดเอกสารนี้ ( Ctrl+alt+m) ตัวเลือกอื่น ๆ ที่มีเช่นการเก็บรักษาเอกสารต้นฉบับเป็นต้น! ง่าย!