Le applicazioni web moderne si basano pesantemente su JavaScript e sul suo ecosistema. Non sono più semplicemente responsabili di frammenti ad hoc in pagine statiche, ma JavaScript è ora la forza trainante delle applicazioni web dinamiche il cui funzionamento si avvicina molto a quello delle app native. Ma questa complessità ha un costo. Queste app possono utilizzare centinaia o addirittura migliaia di moduli JavaScript (anche ECMAScript o TypeScript).
ViteJS è fondamentalmente uno strumento di compilazione e un server di sviluppo locale. È progettato per semplificare lo sviluppo front-end delle moderne applicazioni web ricaricando dinamicamente i moduli del codice per evitare di ricompilare l’intera applicazione. In questo articolo, forniremo una guida a ViteJS, coprendo le sue caratteristiche principali e i benefici. Mostreremo anche come iniziare e ampliare le funzionalità e vedremo come Vite può ottimizzare le tue app.
Le caratteristiche chiave di ViteJS
La guida a ViteJS può essere molto utile per capire meglio come funziona e cosa può fare. E’ quindi bene sapere che strumenti come Webpack e Rollup hanno contribuito a semplificare lo sviluppo front-end e con il diffuso supporto dei moduli ES (ECMAScript) nativi nei browser, la situazione è migliorata considerevolmente. Infatti, Vite è in parte costruito su Rollup.
Tuttavia, i blocchi possono essere ancora un problema per gli sviluppatori con codice complesso. I server di sviluppo con configurazioni basate su bundler possono impiegare un tempo significativo, anche minuti, per ricaricare le modifiche apportate. Ma, invece di creare un bundle, Vite.js supporta i moduli ES nativi (ESM) e li serve direttamente al browser. Ciò significa che non è necessario ricaricare l’intera applicazione quando si apporta una modifica, quindi non vi è interruzione nel ciclo di sviluppo.
ViteJS raggiunge questa velocità attraverso la Hot Module Replacement (HMR). L’HMR consente ai moduli di sostituirsi indipendentemente dagli altri elementi della pagina. Mentre alcuni bundler supportano l’HMR, l’approccio di Vite è più veloce, utilizzando ESM nativi, quindi solo una parte limitata della catena di dipendenza viene invalidata. Ciò significa che i tempi di HMR non aumentano all’aumentare della complessità dell’applicazione.
Vite ha un supporto diretto per la suddivisione del codice e il caricamento ritardato per migliorare le prestazioni. Con framework come Vue o React, è necessario dichiarare manualmente i componenti di importazione ritardati per ogni percorso. Tuttavia, Vite suddivide automaticamente i chunk in base a una configurazione basata sui fornitori, determinando cosa deve essere caricato e quando.
La pre-compilazione delle dipendenze avviene in modo trasparente quando si esegue il comando vite per la prima volta nel proprio progetto. Ciò migliora sia la compatibilità che le prestazioni. I componenti CommonJS e UMD vengono convertiti in ESM nativi e la conversione delle dipendenze ESM in un singolo modulo migliora i successivi caricamenti delle pagine richiedendo solo una singola richiesta HTTP.
Come iniziare: la guida a ViteJS
Vite è progettato per la velocità e l’efficienza, quindi iniziare è facile. Segue il paradigma della convenzione anziché della configurazione (CoC), noto anche come software “opinionato”. Ciò significa che funziona bene fin da subito. Ma è anche molto flessibile ed estensibile, con un ampio supporto per linguaggi e framework. I modelli supportati per JavaScript sono:
- Vanilla
- Vue
- React
- Preact
- Lit
- Svelte
- Solid
- Qwik
Esistono anche varianti TypeScript di ciascuno di questi.
Per eseguire Vite, avrai bisogno di Node.js v14.18 o versione successiva. Puoi quindi utilizzare gli strumenti da riga di comando NPM, Yarn o PNPM per avviare un progetto: Vite installerà tutti i componenti necessari da lì. Ad esempio, con NPM, digita quanto segue nel tuo terminale:
$ npm create vite@latest
Quindi segui le indicazioni per dare un nome al tuo progetto, scegliere il framework e selezionare una variante di linguaggio. Una volta fatto ciò, puoi entrare nella directory del tuo progetto e digitare quanto segue per avviare il server:
$ npm install
$ npm run dev
Questo genererà uno scheletro di base dell’applicazione: puoi vedere i risultati nel tuo browser, all’indirizzo http://localhost:5173/ di default. Nota che, per impostazione predefinita, Vite utilizza un singolo file index.html come punto di ingresso e parte del grafo dei moduli. Da qui vengono caricati, quando necessario, i riferimenti al codice sorgente JavaScript e altre risorse. Le risorse vengono automaticamente riadattate da Vite, quindi non è necessario gestire segnaposti per le directory accessibili pubblicamente. Tutto ciò significa che puoi scrivere codice come faresti per un server HTTP statico, sapendo che Vite si occuperà delle route per te.
Naturalmente, questo scheletro è solo l’inizio: Vite.js è altamente estensibile e flessibile e include anche molti preset per framework consolidati e tipi di progetti. Puoi scegliere una serie di modelli sviluppati dalla comunità sul Github della comunità di Vite per avviare il tuo progetto.
Lettura consigliata: Sono passati 32 anni dalla nascita del primo sito web della storia
Guida a ViteJS: come espandere le sue funzionalità
Sebbene sia semplice iniziare con Vite.js, esiste anche un significativo ecosistema da esplorare per estendere le funzionalità.
Plugin Vite
I plugin consentono di estendere Vite.js in modi diversi (anche se troverai molte funzionalità comuni già supportate dalla funzionalità principale di Vite). L’infrastruttura dei plugin si basa su quella di Rollup, con alcune opzioni aggiuntive.
Ciò significa che sono supportati da un ecosistema maturo e stabile. I plugin ufficiali di Vite includono funzionalità aggiuntive per i componenti di file singolo di Vue, JSX e SWC, uno strumento di compilazione alternativo a Babel. Esiste anche una vasta gamma di plugin mantenuti dalla community che estendono in modo significativo la funzionalità di Vite, come il supporto per le PWAs.
Integrazioni con framework: la guida a ViteJS
Se desideri utilizzare un framework di back-end non JavaScript esistente come Rails, Flask, Django o Laravel, Vite.js supporta anche queste integrazioni. Puoi utilizzare il tuo framework web preferito per applicazioni standard di tipo MVC e utilizzare Vite per servire le risorse.
Troverai molte di queste integrazioni pronte all’uso sul portale della community, Awesome Vite. E se desideri sviluppare un’integrazione personalizzata, anche questo è possibile, con alcune direttive di configurazione.
Supporto della comunità e degli sviluppatori
Abbiamo già menzionato Awesome Vite come fonte di plugin, integrazioni e modelli. Lì troverai risorse per una vasta gamma di estensioni alla funzionalità principale di Vite. La community degli sviluppatori di Vite è vivace ed disponibile. Troverai molti supporti su Github Discussions e anche nel canale #help su Vite Land Discord.
Prestazioni e ottimizzazione
Oltre alla facilità d’uso, il principale vantaggio di Vite.js è la sua velocità. Ciò viene ottenuto utilizzando ESM nativo per HMR. Come abbiamo già spiegato, questo può ridurre di molti secondi e talvolta addirittura di minuti i tempi di ricarica che altrimenti avrebbero un impatto significativo sul processo di sviluppo.
I bundler tradizionali come Webpack, quando incaricati di compilare il tuo codice e le risorse, attraversano l’intero albero delle dipendenze per fornire il supporto più ampio possibile ai browser. Vite, al contrario, supporta solo i browser che supportano ESM, il che significa che può sfruttare strategie di caricamento dinamico.
Flussi di lavoro più veloci
Il supporto ESM di Vite significa flussi di lavoro di sviluppo più rapidi, evitando attese fastidiose durante i processi di compilazione. Vite.js fa molto di tutto ciò automaticamente e include molte ottimizzazioni delle prestazioni come standard. Oltre alla suddivisione del codice JavaScript principale, Vite esegue automaticamente anche la suddivisione del codice CSS, generando chunk asincroni che possono essere caricati solo quando necessario.
Vite automatizza anche l’ottimizzazione del caricamento asincrono dei chunk con una fase di precaricamento che determina le dipendenze prima del caricamento iniziale. Ciò impedisce il caricamento a due fasi dei chunk dipendenti e i round trip di rete aggiuntivi.
Caricamento delle pagine in produzione
Quando si tratta di distribuzione in produzione, Vite.js paga anche dividendi. Il comando vite build produce automaticamente un pacchetto di applicazione pronto per la produzione che richiede solo un hosting statico, riducendo così l’elaborazione lato server e semplificando la configurazione del server.
Conclusioni
ViteJS è ancora giovane, ma da quando è stato rilasciato per la prima volta nel 2020, la sua adozione è aumentata. È abbastanza chiaro il motivo. Vite è veloce e leggero e consente agli sviluppatori di concentrarsi sul proprio codice senza interruzioni o distrazioni dai complicati processi di compilazione.
Ma Vite non è solo facile da usare. Man mano che le applicazioni web continuano sulla loro strada verso una maggiore standardizzazione e coerenza con le applicazioni native, le richieste imposte alle librerie e ai framework JavaScript stanno crescendo enormemente. In questo senso, ViteJS sta diventando rapidamente uno strumento essenziale per gestire applicazioni complesse basate su JavaScript e ESM.
