Closed rhysemmerson closed 2 years ago
Also experimenting this, here's my ANALYZED bundle from Next.js (https://www.npmjs.com/package/@next/bundle-analyzer).
On second thought, while the Next bundle analyzer shows heroicons is using a lot of space. When running next build
there's no difference between the two versions (with or without full import path).
π€·ββοΈ
Any thoughts on this @adamwathan?
Unfortunately just not a priority right now, happy to accept a PR otherwise will get to it when we get to it. Sorry π
I'm glad I found this issue! I have a blog based on https://github.com/timlrx/tailwind-nextjs-starter-blog - turns out the hero icons were not getting tree shaken correctly in MDX bundling, and I was at 500 KB data size - adding /esm to all imports of hero icons in *.mdx files reduced that to ~50KB, factor of 10 decrease.
This worked for me!
import { QuestionMarkCircleIcon } from "@heroicons/react/solid/esm"; // tree shaking DIDN'T work
import QuestionMarkCircleIcon from "@heroicons/react/solid/esm/QuestionMarkCircleIcon"; // tree shaking works
EDIT: Seems that while bundle-analyzer showed it visually as being a savings, the size wasn't actually any different :/
@adamwathan
is this related to package.json
file in esm
folders?
the contents of the package.json
file in esm
folder after running npm run build-react
are like this
{
"type": "module",
"sideEffects": false
}
but for tree-shaking to work, I guess, there should be an entry called "module": "<path-to-entry-file>"
if this is the problem, I would like to contribute π.
Hey @rhysemmerson. Sorry that you aren't seeing tree-shaking in your project. I'm going to close this issue because tree-shaking is working correctly with webpack in my tests, and without a reproduction it will be impossible to debug. You can see an example project with tree-shaking working fine here: https://github.com/bradlc/heroicons-webpack
If you're still having issues please open a new issue with a reproduction repository, where you already have everything all set up so we can clone it and immediately see the issue without configuring everything by hand.
I've been trying to get tree shaking to work with heroicons in our app using webpack.
When importing I would expect unused icons to be tree shaken, but in order to do so the esm version has to be explicitly imported.
This is not expected as other libraries manage to make this work. This is a real issue in that the runtime/bundler can't decide for itself which loader to use. In our app we have a browser bundle, a SSR bundle and we run our code via jest, all these environments need to dynamically choose which loader to use and they can't do that if we have to hard code one in the code.
After some research I believe the
package.json
needs amain
andmodule
key for the bundler to be able to select which build to use https://github.com/rollup/rollup/wiki/pkg.moduleI don't think it's that easy though as you can't specify multiple entrypoints and heroicons has 2,
solid/esm/index.js
andoutline/esm/index.js
In the meantime we have to import specific icons to avoid loading the entire library. This isn't ideal as it's hard to enforce and IDEs will often "help" by collapsing them.