All icons ending up in final bundle
DaLukasDev opened this issue · comments
Hi,
I have noticed that with Vite 4.1.1 and the latest version of the heroicons (2.0.14) all the icons are ending up in my final bundle.
If I downgrade heroicons to 2.0.13 only the ones used end up in my bundle as they always did.
However if i downgrade Vite to 4.0.4 and keep heroicons on 2.0.14 only the ones used are ending up in my bundle as well.
I do however prefer to keep vite at it's latest version and pin the icons on a specific version for now.
I would love to help out wherever I can!
Kind regards.
This is quite odd. It may be related to handling of exports in Vite 4.1. I'll take a look.
We're hitting something similar, using HeroIcons with Remix (esbuild).
If I change all our imports to use this format, then tree shaking works and we don't end up with every icon in our build:
import ChartBarIcon from '@heroicons/react/24/outline/ChartBarIcon';
import BoltIcon from '@heroicons/react/20/solid/BoltIcon';
import CircleStackIcon from '@heroicons/react/20/solid/CircleStackIcon';
import GlobeAltIcon from '@heroicons/react/20/solid/GlobeAltIcon';
import StarIcon from '@heroicons/react/20/solid/StarIcon';
Bit of an update for y'all: I can produce a tree-shaken build when using either esbuild or rollup directly in a test repo. However, when compiling with Vite 4.1 things are not tree-shaken when exports is present in package.json.
I just published v2.0.15 which adds "sideEffects": false to our package.json which appears to fix the issue in Vite. I haven't been able to reproduce the issue with Remix bundling all icons with 2.0.14 nor can I in the fixed version (2.0.15).
@DaLukasTI This should hopefully be fixed for you now.
@alexblack can you give the new version a test and let me know what you see?
@thecrypticace . It does fix the issue of adding all icons to the final build and only the icons we use throughout our app.
Now the only quirk I still see is that all used icons end up in the main.js after transpiling and not in the corresponding page js. This isn't that much off an issue but this was not the behavior we saw with version 2.0.13 and before. Here the icons got split up in the bundle where they were used and not just all in the main.js file.
@DaLukasTI good to know. I'm not sure if there's anything that we can specifically do about that difference. That's really up to how the bundler just splits the files and for whatever reason it's now splitting the chunks a bit differently