ระยะเวลาในการโหลดหน้าเว็บเพจ เป็นสิ่งหนึ่งที่สำคัญในการพัฒนาเว็บ แต่ถ้าหากว่าหน้าเว็บเพจของเรามีความเร็วในการโหลดเร็วมาก ก็จะเป็นการดี
ขนาดของไฟล์นั้น ก็เป็นอีกปัจจัยหนึ่ง ที่มีผลต่อความเร็วในการโหลดหน้าเว็บเพจ ซึ่งถ้าหากว่าเราสามารถที่จะลดขนาดไฟล์ได้ ก็จะเป็นการดี และทำให้เว็บเพจของเราโหลดเร็วขึ้น ส่วนใหญ่เราจะนึกแต่ขนาดของรูปภาพ แต่ขนาดของไฟล์อื่น ก็สำคัญไม่แพ้กัน ไม่ว่าจะเป็น php, javascript, css ฯลฯ
และวิธีการลดขนาดไฟล์นั้นก็มีหลายวิธี วันนี้ผมมีอีก หนึ่ง ในหลายๆ วิธีมานำเสนอ (*-*)
พระเอกในงานนี้ก็คือ Combine 0.5 ไฟล์ php จากดาวนาเม็ก
ขั้นตอนการทำงาน คือ ใช้ไฟล์ php ในการอ่านไฟล์และ ทำการบีบอัดแล้ว เก็บไฟล์นั้นไว้ใน cache จากหลายๆ ไฟล์ ก็จะเหลือแค่ไฟล์เดียว และที่สำคัญ ใช้ได้ทั้ง javascript และ css (หรือไฟล์อื่นๆ อีก)
คราวนี้ก็มาที่วิธีใช้ ก่อนอื่นต้องไปดาวโหลดไฟล์มาก่อน Download
จากนั้นก็สร้างโฟล์เดอร์ cache ขึ้นมา (ตั้ง permission ให้เขียนได้ด้วยนะ) เพื่อเก็บ cache ไฟล์
แล้วสร้างไฟล์ .htaccess ขึ้นมา แล้วเพิ่มข้อความข้างล่างนี้ ลงไป
RewriteEngine On RewriteBase / RewriteRule ^css/(.*.css) /combine.php?type=css&files=$1 RewriteRule ^javascript/(.*.js) /combine.php?type=javascript&files=$1
เพื่อทำการ rewrite url จากนั้นก็ทำการเรียกใช้ โดยอ้างอิงที่อยู่ของไฟล์ ตามรูปแบบการ rewrite url ข้างบน
http://www.adkdev.com/javascript/prototype.js http://www.adkdev.com/javascript/builder.js http://www.adkdev.com/javascript/effects.js http://www.adkdev.com/javascript/dragdrop.js http://www.adkdev.com/javascript/slider.js http://www.adkdev.com/css/style.css http://www.adkdev.com/css/page.css
หรือจะเรียกเป็นแบบต่อกันโดยใช้ คอมม่า (,) คั่นก็ได้
http://www.adkdev.com/javascript/prototype.js,builder.js,effects.js,dragdrop.js,slider.js
http://www.adkdev.com/css/style.css,page.css
หรือว่าจะเรียกผ่านไฟล์ php โดยตรง ก็จะได้เป็น
combine.php?type=javascript&files=prototype.js,builder.js,effects.js,dragdrop.js,slider.js
combine.php?type=css&files=style.css,page.css
จากการทดลองเรียกใช้ไฟล์ javascript ขนาดไฟล์ทั้งหมดประมาณ 71kb หลังจากบีบอัดแล้วเหลือ 18kb
คิดว่าน่าจะเห็นผลชัดเจน เมื่อต้องการเรียกใช้ไฟล์ javascript ขนาดใหญ่ อย่าง Ext JS - JavaScript Library
อ่านข้อมูลเพิ่มเติมได้ที่หน้าเว็บไซต์ของผู่จัดทำครับ rakaz - Code - Combine
adkdev said,
June 21, 2007 @ 10:13 am
สงสัยผมจะรีบเกินไป มีบางคนไม่เข้าใจ ว่าใช้ยังไง
การเรียกใช้ก็เป็นแบบปกติหนะครับ เปลี่ยนแค่ที่อยู่ของไฟล์
Javascript :
< script type="text/javascript" src="http://www.adkdev.com/javascript/prototype.js,builder.js,effects.js,dragdrop.js,slider.js">CSS:
< link rel="stylesheet" type="text/css" href="http://www.adkdev.com/css/style.css,page.css" media="screen" />และก็ที่ไฟล์ combine.php นี่เราต้องดูบรรทัดที่ 28-31 ด้วยนะครับ
28: $cache = true;
29: $cachedir = dirname(__FILE__) . ‘/cache’;
30: $cssdir = dirname(__FILE__) . ‘/css’;
31: $jsdir = dirname(__FILE__) . ‘/javascript’;
หากบรรทัดที่ 28 เป็น true ต้องสร้างโฟล์เดอร์ cache ด้วยนะครับ
บรรทัดที่ 29 ก็เป็นชื่อโฟล์เดอร์
บรรทัดที่ 30 เป็นโฟล์เดอร์ที่เก็บไฟล์ css
ส่วนบรรทัดที่ 31 ก็เก็บไฟล์ javascript ตามระเบียบ
เก็บไฟล์ combine.php ไว้ที่ web root นะครับ