Eine React-Anwendung mit öffentlichem Teil und Vorschau-Bildschirmen hinter einem Umgebungs-Flag. Flag in der Produktion aus, Bildschirme unerreichbar — und in der Build-Ausgabe liegt trotzdem ein 375 kB großer Chunk mit der gesamten Vorschau. Kein Fehler in Vite. Der Fehler liegt darin, wie wir die Prüfung geschrieben haben.
Wie der Bundler toten Code entfernt
Beim Build ersetzt Vite import.meta.env.VITE_ETWAS wörtlich durch den Wert aus der Umgebung. Steht im Code import.meta.env.VITE_PREVIEW !== ‘true’, bleibt nach der Ersetzung ‘false’ !== ‘true’ — ein Ausdruck, der immer false ist. Der Bundler erkennt das, erklärt den Zweig für tot, und der dynamische Import darin wird nie zu einem eigenen Chunk. Das ist der einzige Mechanismus, mit dem ein Flag tatsächlich Code aus dem Build entfernt.
Wo wir es kaputt gemacht haben
In bester Absicht haben wir alle Flags in ein Modul gezogen: const FEATURES = { previewMocks: import.meta.env.VITE_PREVIEW === ‘true’ }, und in den Routen if (FEATURES.previewMocks) geschrieben. Lesbarer, an einem Ort — und nicht entfernbar. Der Wert kommt nun über eine Objekteigenschaft aus einem anderen Modul, und in dem Moment, in dem der Bundler über Chunks entscheidet, kann er diesen Zweig nicht mehr als tot beweisen. Die Route bleibt, der Lazy-Import bleibt, der Chunk wird erzeugt und ausgeliefert.
Die Regel, die wir übernommen haben
Ein Flag, das entscheidet, ob Code im Build überhaupt existiert, wird inline geschrieben, genau an der Verzweigung, als import.meta.env-Ausdruck. Das zentrale Modul bleibt für Flags, die das Verhalten bereits enthaltenen Codes ändern. Der Unterschied liegt in der Frage: „Soll das funktionieren?” gegenüber „Soll das überhaupt hier sein?”
Prüfen statt vertrauen
Die Chunk-Liste am Ende des Builds ist der einzige Beweis. Liegt dort bei abgeschaltetem Flag weiterhin eine Datei mit dem Namen des Vorschau-Moduls, ist der Zweig nicht tot — egal, was der Code „sagt”. Diese Prüfung gehört ins Deploy-Skript: Ein Build, der einen Chunk erzeugt, den es nicht geben darf, sollte fehlschlagen, nicht durchgehen.
Ein Flag, das der Bundler nicht als Konstante lesen kann, ist kein Flag — nur eine Bedingung, die in der Produktion ausgewertet wird.