---
# System prepended metadata

title: Admin App Angular upgrades

---

# Admin App Angular upgrades

BundleAnalyzer Results:
- Angular V9 Gzipped (3.63mb)
![](https://i.imgur.com/z267EWV.jpg)


- Angular V1 Gzipped (3.39mb)
![](https://i.imgur.com/gn8dbQN.png)


V9 -> V11
3.63 -> 3.39 ( 7% decrease)

---
Branding Module
- found an image that was inlined into html (https://github.com/zuumtrans/zuum-admin/commit/9dfc2a26e87d3b9e829290aae5518fbfb2e23010#diff-abbc8befa1e1f60037ef57e845faa6fe4ed74bea11bf32f46a6e99fb6027732fL619)
- which was making the branding module 190kb gzipped (equivalent of 60% of angular lib gzipped which is 315)
- ![](https://i.imgur.com/SZtVz9n.png)
- so the branding module is 190kb:
![](https://i.imgur.com/X6cVgWU.png)

- after moving the inline data img to a simple png file, the new module size decreased ~3x to 68kb.
![](https://i.imgur.com/X7SCwui.png)
and still we could recompress it(the img) a few times and decrease the size

New Total of 3.27mb (initial: 3.63 -> 10% decrease)
![](https://i.imgur.com/1IqoA7q.png)


------
### Lighthouse Results
-- Before (12 april):
![](https://i.imgur.com/oNq8KCK.png)

-- After (14 april):
![](https://i.imgur.com/lFwq4fH.png)


14/04
- started moving logic from core components/dialgos to their own modules
- the main bundle (which is 514kb) contains logic that is not necessary.
![](https://i.imgur.com/TVNDwN9.png)

I worked on moving some components to their specific modules and decrease the main bundle size
    - moved Toolbar and Notification components to module
    - moved Shipment Offers components to module
    - moved Shipment Stops compoennts/dialogs to module
    - moved TenderShipment to module
    - moved ServiceReports & ServiceFails to module
- After moving these components, the main bundle decreased to 416kb (20% decrease)
![](https://i.imgur.com/HbthIpf.png)

#### Lighthouse Result V2 (after main bundle reduced 20%)
![](https://i.imgur.com/CuBURmD.png)



To Do:
- replace exceljs lib with xlsx lib (250kb is too much, 315kb is the angular lib)
![](https://i.imgur.com/BZhv1bo.png)
- replace unofficial google-maps, daterange picker libs with new official angular supported libs (made available from v10).
