การรวมไฟล์ javascript หรือไฟล์ css เป็นไฟล์เดียว ด้วย php

กรณีหน้าเว็บเพจ มีการเรียกใช้ไฟล์ javascript (.js) หรือไฟล์ css (.css) หลายๆ ไฟล์ในหน้าหนึ่งๆ หากต้องการรวมไฟล์เป็นไฟล์เดียว โดยทั่วไปเราจะทำการสร้างไฟล์ใหม่ แล้วนำข้อมูลของแต่ละไฟล์ไปไว้ที่ไฟล์ใหม่ที่สร้างขึ้น ตัวอย่างเช่น เรามีไฟล์ javascript อยู่ 3 ไฟล์ดังนี้

1.calendar.js ไฟล์สำหรับปฏิทิน

2.map_google.js ไฟล์สำหรับ google map

3.ajax_data.js ไฟล์สำหรับเรียกข้อมูลแบบ ajax

เมื่อเรารวมไฟล์โดยการสร้างไฟล์ใหม่ เช่นไฟล์ใหม่ชื่อ web-js.js จากนั้นนำข้อมูลของแต่ละไฟล์มาไว้ที่ไฟล์ใหม่ โดยแยกเป็นส่วนไว้โดยใช้ การ comment ไว้ว่าเป็นโค้ตของส่วนใด 

ตัวอย่างรูปแบบไฟล์ web-js.js

1. <script type="text/javascript">  
2. // ไฟล์สำหรับปฏิทิน  
3.   
4.   
5. // ไฟล์สำหรับ google map  
6.   
7.   
8. // ไฟล์สำหรับเรียกข้อมูลแบบ ajax  
9.   
10.   
11. script>  

การรวมไฟล์ js จากเดิมมีการเรียกไฟล์ทั้งหมด 3 ไฟล์

1. <script type="text/javascript" src="calendar.js">script>  
2. <script type="text/javascript" src="map_google.js">script>  
3. <script type="text/javascript" src="ajax_data.js">script>  

ก็ลดเหลือเป็นการเรียกเพียงไฟล์เดียว

แสดงปกติพิมพ์โค้ดนี้?

1. <script type="text/javascript" src="web-js.js">script>  

ทำให้ลดจำนวน http requests ลง ซึ่งเป็นหนึ่งในเทคนิคการทำเว็บไซต์ให้โหลดได้เร็วขึ้น

วิธีการรวมไฟล์นี้ใช้ได้เช่นเดียวกับกรณีของ css ไฟล์

การรวมไฟล์ข้างต้น เป็นวิธีการโดยทั่วไปสามารถทำได้อย่างง่ายดาย

สำหรับวิธีการต่อไป จะเป็นการรวมไฟล์  js หรือ css ด้วย php

โดยการรวมไฟล์ด้วยการใช้ php นั้น ทำให้เราสามารถกำหนดคุณสมบัติของไฟล์ เพิ่มขึ้นจากเดิมได้ 

เช่น

การกำหนดให้ทำการ cache ไฟล์ 

การกำหนด header ของไฟล์

การกำหนดเงื่อนไขการรวมไฟล์

รองรับการ gzip ไฟล์จาก server ซึ่งทำให้ขนาดไฟล์ลดลง

ตัวอย่างการรวมไฟล์ js ด้วย php บันทึกไฟล์เป็น web-js.php

1. header("Content-type: application/javascript; charset=UTF-8");  // กำหนดเป็น javascript  
2. header("Cache-Control: must-revalidate");  
3. $offset = 60 * 60 * 24 * 3; // กำหนด expire date ในอีก 3 วัน ดูจาก * 3  
4. $ExpStr = "Expires:".gmdate("D, d M Y H:i:s", time()+$offset)."GMT";
5. header($ExpStr);  
6. echo file_get_contents("http://www.example.com/calendar.js");  
7. echo file_get_contents("http://www.example.com/map_google.js");  
8. echo file_get_contents("http://www.example.com/ajax_data.js");  
9. ?>  

การใช้งาน

1. <script type="text/javascript" src="web-js.php">script>

กรณีเช่นเดียวกับ css ไฟล์

ตัวอย่างการรวมไฟล์ css ด้วย php บันทึกไฟล์เป็น web-css.php

1. header("Content-type: text/css; charset=UTF-8");  // กำหนดเป็น css   
2. header("Cache-Control: must-revalidate");  
3. $offset = 60 * 60 * 24 * 3; // กำหนด expire date ในอีก 3 วัน ดูจาก * 3  
4. $ExpStr = "Expires:".gmdate("D, d M Y H:i:s",time()+$offset)."GMT";  
5. header($ExpStr);  
6. echo file_get_contents("http://www.example.com/calendar.css");  
7. echo file_get_contents("http://www.example.com/map_google.css");  
8. echo file_get_contents("http://www.example.com/ajax_data.css");  
9. ?>  

การใช้งาน

<link rel="stylesheet" href="web-css.php" type="text/css" />

การรวมไฟล์ด้วย php สามารถทำให้ลดจำนวน http requests ลง เช่นเดียวกับการรวมไฟล์ทั่วไป

ออกแบบเว็บไซต์  จัดทำเว็บไซต์