Large bundle size because of icons

[robingenz]

My bundle size is quite large (16mb) because all Taiga UI icons are copied to the dist folder, not just the ones I need.

{
  "glob": "**/*",
  "input": "node_modules/@taiga-ui/icons/src",
  "output": "assets/taiga-ui/icons"
}

Is there a practical way to optimize this so that only used icons end up in the bundle?

[waterplea]

They are not in the bundle, they just lay in the assets folder. Are you limited on hosting space? Your users would only download the icons used.

[robingenz]

In my case, it's a problem for 3 reasons:

• I have a separate build and deploy step in my GitHub actions workflow and uploading and downloading the files takes an unnecessary amount of time.
• I have a web app that is available as a PWA and all assets should be cached. However, this leads to the download of an unnecessarily large number of files.
• The same web app should also be available on Android and iOS using CapacitorJS. Here I would like to deliver Live Updates as fast as possible.

[waterplea]

All Taiga UI icons are name @tui. and then the name of the file, you would need a script to go through your source code and collect all used icon names in an array and then copy only those files then. At the moment there's no tool to do this out of the box.

[loxy]

I have a separate build and deploy step in my GitHub actions workflow and uploading and downloading the files takes an unnecessary amount of time.

This can be necleted as it is still "small" compared to other build tasks.

I have a web app that is available as a PWA and all assets should be cached. However, this leads to the download of an unnecessarily large number of files.

I also have a PWA. And once it accesses an icon, that is cached afterwards. What do you want more?

The same web app should also be available on Android and iOS using CapacitorJS. Here I would like to deliver Live Updates as fast as possible.

I guess then you need to split your app. Or you need to provide your own way to "collect the used icons". I don't see a way on how Taiga UI should handle that for you...

[robingenz]

@waterplea Thank you! I will do this as a workaround.

@loxy One possible solution would be the approach of Font Awesome:

import { faCoffee } from '@fortawesome/free-solid-svg-icons/faCoffee'

<fa-icon [icon]="faCoffee"></fa-icon>

[waterplea]

That would mean the icon gets into JS bundle and slows down initial load time. That still can be done in Taiga UI, you can import raw source code of SVGs and provide the dictionary to TUI_ICONS:
https://taiga-ui.dev/components/icon#bundled

[robingenz]

I'll take a closer look at that. In any case, I now have a solution. Thank you so much!