Oh vue icons is loading the whole bundle size instead of the selected ones

[theprantadutta]

First of all, thank you for creating this awesome library and making us cry less. Hi, I am using vue 3 with vite. I noticed something strage. Oh vue icons is loading something like 108 MB of bundle size and it takes a lot of time to load even in vitejs. Here's my setup

import { addIcons, OhVueIcon } from 'oh-vue-icons'
import {
  FaFacebookSquare,
  FaInstagram,
  FaLinkedin,
  FaQuora,
  FaTwitter,
  FaYoutube,
} from 'oh-vue-icons/icons'

// register the icons
addIcons(
  FaFacebookSquare,
  FaInstagram,
  FaLinkedin,
  FaQuora,
  FaTwitter,
  FaYoutube
)

const app = createApp(App)
app.component('VIcon', OhVueIcon)
app.mount('#app')

Then in my component:

<VIcon name="fa-facebook-square" />
<VIcon name="fa-youtube" />
<VIcon name="fa-instagram" />
<VIcon name="fa-quora" />
<VIcon name="fa-linkedin" />
<VIcon name="fa-twitter" />

You can see the problem below. I am conditionally controlling these six icons. That's why there are only one or two icons per card.

Why is it loading 108 MB of javascript? That doesn't make any sense. Also I am using vite with vue3. Do I need to add any extra configuration?

Thanks in Advance.

[theprantadutta]

I am closing this issue since it has nothing to do with oh vue icons. But if anyone ran into the same issue, just configure your vite.config.js file like the following. For more info, see this stack overflow answer

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  plugins: [vue(), eslintPlugin()],
  optimizeDeps: {
    exclude: ['oh-vue-icons/icons'],
  },
})

Also, I think this should be added to the documentation.

[Renovamen]

Thank you for point it out! I'll add it to the documentation later.

[Dino-Kupinic]

using vite v5.0.10 Vite Dev Server with

  optimizeDeps: {
    exclude: ['oh-vue-icons/icons'],
  },

downloads all the icons every time? Without the options page load goes from 6-10s to 0.5-1.5s

[idlethumbs]

@Renovamen until this week my build has been fine using the above optimizeDeps config, but today everything slowed to a grinding halt

After trying many things in the end removing the build transpile and optimizeDeps config from nuxt-config sped up the build back to good time, and reduced the bundles from nearly 1Gb to ~100mb again in local dev

I think this is the same experience @Dino-Kupinic is having now

I'm using "nuxt": "^3.9.0", and vue latest, latest nuxt appears to use vite ^5

[AlphaActual]

I can confirm that using

  optimizeDeps: {
    exclude: ['oh-vue-icons/icons'],
  },

is no longer working as expected. ("nuxt": "^3.11.2") With this code i get multiple script chunks downloaded and my page load goes up to 300MB total! With this code removed i get a single oh-vue-icons_icons.js file downloaded that is "only" 44.4 MB.