introduzione

Se stai lavorando su un'applicazione web complessa che utilizza React e Webpack, probabilmente hai pensato di abbandonare completamente Webpack più di una volta a causa di bug e lentezza. Questo tutorial spiegherà il modo più semplice per risolvere questo problema.

Qual è il problema con Webpack?

Webpack è lento!

Ecco alcuni problemi segnalati dal nostro team di sviluppo:

• Ora di inizio del server Slow Dev, circa 1:30 min (ed era in costante aumento).
• Tempo di aggiornamento HMR lento, circa 5-10 secondi (a volte anche bloccato).
• L'esperienza di sviluppo generale è fastidiosa e non produttiva.

Una breve ricerca ti rivelerà che ci sono alternative molto migliori là fuori, e la più popolare è Vite ( vitejs.dev )

Vite è uno strumento fantastico. Non ha nessuno dei problemi che ha Webpack, ma è difficile sostituire completamente Webpack a causa delle personalizzazioni di produzione esistenti e del timore del team di sviluppo che potrebbe non funzionare bene.

Quindi la mia soluzione a questo problema era aggiungere Vite per lavorare insieme a Webpack come alternativa invece di sostituirlo interamente.

I problemi che ho incontrato e le soluzioni

Non ho trovato buoni tutorial su come integrare Vite in un progetto esistente, quindi fortunatamente per te, ho trascorso un'enorme quantità di ore di ricerca per trovare una buona soluzione a tutti i problemi, quindi non sarà necessario.

Il primo passo che devi fare è aggiungere i pacchetti vite e @vitejs/plugin-react al tuo progetto esistente e creare un file vite.config.js(alla radice del progetto).

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  type: "module",
  plugins: [],
  optimizeDeps: {
    include: ["react"],
  },
  build: {
    commonjsOptions: {
      include: [/node_modules/],
    },
  },
});

Ecco i motivi principali per questo:

1. Vite non è riuscito a funzionare con le variabili env esistenti.
2. Vite non è riuscito a elaborare alcuni vecchi pacchetti npm che non avevano nuove versioni.
3. Vite non è riuscita a elaborare le importazioni utilizzando "richiedi".
4. La nostra configurazione Webpack aveva una definizione personalizzata di "alias" di importazione, quindi Vite non sapeva come elaborarli.
5. La nostra configurazione Webpack ha definito le impostazioni proxy personalizzate.

La nostra applicazione web ha utilizzato le variabili env in un modo CRA (Create React App).

Esempio:process.env.REACT_APP_VARIABLE_NAME

Ma Vite definisce un modo diverso di gestire le variabili env

Come questo:import.meta.env.VARIABLE_NAME

Quindi stavo cercando un modo per dire a Vite di definire la variabile env in modo diverso. Ho trovato un buon plugin che fa esattamente quell'ambiente vite-plugin

Aggiungendo questo plugin al file di configurazione risolvi questo problema

plugins: [
    ...
    EnvironmentPlugin("all"),
]

Questo è uno dei maggiori problemi di Vite. Non riesce a elaborare i vecchi pacchetti non mantenuti. Ne avevamo alcuni nell'app e sostituirli non era un'opzione.

Quindi la soluzione è sostituire il contenuto del pacchetto con un contenuto diverso durante la compilazione.

Per fare questo, ho usato un plugin vite-plugin-resolve che permette di specificare il nome del pacchetto e simularlo con qualsiasi altro contenuto. Nel mio caso, i pacchetti che dovevo correggere non erano utilizzati nella maggior parte dei flussi dell'interfaccia utente, quindi li ho semplicemente sostituiti con contenuto vuoto.

Ad esempio: abbiamo utilizzato un pacchetto denominato react-codemirror2che esporta un componente denominato UnControlled. Ho appena sostituito il contenuto con un oggetto vuoto e questo risolve i problemi con questo pacchetto.

plugins: [
    ...
    resolve({ "react-codemirror2": `
        const UnControlled = {};
        export {
          UnControlled,
        }`
    }
]

Anche in questo caso la soluzione è usare un plugin vite-plugin-require che risolverà il problema.

Suggerimento: è meglio fornire nomi dettagliati dei componenti che utilizzano requirele importazioni.

Ad esempio: configurare il plug-in per elaborare CostViewerDialog.tsxsolo file.

plugins: [
    ...
    vitePluginRequire({fileRegex: /(CostViewerDialog.tsx)$/}),
]

Vite ha il supporto nativo per gli alias di importazione

Ad esempio: per definire un alias per un percorso ./src/ComponentscomeComponents

resolve: {
    alias: {     
        Components: path.resolve(__dirname, "./src/Components"),
    }, 
},

Vite ha il supporto nativo per la definizione delle impostazioni proxy

Ad esempio: reindirizza tutte le chiamate del server locale alla porta8090

server: {
  port: 3000,
  proxy: {
    "^/api/v1/.*": "http://localhost:8090",
  },
},

Per consentire il debug, aggiungi la seguente impostazione al vite.config.jsfile

esbuild: {
  sourcemap: true,
},

Risultati

I risultati sono stati sorprendenti!

Sommario

Trasferirsi a Vite è difficile, ma i potenziali benefici sono notevoli. Pochi mesi dopo l'aggiunta di Vite, il nostro team di sviluppo ha registrato un aumento significativo della produttività, che ha consentito loro di creare prodotti migliori più velocemente. Se stai cercando di fare il passaggio ma non sai da dove iniziare, sono qui per aiutarti. Contattami e ti guiderò attraverso il processo, assicurandoti una transizione agevole.