การลดส่วนไม่จำเป็นและการรวมใน 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 Insider

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

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

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

×