Optymalizowanie (pomniejszanie) składników dla lepszej wydajności

Można poprawić wydajność składników oraz zmniejszyć rozmiar pobierania, optymalizując kod JavaScript za pomocą usługi Developer Cloud Service.

Optymalizowanie składników

Przykład opcjonalnej optymalizacji kodu źródłowego składnika jest przedstawiony dla składnika Sample-Text-With-Image. Używając optymalizatora RequireJS, można pomniejszyć i połączyć kod źródłowy. Pomniejszanie składnika polega na usunięciu zbędnych odstępów w kodzie JavaScript, wskutek czego poprawia się wydajność i zmniejsza rozmiar pobierania. Na optymalizację składają się następujące czynności:

  • Pomniejszenie kodu JavaScript.

  • Skompresowanie kodu CSS.

  • Połączenie kodu JavaScript, HTML i CSS w jeden plik render.js.

Wskutek tej optymalizacji ulega zmniejszeniu rozmiar pobierania oraz poprawia się wydajność.

Włączanie optymalizacji składnika

Optymalizacja składnika Sample-Text-With-Image pomniejszy i połączy wszystkie pliki oznaczone w pliku render.js jako zależności (template.html, data-defaults.js, and design.css) w jeden plik render.js. Poniżej są wymienione pozostałe składniki obsługujące optymalizację: 

  • Sample-Folder-List

  • Sample-File-List

  • Sample-Documents-Manager

  • Sample-Process-Start-Form

  • Sample-Process-Task-List

  • Sample-Process-Task-Details

Aby włączyć optymalizację dla swojego składnika lokalnego, należy wykonać następujące czynności (wymagane):

  1. Skopiować do swojego składnika plik gulpfile.js ze składnika Sample-Text-With-Image.

  2. Poprawić nazwy modułów w pliku gulpfile.js zgodnie z zależnościami ze swojego pliku render.js. Należy przy tym korzystać z komentarzy z pliku gulpfile.js.

Uwaga:

Mając istniejący składnik z folderem css zawartym w folderze assets, należy — aby uniknąć błędów podczas optymalizowania — zmienić nazwę folderu css na styles.