{"id":22522,"date":"2023-08-09T10:00:00","date_gmt":"2023-08-09T08:00:00","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=22522"},"modified":"2023-08-08T13:07:25","modified_gmt":"2023-08-08T11:07:25","slug":"vite-js-guida","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/sviluppo-web\/vite-js-guida\/","title":{"rendered":"Guida a ViteJS: cosa si nasconde dietro la sua popolarit\u00e0"},"content":{"rendered":"\n

Le applicazioni web moderne si basano pesantemente su JavaScript<\/strong> e sul suo ecosistema<\/strong>. Non sono pi\u00f9 semplicemente responsabili di frammenti ad hoc in pagine statiche<\/strong>, ma JavaScript \u00e8 ora la forza trainante delle applicazioni web dinamiche<\/strong> il cui funzionamento si avvicina molto a quello delle app native. Ma questa complessit\u00e0 ha un costo. Queste app possono utilizzare centinaia o addirittura migliaia di moduli<\/strong> JavaScript (anche ECMAScript o TypeScript).<\/p>\n\n\n\n

ViteJS \u00e8 fondamentalmente uno strumento di compilazione e un server di sviluppo locale<\/strong>. \u00c8 progettato per semplificare lo sviluppo front-end <\/strong>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. <\/strong>Mostreremo anche come iniziare e ampliare le funzionalit\u00e0 e vedremo come Vite pu\u00f2 ottimizzare le tue app.<\/p>\n\n\n\n

Le caratteristiche chiave di ViteJS<\/h2>\n\n\n\n

La guida a ViteJS pu\u00f2 essere molto utile per capire meglio come funziona e cosa pu\u00f2 fare<\/strong>. E’ quindi bene sapere che strumenti come Webpack e Rollup hanno contribuito a semplificare lo sviluppo front-end<\/strong> e con il diffuso supporto dei moduli ES (ECMAScript) nativi nei browser, la situazione \u00e8 migliorata <\/strong>considerevolmente. Infatti, Vite \u00e8 in parte costruito su Rollup<\/strong>. <\/p>\n\n\n\n

Tuttavia, i blocchi possono essere ancora un problema per gli sviluppatori <\/strong>con codice complesso. I server di sviluppo con configurazioni basate su bundler <\/strong>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<\/strong> (ESM) e li serve direttamente al browser<\/strong>. Ci\u00f2 significa che non \u00e8 necessario ricaricare l’intera applicazione quando si apporta una modifica, quindi non vi \u00e8 interruzione nel ciclo di sviluppo.<\/p>\n\n\n\n

ViteJS raggiunge questa velocit\u00e0 attraverso la Hot Module Replacement <\/strong>(HMR). L’HMR consente ai moduli di sostituirsi indipendentemente dagli altri elementi della pagina. Mentre alcuni bundler supportano l’HMR, l’approccio di Vite \u00e8 pi\u00f9 veloce<\/strong>, utilizzando ESM nativi, quindi solo una parte limitata della catena di dipendenza viene invalidata. Ci\u00f2 significa che i tempi di HMR non aumentano all’aumentare della complessit\u00e0 dell’applicazione.<\/p>\n\n\n\n

Vite ha un supporto diretto per la suddivisione del codice<\/strong> e il caricamento ritardato per migliorare le prestazioni. Con framework come Vue o React<\/strong>, \u00e8 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.<\/p>\n\n\n\n

La pre-compilazione delle dipendenze avviene in modo trasparente <\/strong>quando si esegue il comando vite per la prima volta nel proprio progetto. Ci\u00f2 migliora sia la compatibilit\u00e0 che le prestazioni.<\/strong> I componenti CommonJS e UMD vengono convertiti in ESM nativi <\/strong>e la conversione delle dipendenze ESM in un singolo modulo migliora i successivi caricamenti delle pagine richiedendo solo una singola richiesta HTTP.<\/p>\n\n\n\n

\"guida<\/figure>\n\n\n\n

Come iniziare: la guida a ViteJS<\/h2>\n\n\n\n

Vite \u00e8 progettato per la velocit\u00e0 e l’efficienza, quindi iniziare \u00e8 facile<\/strong>. Segue il paradigma della convenzione anzich\u00e9 della configurazione (CoC), noto anche come software “opinionato”<\/strong>. Ci\u00f2 significa che funziona bene fin da subito. Ma \u00e8 anche molto flessibile ed estensibile<\/strong>, con un ampio supporto per linguaggi e framework. I modelli supportati per JavaScript sono:<\/p>\n\n\n\n