Optimizarea componentelor (prin curăţare) pentru performanţă superioară

Îmbunătăţiţi performanţa componentelor dvs. şi reduceţi dimensiunile descărcărilor curăţând codul JavaScript cu Developer Cloud Service.

Optimizarea componentelor

Puteţi vedea un exemplu de optimizare a codului sursă (opţional) pentru componenta Sample-Text-With-Image. Puteţi utiliza optimizorul RequireJS pentru a curăţa şi a combina codul sursă. Curăţarea unei componente presupune eliminarea spaţiului nedorit din codul JavaScript, ceea ce se traduce printr-o performanţă superioară şi o dimensiune redusă a descărcărilor. Optimizarea presupune următoarele acţiuni:

  • Curăţarea componentei JavaScript.

  • Comprimarea foii de stiluri în cascadă (CSS).

  • Combinarea componentelor JavaScript, HTML şi CSS într-un singur fişier, render.js.

Această optimizare permite reducerea dimensiunii descărcărilor şi îmbunătăţirea performanţei.

Aplicarea optimizării pentru componenta dvs.

În cadrul componentei Sample-Text-With-Image, optimizarea presupune curăţarea şi combinarea tuturor fişierelor marcate drept dependenţe în render.js (template.html, data-defaults.js, and design.css) în render.js, sub forma unui singur fişier. Mai jos puteţi vedea alte componente care acceptă deja optimizarea: 

  • Sample-Folder-List

  • Sample-File-List

  • Sample-Documents-Manager

  • Sample-Process-Start-Form

  • Sample-Process-Task-List

  • Sample-Process-Task-Details

Pentru a aplica optimizarea pentru componenta dvs. locală, urmaţi paşii de mai jos (obligatoriu):

  1. Copiaţi gulpfile.js din componenta Sample-Text-With-Image în componenta dvs.

  2. Corectaţi numele modelelor din gulpfile.js pentru dependenţele dvs. din render.js. Consultaţi comentariile din gulpfile.js.

Notă:

Dacă doriţi să optimizaţi o componentă existentă, care are un folder css sub assets, redenumiţi folderul css la styles pentru a evita erorile în timpul optimizării.