Optimización de la aplicación angular

Me gusta explicar los pasos ideales para optimizar un proyecto angular según la prioridad. Estos pasos deben aplicarse uno tras otro para conocer la importancia de cada técnica para su caso. Esto también le permitirá saber qué técnica debe aportar el equipo de desarrollo mientras desarrolla una nueva aplicación angular.

CDN para activos.

  a. CDN store your assets very close to the end-users network. 
  b. Usually bundles size of a large application is above 5 mb's.
  b. Cloudfare can provide 2x speedup at some cost.

Trabajadores de servicios

  a. Avaible with angular out of the box.
  b. POST requests are not cached by service workers
  	1. If they are idempotent requests.
    2. If made by get would have crossed 2k safe character limit.
    3. Then you need to cache them using some external mechanisms.
    3. https://github.com/angular/angular/issues/29790 
    4. Use ngx-cacheable
    	1) It caches methods.
        2) Create a unique key of your post request by md5.
        3) This also provides a cache invalidation support.
        4) Can be hooked at service-worker update event.
        5) Can be hooked at custom app update notification service.
  c. Seamless update with and without user interaction.
  	1. Depending on the state of a page.
    2. Depending on api update. 
    3. Can invalidate cache in the background.
    4. Refetch the updated resources.
  d. Fallback if service worker disabled or not available.
     1. Optimize browser cache configuration provided by default in angular.
     1. E-tag can be configured by your hosting server and through CDN.
     2. Last modified is important for some api requests.

Aciertos de API optimizados

 a. At client side
    1. Minimize data footprint
       1. Optimise request response data structure.
       2. Remove unwanted fields.
 b. At the server side.
    1. When doing SSR.
       1) ngoninit is fired some APIs can be called at this time.
       2) Enabling fast APIs response.
       3) If APIs & node server are on the same network.
       4) Send this data to the client (Client side rehydration)
       5) Initialize state based on above.
    2. Some optimal mechanism for keeping static data at the client.
       1) Such as in-memory redis.
       2) So, this data is not requested through some api.
       3) This also reduces development time.
       4) You can precache this data.
       5) If some of your components are completely static data-driven.

Carga lenta

 a. Modularization of independent components & pages.
 b. This reduces initial time to interactive significantly.
 c. Reduces app load time.
 d. Loading popups lazily improved our app's performance.
 e. Twice as our case had around 10 heavy popup's.
 f. To wrap the whole site's functionality in just two unique pages.
 c. Images or any static resource can also be loaded lazily or prechaced.
 d. Using some heustic alogrithm.

Optimizaciones de imágenes

 a. Jpeg format can be upgraded.
 b. Png format can be upgraded
 c. Webp can loaded for browsers which support it.
 d. This also improves site load by 75%. 
 e. Example here https://stackblitz.com/edit/angular-webp-pipe.
 f. Build a webp converter from source at your machine.
 g. So you can use the latest stable release of standard alogrithm.
 h. Loading a webp when image is referenced in css or scss.
 	1. Will be little tricky.
    2. But you can append a class to body.
    3. Based on webp support detection service.
    4. Specify respective webp or other image based on that class.

Similar Posts

Leave a Reply

Your email address will not be published.