JSMin - The JavaScript Minifier

JSMin เป็น Command Line Tool ที่พัฒนาขึ้นโดย Douglas Crockford (เป็นคนที่ออกแบบ JSON) เพื่อใช้สำหรับลดขนาดไฟล์ของ JavaScript ลง โดยการ remove whitespace หรือ comments ที่ไม่จำเป็น ซึ่งจะส่งผลทำให้สามารถ Download ได้เร็วขึ้น เหมาะสำหรับ JavaScript ที่จะนำไปใช้บน Production Server แต่สิ่งที่ต้องระวังก็คือ JSMin เป็น One Way Tool คือ เมื่อทำการ Minify ไปแล้ว จะไม่สามารถจะทำให้กลับมาเป็นเหมือนเดิมอีกไม่ได้ ดังนั้นก่อนใช้จึงควรเก็บ JavaScript ต้นฉบับไว้ทุกครั้งก่อนทำการ Minify เพื่อการแก้ไขหรือเปลี่ยนแปลงในอนาคต

หน้าตาของ JavaScript ที่ผ่านการ Minify

สำหรับวิธีใช้ command line สามารถใช้งานได้ดังตัวอย่างต่อไปนี้ครับ

c:\> jsmin.exe < input.js > output.js

ส่วนใครที่ใช้ Edit Plus ก็สามารถ config user tool ไว้ใช้งานได้ดังนี้ครับ

สำหรับผู้ที่สนใจ สามารถ download JSMin ได้ที่นี่ครับ http://www.crockford.com/javascript/jsmin.html

แหล่งที่มา: http://www.crockford.com/javascript/jsmin.html

Google Closure Tools

Google Closure Tools เป็นเครื่องมือสำหรับช่วยในการ optimize JavaScript ให้สามารถ download และ run ได้รวดเร็วขึ้น เราสามารถใช้งานผ่านทางหน้า Web Page ที่ Google เตรียมไว้ให้ หรือจะ download command line tool ลงมาใช้งานที่เครื่องของเราก็ได้ครับ สำหรับวันนี้อยากจะมาแนะนำการใช้งานผ่าน Online Tool กันก่อน วิธีการใช้งานก็ไม่ยากครับ ก็เพียงแค่เข้าไปที่ http://closure-compiler.appspot.com/home แล้วเราก็จะเจอกับหน้าจอการใช้งานที่แบ่งออกเป็น 2 ฝั่ง ฝั่งซ้ายจะเป็น JavaScript ของเราที่ยังไม่ได้ทำการ optimized ซึ่งในส่วนนี้ เราสามารถกำหนด option ต่างก่อนการ optimize ได้ เมื่อเสร็จเรียบร้อย ก็กดปุ่ม compile ซึ่ง ผลลัพธ์จากการ compile ก็จะไปแสดงที่หน้าจอฝั่งขวา ซึ่งจะมีขนาดก่อน optimize กับหลัง optimize ให้ดูเปรียบเทียบกัน นอกจากนั้น ถ้าหาก code ของเรามีปัญหา ก็จะแสดงให้เราเห็นใน Warning กับ Error Message อีกด้วย

Paste JavaScript ของเราเข้าไปที่หน้าจอด้านซ้ายมือ

เมื่อกดปุ่ม Compile ผลลัพธ์ก็จะมาแสดงให้เห็นที่หน้าจอฝั่งขวามือ

แหล่งที่มา: https://developers.google.com/closure/compiler/

Free CSS Compressor and CSS Compression Tool

หน้าจอแสดงการใช้งาน CSS Compressor

การลดขนาด file ก่อน deploy ขึ้น server นั้น เป็นสิ่งที่ควรทำ เพราะนอกจากจะช่วยประหยัดค่า Bandwidth แล้ว ยังช่วยให้ Web Page สามารถ load ได้เร็วขึ้นอีกด้วย กระบวนการการลดขนาดของ File เรามักเรียกกันว่า compress หรือบางครั้งเราเรียกว่า minify สำหรับวันนี้ อยากจะมาแนะนำเครื่องมือสำหรับช่วยลดขนาดของ CSS ซึ่งสามารถใช้งานผ่านหน้า Web ได้โดยตรง มี profile ของการ compress หลายแบบให้เลือก โดยเราสารถเลือกแบบ compress เต็มที่ หรือจะให้ balance ระหว่าง compression rate กับ readability ก็สามารถทำได้ สำหรับ Options อื่นๆที่มีให้ใช้งาน ก็อย่างเช่น merge selectors with the same properties, compress color สำหรับใครที่สนใจก็ลองเข้าไปใช้งานได้ที่นี่ครับ http://www.minifycss.com/css-compressor/

แหล่งที่มา: http://www.minifycss.com/css-compressor/