SharePoint Online 中的縮製和統合

本文說明如何在 Web Essentials 中使用縮製和統合技術,來減少 HTTP 要求數量並縮短在 SharePoint Online 中載入頁面所需耗費的時間。

當您自訂網站時,您最後可以新增大量額外檔案到伺服器來支援自訂。新增額外 JavaScript、CSS 和影像會增加傳送到伺服器的 HTTP 要求數量,進而增加顯示網頁所需耗費的時間。如果您有多個相同類型的檔案,您可以統合這些檔案,以提升下載這些檔案的速度。

針對 JavaScript 和 CSS 檔案,您也可以使用稱為「縮製」的方法,移除空白字元和其他不必要的字元,藉以縮小檔案的總大小。

使用 Web Essentials 縮製和統合 JavaScript 和 CSS 檔案

您可以使用 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,例如:

自訂主版頁面中的品牌要素螢幕擷取畫面

在 Web Essentials 中建立 TE000127218 和 CSS 套件組合

  1. 在 Visual Studio 的方案總管中,選取您要在套件組合中包含的檔案。

  2. 以滑鼠右鍵按一下選取的檔案,然後選取操作功能表中的 [Web Essentials] > [建立 JavaScript 套件組合檔案]。例如:

    螢幕擷取畫面顯示 [Web Essentials] 功能表選項

檢視統合 JavaScript 和 CSS 檔案的結果

當您建立 JavaScript 和 CSS 套件組合時,Web Essentials 會建立一個稱為「配方檔」的 XML 檔案,識別 JavaScript 和 CSS 檔案以及一些其他設定資訊:

JavaScript 及 CSS 配方檔的螢幕擷取畫面

此外,如果將統合配方中的縮製標幟設為 True,則會將檔案大小縮小,並且將檔案統合在一起。也就是說,已建立可在主版頁面參照的新縮製版 JavaScript 檔案。

縮製標幟設定為 True 的螢幕擷取畫面

當您從網站載入頁面時,您可以從網頁瀏覽器使用開發人員工具 (例如 Internet Explorer 11),查看已傳送到伺服器的要求數量,以及每個檔案需要耗費多久的時間載入。

下圖是在縮製之前下載 JavaScript 和 CSS 檔案的結果。

螢幕擷取畫面顯示下載 80 個項目

將 CSS 和 JavaScript 檔案統合在一起之後,要求數量已減少到 74,而且每個檔案只需耗費比個別下載原本的檔案稍為久一點的時間。

螢幕擷取畫面顯示下載 74 個項目

統合之後,JavaScript 套件組合檔案會從 815KB 大幅縮小為 365KB:

螢幕擷取畫面顯示縮減後的下載大小

建立影像原件來統合影像

與統合 JavaScript 和 CSS 檔案的方式類似,您可以將許多小圖示和其他常用影像組合成較大的原件表,然後使用 CSS 顯示個別的影像。使用者的網頁瀏覽器會一次下載原件表,然後將它快取在本機電腦上,而不是下載每個個別影像。這會縮減下載和往返網頁伺服器的次數,藉以改善頁面載入效能。

在 Web Essentials 中建立影像原件

  1. 在 Visual Studio 的方案總管中,選取您要在套件組合中包含的檔案。

  2. 以滑鼠右鍵按一下選取的檔案,然後選取操作功能表中的 [Web Essentials] > [建立影像原件]。例如:

    螢幕擷取畫面顯示如何建立影像 sprite
  3. 選擇儲存原件檔案的位置。.sprite 檔案是一個描述原件中之設定和檔案的 XML 檔案。下圖顯示原件 PNG 檔案及其對應 .sprite XML 檔案的範例。

    Sprite 檔案的螢幕擷取畫面

    sprite XML 檔案的螢幕擷取畫面

增進您的 Office 技巧
探索訓練
優先取得新功能
加入 Office 測試人員

這項資訊有幫助嗎?

感謝您的意見反應!

感謝您的意見反應! 我們將協助您與其中一位 Office 支援專員連絡以深入了解您的意見。

×