0
244
ViewsVitejs está cargando todo el tamaño del paquete en lugar de los seleccionados
Estoy usando vue 3 con vite. Noté algo extraño. Oh vue icons está cargando algo así como 108 MB de tamaño de paquete y lleva mucho tiempo cargarlo incluso en vitejs. Aquí está mi configuración
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')Luego en mi componente:
<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" />Puedes ver el problema a continuación. Estoy controlando condicionalmente estos seis íconos. Es por eso que solo hay uno o dos íconos por tarjeta.
¿Por qué carga 108 MB de javascript? Eso no tiene ningún sentido. También estoy usando vite con vue3. ¿Necesito añadir alguna configuración extra?
Gracias de antemano.
1 answers
Answer question0
Rendimiento: Vite convierte las dependencias de ESM con muchos módulos internos en un solo módulo para mejorar el rendimiento de carga de la página posterior.
Algunos paquetes envían sus compilaciones de módulos ES como muchos archivos separados que se importan entre sí. ¡Por ejemplo,
lodash-estiene más de 600 módulos internos ! Cuandoimport { debounce } from 'lodash-es', ¡el navegador dispara más de 600 solicitudes HTTP al mismo tiempo! Aunque el servidor no tiene problemas para manejarlos, la gran cantidad de solicitudes crea una congestión en la red en el lado del navegador, lo que hace que la página se cargue notablemente más lentamente.Al agrupar
lodash-esen un solo módulo, ¡ahora solo necesitamos una solicitud HTTP!
oh-vue-icons/icons contiene muchos archivos que Vite está preempaquetado al inicio.
Dado que realmente no necesita que los íconos estén preempaquetados, puede optar por no preempaquetarse optimizeDeps.exclude :
// vite.config.js import { defineConfig } from 'vite' export default defineConfig({ ⋮ optimizeDeps: { exclude: ['oh-vue-icons/icons'] } })