Оптимизация приложения Angular | Кодементор

Мне нравится объяснять идеальные шаги для оптимизации углового проекта в соответствии с приоритетом. Эти шаги следует применять один за другим, чтобы знать значимость каждой техники для вашего случая. Это также позволит вам узнать, какую технику должна использовать команда разработчиков при разработке нового углового приложения.

CDN для активов.

  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.

Сервисные работники

  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.
    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.

Оптимизированные обращения к API

 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.

Ленивая загрузка

 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.

Оптимизация изображений

 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 
 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.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *