กดถูกใจ เป็นกำลังใจให้เรา 😍

VIR9.COM

ขอบคุณน๊าา 🥰

Close

  • การรวมไฟล์ โดยใช้ php ลดจำนวน http requests

    April 28, 2018

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

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

    <script type="text/javascript">
// ไฟล์สำหรับ 1.js 
// ไฟล์สำหรับ 2.js
// ไฟล์สำหรับ 3.js
</script>

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

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

    การเรียกเพียงไฟล์เดียว

    <script type="text/javascript" src="4.js"></script>

    ทำให้ลดจำนวน http requests ลง (เทคนิคทำเว็บไซต์ให้โหลดได้เร็ว)
    ไฟล์ css  ก็ทำได้เช่นกัน

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

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

    <?php
header("Content-type: application/javascript; charset=UTF-8");  // กำหนดเป็น javascript
header("Cache-Control: must-revalidate");
$offset = 60 * 60 * 24 * 5; // กำหนด expire date ในอีก 5 วัน ดูจาก * 5  
$startDateCache=strtotime("2012-02-21"); // กำหนดวันเริ่มต้น cache 2017-06-08
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", $startDateCache + $offset) . " GMT"; 
header($ExpStr);
echo file_get_contents("https://www.1.com/1.js");
echo file_get_contents("https://www.1.com/2.js");
echo file_get_contents("https://www.1.com/3.js");
?>

    การใช้งาน

    <script type="text/javascript" src="4.php"></script>

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

    <?php
header("Content-type: text/css; charset=UTF-8");  // กำหนดเป็น css 
header("Cache-Control: must-revalidate");
$offset = 60 * 60 * 24 * 6; // กำหนด expire date ในอีก 6 วัน ดูจาก * 6  
$startDateCache=strtotime("2017-06-08"); // กำหนดวันเริ่มต้น cache 2017-06-08
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", $startDateCache + $offset) . " GMT"; 
header($ExpStr);
echo file_get_contents("https://www.1.com/x.css");
echo file_get_contents("https://www.1.com/y.css");
echo file_get_contents("https://www.1.com/z.css");
?>

    การใช้งาน

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

เวอไนน์ไอคอร์ส

ประหยัดเวลากว่า 100 เท่า!

เวอไนน์เว็บไซต์⚡️
สร้างเว็บไซต์ ดูแลเว็บไซต์

Categories