การลดส่วนไม่จำเป็นและการรวมใน SharePoint Online

บทความนี้อธิบายถึงวิธีการใช้เทคนิคการลดส่วนไม่จำเป็นและการรวมใน Web Essentials เพื่อลดจำนวนการร้องขอ HTTP และลดเวลาในการโหลดหน้าใน SharePoint Online

ระหว่างที่ปรับแต่งเว็บไซต์ คุณอาจลงเอยด้วยการเพิ่มไฟล์ส่วนเกินจำนวนมากไปยังเซิร์ฟเวอร์เพื่อใช้สนับสนุนส่วนที่ปรับแต่ง การเพิ่ม JavaScript, CSS และรูปภาพจะทำให้คำขอ HTTP ไปยังเซิร์ฟเวอร์เพิ่มขึ้น ส่งผลให้ต้องใช้เวลานานขึ้นกว่าเว็บเพจจะแสดงให้เห็นได้ ถ้าคุณมีไฟล์ชนิดเดียวกันมากกว่าหนึ่งไฟล์ คุณสามารถรวบรวมไฟล์เหล่านี้เข้าด้วยกันเพื่อให้ดาวน์โหลดไฟล์เหล่านี้ได้รวดเร็วยิ่งขึ้น

สำหรับไฟล์ JavaScript และ CSS คุณยังสามารถใช้วิธีการที่เรียกว่า การลดส่วนไม่จำเป็น (Minification) ที่คุณลดขนาดไฟล์ทั้งหมดด้วยการเอาช่องว่างและอักขระอื่นที่ไม่จำเป็นออก

การลดส่วนไม่จำเป็นและการรวมไฟล์ JavaScript และ CSS ใน Web Essentials

คุณสามารถใช้ซอฟต์แวร์ของบริษัทอื่นเช่น Web Essentials เพื่อรวมไฟล์ CSS และ JavaScript ได้

สิ่งสำคัญ: Web Essentials เป็นโครงการของบริษัทอื่น เป็นโอเพนซอร์ซสำหรับชุมชน ตัวซอฟต์แวร์เป็นส่วนเสริมของ Visual Studio 2012 และ Visual Studio 2013 และไม่ได้รับการสนับสนุนโดย Microsoft เมื่อต้องการดาวน์โหลด Web Essentials ให้เข้าไปเยี่ยมชมที่เว็บไซต์ http://vswebessentials.com/download

Web Essentials มีการรวมสองรูปแบบคือ

  • .bundle: สำหรับไฟล์ CSS และ JavaScript

  • .sprite: สำหรับรูปภาพ (มีเฉพาะใน Visual Studio 2013)

คุณสามารถใช้ Web Essentials ได้ถ้าคุณมีฟีเจอร์ที่มีองค์ประกอบเกี่ยวกับแบรนด์ที่อ้างอิงอยู่ภายในหน้าต้นแบบกำหนดเอง เช่น:

สกรีนช็อตขององค์ประกอบแบรนด์ในหน้าต้นแบบแบบกำหนดเอง

เมื่อต้องการสร้างชุด TE000127218 และ CSS ใน Web Essentials

  1. ใน Visual Studio ที่อยู่ใน Solution Explorer ให้เลือกไฟล์ที่คุณต้องการรวมไว้ในชุด

  2. คลิกขวาที่ไฟล์ที่เลือก แล้วเลือก Web Essentials > สร้างชุดไฟล์ JavaScript จากเมนูบริบท ตัวอย่าง:

    สกรีนช็อตแสดงเมนูตัวเลือกของ Web Essentials

ดูผลลัพธ์ของการรวมไฟล์ JavaScript และ CSS

เมื่อคุณสร้างชุดไฟล์ JavaScript และ CSS แล้ว Web Essentials จะสร้างไฟล์ XML ที่เรียกว่า ไฟล์สูตร (Recipe file) ที่ระบุไฟล์ JavaScript และ CSS รวมถึงข้อมูลการกำหนดค่าอื่นๆ :

สกรีนช็อตของ JavaScript และไฟล์ CSS

นอกจากนี้ ถ้าค่าสถานะการลดขนาดเป็น true ในสูตรการรวม ไฟล์จะลดขนาดลง และถูกรวมเข้าด้วยกัน เท่ากับว่าไฟล์ JavaScript ในเวอร์ชันใหม่ที่ถูกลดขนาดลงนั้นถูกสร้างขึ้นแล้ว โดยที่คุณสามารถอ้างอิงในหน้าต้นแบบของคุณ

