ทำไมถึงต้อง compress javascript

ก่อนอื่นผมขออธิบายก่อนว่า Compress JavaScript (บาง Site อาจเรียกว่า Minified) คืออะไรเพื่อนๆ เคยสังเกตไหมครับว่า JavaScript Frameworks  อย่าง เช่น jQuery UI เมื่อเราทำการ Download Code จากทาง Site ทำไมถึงมีสอง Version มาให้

JavaScriptCompress

ให้สังเกตุดูว่าไฟล์ที่มีชื่อว่า min เป็นไฟล์ที่ถูก compress มาแล้ว หลายคงเริ่มสงสัยแล้วว่าแล้วเราจะเอาตัวไหนไปใช้เรามาลองมาดูรายละเอียดกัน การ compress คือการนำ Code JavaScript มาทำการ Remove carriage returns ('r') ,Linefeeds  (‘n’) ,และ  control characters (เช่นt tab,n new line,r carriage return,f form feed,v vertical tab, null character) ออกจาก Code  และเปลี่ยน Comment // เป็น /**/เลยทำให้ Code ติดกันหมดจนเป็นกลายแถวเดียว เหตุผลที่ต้องทำเช่นนี้มีสองเหตุผลคือ

1 ช่วยลดขนาดไฟล์ให้เล็กลงจึงทำให้สามารถโหลดไฟล์ JavaScript ได้เร็วขึ้น (ดูจากรูปด้านบนขนาดของไฟล์แตกต่างกันเกือบเท่าตัว)

2 ป้องกันการลอก Code เพราะจะทำให้ Code อ่านยากต้องมานั่งเสียเวลา Decompress (ผมจะมานำเสนอการ Decompress ให้อีกทีครับผม)

UiCompress

หากเราต้องการจะ Compress JavaScript ของเราเองจะต้องทำอย่างไรเรื่องนี้ง่ายมากเพราะปัจจุบันมี Tools Online มากมายที่ให้ใช้หรือถ้าหากต้องการเขียน Code เองก็ทำได้ โดยทำการเขียน JavaScript ก็ทำได้โดยการ Remove control characters และอื่นๆ ตามที่ผมได้พูดไปแล้ว (ผมจะนำมานำเสนอต่อในครั้งต่อไปนะครับ)

ตัวอย่างการทำ Compress

function Check(item, index, array){
return item*2;
}
var Num = [5,1,2,3,4,5,6,7,8,9];
var Result = Num.map(Check);
alert(Result);

จากนั้นให้ใช้ Tool Compress online โดยใช้  http://javascriptcompressor.com/ ทำการ Copy Code แล้วเลือก Compress

ToolsCompress
หลังจาก Compress  แล้ว

function Check(item,index,array){return item*2}var Num=[5,1,2,3,4,5,6,7,8,9];var Result=Num.map(Check);alert(Result);

เท่านี้เราก็สามารถ Compress JavaScript ของเราได้แล้ว มาถึงต้องนี้เพื่อนๆ คงจะพอที่จะเลือกได้แล้วนะครับว่าจะใช้การ Compress ในตอนไหนผมขอสรุปให้เลยนะครับ ควรใช้สำหรับ Production ครับเพราะช่วยเพิ่มประสิทธิภาพของ JavaScript ของเรา

 

หวังว่าคงมีประโยชน์บ้างนะครับ ^__^

Leave a Reply