Rilascio in produzione ​

Sviluppo vs. Produzione ​

Durante lo sviluppo, Vue mette a disposizione un numero di funzionalità per migliorare l'esperienza di sviluppo nella sua interezza:

• Avvisi per errori comuni ed incidenti di percorso
• Props / validazione degli eventi
• hooks per la reattività del debugging
• Integrazione degli strumenti di sviluppo

Alcune di queste funzionalità diventano inutili in produzione. Diversi avvisi di controllo possono andare incontro ad alcuni costi di performance. Quando ci si prepara per il rilascio in produzione, dovremmo abbandonare tutti i branch di solo sviluppo non utilizzati, affinchè si ottenga un carico minore delle suddette performance, per migliorarne la qualità.

Senza strumenti di build ​

Se ci si trova ad usare Vue senza strumenti di build, ossia caricandolo da una CDN o da uno script hostato privatamente, ci si raccomanda di usare la build di produzione (file dist con nomenclatura .prod.js) in fase di rilascio. Le versioni di produzione sono pre-compresse (minified) con tutti i branch di sviluppo rimossi.

• Se si decide di usare la build globale (accedendovi tramite la Vue global): usare vue.global.prod.js.
• Se si decide di usare la build ESM (accedendovi tramite gli import nativi ESM): utilizzare vue.esm-browser.prod.js.

Consultare la guida ai file dist per maggiori dettagli.

Con strumenti di build ​

Progetti montati tramite create-vue (basati su Vite) o Vue CLI (basato su webpack) sono pre-configurati per le build di produzione.

Se invece ci si trova a dover usare un'installazione personalizzata, si raccomanda di:

1. vue si trasforma in vue.runtime.esm-bundler.js.
2. I flag di funzionalità alla compilazione (bundler build feature flags) sono correttamente configurati.
3. process.env.NODE_ENV è sostituito con "production" durante la build.

Fonti addizionali:

• guila alla build di produzione con Vite
• guida al rilascio con Vite
• guida al rilascio con VueCLI

Seguire gli errori di runtime ​

Lo strumento handler di errori a livello di app può essere utilizzato per riportare suddetti errori ai servizi di tracciamento:

import { createApp } from 'vue'

const app = createApp(...)

app.config.errorHandler = (err, instance, info) => {
  // riporta l'errore ai servizi di tracciamento
}

Tra questi servizi di tracciamento (dell'errore) abbiamo Sentry e Bugsnag che fornisce anche un'integrazione ufficiale per Vue.