การทำเว็บไซต์ให้โหลดได้เร็วขึ้น ด้วยการรวมไฟล์ javascript หรือไฟล์ css เป็นไฟล์เดียว ด้วย php อย่างง่าย by tosawat

กรณีหน้าเว็บเพจ มีการเรียกใช้ไฟล์ 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

<script type=“text/javascript”>

// ไฟล์สำหรับปฏิทิน

// ไฟล์สำหรับ google map

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

</script>

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

<script type=“text/javascript” src=“calendar.js”></script>

<script type=“text/javascript” src=“map_google.js”></script>

<script type=“text/javascript” src=“ajax_data.js”></script>

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

<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

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

การใช้งาน

<script type=“text/javascript” src=“web-js.js”></script>

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

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

การใช้งาน

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

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