การรวมไฟล์ javascript หรือไฟล์ css เป็นไฟล์เดียว ด้วย php อย่างง่าย
09 December 2009กรณีหน้าเว็บเพจ มีการเรียกใช้ไฟล์ 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.php"></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 ลง เช่นเดียวกับการรวมไฟล์ทั่วไป
บทความคนเข้าอ่านวันนี้
25 Sep 08 รู้จักฟังก์ชันสำหรับการ random อ่าน 2902 25 Sep 08 javasdcript กับการเข้ารหัส encoding และการถอดรหัส decoding อ่าน 4243 25 Sep 08 ตรวจสอบโดเมน Domain ด้วย Ajax อ่าน 3482 09 Sep 10 Google map API v.3 กับ jQuery ลากจุดหา พิกัด ค่า latitude และ longitude อ่าน 8378 24 Sep 10 ประยุกต์ facebox ของ jQuery แทนการใช้ mootools facebox มาใช้งาน อ่าน 4101 23 Aug 10 Integrate ใช้ Filemanager ของ FCKeditor กับ CKEditor แทน CKFinder อ่าน 2778 18 Mar 09 สร้างเครื่องคิดเลขอย่างง่ายด้วย CSS และ jQuery อ่าน 2307 14 Mar 09 สร้าง tooltip กล่องข้อความตัวช่วยเหลือได้ง่ายด้วย jQuery อ่าน 9070 30 Oct 10 การเลื่อน jQuery UI tab อัตโนมัติ ตามเวลาที่กำหนด อ่าน 11026 03 Jun 09 สร้างระบบ slide เลื่อนซ้าย ขวา ด้วย jquery อย่างง่าย อ่าน 14664 14 Sep 10 การดึงข้อมูล จากฐานข้อมูล สร้าง xml ไฟล์ ด้วย php อ่าน 5484 17 Oct 08 แสดงตัวอย่างรูป ก่อน upload image preview berfore upload อ่าน 10654 25 Sep 08 แบ่งหน้า ด้วย Code แบบง่าย อ่าน 6486 19 Oct 08 คำสั่ง SQL functions อ่าน 4871 27 Mar 10 ทำให้ เลือก list box แล้วแสดง checkbox ด้วย jQuery อ่าน 5371 06 Apr 10 ใช้ คุณสมบัติ css stylesheet สร้างตาราง อ่าน 5349 26 Feb 09 สร้างแบบฟอร์มค้นหาข้อมูลในเว็บไซต์ ด้วย Google อ่าน 4015 16 Sep 10 เพิ่มความสะดวก การ insert update delete ข้อมูล ของ mysql ด้วย php function อ่าน 9336 28 Oct 10 เริ่มต้นใช้งาน jquery ui autocomplete อย่างง่าย อ่าน 5498 22 Nov 08 ซ่อนและแสดงเนื้อหาแบบหีบเพลง (accordion) ด้วย jquery อย่างง่าย อ่าน 5297
