Suorituskyvyn parannus komponentteja optimoimalla (tiivistys)

Voit parantaa komponenttien suorituskykyä ja pienentää noudettavien tiedostojen kokoa tiivistämällä JavaScript-koodin Developer Cloud Service -palvelun avulla.

Komponenttien optimointi

Alla on esimerkki komponentin lähdekoodin optimoinnista (valinnainen) Sample-Text-With-Image-komponentille. Voit käyttää RequireJS-optimoijaa lähdekoodin tiivistykseen ja yhdistämiseen. Komponentin tiivistyksessä JavaScript-koodista poistetaan tarpeettomat välilyönnit, jotta suorituskyky olisi parempi ja noudettavan tiedoston koko pienempi. Optimointiin kuuluvat seuraavat toimet:

  • JavaScriptin tiivistys

  • CSS-koodin pakkaus

  • JavaScript-, HTML- ja CSS-tiedostojen yhdistäminen yhdeksi tiedostoksi nimeltä render.js.

Tämä optimointi pienentää noudettavan tiedoston kokoa ja parantaa suorituskykyä.

Optimoinnin käyttöönotto komponentille

Sample-Text-With-Image-komponentissa optimointi tiivistää ja yhdistää kaikki tiedostot, jotka on merkitty riippuvuuksiksi render.js-tiedostossa (template.html, data-defaults.js ja design.css) yksittäiseksi render.js-tiedostoksi. Muut komponentit, jotka tukevat jo optimointia: 

  • Sample-Folder-List

  • Sample-File-List

  • Sample-Documents-Manager

  • Sample-Process-Start-Form

  • Sample-Process-Task-List

  • Sample-Process-Task-Details

Voit ottaa optimoinnin käyttöön paikalliselle komponentille tekemällä seuraavat toimet (pakollinen):

  1. Kopioi gulpfile.js-tiedosto Sample-Text-With-Image-komponentista omaan komponenttiisi.

  2. Korjaa gulpfile.js-tiedoston moduulien nimet vastaamaan oman render.js-tiedostosi riippuvuuksia. Katso lisätietoja gulpfile.js-tiedoston kommenteista.

Huomautus::

Jos olemassa oleva komponentti sisältää css-kansion assets-kansiossa, vaihda css-kansion nimeksi styles, jotta optimoinnin aikana ei esiintyisi virheitä.