最佳化元件 (精簡) 以提升效能

使用 Developer Cloud Service 來精簡 JavaScript 程式碼，以提升元件效能和縮減下載大小。

最佳化元件

針對 Sample-Text-With-Image 元件，系統提供一個將元件原始程式碼最佳化的範例 (選擇性)。您可以使用 RequireJS 最佳化處理程式來精簡及合併原始程式碼。精簡元件會移除 JavaScript 程式碼中非必要的空間，使效能提升並縮減下載大小。最佳化涉及下列動作：

  • 精簡 JavaScript。

  • 壓縮 CSS。

  • 將 JavaScript、HTML 及 CSS 合併至單一檔案 render.js。

此最佳化作業將縮減下載大小並提升效能。

為元件啟用最佳化

在 Sample-Text-With-Image 元件中，最佳化會將 render.js 中標示為相依項的所有檔案 (template.html、data-defaults.js 及 design.css) 精簡並合併至 render.js 而成為單一檔案。其他已經支援最佳化的元件如下：

  • Sample-Folder-List

  • Sample-File-List

  • Sample-Documents-Manager

  • Sample-Process-Start-Form

  • Sample-Process-Task-List

  • Sample-Process-Task-Details

若要為本機元件啟用最佳化，請執行下列步驟 (必要)：

  1. 將 gulpfile.js 從 Sample-Text-With-Image 元件複製到您的元件。

  2. 針對 render.js 相依項，修正 gulpfile.js 中的模組名稱。請參考 gulpfile.js 中的註解。

註：

如果您的現有元件位於 assets 底下的 css 資料夾，請將 css 資料夾重新命名為 styles 以避免在最佳化時發生錯誤。