Einführung

Wenn Sie an einer komplexen Webanwendung arbeiten, die React und Webpack verwendet, haben Sie wahrscheinlich mehr als einmal darüber nachgedacht, Webpack aufgrund von Fehlern und Langsamkeit vollständig aufzugeben. Dieses Tutorial erklärt den einfachsten Weg, um dieses Problem zu lösen.

Was ist das Problem mit Webpack?

Webpack ist langsam!

Hier sind einige Probleme, die unser Entwicklerteam gemeldet hat:

• Langsame Startzeit des Dev-Servers, etwa 1:30 min (und stieg ständig).
• Langsame HMR-Aktualisierungszeit, etwa 5–10 Sekunden (manchmal auch hängengeblieben).
• Allgemeine Entwicklungserfahrung ist lästig und nicht produktiv.

Eine kurze Recherche wird Ihnen zeigen, dass es viel bessere Alternativen gibt, und die beliebteste ist Vite ( vitejs.dev ) .

Vite ist ein fantastisches Werkzeug. Es hat keine der Probleme, die Webpack hat, aber es ist schwierig, Webpack aufgrund bestehender Produktionsanpassungen und der Angst des Entwicklungsteams, dass es nicht gut funktionieren könnte, vollständig zu ersetzen.

Meine Lösung für dieses Problem bestand also darin, Vite als Alternative zu Webpack hinzuzufügen, anstatt es vollständig zu ersetzen.

Die Probleme, auf die ich gestoßen bin, und die Lösungen

Ich habe keine guten Tutorials darüber gefunden, wie man Vite in ein bestehendes Projekt integriert, also habe ich zum Glück für Sie eine enorme Menge an Recherchestunden aufgewendet, um eine gute Lösung für alle Probleme zu finden, so dass Sie es nicht brauchen.

Der erste Schritt, den Sie tun müssen, besteht darin, vite- und @vitejs/plugin-react- Pakete zu Ihrem vorhandenen Projekt hinzuzufügen und eine vite.config.js(im Stammverzeichnis des Projekts) zu erstellen.

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

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

Hier sind die Hauptgründe dafür:

1. Vite funktionierte nicht mit vorhandenen Umgebungsvariablen.
2. Vite konnte einige alte npm-Pakete ohne neue Versionen nicht verarbeiten.
3. Vite konnte Importe mit „require“ nicht verarbeiten.
4. Unsere Webpack-Konfiguration hatte eine benutzerdefinierte Definition des Import-Alias, sodass Vite nicht wusste, wie es sie verarbeiten sollte.
5. Unsere Webpack-Konfiguration hat benutzerdefinierte Proxy-Einstellungen definiert.

Unsere Webanwendung verwendete die env-Variablen auf CRA-Weise (Create React App).

Beispiel:process.env.REACT_APP_VARIABLE_NAME

Aber Vite definiert einen anderen Weg, um env-Variablen zu handhaben

So was:import.meta.env.VARIABLE_NAME

Also suchte ich nach einer Möglichkeit, Vite anzuweisen, die env-Variable anders zu definieren. Ich habe ein gutes Plugin gefunden, das genau diese Vite-Plugin-Umgebung macht

Indem Sie dieses Plugin zur Konfigurationsdatei hinzufügen, lösen Sie dieses Problem

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

Dies ist eines der größten Probleme von Vite. Er kann alte, nicht gepflegte Pakete nicht verarbeiten. Wir hatten einige in der App, und ein Austausch war keine Option.

Die Lösung besteht also darin, den Inhalt des Pakets während des Builds durch andere Inhalte zu ersetzen.

Dazu habe ich ein Plugin vite-plugin-resolve verwendet , mit dem Sie den Paketnamen angeben und mit anderen Inhalten verspotten können. In meinem Fall wurden die Pakete, die ich reparieren musste, in den meisten Flows der Benutzeroberfläche nicht verwendet, also habe ich sie einfach durch leeren Inhalt ersetzt.

Zum Beispiel: Wir haben ein Paket namens verwendet react-codemirror2, das eine Komponente namens exportiert UnControlled. Ich habe gerade den Inhalt durch ein leeres Objekt ersetzt und dies behebt die Probleme mit diesem Paket.

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

Auch in diesem Fall besteht die Lösung darin, ein Plugin vite-plugin-require zu verwenden , das das Problem löst.

Tipp: Es ist besser, detaillierte Namen der Komponenten anzugeben, die requireImporte verwenden.

Beispiel: Konfigurieren Sie das Plugin so, dass es CostViewerDialog.tsxnur Dateien verarbeitet.

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

Vite bietet native Unterstützung für Import-Alias

Zum Beispiel: um einen Alias ​​für einen Pfad zu definieren ./src/ComponentsalsComponents

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

Vite bietet native Unterstützung zum Definieren von Proxy-Einstellungen

Zum Beispiel: Leiten Sie alle lokalen Server-Anrufe an den Port um8090

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

Um das Debuggen zuzulassen, fügen Sie der vite.config.jsDatei die folgende Einstellung hinzu

esbuild: {
  sourcemap: true,
},

Ergebnisse

Die Ergebnisse waren erstaunlich!

Zusammenfassung

Der Wechsel zu Vite ist schwierig, aber die potenziellen Vorteile sind beträchtlich. Einige Monate nach dem Hinzufügen von Vite meldete unser Entwicklerteam eine deutliche Produktivitätssteigerung, die es ihnen ermöglichte, bessere Produkte schneller zu entwickeln. Wenn Sie umsteigen möchten, aber nicht wissen, wo Sie anfangen sollen, bin ich hier, um Ihnen zu helfen. Wenden Sie sich an mich, und ich führe Sie durch den Prozess und sorge für einen reibungslosen Übergang.