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)

[Templarian]

@emileNetter You're importing only single icons right? import { mdiAccount } from '@mdi/js'; ?

Not really sure what could be happening. It should just work as that uses webpack.

[emileNetter]

Yes I'm only importing single icons like in your example.
I created a new create-react-app from scratch, then installed @mdi/js et @mdi/react and tried importing a few icons. It seems that everything is working fine. With 2 icons imported, @mdi/js size is only 452B. I'll try to investigate further more on my main project

[lpaulger]

@emileNetter I'm running into this problem as well now. Any chance you found the cause?

I've got 29 icons imported and seeing 2.04 MB for @mdi/js inside my bundle when I analyze with https://www.npmjs.com/package/source-map-explorer

[Immugio]

@emileNetter I'm running into this problem as well now. Any chance you found the cause?

I've got 29 icons imported and seeing 2.04 MB for @mdi/js inside my bundle when I analyze with https://www.npmjs.com/package/source-map-explorer

Can you share your setup?

[DinnieJ]

@Immugio can you tell me which version of mdi/js you are using

[caseyjhol]

@Templarian I'm running into this same issue. I've created a stripped down repo here: https://github.com/caseyjhol/minimal-webpack-mdi.

Clone the repo, run yarn install, followed by yarn start. I'm including sortBy from lodash-es to show that tree shaking works there. However, you'll see via webpack-bundle-analyzer that the entirety of @mdi/js is included in the bundle.

[caseyjhol]

I figured out my issue - tree shaking doesn't working properly with esbuilder-loader (privatenumber/esbuild-loader#178). Switching back to Terser seems to have solved my problem.

[kwisatz]

Seeing the same behavior with this tsconfig:

    "moduleResolution":                 "node",
    "target":                           "es2018",
    "module":                           "esnext",

I get tree-shaking for other modules, but not for mdi.js of which we always have the full 2.08Mb (unminified).

[Bruce17]

I'm having the same issue for a Vue.js v2 project using typescript.

Dependencies:

• [email protected]
• @mdi/[email protected]
• [email protected]

The issue occurs when building as web component using the command vue-cli-service build --target wc --name some-name. Using vue-cli-service build it seems to build just find.

Altering the target version from esnext to es2020 or es6 didn't help at all in my case.

[oceangravity]

Hi guys, same here 😔

[CodeDG]

Hello, same issue.

package.json:
"webpack": "^4.43.0", "typescript": "^3.9.9", "terser-webpack-plugin": "^4.2.3", "@mdi/js": "^5.9.55"
tsconfig.json:
"module": "es6", "moduleResolution": "node",

[dmt0]

@Templarian you probably want to reopen this, it's kind of a big deal.
I have react + webpack. Treeshaking works everywhere, except for this.

Importing like this:

import Icon from '@mdi/react';
import {
  ...
  mdiEarth,
} from '@mdi/js';

Update: Yep, the problem was on my side. Treeshaking was not working. devtool in webpack was set to something meaningless. For some reason that broke usedExports optimization. Really random.

[mririgoyen]

If you feel that this is still an issue, please provide us with a barebones git repository proving the issue.

Through extensive testing, I have personally never been able to reproduce this issue under normal, default circumstances. Depending on your bundler/settings, while in development mode tree-shaking may not occur. There are also other settings, plugins, etc. that might disable or hinder tree-shaking. Be sure you're checking your production bundles.

Sidenote, I'm literally working on the new Pictogrammers/MDI website as we speak and I just double-checked the production output and only the icons being included are bundled, further confirming a likely configuration issue on your end.

[gabrieljbaker]

@mririgoyen , is treeshaking possible in any target besides es6? I’m not able to get tree shaking working for my webpack 5 project and es6 is not an option for me.

[susnux]

We had the same issue, the reason is the invalid / missing exports. Causing webpack to import the commonjs version that gets not tree-shaken.
The solution: Templarian/MaterialDesign-JS#29

[kirkcola]

In our case, the reason for tree-shaking not working of the @mdi/js is that we used TerserPlugin.esbuildMinify as the minification tool.
However, esbuild's minification mechanism seems to primarily focus on module & function tree-shaking, and its support for dead code elimination of single module constants is quite limited.
Switching to TerserPlugin.swcMinify resolved this issue.

Sry for replying to a closed issue, just wanted to remind others who might encounter a similar problem.