Tree-shaking e importación automática
Exportaciones con nombre para tree-shaking, integración de unplugin-vue-components y configuración del resolver
Tree-shaking e importación automática es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.
Qué es el tree-shaking
El tree-shaking es la eliminación de código muerto: un bundler descarta las exportaciones que el consumidor nunca importa. Una biblioteca bien compilada permite que las aplicaciones incluyan únicamente los componentes que utilizan, manteniendo los bundles pequeños.
Las exportaciones con nombre lo permiten
Utilice exportaciones con nombre en el punto de entrada para que cada importación pueda analizarse estáticamente. Una única exportación predeterminada que contenga todo (un objeto barrel) no puede someterse al tree-shaking.
// GOOD: named exports
export { MyButton } from "./MyButton.vue";
export { MyCard } from "./MyCard.vue";Evitar un objeto barrel predeterminado
Exportar un único objeto con todos los componentes obliga a los bundlers a conservarlos todos, aunque la aplicación solo utilice uno.
// BAD: defeats tree-shaking
export default { MyButton, MyCard, MyTable };El consumidor importa lo que necesita
Con las exportaciones con nombre, el consumidor desestructura únicamente los componentes utilizados y el resto se elimina de su compilación.
import { MyButton } from "my-ui-lib";
// MyCard, MyTable are never bundledEl campo sideEffects
Los bundlers suponen que los módulos pueden tener efectos secundarios y los conservan. Establecer "sideEffects": false en package.json les indica que sus módulos son puros y se pueden eliminar de forma segura.
{
"sideEffects": false
}Declarar efectos secundarios de CSS
Si su paquete tiene importaciones de CSS que no deben eliminarse, indíquelas para conservar únicamente esas importaciones.
{
"sideEffects": ["**/*.css"]
}Autoimportación para consumidores
Para evitar que los consumidores tengan que realizar importaciones manuales, las bibliotecas incluyen un resolver para unplugin-vue-components, que importa automáticamente los componentes utilizados en las plantillas.
npm install -D unplugin-vue-componentsProporcionar un resolver
Un resolver es una función que, dado el nombre de un componente utilizado, devuelve desde dónde importarlo. Incluya uno en su paquete.
// my-ui-lib/resolver.js
export function MyUiResolver() {
return {
type: "component",
resolve: (name) => {
if (name.startsWith("My")) {
return { name, from: "my-ui-lib" };
}
}
};
}Configuración del consumidor
El consumidor registra el plugin con su resolver. Así, los componentes utilizados en las plantillas se importan automáticamente y siguen sometiéndose al tree-shaking.
// consumer vite.config.ts
import Components from "unplugin-vue-components/vite";
import { MyUiResolver } from "my-ui-lib/resolver";
export default defineConfig({
plugins: [
vue(),
Components({ resolvers: [MyUiResolver()] })
]
});Autoimportación y tree-shaking
Como el resolver convierte el uso de las plantillas en importaciones con nombre reales, solo se incluyen en el bundle los componentes utilizados: se conservan tanto la comodidad como los bundles pequeños.
Evitar el registro global
Una biblioteca que registra automáticamente todos los componentes mediante app.use impide el tree-shaking. Prefiera las exportaciones con nombre y un resolver opcional para que los consumidores elijan qué componente incluir.
Comprobación rápida
¿Qué configuración de package.json indica a los bundlers que sus módulos se pueden someter al tree-shaking?
Resumen
Active el tree-shaking mediante exportaciones con nombre (nunca un objeto barrel predeterminado) y establezca "sideEffects": false (o indique los archivos CSS). Para facilitar el uso, incluya un resolver de unplugin-vue-components para que los consumidores importen automáticamente los componentes utilizados sin dejar de incluir únicamente lo que usan, y evite forzar el registro global.
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 42
- Lecciones
- 156
Preguntas frecuentes
¿La lección «Tree-shaking e importación automática» es gratis?
Sí — el texto completo de «Tree-shaking e importación automática» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Tree-shaking e importación automática»?
Exportaciones con nombre para tree-shaking, integración de unplugin-vue-components y configuración del resolver Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Tree-shaking e importación automática»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Configuración del modo biblioteca de Vite
- Declaraciones de TypeScript para bibliotecas de componentes
- Tree-shaking e importación automática
- Publicación en npm y versionado semántico