0Pricing
Vue Academy · Lezione

Tree-shaking e import automatici

Export nominati per il tree-shaking, integrazione di unplugin-vue-components, configurazione del resolver.

Tree-shaking e import automatici è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Che cos'è il tree-shaking

Il tree-shaking è l'eliminazione del codice morto: un bundler rimuove gli export che il consumer non importa. Una libreria ben realizzata consente alle app di includere solo i componenti che utilizzano, mantenendo ridotte le dimensioni dei bundle.

Gli export nominati lo abilitano

Utilizzi export nominati dal punto di ingresso, così ogni import può essere analizzato staticamente. Un singolo export default che contiene tutto (un oggetto barrel) non può essere sottoposto al tree-shaking.

// GOOD: named exports
export { MyButton } from "./MyButton.vue";
export { MyCard } from "./MyCard.vue";

Eviti un oggetto barrel predefinito

L'esportazione di un unico oggetto con tutti i componenti obbliga i bundler a mantenerli tutti, anche se l'app ne utilizza soltanto uno.

// BAD: defeats tree-shaking
export default { MyButton, MyCard, MyTable };

Il consumer importa ciò che serve

Con gli export nominati, il consumer destruttura solo i componenti utilizzati e il resto viene rimosso dalla build.

import { MyButton } from "my-ui-lib";
// MyCard, MyTable are never bundled

Il campo sideEffects

I bundler presumono che i moduli possano avere effetti collaterali e li mantengono. Impostare "sideEffects": false in package.json comunica loro che i moduli sono puri e possono essere rimossi senza rischi.

{
  "sideEffects": false
}

Dichiarare gli effetti collaterali del CSS

Se il pacchetto contiene import CSS che non devono essere rimossi, li elenchi in modo che vengano preservati solo quelli.

{
  "sideEffects": ["**/*.css"]
}

Auto-import per i consumer

Per evitare ai consumer gli import manuali, le librerie forniscono un resolver per unplugin-vue-components, che importa automaticamente i componenti utilizzati nei template.

npm install -D unplugin-vue-components

Fornire un resolver

Un resolver è una funzione che, dato il nome di un componente utilizzato, restituisce da dove importarlo. Ne includa uno nel pacchetto.

// my-ui-lib/resolver.js
export function MyUiResolver() {
  return {
    type: "component",
    resolve: (name) => {
      if (name.startsWith("My")) {
        return { name, from: "my-ui-lib" };
      }
    }
  };
}

Configurazione del consumer

Il consumer registra il plugin con il suo resolver. A questo punto i componenti utilizzati nei template vengono importati automaticamente e continuano a essere sottoposti 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()] })
  ]
});

Auto-import e tree-shaking

Poiché il resolver trasforma l'utilizzo nei template in veri import nominati, nel bundle vengono inclusi solo i componenti utilizzati: otterrà sia praticità sia bundle ridotti.

Evitare la registrazione globale

Una libreria che registra automaticamente tutti i componenti tramite app.use impedisce il tree-shaking. Preferisca export nominati e un resolver opzionale, così i consumer potranno scegliere i componenti singolarmente.

Verifica rapida

Quale impostazione di package.json comunica ai bundler che i moduli possono essere sottoposti al tree-shaking?

Riepilogo

Abiliti il tree-shaking utilizzando export nominati (mai un oggetto barrel predefinito) e impostando "sideEffects": false oppure elencando i file CSS. Per maggiore praticità, includa un resolver unplugin-vue-components, così i consumer potranno importare automaticamente i componenti utilizzati mantenendo nel bundle solo ciò che serve, ed eviti di imporre la registrazione globale.

Domande Frequenti

La lezione «Tree-shaking e import automatici» è gratuita?

Sì — il testo completo di «Tree-shaking e import automatici» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «Tree-shaking e import automatici»?

Export nominati per il tree-shaking, integrazione di unplugin-vue-components, configurazione del resolver. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Tree-shaking e import automatici»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Configurazione della modalità libreria di Vite
  2. Dichiarazioni TypeScript per librerie di componenti
  3. Tree-shaking e import automatici
  4. Pubblicazione su npm e versionamento semantico
← Torna a Vue Academy