Using icons from @mdi/js imports entire package

[Immugio]

I'm using a few icons from the @mdi/js. The package is added as devDependency and the import is done in this way:

import { mdiFlipHorizontal, .. } from "@mdi/js";

After building the project with webpack this result in approx. 1.6MB extra size added to the output bundle. Is there any way to just import a single icon?

[Templarian]

Does it do this even for a production build?

Might be how your project is configured.

[Immugio]

Does it do this even for a production build?

Might be how your project is configured.

I found a solution, the problem was in the configuration in my tscofig I had "module":"commonjs". The module type needs to be es6 for the tree shaking to work. Thanks

[Templarian]

I'll add this to the documentation after work. Needs a troubleshooting section.

[Templarian]

Added to the docs for webpack. https://dev.materialdesignicons.com/getting-started/webpack

[Templarian]

@JapanYoshi This is for the @mdi/js package. I think you might be replying to the wrong issue?

[guyyst]

I'm using "module": "es2020", and I'm still observing the same issue. Just importing and using one icon bumps up the build size by 2.6mb. Going down to es6 is not an option for my at this point.

[Templarian]

@guyyst Can you give more details about your setup? Webpack / Rollup / TS etc?

[Immugio]

I'm using "module": "es2020", and I'm still observing the same issue. Just importing and using one icon bumps up the build size by 2.6mb. Going down to es6 is not an option for my at this point.

@guyyst try this and see if it helps "module": "es6", "moduleResolution": "node",

[guyyst]

I spun up a new angular app on es2020 with nothing but @mdi/js installed and the tree shaking is working properly. I must have misconfigured something in my other project since the package is working just fine 👍

[emileNetter]

Hi I'm using create-react-app and @mdi/js. I'm only using a few icons from @mdi/js but the bundle size is 1.76MB larger (33% of total bundle size) even for production build. So I assume tree shaking is not working. I do not have access to webpack config (because I'm using create-react-app). Have you ever encountered this issue ?

[Templarian]

@emileNetter Seeing the same thing with npm run build ?

[Templarian]

Sorry, too early, can't read you already said that.

[emileNetter]

I use https://www.npmjs.com/package/source-map-explorer to analyze bundle size (after npm run build)