"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "de-achtergrond", "hProperties": { "id": "de-achtergrond" } }, "depth": 2, "value": "De achtergrond" }, { "data": { "id": "waarom-vite", "hProperties": { "id": "waarom-vite" } }, "depth": 3, "value": "Waarom Vite?" }, { "data": { "id": "de-status-quo", "hProperties": { "id": "de-status-quo" } }, "depth": 2, "value": "De status quo" }, { "data": { "id": "de-migratie", "hProperties": { "id": "de-migratie" } }, "depth": 2, "value": "De migratie" }, { "data": { "id": "ondersteuning-uit-de-doos", "hProperties": { "id": "ondersteuning-uit-de-doos" } }, "depth": 3, "value": "Ondersteuning uit de doos" }, { "data": { "id": "padaliassen", "hProperties": { "id": "padaliassen" } }, "depth": 3, "value": "Padaliassen" }, { "data": { "id": "react-fast-refresh-en-hmr", "hProperties": { "id": "react-fast-refresh-en-hmr" } }, "depth": 3, "value": "React Fast Refresh en HMR" }, { "data": { "id": "svg-als-react-component", "hProperties": { "id": "svg-als-react-component" } }, "depth": 3, "value": "SVG als React-component" }, { "data": { "id": "sass-modules", "hProperties": { "id": "sass-modules" } }, "depth": 3, "value": "SASS-modules" }, { "data": { "id": "mdx-ondersteuning", "hProperties": { "id": "mdx-ondersteuning" } }, "depth": 3, "value": "MDX-ondersteuning" }, { "data": { "id": "mermaid-ondersteuning-binnen-mdx", "hProperties": { "id": "mermaid-ondersteuning-binnen-mdx" } }, "depth": 3, "value": "Mermaid-ondersteuning binnen MDX" }, { "data": { "id": "lui-laden", "hProperties": { "id": "lui-laden" } }, "depth": 3, "value": "Lui laden" }, { "data": { "id": "compressie", "hProperties": { "id": "compressie" } }, "depth": 3, "value": "Compressie" }, { "data": { "id": "handmatige-chunks", "hProperties": { "id": "handmatige-chunks" } }, "depth": 3, "value": "Handmatige chunks" }, { "data": { "id": "dev-server", "hProperties": { "id": "dev-server" } }, "depth": 3, "value": "Dev server" }, { "data": { "id": "omgevingsvariabelen", "hProperties": { "id": "omgevingsvariabelen" } }, "depth": 3, "value": "Omgevingsvariabelen" }, { "data": { "id": "conclusie", "hProperties": { "id": "conclusie" } }, "depth": 2, "value": "Conclusie" }]; const readingTime = { "minutes": 7, "words": 2209, "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: "de-achtergrond", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#de-achtergrond", children: _jsx(_components.span, { children: "#" }) }), "De achtergrond"] }), "\n", _jsx(_components.p, { children: "We hebben drie belangrijkste frontend-projecten bij Logto: de inlogervaring, de Console en de live preview. Deze projecten zijn allemaal in TypeScript, React en SASS-modules; in totaal hebben ze ongeveer 100K regels code." }), "\n", _jsx(_components.p, { children: "We hielden van Parcel vanwege de eenvoud en zero-config setup. Ik kan me nog steeds de dag herinneren dat ik geschokt was hoe eenvoudig het was om een nieuw project op te zetten met Parcel. Je kunt gewoon 'parcel index.html' uitvoeren en boom, alle benodigde afhankelijkheden worden geïnstalleerd en het project draait. Als je een \"ervaren\" ontwikkelaar bent, kun je hetzelfde voelen in vergelijking met de oude dagen van het opzetten met Gulp en Webpack. Parcel is als een toverstaf." }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "De eenvoud van Parcel was de belangrijkste reden waarom we er zo lang bij bleven, ook al kon het soms grillig zijn. Bijvoorbeeld:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Parcel faalde soms bij het bundelen van het project omdat het sommige chunk-bestanden niet kon vinden die er eigenlijk waren." }), "\n", _jsx(_components.li, { children: "Het had enkele hacky configuraties nodig om te werken met onze monorepo-setup." }), "\n", _jsx(_components.li, { children: "Het ondersteunt MDX 3 niet native, dus moesten we een aangepaste transformer ervoor maken." }), "\n", _jsxs(_components.li, { children: ["Het ondersteunt geen handmatige chunks (vanaf het moment van schrijven is de functie voor handmatige chunks nog ", _jsx(_components.a, { href: "https://parceljs.org/features/code-splitting/#manual-shared-bundles", children: "in de experimentele fase" }), "), wat oké is voor de meeste omstandigheden, maar soms heb je het nodig."] }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Dus waarom besloten we naar iets anders te migreren?" }) }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "We zaten vast met Parcel 2.9.3, die in juni 2023 werd uitgebracht. Elke keer dat er daarna een nieuwe versie werd uitgebracht, probeerden we te upgraden, maar het mislukte altijd met bouwfouten." }), "\n", _jsx(_components.li, { children: "De nieuwste versie van Parcel was 2.12.0, uitgebracht in februari 2024. Hoewel er bijna dagelijks commits zijn, is er sindsdien geen nieuwe release gemaakt." }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Iemand heeft zelfs een discussie geopend om te vragen of ", _jsx(_components.a, { href: "https://github.com/parcel-bundler/parcel/discussions/9790", children: "Parcel dood is" }), ". Het officiële antwoord is nee, Parcel leeft nog, maar het bevindt zich in een staat van we-zijn-bezig-met-een-grote-herstructurering-en-hebben-geen-tijd-voor-kleine-releases. Voor ons is het als een \"eendengedood\": De nieuwste versie die we kunnen gebruiken is van meer dan een jaar geleden en we weten niet wanneer de volgende versie wordt uitgebracht. Het lijkt dood, het gedraagt zich als dood, dus het is dood voor ons."] }), "\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: "Vertrouw me, we hebben het geprobeerd." }), "\n", _jsxs(_components.h3, { id: "waarom-vite", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#waarom-vite", children: _jsx(_components.span, { children: "#" }) }), "Waarom Vite?"] }), "\n", _jsxs(_components.p, { children: ["We kenden ", _jsx(_components.a, { href: "https://vitejs.dev/", children: "Vite" }), " van ", _jsx(_components.a, { href: "https://vitest.dev/", children: "Vitest" }), ". Enkele maanden geleden waren we moe van Jest's ESM-ondersteuning (in tests) en wilden we iets nieuws proberen. Vitest won ons hart met de native ESM-ondersteuning en de Jest-compatibiliteit. Het heeft een geweldige ontwikkelaarservaring en het wordt aangedreven door Vite."] }), "\n", _jsxs(_components.h2, { id: "de-status-quo", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#de-status-quo", children: _jsx(_components.span, { children: "#" }) }), "De status quo"] }), "\n", _jsx(_components.p, { children: "Je hebt mogelijk andere instellingen in je project, maar meestal vind je plug-invervangingen naarmate het Vite-ecosysteem bloeit. Hier zijn onze configuraties op het moment van migratie:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Monorepo:" }), " We gebruiken PNPM (v9) werkruimten om onze monorepo te beheren."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Module:" }), " We gebruiken ESM-modules voor al onze projecten."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "TypeScript:" }), " We gebruiken TypeScript (v5.5.3) voor al onze projecten met padaliassen."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "React:" }), " We gebruiken React (v18.3.1) voor al onze frontend-projecten."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Styling:" }), " We gebruiken SASS-modules voor styling."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "SVG:" }), " We gebruiken SVG's als React-componenten."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "MDX:" }), " We hebben MDX met GitHub Flavored Markdown en Mermaid-ondersteuning."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Lui laden:" }), " We moeten enkele van onze pagina's en componenten lui laden."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Compressie:" }), " We produceren gecomprimeerde assets (gzip en brotli) voor onze productieversies."] }), "\n"] }), "\n", _jsxs(_components.h2, { id: "de-migratie", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#de-migratie", children: _jsx(_components.span, { children: "#" }) }), "De migratie"] }), "\n", _jsx(_components.p, { children: "We begonnen de migratie door een nieuw Vite-project te maken en ermee te spelen om te zien hoe het werkt. Het proces verliep soepel en de daadwerkelijke migratie duurde slechts een paar dagen." }), "\n", _jsxs(_components.h3, { id: "ondersteuning-uit-de-doos", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ondersteuning-uit-de-doos", children: _jsx(_components.span, { children: "#" }) }), "Ondersteuning uit de doos"] }), "\n", _jsx(_components.p, { children: "Vite heeft out-of-the-box ondersteuning voor monorepo, ESM, TypeScript, React en SASS. We hoefden alleen de benodigde plug-ins en configuraties te installeren om het te laten werken." }), "\n", _jsxs(_components.h3, { id: "padaliassen", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#padaliassen", children: _jsx(_components.span, { children: "#" }) }), "Padaliassen"] }), "\n", _jsxs(_components.p, { children: ["Vite heeft ingebouwde ondersteuning voor padaliassen, bijvoorbeeld in onze ", _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: ["We hoefden alleen dezelfde resolutie toe te voegen in onze ", _jsx(_components.code, { children: "vite.config.ts" }), ":"] }), "\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: ["Let op dat het vervangingspad een absoluut pad moet zijn, terwijl het relatief is ten opzichte van de projectroot. Als alternatief kun je de ", _jsx(_components.a, { href: "https://github.com/aleclarson/vite-tsconfig-paths", children: "vite-tsconfig-paths" }), " plugin gebruiken om de padaliassen uit de ", _jsx(_components.code, { children: "tsconfig.json" }), " te lezen."] }), "\n", _jsxs(_components.h3, { id: "react-fast-refresh-en-hmr", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#react-fast-refresh-en-hmr", children: _jsx(_components.span, { children: "#" }) }), "React Fast Refresh en HMR"] }), "\n", _jsxs(_components.p, { children: ["Hoewel Vite ingebouwde ondersteuning heeft voor HMR, is het vereist een plugin te installeren om React Fast Refresh mogelijk te maken. We gebruikten de ", _jsx(_components.a, { href: "https://github.com/vitejs/vite-plugin-react", children: "@vitejs/plugin-react" }), " plugin die wordt aangeboden door het Vite-team en een geweldige ondersteuning heeft voor React-functies zoals Fast Refresh:"] }), "\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-component", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#svg-als-react-component", children: _jsx(_components.span, { children: "#" }) }), "SVG als React-component"] }), "\n", _jsxs(_components.p, { children: ["We gebruiken de ", _jsx(_components.a, { href: "https://github.com/pd4d10/vite-plugin-svgr", children: "vite-plugin-svgr" }), " plugin om SVG's om te zetten naar React-componenten. Het is zo eenvoudig als het toevoegen van de plugin aan de Vite-configuratie:"] }), "\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: ["Echter, we hebben niet gespecificeerd onder welke conditie de SVG's moeten worden omgezet naar React-componenten, dus werden alle imports geconverteerd. De plugin biedt een betere standaardconfiguratie: alleen de SVG's omzetten die worden geïmporteerd met de ", _jsx(_components.code, { children: ".svg?react" }), " extensie. We hebben onze imports dienovereenkomstig bijgewerkt."] }), "\n", _jsxs(_components.h3, { id: "sass-modules", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#sass-modules", children: _jsx(_components.span, { children: "#" }) }), "SASS-modules"] }), "\n", _jsxs(_components.p, { children: ["Hoewel Vite ingebouwde ondersteuning heeft voor SASS-modules, is er één ding waar we rekening mee moeten houden: hoe de klassennamen worden geformatteerd. Het kan lastig zijn voor gebruikers en onze integratietests als de klassennamen niet consistent zijn geformatteerd. De één-regel configuratie in de ", _jsx(_components.code, { children: "vite.config.ts" }), " kan het probleem oplossen:"] }), "\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]', // Vervang door je eigen formaat\n },\n },\n});\n" }) }), "\n", _jsx(_components.p, { children: "Overigens hebben Parcel en Vite verschillende smaken voor het importeren van SASS-bestanden:" }), "\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: ["De ", _jsx(_components.code, { children: "* as" }), " syntaxis werkt echter in Vite, maar het zal het verlies van gemoduleerde klassennamen veroorzaken wanneer je dynamische sleutels gebruikt om toegang te krijgen tot het ", _jsx(_components.code, { children: "styles" }), " object. Bijvoorbeeld:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "const className = 'drukknop';\n// Dit zal niet werken zoals verwacht\nreturn ;\n" }) }), "\n", _jsxs(_components.h3, { id: "mdx-ondersteuning", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#mdx-ondersteuning", children: _jsx(_components.span, { children: "#" }) }), "MDX-ondersteuning"] }), "\n", _jsxs(_components.p, { children: ["Aangezien Vite Rollup onder de motorkap gebruikt, kunnen we de officiële ", _jsx(_components.a, { href: "https://mdxjs.com/packages/rollup/", children: "@mdx-js/rollup" }), " plugin gebruiken om MDX te ondersteunen evenals zijn plugins. De configuratie ziet er als volgt uit:"] }), "\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 // De `enforce: 'pre'` is vereist om de MDX plugin te laten werken\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: ["De ", _jsx(_components.code, { children: "remarkGfm" }), " plugin wordt gebruikt om GitHub Flavored Markdown te ondersteunen, en de ", _jsx(_components.code, { children: "rehypeMdxCodeProps" }), " plugin wordt gebruikt om de props door te geven aan de codeblokken in de MDX-bestanden zoals wat ", _jsx(_components.a, { href: "https://docusaurus.io/docs/markdown-features/code-blocks#code-title", children: "Docusaurus doet" }), "."] }), "\n", _jsxs(_components.h3, { id: "mermaid-ondersteuning-binnen-mdx", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#mermaid-ondersteuning-binnen-mdx", children: _jsx(_components.span, { children: "#" }) }), "Mermaid-ondersteuning binnen MDX"] }), "\n", _jsx(_components.p, { children: "We willen graag Mermaid-diagrammen gebruiken in onze MDX-bestanden als andere programmeertalen. Het gebruik zou net zo eenvoudig moeten zijn als andere codeblokken:" }), "\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: "Moet gerenderd worden 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: "Aangezien onze app lichte en donkere thema's ondersteunt, hebben we een beetje gecodeerd om de Mermaid-diagrammen te laten werken met het donkere thema. Een React-component is gemaakt:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import { useEffect } from 'react';\nimport useTheme from '@/hooks/use-theme';\n\n// Misschien elders gedefinieerd\nenum Thema {\n Donker = 'donker',\n Licht = 'licht',\n}\n\ntype Props = {\n readonly children: string;\n};\n\nconst themaNaarMermaidThema = Object.freeze({\n [Thema.Donker]: 'donker',\n [Thema.Licht]: 'standaard',\n} voldoet aan Record);\n\nexport default function Mermaid({ children }: Props) {\n const thema = useTheme();\n\n useEffect(() => {\n (async () => {\n const { default: mermaid } = await import('mermaid');\n\n mermaid.initialize({\n startOnLoad: false,\n theme: themaNaarMermaidThema[thema],\n securityLevel: 'loose',\n });\n await mermaid.run();\n })();\n }, [thema]);\n\n return

