0
248
ViewsVitejs is loading the whole bundle size instead of the selected ones
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.
1 answers
Answer question0
From Vite docs:
Performance: Vite converts ESM dependencies with many internal modules into a single module to improve subsequent page load performance.
Some packages ship their ES modules builds as many separate files importing one another. For example,
lodash-eshas over 600 internal modules! When we doimport { debounce } from 'lodash-es', the browser fires off 600+ HTTP requests at the same time! Even though the server has no problem handling them, the large amount of requests create a network congestion on the browser side, causing the page to load noticeably slower.By pre-bundling
lodash-esinto a single module, we now only need one HTTP request instead!
oh-vue-icons/icons contains many files that Vite is pre-bundling at startup.
Since you don't really need the icons to be prebundled, you can opt out of the prebundling with optimizeDeps.exclude:
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
⋮
optimizeDeps: {
exclude: ['oh-vue-icons/icons']
}
})