Infragistics|Ignite UI for jQuery|使用適用於 jQuery 的 Ignite UI 自訂建置來提高效能

infragistics log


如果 Ignite UI for jQuery 的 JS 檔案需要很長時間載入且效能很慢...

使用 Ignite UI for jQuery 的功能

  • infragistics.core.js 410KB // 基本邏輯與資料來源元件
  • infragistics.dv.js 3.28 MB // 圖表和地圖控件
  • infragistics.lob.js 2.77 MB // 其他控件,如網格、OLAP、業務控件

需要 JS 檔案(以及 CSS 檔案),

使用所有功能 使用圖表系統 使用網格等
所需的 JS 文件 infragistics.core.js
infragistics.dv.js
infragistics.lob.js
infragistics.core.js
infragistics.dv.js
infragistics.core.js
infragistics.lob.js
總尺寸 6.46MB 3.69MB 3.18MB

檔案體積較大,根據網路情況,載入可能需要一些時間,這可能成為螢幕顯示速度的瓶頸。

在這種情況下,您可以使用自訂建置來提高效能。


*還有一種方法可以減少初始載入時間,即使用igLoader動態載入必要控制項的JS檔。

建立自訂構建

自訂建置是僅打包您需要的控制項的建置檔案。
未使用的控制項不包含在檔案中,從而減小了檔案大小。
結果是更快的載入時間和更高的效能。

現在讓我們建立一個自訂建置。
只需登入 IgniteUI 下載頁面並選擇您想要的控制項即可。

1)登入

請透過「下載產品版本:登入」造訪該頁面並登入。

*此處,無需登入即可繼續使用試用版。

2)版本選擇

登入後,您將能夠從版本選擇畫面中選擇產品版本,因此
請選擇您正在使用的版本。

*此處選擇「2016.1 試用版」。

3)元件選擇

然後選擇您的控制項及其功能。

其他依賴的控制項也會自動選中,所以要小心不要誤取消選中它們。

做出選擇後,按一下螢幕底部的「下載自訂版本」按鈕進行下載。

※這裡,

網格控制項
GridShared *這是網格共用功能,所以需要勾選此項目。RowSelectors
選擇
更新

選擇。

這樣就完成了自訂建置的創建。

使用自訂構建

當您解壓縮下載的 zip 檔案時,

基礎設施.js

該 JS 檔案已包含在內,因此您可以使用它來代替 core、lob 和 dv。

CSS檔案也包含在解壓縮後的資料夾中,但CSS檔案中只打包了必要的控制項。

順便說一句,讓我們檢查一下我們這次創建的自訂建置能夠減少多少。

  網格其他
僅自訂建置igGird 更新/選擇功能
所需的 JS 文件 infragistics.core.js
infragistics.lob.js
基礎設施.js
總尺寸 3.18MB 1.04MB

與簡單讀取 core + lob 相比,我們能夠將檔案大小減少 2MB 以上。
這也將減少大約 1/3 的載入時間。
在網路速度較慢的環境中,這種差異尤其明顯。

概括

提高效能是一個簡單的術語,但解決方案會根據原因而有所不同,但如果原因是 JS 檔案載入時間,就像本例一樣,減少檔案大小是一個有效的方法。

我們向您展示如何透過使用自訂建置來減小檔案大小、加快載入時間並提高效能。

延伸閱讀
aa71435723的大頭照
Winston

Eggplant DAI 自動化測試專家。

留言