{children}

;\n}\n" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "useTheme" }), " is een aangepaste hook om het huidige thema uit de context te halen. De ", _jsx(_components.code, { children: "mermaid" }), " bibliotheek wordt asynchroon geïmporteerd om de laadtijd voor de initiële pagina te verminderen."] }), "\n", _jsx(_components.p, { children: "Voor het codeblok in het MDX-bestand hebben we een uniforme component om de taak uit te voeren:" }), "\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 [, taal] = /language-(\\w+)/.exec(String(className ?? '')) ?? [];\n\n if (taal === 'mermaid') {\n return {String(children).trimEnd()};\n }\n\n // Andere codeblokken hier\n return {String(children).trimEnd()};\n}\n" }) }), "\n", _jsx(_components.p, { children: "Ten slotte definiëren we de MDX-provider als volgt:" }), "\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 kinderen: ReactNode;\n};\n\nexport default function MdxProvider({ kinderen }: Props) {\n return (\n ` niet kan worden vervangen door een\n // aangepast component nu.\n // Zie: https://github.com/orgs/mdx-js/discussions/2231#discussioncomment-4729474\n Code,\n // ...andere componenten\n }}\n >\n {kinderen}\n \n );\n}\n" }) }), "\n", _jsxs(_components.h3, { id: "lui-laden", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#lui-laden", children: _jsx(_components.span, { children: "#" }) }), "Lui laden"] }), "\n", _jsx(_components.p, { children: "Dit is niet specifiek voor Vite, maar het is toch vermeldenswaard aangezien we onze pagina's hebben geüpdatet om tijdens de migratie lui geladen te worden en er is niets gebroken nadien." }), "\n", _jsxs(_components.p, { children: ["React heeft een ingebouwde ", _jsx(_components.code, { children: "React.lazy" }), " functie om componenten lui te laden. Echter, het kan enkele problemen veroorzaken wanneer je snel iteraties uitvoert. We hebben een kleine bibliotheek gemaakt genaamd ", _jsx(_components.a, { href: "https://github.com/silverhand-io/react-safe-lazy", children: "react-safe-lazy" }), " om de problemen op te lossen. Het is een drop-in vervanging voor ", _jsx(_components.code, { children: "React.lazy" }), " en een gedetailleerde uitleg is te vinden in deze ", _jsx(_components.a, { href: "https://blog.logto.io/react-safe-lazy/?ref=post-vite", children: "blogpost" }), "."] }), "\n", _jsxs(_components.h3, { id: "compressie", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#compressie", children: _jsx(_components.span, { children: "#" }) }), "Compressie"] }), "\n", _jsxs(_components.p, { children: ["Er is een nette plugin genaamd ", _jsx(_components.a, { href: "https://github.com/vbenjs/vite-plugin-compression", children: "vite-plugin-compression" }), " om gecomprimeerde assets te produceren. Het ondersteunt zowel gzip als brotli compressie. De configuratie is eenvoudig:"] }), "\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 // Standaard gzip\n viteCompression(),\n // Brotli\n viteCompression({ algorithm: 'brotliCompress' }),\n ],\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "handmatige-chunks", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#handmatige-chunks", children: _jsx(_components.span, { children: "#" }) }), "Handmatige chunks"] }), "\n", _jsxs(_components.p, { children: ["Een geweldige functie van Vite (of de onderliggende Rollup) is de handmatige chunks. Terwijl ", _jsx(_components.code, { children: "React.lazy" }), " wordt gebruikt voor het lui laden van componenten, kunnen we meer controle hebben over de chunks door de handmatige chunks te specificeren om te beslissen welke componenten of modules samen moeten worden gebundeld."] }), "\n", _jsxs(_components.p, { children: ["Bijvoorbeeld, we kunnen eerst ", _jsx(_components.a, { href: "https://github.com/KusStar/vite-bundle-visualizer", children: "vite-bundle-visualizer" }), " gebruiken om de bundelgrootte en afhankelijkheden te analyseren. Vervolgens kunnen we een geschikte functie schrijven om de chunks te splitsen:"] }), "\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 // Dynamisch controleren of de module React-gerelateerde afhankelijkheden heeft\n const heeftReactAfhankelijkheid = (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 // Opgelet: React-gerelateerde pakketten moeten samen worden gebundeld, anders kan het runtime fouten veroorzaken\n if (id.includes('/node_modules/') && heeftReactAfhankelijkheid(id)) {\n return 'react';\n }\n\n // Voeg je grote pakketten toe aan de lijst\n for (const grootPakket of ['mermaid', 'elkjs']) {\n if (id.includes(`/node_modules/${grootPakket}/`)) {\n return grootPakket;\n }\n }\n\n // Alle andere pakketten in de 'node_modules'-map worden samen gebundeld\n if (id.includes('/node_modules/')) {\n return 'leveranciers';\n }\n\n // Gebruik het standaardgedrag voor andere modules\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: ["In tegenstelling tot de productiebuild, Vite zal je broncode NIET bundelen in de ontwikkelingsmodus (inclusief gelinkte afhankelijkheden in dezelfde monorepo) en elke module als een bestand behandelen. Voor ons zal de browser honderden modules laden voor de eerste keer, wat er gek uitziet maar in de meeste gevallen eigenlijk in orde is. Je kunt de discussie ", _jsx(_components.a, { href: "https://github.com/vitejs/vite/discussions/4803", children: "hier" }), " zien."] }), "\n", _jsxs(_components.p, { children: ["Als dit een probleem voor jou is, is een alternatieve-maar-niet-perfect oplossing om de gelinkte afhankelijkheden op te sommen in de ", _jsx(_components.code, { children: "optimizeDeps" }), " optie van de ", _jsx(_components.code, { children: "vite.config.ts" }), ":"] }), "\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: "Dit zal de gelinkte afhankelijkheden \"voorbundelen\" en de dev server sneller maken. Het nadeel is dat HMR mogelijk niet werkt zoals verwacht voor de gelinkte afhankelijkheden." }), "\n", _jsxs(_components.p, { children: ["Daarnaast gebruiken we een proxy die de statische bestanden in productie bedient en de verzoeken doorstuurt naar de Vitest-server in ontwikkeling. We hebben enkele specifieke poorten geconfigureerd om conflicten te vermijden, en het is ook gemakkelijk in te stellen in de ", _jsx(_components.code, { children: "vite.config.ts" }), ":"] }), "\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: "omgevingsvariabelen", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#omgevingsvariabelen", children: _jsx(_components.span, { children: "#" }) }), "Omgevingsvariabelen"] }), "\n", _jsxs(_components.p, { children: ["In tegenstelling tot Parcel, gebruikt Vite een moderne aanpak om omgevingsvariabelen te verwerken door gebruik te maken van ", _jsx(_components.code, { children: "import.meta.env" }), ". Het zal automatisch de ", _jsx(_components.code, { children: ".env" }), " bestanden laden en de variabelen in de code vervangen. Echter, het vereist dat alle omgevingsvariabelen worden geprefixeerd met ", _jsx(_components.code, { children: "VITE_" }), " (configureerbaar)."] }), "\n", _jsxs(_components.p, { children: ["Toen we Parcel gebruikten, verving het simpelweg de ", _jsx(_components.code, { children: "process.env" }), " variabelen zonder het prefix te controleren. Dus we hebben een workaround bedacht door het ", _jsx(_components.code, { children: "define" }), " veld te gebruiken om de migratie gemakkelijker te maken:"] }), "\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: ["Dit stelt ons in staat om geleidelijk het prefix toe te voegen aan de omgevingsvariabelen en het ", _jsx(_components.code, { children: "define" }), " veld te verwijderen."] }), "\n", _jsxs(_components.h2, { id: "conclusie", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#conclusie", children: _jsx(_components.span, { children: "#" }) }), "Conclusie"] }), "\n", _jsx(_components.p, { children: "Dat is het! We zijn erin geslaagd om onze drie frontend-projecten te migreren van Parcel naar Vite, en we hopen dat dit korte verhaal je helpt bij jouw migratie. Hier is hoe de configuratie er uiteindelijk uitziet:" }), "\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 // Logica voor handmatige chunks\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 };