builld is too big

[m4rcTr3y]

when project is built in nuxt, the mdijs bundle is big its about 1.+MBs .. how do i reduce it

[therufa]

hi @m4rcTr3y,

to me it seems that you import all the icons, but sadly the bundler can't shake off unused ones. In order to reduce the build, you could include only the specific icons you use in your build. A bit less convenient, but to my knowledge, it's the only way to deal with this issue in this setup.

so instead of going with:

import * as mdijs from '@mdi/js'

// .....

createApp(App).use(mdiVue, {
  icons: mdijs
})

you could try this:

import {
   mdiPlayStation,
   mdiAccount,
   mdiAccessPoint
   // etc ...
} from '@mdi/js'

// .....

createApp(App).use(mdiVue, {
  icons: {
	mdiPlayStation,
	mdiAccount,
	mdiAccessPoint,
	// and so on
  }
})

I hope this solves your issues regarding build size, convenience-wise there's little I can do right now.

[loxK]

@therufa Hi. So what is the point of importing at createApp stage ? Isn't it better to import in each component where the icons are used to take advantage of features like code splitting ?

[therufa]

Hi @loxK, The main reason to moving everything to the init state was to reduce the build size of this package. Before we were close to 20Mb which I didn't feel comfortable with (even though this wouldn't translate to the end product) serving several thousand times a month. The explicit import serves the sake of code splitting, since the @mdi/js lib is basically just one large file with all the paths for all the icons of the mdi library.

I hope this clarifies some of your questions. As with everything I'm open for recommendations regarding improvement, every contribution is welcome ;)

[Zony-Zhao]

I still have a huge mdi bundle. Is there anything I'm missing?

[nadirabbas]

@Zony-Zhao When you build the project, it will be smaller.