การรวมไฟล์ 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 ลง เช่นเดียวกับการรวมไฟล์ทั่วไป







บทความในหมวดที่่น่าสนใจ อื่นๆ PHP Learning

08 Jun 10 ป้องกัน spam ด้วย captcha คำถาม ทางคณิตศาสตร์ อย่างง่าย อ่าน 2084 17 Jun 10 สร้างฟังก์ชัน ตรวจสอบ การเข้าเว็บไซต์ ผ่านมือถือ ด้วย php อ่าน 2039 25 Sep 08 ตรวจสอบสถานะของ MySQL ด้วย phpinfo อ่าน 2036 03 Apr 09 ง่ายๆ กับการลดช่องว่างในข้อความด้วย php อ่าน 2035 30 Sep 08 สร้างฟังก์ชัน PHP แยกตัวเลขจากข้อความ อย่างง่าย อ่าน 2002 18 Mar 11 ทบทวน htaccess สำหรับ ให้ url เว็บมี www ด้านหน้าเสมอ อ่าน 1920 31 Aug 10 เทคนิค php ใช้ fgets และ javascript วนลูป loop อ่านไฟล์ ขนาดใหญ่ อ่าน 1900 29 Oct 08 ใช้ php เข็ค javascript ว่ามีการเปิดใช้ หรือ enable หรือไม่ อ่าน 1864 03 Feb 11 การใช้งาน character classes ใน Regular Expressions ของ PHP อ่าน 1774 22 Oct 10 สร้าง php ฟังก์ชัน ค้นหาค่าในตัวแปร array อย่างง่าย อ่าน 1752 10 Feb 10 ประยุกต์ สร้าง FTP Function สำหรับการจัดการไฟล์ผ่าน FTP Protocal อ่าน 1673 04 Dec 09 จัดการ Directory สร้าง ลบ เปลี่ยนชื่อ กำหนด permission ผ่าน FTP function ด้วย PHP อ่าน 1672 25 Oct 08 สร้างฟังก์ชันการหา whois เบื้องต้นด้วย php อย่างง่าย อ่าน 1599 25 Sep 08 เพิ่มข้อความหน้าหรือหลังตัวเลขหรือข้อความด้วยฟังก์ชัน str_pad อ่าน 1576 19 Jan 11 อักขระคั่น (Delimiters) ในการใช้งาน Regular Expressions ของ PHP อ่าน 1540

บทความคนเข้าอ่านวันนี้

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
จำนวนผู้เยี่ยมชม 892666
คน 2012 © Copyright ninenik.com. All rights reserved.