สกรีนช็อต minify ตั้งค่าสถานะเป็น true

เมื่อคุณโหลดหน้าหนึ่งจากเว็บไซต์ ก็จะสามารถใช้เครื่องมือนักพัฒนาจากเว็บเบราว์เซอร์ของคุณ เช่น Internet Explorer 11 เพื่อดูจำนวนการร้องขอที่ส่งไปยังเซิร์ฟเวอร์และระยะเวลาที่แต่ละไฟล์ที่ใช้ในการโหลด

รูปต่อไปนี้เป็นผลลัพธ์ของการโหลดไฟล์ JavaScript และ CSS ก่อนจะทำการลดส่วนไม่จำเป็น

สกรีนช็อตแสดงรายการ 80 รายการกำลังถูกดาวน์โหลด

หลังจากที่รวมไฟล์ CSS และ JavaScript เข้าด้วยกันแล้ว จำนวนการร้องขอลดลงไปเป็น 74 และแต่ละไฟล์ใช้เวลาดาวน์โหลดนานกว่าไฟล์ต้นฉบับเพียงเล็กน้อย:

สกรีนช็อตแสดงรายการ 74 รายการกำลังถูกดาวน์โหลด

หลังจากที่รวม ชุดไฟล์ JavaScript จะลดลงอย่างมากจาก 815 KB เป็น 365 KB:

สกรีนช็อตแสดงการลดขนาดการดาวน์โหลด

การรวมรูปด้วยวิธีสร้างสไปรต์รูป

เหมือนกับที่คุณรวมไฟล์ JavaScript และ CSS คุณสามารถรวมไอคอนขนาดเล็กหลายๆ ไอคอนและรูปภาพทั่วไปอื่นๆ เป็นสไปรต์รูปขนาดใหญ่ลงในแผ่นสไปรต์ แล้วใช้ CSS เพื่อแสดงรูปภาพแต่ละรูปแยกกัน แทนที่จะต้องดาวน์โหลดแต่ละรูปแยกกัน เว็บเบราว์เซอร์ของผู้ใช้จะดาวน์โหลดแผ่นสไปรต์ขึ้นมาหนึ่งครั้ง แล้วเก็บแคชไว้ภายในคอมพิวเตอร์ ช่วยปรับปรุงประสิทธิภาพการโหลดหน้า ด้วยการลดจำนวนดาวน์โหลด และการส่งข้อมูลไป-กลับไปยังเซิร์ฟเวอร์เว็บ

เมื่อต้องการสไปรต์รูปใน Web Essentials

  1. ใน Visual Studio ใน Solution Explorer ให้เลือกไฟล์ที่คุณต้องการรวมไว้ในชุด

  2. คลิกขวาที่ไฟล์ที่เลือก แล้วเลือก Web Essentials > สร้างสไปรต์รูป จากเมนูบริบท ตัวอย่าง:

    สกรีนช็อตแสดงวิธีการสร้างรูปเทพดา
  3. เลือกตำแหน่งที่ตั้งเพื่อบันทึกไฟล์สไปรต์ ไฟล์ .sprite เป็นไฟล์ XML ที่อธิบายการตั้งค่าและไฟล์ในสไปรต์รูป รูปต่อไปนี้แสดงตัวอย่างของสไปรต์ไฟล์ PNG และไฟล์ XML สกุล .sprite ที่สอดคล้องกัน

    สกรีนช็อตของไฟล์ สไปรท์ (Sprite)

    สกรีนช็อตของไฟล์สไปรท์ XML

ขยายทักษะ Office ของคุณ
สำรวจการฝึกอบรม
รับฟีเจอร์ใหม่ก่อนใคร
เข้าร่วม Office Insider

ข้อมูลนี้เป็นประโยชน์หรือไม่

ขอบคุณสำหรับคำติชมของคุณ!

ขอขอบคุณสำหรับคำติชมของคุณ! เราคิดว่าอาจเป็นประโยชน์ที่จะให้คุณได้ติดต่อกับหนึ่งในตัวแทนฝ่ายสนับสนุน Office ของเรา

×