Ottimizzazione del processo di build

Durante lo sviluppo esegue un server di sviluppo con hot reload. Per distribuire l'app, crei una build di produzione ottimizzata: un insieme di file statici ottimizzati per la velocità e le dimensioni ridotte, pronti per il deployment su qualsiasi host.

Il comando standard crea la build dell'app per la produzione. Vite (lo strumento predefinito per Vue 3) compila, raggruppa e ottimizza ogni elemento.

La build scrive i file ottimizzati in una cartella dist: un file index.html, bundle JavaScript e CSS con hash e le risorse statiche. È questa la cartella da distribuire.

La minificazione rimuove spazi bianchi e commenti e accorcia i nomi delle variabili, così i file vengono scaricati più velocemente. Le build di produzione minificano automaticamente JavaScript e CSS.

Il tree-shaking rimuove il codice che non utilizza. Se importa una funzione da una libreria, il bundler elimina tutto il resto. Utilizzi importazioni nominate dei moduli ES per consentire il funzionamento del tree-shaking.

I nomi dei file di output della build includono un hash del contenuto, come index-a1b2c3.js. Quando il codice cambia, cambia anche l'hash: in questo modo i browser scaricano il nuovo file e memorizzano aggressivamente nella cache quelli invariati.

Per vedere cosa occupa spazio nel bundle, utilizzi un plugin visualizzatore. Questo produce un grafico interattivo dei moduli che occupano più spazio e La guida nell'ottimizzazione.

Una dipendenza di grandi dimensioni che utilizza appena è un campanello d'allarme. L'analisi potrebbe rivelare una libreria pesante per le date o per i grafici, che può sostituire con un'alternativa più piccola oppure caricare in modo differito.

Vite espone le variabili d'ambiente con prefisso VITE_ tramite import.meta.env. Le utilizzi per configurare gli URL delle API e i feature flag in base all'ambiente.

Vite carica .env.production durante npm run build e .env.development durante npm run dev, così ogni ambiente riceve automaticamente la configurazione corretta.

Prima del deployment, esegua un'anteprima locale della build di produzione per verificare che funzioni come previsto con file ottimizzati reali.

Metta alla prova le Sue conoscenze del processo di build.

Esegua npm run build per produrre una cartella dist ottimizzata, con risorse minificate, sottoposte a tree-shaking e con hash del contenuto. Analizzi le dimensioni del bundle per ridurre le dipendenze pesanti e utilizzi le variabili d'ambiente VITE_ con i file .env per la configurazione specifica di ogni ambiente. Visualizzi l'anteprima prima della distribuzione. Ora distribuirà questa build su una piattaforma di hosting.