DEV Community

Cover image for This might be increasing your bundle size!
Rafael Sant'Ana
Rafael Sant'Ana

Posted on • Edited on

This might be increasing your bundle size!

Hi there!

This is known by a bunch of people, but maybe you didn't know it, just like I didn't (':

Some time ago, I was on LinkedIn and I saw an interesting project. Inside the code, there was a code snippet similar to this

Wildcard Icon Example
I thought it was clever, it seemed clearly better than tons of lines just for importing icons, then I started using it in most of my codes.

Recently, though, a work colleague told me not to, because in fact NodeJS builds with all the icons, even the ones that were not used, and therefore, increasing the project size and reducing the performace.

Instead, in fact, it is more advantageous to import one by one, similar to this

Not Wildcard Example

This post wouldn't be so useful if it didn't contain a way of knowing whether importing wildcard or one-by-one is more effective to your code.
And for this, I recommend a Vscode extension called 'Import Cost'

Import Cost 1

Import Cost 2

Obs: Wildcard imports are still a very valid option, but mostly if you'll use all or most of the imported content (:

Top comments (0)