"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "die-vorgeschichte", "hProperties": { "id": "die-vorgeschichte" } }, "depth": 2, "value": "Die Vorgeschichte" }, { "data": { "id": "warum-vite", "hProperties": { "id": "warum-vite" } }, "depth": 3, "value": "Warum Vite?" }, { "data": { "id": "der-status-quo", "hProperties": { "id": "der-status-quo" } }, "depth": 2, "value": "Der Status Quo" }, { "data": { "id": "die-migration", "hProperties": { "id": "die-migration" } }, "depth": 2, "value": "Die Migration" }, { "data": { "id": "out-of-the-box-unterstützung", "hProperties": { "id": "out-of-the-box-unterstützung" } }, "depth": 3, "value": "Out-of-the-box-Unterstützung" }, { "data": { "id": "pfad-alias", "hProperties": { "id": "pfad-alias" } }, "depth": 3, "value": "Pfad-Alias" }, { "data": { "id": "react-fast-refresh-und-hmr", "hProperties": { "id": "react-fast-refresh-und-hmr" } }, "depth": 3, "value": "React Fast Refresh und HMR" }, { "data": { "id": "svg-als-react-komponente", "hProperties": { "id": "svg-als-react-komponente" } }, "depth": 3, "value": "SVG als React-Komponente" }, { "data": { "id": "sass-module", "hProperties": { "id": "sass-module" } }, "depth": 3, "value": "SASS-Module" }, { "data": { "id": "mdx-unterstützung", "hProperties": { "id": "mdx-unterstützung" } }, "depth": 3, "value": "MDX-Unterstützung" }, { "data": { "id": "mermaid-unterstützung-innerhalb-von-mdx", "hProperties": { "id": "mermaid-unterstützung-innerhalb-von-mdx" } }, "depth": 3, "value": "Mermaid-Unterstützung innerhalb von MDX" }, { "data": { "id": "lazy-loading", "hProperties": { "id": "lazy-loading" } }, "depth": 3, "value": "Lazy Loading" }, { "data": { "id": "komprimierung", "hProperties": { "id": "komprimierung" } }, "depth": 3, "value": "Komprimierung" }, { "data": { "id": "manuelle-chunks", "hProperties": { "id": "manuelle-chunks" } }, "depth": 3, "value": "Manuelle Chunks" }, { "data": { "id": "dev-server", "hProperties": { "id": "dev-server" } }, "depth": 3, "value": "Dev-Server" }, { "data": { "id": "umgebungsvariablen", "hProperties": { "id": "umgebungsvariablen" } }, "depth": 3, "value": "Umgebungsvariablen" }, { "data": { "id": "fazit", "hProperties": { "id": "fazit" } }, "depth": 2, "value": "Fazit" }]; const readingTime = { "minutes": 7, "words": 2162, "text": "7 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", img: "img", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx("style", { children: `.alt { font-size: 1rem; font-style: italic; font-weight: 500; color: #888; margin-top: 1rem; display: 'block'; }` }), "\n", _jsxs(_components.h2, { id: "die-vorgeschichte", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#die-vorgeschichte", children: _jsx(_components.span, { children: "#" }) }), "Die Vorgeschichte"] }), "\n", _jsx(_components.p, { children: "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." }), "\n", _jsxs(_components.p, { children: ["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 ", _jsx(_components.code, { children: "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."] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Die Einfachheit von Parcel war der Hauptgrund, warum wir so lange daran festgehalten haben, auch wenn es manchmal launisch war. Zum Beispiel:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Parcel versagte manchmal beim Bündeln des Projekts, weil es einige Chunkdateien nicht finden konnte, die tatsächlich vorhanden waren." }), "\n", _jsx(_components.li, { children: "Es benötigte einige trickreiche Konfigurationen, um mit unserem Monorepo-Setup zu funktionieren." }), "\n", _jsx(_components.li, { children: "Es unterstützt MDX 3 nicht nativ, daher mussten wir einen benutzerdefinierten Transformer dafür erstellen." }), "\n", _jsxs(_components.li, { children: ["Es unterstützt keine manuellen Chunks (zum Zeitpunkt des Schreibens befindet sich das manuelle Chunks-Feature noch ", _jsx(_components.a, { href: "https://parceljs.org/features/code-splitting/#manual-shared-bundles", children: "im experimentellen Stadium" }), "), was in den meisten Fällen in Ordnung ist, aber manchmal braucht man es."] }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Warum haben wir uns also entschieden, zu etwas anderem zu migrieren?" }) }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Wir waren mit Parcel 2.9.3 festgefahren, das im Juni 2023 veröffentlicht wurde. Jedes Mal, wenn eine neue Version danach veröffentlicht wurde, versuchten wir, ein Upgrade durchzuführen, aber es scheiterte immer mit Fehlern beim Build-Prozess." }), "\n", _jsx(_components.li, { children: "Die neueste Version von Parcel war 2.12.0, veröffentlicht im Februar 2024. Obwohl es fast täglich Commits gibt, wurde seitdem keine neue Version veröffentlicht." }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Jemand hat sogar eine Diskussion eröffnet und gefragt ", _jsx(_components.a, { href: "https://github.com/parcel-bundler/parcel/discussions/9790", children: "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."] }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/parcel_upgrades_238745d26d.png", alt: "Parcel Upgrade Pull Requests" }) }), "\n", _jsx("center", { className: "alt", children: "Vertraue mir, wir haben es versucht." }), "\n", _jsxs(_components.h3, { id: "warum-vite", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#warum-vite", children: _jsx(_components.span, { children: "#" }) }), "Warum Vite?"] }), "\n", _jsxs(_components.p, { children: ["Wir kannten ", _jsx(_components.a, { href: "https://vitejs.dev/", children: "Vite" }), " durch ", _jsx(_components.a, { href: "https://vitest.dev/", children: "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."] }), "\n", _jsxs(_components.h2, { id: "der-status-quo", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#der-status-quo", children: _jsx(_components.span, { children: "#" }) }), "Der Status Quo"] }), "\n", _jsx(_components.p, { children: "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:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Monorepo:" }), " Wir verwenden PNPM (v9) Workspaces, um unser Monorepo zu verwalten."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Modul:" }), " Wir verwenden ESM-Module für all unsere Projekte."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "TypeScript:" }), " Wir verwenden TypeScript (v5.5.3) für all unsere Projekte mit Pfad-Aliassen."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "React:" }), " Wir verwenden React (v18.3.1) für all unsere Frontend-Projekte."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Styling:" }), " Wir verwenden SASS-Module für das Styling."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "SVG:" }), " Wir verwenden SVGs als React-Komponenten."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "MDX:" }), " Wir haben MDX-Unterstützung mit GitHub Flavored Markdown und Mermaid."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Lazy Loading:" }), " Wir müssen einige unserer Seiten und KomponentenLazy laden."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Komprimierung:" }), " Wir erzeugen komprimierte Assets (gzip und brotli) für unsere Produktions-Builds."] }), "\n"] }), "\n", _jsxs(_components.h2, { id: "die-migration", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#die-migration", children: _jsx(_components.span, { children: "#" }) }), "Die Migration"] }), "\n", _jsx(_components.p, { children: "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." }), "\n", _jsxs(_components.h3, { id: "out-of-the-box-unterstützung", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#out-of-the-box-unterstützung", children: _jsx(_components.span, { children: "#" }) }), "Out-of-the-box-Unterstützung"] }), "\n", _jsx(_components.p, { children: "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." }), "\n", _jsxs(_components.h3, { id: "pfad-alias", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#pfad-alias", children: _jsx(_components.span, { children: "#" }) }), "Pfad-Alias"] }), "\n", _jsxs(_components.p, { children: ["Vite hat integrierte Unterstützung für Pfad-Aliase, zum Beispiel in unserem ", _jsx(_components.code, { children: "tsconfig.json" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-json", children: "{\n \"compilerOptions\": {\n \"baseUrl\": \".\",\n \"paths\": {\n \"@/*\": [\"src/*\"]\n }\n }\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["Wir mussten nur die gleiche Auflösung in unserer ", _jsx(_components.code, { children: "vite.config.ts" }), " hinzufügen:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { defineConfig } from 'vite';\n\nexport default defineConfig({\n resolve: {\n alias: [{ find: /^@\\//, replacement: '/src/' }],\n },\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Beachte, dass der Ersatzpfad ein absoluter Pfad sein sollte, während er relativ zum Projekt-Root ist. Alternativ kannst du das ", _jsx(_components.a, { href: "https://github.com/aleclarson/vite-tsconfig-paths", children: "vite-tsconfig-paths" }), " Plugin verwenden, um die Pfad-Aliase aus dem ", _jsx(_components.code, { children: "tsconfig.json" }), " zu lesen."] }), "\n", _jsxs(_components.h3, { id: "react-fast-refresh-und-hmr", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#react-fast-refresh-und-hmr", children: _jsx(_components.span, { children: "#" }) }), "React Fast Refresh und HMR"] }), "\n", _jsxs(_components.p, { children: ["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 ", _jsx(_components.a, { href: "https://github.com/vitejs/vite-plugin-react", children: "@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:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\n\nexport default defineConfig({\n plugins: [react()],\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "svg-als-react-komponente", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#svg-als-react-komponente", children: _jsx(_components.span, { children: "#" }) }), "SVG als React-Komponente"] }), "\n", _jsxs(_components.p, { children: ["Wir verwenden das ", _jsx(_components.a, { href: "https://github.com/pd4d10/vite-plugin-svgr", children: "vite-plugin-svgr" }), " Plugin, um SVGs in React-Komponenten zu konvertieren. Es ist so einfach wie das Hinzufügen des Plugins zur Vite-Konfiguration:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { defineConfig } from 'vite';\nimport svgr from 'vite-plugin-svgr';\n\nexport default defineConfig({\n plugins: [svgr()],\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["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 ", _jsx(_components.code, { children: ".svg?react" }), " importiert werden, werden konvertiert. Wir haben unsere Importe entsprechend aktualisiert."] }), "\n", _jsxs(_components.h3, { id: "sass-module", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#sass-module", children: _jsx(_components.span, { children: "#" }) }), "SASS-Module"] }), "\n", _jsxs(_components.p, { children: ["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 ", _jsx(_components.code, { children: "vite.config.ts" }), " kann das Problem lösen:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { defineConfig } from 'vite';\n\nexport default defineConfig({\n css: {\n modules: {\n generateScopedName: '[name]__[local]--[hash:base64:5]', // Ersetze durch dein eigenes Format\n },\n },\n});\n" }) }), "\n", _jsx(_components.p, { children: "Übrigens haben Parcel und Vite unterschiedliche Geschmackssorten beim Importieren von SASS-Dateien:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-diff", children: "- import * as styles from './index.module.scss';\n+ import styles from './index.module.scss';\n" }) }), "\n", _jsxs(_components.p, { children: ["Die ", _jsx(_components.code, { children: "* 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 ", _jsx(_components.code, { children: "styles" }), "-Objekt zuzugreifen. Beispielsweise:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "const className = 'button';\n// Das wird nicht wie erwartet funktionieren\nreturn ;\n" }) }), "\n", _jsxs(_components.h3, { id: "mdx-unterstützung", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#mdx-unterstützung", children: _jsx(_components.span, { children: "#" }) }), "MDX-Unterstützung"] }), "\n", _jsxs(_components.p, { children: ["Da Vite unter der Haube Rollup verwendet, können wir das offizielle ", _jsx(_components.a, { href: "https://mdxjs.com/packages/rollup/", children: "@mdx-js/rollup" }), " Plugin verwenden, um MDX sowie dessen Plugins zu unterstützen. Die Konfiguration sieht wie folgt aus:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { defineConfig } from 'vite';\nimport mdx from '@mdx-js/rollup';\nimport rehypeMdxCodeProps from 'rehype-mdx-code-props';\nimport remarkGfm from 'remark-gfm';\n\nexport default defineConfig({\n plugins: [\n {\n // Das `enforce: 'pre'` ist erforderlich, damit das MDX-Plugin funktioniert\n enforce: 'pre',\n ...mdx({\n providerImportSource: '@mdx-js/react',\n remarkPlugins: [remarkGfm],\n rehypePlugins: [[rehypeMdxCodeProps, { tagName: 'code' }]],\n }),\n },\n ],\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Das ", _jsx(_components.code, { children: "remarkGfm" }), "-Plugin wird verwendet, um GitHub Flavored Markdown zu unterstützen, und das ", _jsx(_components.code, { children: "rehypeMdxCodeProps" }), "-Plugin wird verwendet, um die Props an die Code-Blöcke in den MDX-Dateien zu übergeben, ähnlich wie es ", _jsx(_components.a, { href: "https://docusaurus.io/docs/markdown-features/code-blocks#code-title", children: "Docusaurus" }), " tut."] }), "\n", _jsxs(_components.h3, { id: "mermaid-unterstützung-innerhalb-von-mdx", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#mermaid-unterstützung-innerhalb-von-mdx", children: _jsx(_components.span, { children: "#" }) }), "Mermaid-Unterstützung innerhalb von MDX"] }), "\n", _jsx(_components.p, { children: "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:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-md", children: "```mermaid\ngraph TD\n A-->B\n A-->C\n B-->D\n C-->D\n```\n" }) }), "\n", _jsx(_components.p, { children: "Sollte gerendert werden als:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "graph TD\n A-->B\n A-->C\n B-->D\n C-->D\n" }) }), "\n", _jsx(_components.p, { children: "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:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import { useEffect } from 'react';\nimport useTheme from '@/hooks/use-theme';\n\n// Möglicherweise anderswo definiert\nenum Theme {\n Dark = 'dark',\n Light = 'light',\n}\n\ntype Props = {\n readonly children: string;\n};\n\nconst themeToMermaidTheme = Object.freeze({\n [Theme.Dark]: 'dark',\n [Theme.Light]: 'default',\n} satisfies Record);\n\nexport default function Mermaid({ children }: Props) {\n const theme = useTheme();\n\n useEffect(() => {\n (async () => {\n const { default: mermaid } = await import('mermaid');\n\n mermaid.initialize({\n startOnLoad: false,\n theme: themeToMermaidTheme[theme],\n securityLevel: 'loose',\n });\n await mermaid.run();\n })();\n }, [theme]);\n\n return

{children}

;\n}\n" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "useTheme" }), " ist ein benutzerdefinierter Hook, um das aktuelle Thema aus dem Kontext zu erhalten. Die ", _jsx(_components.code, { children: "mermaid" }), "-Bibliothek wird asynchron geladen, um die Ladegröße für den anfänglichen Seitenaufruf zu reduzieren."] }), "\n", _jsx(_components.p, { children: "Für den Codeblock in der MDX-Datei haben wir eine einheitliche Komponente, um die Aufgabe zu erledigen:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import CodeEditor from '@/components/CodeEditor';\nimport Mermaid from '@/components/Mermaid';\n\ntype Props = {\n readonly children: string;\n readonly className?: string;\n};\n\nexport default function Code({ children, className }: Props) {\n const [, language] = /language-(\\w+)/.exec(String(className ?? '')) ?? [];\n\n if (language === 'mermaid') {\n return {String(children).trimEnd()};\n }\n\n // Andere Codeblöcke gehen hier hin\n return {String(children).trimEnd()};\n}\n" }) }), "\n", _jsx(_components.p, { children: "Schließlich definieren wir den MDX-Provider wie folgt:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import { MDXProvider } from '@mdx-js/react';\nimport { ReactNode } from 'react';\n\ntype Props = {\n readonly children: ReactNode;\n};\n\nexport default function MdxProvider({ children }: Props) {\n return (\n ` jetzt nicht durch eine benutzerdefinierte\n // Komponente ersetzt werden kann.\n // Siehe: https://github.com/orgs/mdx-js/discussions/2231#discussioncomment-4729474\n Code,\n // ...andere Komponenten\n }}\n >\n {children}\n \n );\n}\n" }) }), "\n", _jsxs(_components.h3, { id: "lazy-loading", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#lazy-loading", children: _jsx(_components.span, { children: "#" }) }), "Lazy Loading"] }), "\n", _jsx(_components.p, { children: "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." }), "\n", _jsxs(_components.p, { children: ["React hat eine eingebaute Funktion ", _jsx(_components.code, { children: "React.lazy" }), ", um Komponenten Lazy zu laden. Es kann jedoch einige Probleme verursachen, wenn du schnell iterierst. Wir haben eine winzige Bibliothek namens ", _jsx(_components.a, { href: "https://github.com/silverhand-io/react-safe-lazy", children: "react-safe-lazy" }), " entwickelt, um die Probleme zu lösen. Es ist ein Drop-In-Ersatz für ", _jsx(_components.code, { children: "React.lazy" }), " und eine detaillierte Erklärung findest du in diesem ", _jsx(_components.a, { href: "https://blog.logto.io/react-safe-lazy/?ref=post-vite", children: "Blogbeitrag" }), "."] }), "\n", _jsxs(_components.h3, { id: "komprimierung", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#komprimierung", children: _jsx(_components.span, { children: "#" }) }), "Komprimierung"] }), "\n", _jsxs(_components.p, { children: ["Es gibt ein nettes Plugin namens ", _jsx(_components.a, { href: "https://github.com/vbenjs/vite-plugin-compression", children: "vite-plugin-compression" }), ", um komprimierte Assets zu erzeugen. Es unterstützt sowohl gzip- als auch brotli-Komprimierung. Die Konfiguration ist einfach:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { defineConfig } from 'vite';\nimport viteCompression from 'vite-plugin-compression';\n\nexport default defineConfig({\n plugins: [\n // Gzip standardmäßig\n viteCompression(),\n // Brotli\n viteCompression({ algorithm: 'brotliCompress' }),\n ],\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "manuelle-chunks", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#manuelle-chunks", children: _jsx(_components.span, { children: "#" }) }), "Manuelle Chunks"] }), "\n", _jsxs(_components.p, { children: ["Eine großartige Funktion von Vite (oder dem darunter liegenden Rollup) ist die Möglichkeit, manuelle Chunks zu erstellen. Während ", _jsx(_components.code, { children: "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."] }), "\n", _jsxs(_components.p, { children: ["Zum Beispiel können wir zunächst den ", _jsx(_components.a, { href: "https://github.com/KusStar/vite-bundle-visualizer", children: "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:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { defineConfig } from 'vite';\n\nexport default defineConfig({\n build: {\n rollupOptions: {\n manualChunks(id, { getModuleInfo }) {\n // Dynamische Überprüfung, ob das Modul React-bezogene Abhängigkeiten hat\n const hasReactDependency = (id: string): boolean => {\n return (\n getModuleInfo(id)?.importedIds.some(\n (importedId) => importedId.includes('react') || importedId.includes('react-dom')\n ) ?? false\n );\n };\n\n // Vorsicht: React-bezogene Pakete sollten zusammen gebündelt werden, sonst kann es zu Laufzeitfehlern kommen.\n if (id.includes('/node_modules/') und hasReactDependency(id)) {\n return 'react';\n }\n\n // Füge deine großen Pakete zur Liste hinzu\n for (const largePackage of ['mermaid', 'elkjs']) {\n if (id.includes(`/node_modules/${largePackage}/`)) {\n return largePackage;\n }\n }\n\n // Alle anderen Pakete im `node_modules`-Ordner werden zusammen gebündelt\n if (id.includes('/node_modules/')) {\n return 'vendors';\n }\n\n // Verwende das Standardverhalten für andere Module\n },\n },\n },\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "dev-server", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#dev-server", children: _jsx(_components.span, { children: "#" }) }), "Dev-Server"] }), "\n", _jsxs(_components.p, { children: ["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 ", _jsx(_components.a, { href: "https://github.com/vitejs/vite/discussions/4803", children: "hier" }), " sehen."] }), "\n", _jsxs(_components.p, { children: ["Wenn es für dich ein Thema ist, ist eine alternative, aber nicht perfekte Lösung, die verknüpften Abhängigkeiten im ", _jsx(_components.code, { children: "optimizeDeps" }), "-Feld der ", _jsx(_components.code, { children: "vite.config.ts" }), " aufzulisten:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { defineConfig } from 'vite';\n\nexport default defineConfig({\n optimizeDeps: {\n include: ['@logto/phrases', '@logto/schemas'],\n },\n});\n" }) }), "\n", _jsx(_components.p, { children: "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." }), "\n", _jsxs(_components.p, { children: ["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 ", _jsx(_components.code, { children: "vite.config.ts" }), " einzurichten:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { defineConfig } from 'vite';\n\nexport default defineConfig({\n server: {\n port: 3000,\n hmr: {\n port: 3001,\n },\n },\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "umgebungsvariablen", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#umgebungsvariablen", children: _jsx(_components.span, { children: "#" }) }), "Umgebungsvariablen"] }), "\n", _jsxs(_components.p, { children: ["Im Gegensatz zu Parcel verwendet Vite einen modernen Ansatz im Umgang mit Umgebungsvariablen durch die Verwendung von ", _jsx(_components.code, { children: "import.meta.env" }), ". Es wird automatisch die ", _jsx(_components.code, { children: ".env" }), "-Dateien laden und die Variablen im Code ersetzen. Es erfordert jedoch, dass alle Umgebungsvariablen mit ", _jsx(_components.code, { children: "VITE_" }), " (konfigurierbar) beginnen."] }), "\n", _jsxs(_components.p, { children: ["Während wir Parcel verwendeten, ersetzte es einfach die ", _jsx(_components.code, { children: "process.env" }), "-Variablen, ohne das Präfix zu überprüfen. Daher haben wir eine Workaround-Lösung entwickelt, indem wir das ", _jsx(_components.code, { children: "define" }), "-Feld verwenden, um die Migration zu erleichtern:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { defineConfig } from 'vite';\n\nexport default defineConfig({\n define: {\n 'import.meta.env.API_URL': JSON.stringify(process.env.API_URL),\n },\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Dies ermöglicht es uns, das Präfix allmählich zu den Umgebungsvariablen hinzuzufügen und das ", _jsx(_components.code, { children: "define" }), "-Feld zu entfernen."] }), "\n", _jsxs(_components.h2, { id: "fazit", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#fazit", children: _jsx(_components.span, { children: "#" }) }), "Fazit"] }), "\n", _jsx(_components.p, { children: "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:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport svgr from 'vite-plugin-svgr';\nimport mdx from '@mdx-js/rollup';\nimport rehypeMdxCodeProps from 'rehype-mdx-code-props';\nimport remarkGfm from 'remark-gfm';\nimport viteCompression from 'vite-plugin-compression';\n\nexport default defineConfig({\n resolve: {\n alias: [{ find: /^@\\//, replacement: '/src/' }],\n },\n server: {\n port: 3000,\n hmr: {\n port: 3001,\n },\n },\n plugins: [\n react(),\n svgr(),\n {\n enforce: 'pre',\n ...mdx({\n providerImportSource: '@mdx-js/react',\n remarkPlugins: [remarkGfm],\n rehypePlugins: [[rehypeMdxCodeProps, { tagName: 'code' }]],\n }),\n },\n viteCompression(),\n viteCompression({ algorithm: 'brotliCompress' }),\n ],\n css: {\n modules: {\n generateScopedName: '[name]__[local]--[hash:base64:5]',\n },\n },\n build: {\n rollupOptions: {\n manualChunks(id, { getModuleInfo }) {\n // Manuelle Chunks-Logik\n },\n },\n },\n});\n" }) })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, default: MDXContent };