Wir haben unsere drei Frontend-Projekte von Parcel zu Vite migriert und der Prozess war... reibungslos.
Wir haben drei Haupt-Frontend-Projekte bei Logto: die Anmeldeerfahrung, die Konsole und die Live-Vorschau. Diese Projekte sind alle in TypeScript, React und SASS-Modulen; insgesamt haben sie etwa 100K Zeilen Code.
Wir liebten Parcel aufgrund seiner Einfachheit und der Null-Konfigurations-Einrichtung. Ich erinnere mich noch an den Tag, als ich schockiert war, wie einfach es war, ein neues Projekt mit Parcel einzurichten. Du kannst einfach parcel index.html ausführen und boom, alle notwendigen Abhängigkeiten werden installiert und das Projekt läuft. Wenn du ein "erfahrener" Entwickler bist, fühlst du vielleicht dasselbe und erinnerst dich an die alten Zeiten mit Gulp und Webpack. Parcel ist wie ein Zauberstab.
Die Einfachheit von Parcel war der Hauptgrund, warum wir so lange daran festgehalten haben, auch wenn es manchmal launisch war. Zum Beispiel:
Warum haben wir uns also entschieden, zu etwas anderem zu migrieren?
Jemand hat sogar eine Diskussion eröffnet und gefragt ob Parcel tot ist. Die offizielle Antwort ist nein, Parcel ist immer noch am Leben, aber es befindet sich in einem Zustand von "wir arbeiten an einer großen Umstrukturierung und haben keine Zeit für kleinere Releases". Für uns ist es wie ein "Tod auf Raten": Die neueste Version, die wir verwenden können, ist mehr als ein Jahr alt, und wir wissen nicht, wann die nächste Version veröffentlicht wird. Es sieht tot aus, es verhält sich wie tot, also ist es für uns tot.
Wir kannten Vite durch Vitest. Vor einigen Monaten waren wir die ESM-Unterstützung von Jest (im Testen) leid und wollten etwas Neues ausprobieren. Vitest eroberte unser Herz mit der nativen ESM-Unterstützung und der Jest-Kompatibilität. Es bietet eine erstaunliche Entwicklererfahrung und wird von Vite angetrieben.
Du hast möglicherweise unterschiedliche Einstellungen in deinem Projekt, aber normalerweise findest du Plugin-Ersatz, da das Vite-Ökosystem floriert. Hier sind unsere Setups zum Zeitpunkt der Migration:
Wir begannen die Migration, indem wir ein neues Vite-Projekt erstellten und damit herumspielten, um zu sehen, wie es funktioniert. Der Prozess war reibungslos und die tatsächliche Migration dauerte nur wenige Tage.
Vite bietet Out-of-the-box-Unterstützung für Monorepo, ESM, TypeScript, React und SASS. Wir mussten nur die notwendigen Plugins und Konfigurationen installieren, damit es funktioniert.
Vite hat integrierte Unterstützung für Pfad-Aliase, zum Beispiel in unserem tsconfig.json:
Wir mussten nur die gleiche Auflösung in unserer vite.config.ts hinzufügen:
Beachte, dass der Ersatzpfad ein absoluter Pfad sein sollte, während er relativ zum Projekt-Root ist. Alternativ kannst du das vite-tsconfig-paths Plugin verwenden, um die Pfad-Aliase aus dem tsconfig.json zu lesen.
Obwohl Vite integrierte Unterstützung für HMR hat, ist es notwendig, ein Plugin zu installieren, um React Fast Refresh zu aktivieren. Wir verwendeten das @vitejs/plugin-react Plugin, das vom Vite-Team zur Verfügung gestellt wird und großartige Unterstützung für React-Funktionen wie Fast Refresh bietet:
Wir verwenden das vite-plugin-svgr Plugin, um SVGs in React-Komponenten zu konvertieren. Es ist so einfach wie das Hinzufügen des Plugins zur Vite-Konfiguration:
Wir haben jedoch nicht angegeben, unter welchen Umständen die SVGs in React-Komponenten konvertiert werden sollten, sodass alle Importe konvertiert wurden. Das Plugin bietet eine bessere Standardkonfiguration: Nur die SVGs, die mit der Erweiterung .svg?react importiert werden, werden konvertiert. Wir haben unsere Importe entsprechend aktualisiert.
Obwohl Vite integrierte Unterstützung für SASS-Module hat, gibt es eine Sache, auf die wir achten müssen: wie die Klassennamen formatiert werden. Es könnte für Benutzer und unsere Integrationstests problematisch sein, wenn die Klassennamen nicht konsistent formatiert sind. Die Ein-Zeilen-Konfiguration in der vite.config.ts kann das Problem lösen:
Übrigens haben Parcel und Vite unterschiedliche Geschmackssorten beim Importieren von SASS-Dateien:
Die * as-Syntax funktioniert jedoch in Vite, führt jedoch dazu, dass die Modularizierung der Klassennamen verloren geht, wenn du dynamische Schlüssel verwendest, um auf das styles-Objekt zuzugreifen. Beispielsweise:
Da Vite unter der Haube Rollup verwendet, können wir das offizielle @mdx-js/rollup Plugin verwenden, um MDX sowie dessen Plugins zu unterstützen. Die Konfiguration sieht wie folgt aus:
Das remarkGfm-Plugin wird verwendet, um GitHub Flavored Markdown zu unterstützen, und das rehypeMdxCodeProps-Plugin wird verwendet, um die Props an die Code-Blöcke in den MDX-Dateien zu übergeben, ähnlich wie es Docusaurus tut.
Wir möchten Mermaid-Diagramme genauso wie andere Programmiersprachen in unseren MDX-Dateien verwenden. Die Verwendung sollte so einfach sein wie bei anderen Code-Blöcken:
Sollte gerendert werden als:
%3btext-align:center%3b%7d%23mermaid-0 .edgeLabel p%7bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3b%7d%23mermaid-0 .edgeLabel rect%7bopacity:0.5%3bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3bfill:rgba(232%2c232%2c232%2c 0.8)%3b%7d%23mermaid-0 .labelBkg%7bbackground-color:rgba(232%2c 232%2c 232%2c 0.5)%3b%7d%23mermaid-0 .cluster rect%7bfill:%23ffffde%3bstroke:%23aaaa33%3bstroke-width:1px%3b%7d%23mermaid-0 .cluster text%7bfill:%23333%3b%7d%23mermaid-0 .cluster span%7bcolor:%23333%3b%7d%23mermaid-0 div.mermaidTooltip%7bposition:absolute%3btext-align:center%3bmax-width:200px%3bpadding:2px%3bfont-family:arial%2csans-serif%3bfont-size:12px%3bbackground:hsl(80%2c 100%25%2c 96.2745098039%25)%3bborder:1px solid %23aaaa33%3bborder-radius:2px%3bpointer-events:none%3bz-index:100%3b%7d%23mermaid-0 .flowchartTitleText%7btext-anchor:middle%3bfont-size:18px%3bfill:%23333%3b%7d%23mermaid-0 rect.text%7bfill:none%3bstroke-width:0%3b%7d%23mermaid-0 .icon-shape%2c%23mermaid-0 .image-shape%7bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3btext-align:center%3b%7d%23mermaid-0 .icon-shape p%2c%23mermaid-0 .image-shape p%7bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3bpadding:2px%3b%7d%23mermaid-0 .icon-shape rect%2c%23mermaid-0 .image-shape rect%7bopacity:0.5%3bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3bfill:rgba(232%2c232%2c232%2c 0.8)%3b%7d%23mermaid-0 :root%7b--mermaid-font-family:arial%2csans-serif%3b%7d%3c/style%3e%3cg%3e%3cmarker orient='auto' markerHeight='8' markerWidth='8' markerUnits='userSpaceOnUse' refY='5' refX='5' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-pointEnd'%3e%3cpath style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 0 0 L 10 5 L 0 10 z'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='8' markerWidth='8' markerUnits='userSpaceOnUse' refY='5' refX='4.5' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-pointStart'%3e%3cpath style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 0 5 L 10 10 L 10 0 z'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5' refX='11' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-circleEnd'%3e%3ccircle style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' r='5' cy='5' cx='5'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5' refX='-1' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-circleStart'%3e%3ccircle style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' r='5' cy='5' cx='5'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5.2' refX='12' viewBox='0 0 11 11' class='marker cross flowchart-v2' id='mermaid-0_flowchart-v2-crossEnd'%3e%3cpath style='stroke-width: 2%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 1%2c1 l 9%2c9 M 10%2c1 l -9%2c9'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5.2' refX='-1' viewBox='0 0 11 11' class='marker cross flowchart-v2' id='mermaid-0_flowchart-v2-crossStart'%3e%3cpath style='stroke-width: 2%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 1%2c1 l 9%2c9 M 10%2c1 l -9%2c9'/%3e%3c/marker%3e%3cg class='root'%3e%3cg class='clusters'/%3e%3cg class='edgePaths'%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_A_B_0' d='M72.451%2c62L67.598%2c66.167C62.746%2c70.333%2c53.041%2c78.667%2c48.188%2c86.333C43.336%2c94%2c43.336%2c101%2c43.336%2c104.5L43.336%2c108'/%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_A_C_1' d='M135.338%2c62L140.191%2c66.167C145.043%2c70.333%2c154.748%2c78.667%2c159.601%2c86.333C164.453%2c94%2c164.453%2c101%2c164.453%2c104.5L164.453%2c108'/%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_B_D_2' d='M43.336%2c166L43.336%2c170.167C43.336%2c174.333%2c43.336%2c182.667%2c47.683%2c190.566C52.029%2c198.465%2c60.723%2c205.929%2c65.069%2c209.662L69.416%2c213.394'/%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_C_D_3' d='M164.453%2c166L164.453%2c170.167C164.453%2c174.333%2c164.453%2c182.667%2c160.106%2c190.566C155.76%2c198.465%2c147.066%2c205.929%2c142.72%2c209.662L138.373%2c213.394'/%3e%3c/g%3e%3cg class='edgeLabels'%3e%3cg class='edgeLabel'%3e%3cg transform='translate(0%2c 0)' class='label'%3e%3cforeignObject height='0' width='0'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg class='edgeLabel'%3e%3cg transform='translate(0%2c 0)' class='label'%3e%3cforeignObject height='0' width='0'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg class='edgeLabel'%3e%3cg transform='translate(0%2c 0)' class='label'%3e%3cforeignObject height='0' width='0'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg class='edgeLabel'%3e%3cg transform='translate(0%2c 0)' class='label'%3e%3cforeignObject height='0' width='0'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3c/g%3e%3cg class='nodes'%3e%3cg transform='translate(103.89453125%2c 35)' id='flowchart-A-0' class='node default'%3e%3crect height='54' width='70.671875' y='-27' x='-35.3359375' style='' class='basic label-container'/%3e%3cg transform='translate(-5.3359375%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='10.671875'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eA%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(43.3359375%2c 139)' id='flowchart-B-1' class='node default'%3e%3crect height='54' width='70.671875' y='-27' x='-35.3359375' style='' class='basic label-container'/%3e%3cg transform='translate(-5.3359375%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='10.671875'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eB%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(164.453125%2c 139)' id='flowchart-C-3' class='node default'%3e%3crect height='54' width='71.5625' y='-27' x='-35.78125' style='' class='basic label-container'/%3e%3cg transform='translate(-5.78125%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='11.5625'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eC%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(103.89453125%2c 243)' id='flowchart-D-5' class='node default'%3e%3crect height='54' width='71.5625' y='-27' x='-35.78125' style='' class='basic label-container'/%3e%3cg transform='translate(-5.78125%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='11.5625'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eD%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e)
Da unsere App sowohl helle als auch dunkle Themen unterstützt, haben wir ein wenig programmiert, um die Mermaid-Diagramme mit dem Dunkelmodus kompatibel zu machen. Eine React-Komponente wurde erstellt:
useTheme ist ein benutzerdefinierter Hook, um das aktuelle Thema aus dem Kontext zu erhalten. Die mermaid-Bibliothek wird asynchron geladen, um die Ladegröße für den anfänglichen Seitenaufruf zu reduzieren.
Für den Codeblock in der MDX-Datei haben wir eine einheitliche Komponente, um die Aufgabe zu erledigen:
Schließlich definieren wir den MDX-Provider wie folgt:
Das ist keine Vite-spezifische Sache, aber es lohnt sich, es zu erwähnen, da wir während der Migration unsere Pages aktualisiert haben, um Lazy Loading zu nutzen und nichts danach kaputtging.
React hat eine eingebaute Funktion React.lazy, um Komponenten Lazy zu laden. Es kann jedoch einige Probleme verursachen, wenn du schnell iterierst. Wir haben eine winzige Bibliothek namens react-safe-lazy entwickelt, um die Probleme zu lösen. Es ist ein Drop-In-Ersatz für React.lazy und eine detaillierte Erklärung findest du in diesem Blogbeitrag.
Es gibt ein nettes Plugin namens vite-plugin-compression, um komprimierte Assets zu erzeugen. Es unterstützt sowohl gzip- als auch brotli-Komprimierung. Die Konfiguration ist einfach:
Eine großartige Funktion von Vite (oder dem darunter liegenden Rollup) ist die Möglichkeit, manuelle Chunks zu erstellen. Während React.lazy verwendet wird, um Komponenten Lazy zu laden, können wir mehr Kontrolle über die Chunks haben, indem wir die manuellen Chunks angeben, um zu entscheiden, welche Komponenten oder Module zusammen gebündelt werden sollen.
Zum Beispiel können wir zunächst den vite-bundle-visualizer verwenden, um die Bundle-Größe und Abhängigkeiten zu analysieren. Dann können wir eine geeignete Funktion schreiben, um die Chunks zu spalten:
Im Gegensatz zum Produktions-Build wird Vite deinen Quellcode im Entwicklungsmodus NICHT bündeln (einschließlich verknüpfter Abhängigkeiten im selben Monorepo) und behandelt jedes Modul als Datei. Für uns lädt der Browser zum ersten Mal Hunderte von Modulen, was verrückt aussieht, aber in den meisten Fällen tatsächlich in Ordnung ist. Du kannst die Diskussion hier sehen.
Wenn es für dich ein Thema ist, ist eine alternative, aber nicht perfekte Lösung, die verknüpften Abhängigkeiten im optimizeDeps-Feld der vite.config.ts aufzulisten:
Dies wird die verknüpften Abhängigkeiten "vorbündeln" und den Entwicklungsserver schneller machen. Der Nachteil ist, dass HMR möglicherweise nicht wie erwartet für die verknüpften Abhängigkeiten funktioniert.
Zusätzlich verwenden wir einen Proxy, der die statischen Dateien in der Produktion bereitstellt und die Anfragen an den Vitest-Server in der Entwicklung weiterleitet. Wir haben einige spezifische Ports konfiguriert, um Konflikte zu vermeiden, und es ist auch einfach, dies in der vite.config.ts einzurichten:
Im Gegensatz zu Parcel verwendet Vite einen modernen Ansatz im Umgang mit Umgebungsvariablen durch die Verwendung von import.meta.env. Es wird automatisch die .env-Dateien laden und die Variablen im Code ersetzen. Es erfordert jedoch, dass alle Umgebungsvariablen mit VITE_ (konfigurierbar) beginnen.
Während wir Parcel verwendeten, ersetzte es einfach die process.env-Variablen, ohne das Präfix zu überprüfen. Daher haben wir eine Workaround-Lösung entwickelt, indem wir das define-Feld verwenden, um die Migration zu erleichtern:
Dies ermöglicht es uns, das Präfix allmählich zu den Umgebungsvariablen hinzuzufügen und das define-Feld zu entfernen.
Das war's! Wir haben erfolgreich unsere drei Frontend-Projekte von Parcel zu Vite migriert und hoffen, dass diese kurze Geschichte dir bei deiner Migration helfen kann. So sieht die Konfiguration am Ende aus: