"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "bakgrundshistorien", "hProperties": { "id": "bakgrundshistorien" } }, "depth": 2, "value": "Bakgrundshistorien" }, { "data": { "id": "varför-vite", "hProperties": { "id": "varför-vite" } }, "depth": 3, "value": "Varför Vite?" }, { "data": { "id": "nuvarande-läget", "hProperties": { "id": "nuvarande-läget" } }, "depth": 2, "value": "Nuvarande läget" }, { "data": { "id": "migrationen", "hProperties": { "id": "migrationen" } }, "depth": 2, "value": "Migrationen" }, { "data": { "id": "stöd-out-of-the-box", "hProperties": { "id": "stöd-out-of-the-box" } }, "depth": 3, "value": "Stöd out-of-the-box" }, { "data": { "id": "sökvägsalias", "hProperties": { "id": "sökvägsalias" } }, "depth": 3, "value": "Sökvägsalias" }, { "data": { "id": "react-fast-refresh-och-hmr", "hProperties": { "id": "react-fast-refresh-och-hmr" } }, "depth": 3, "value": "React Fast Refresh och HMR" }, { "data": { "id": "svg-som-react-komponent", "hProperties": { "id": "svg-som-react-komponent" } }, "depth": 3, "value": "SVG som React komponent" }, { "data": { "id": "sass-moduler", "hProperties": { "id": "sass-moduler" } }, "depth": 3, "value": "SASS-moduler" }, { "data": { "id": "mdx-stöd", "hProperties": { "id": "mdx-stöd" } }, "depth": 3, "value": "MDX-stöd" }, { "data": { "id": "mermaid-stöd-inom-mdx", "hProperties": { "id": "mermaid-stöd-inom-mdx" } }, "depth": 3, "value": "Mermaid-stöd inom MDX" }, { "data": { "id": "lazy-loading", "hProperties": { "id": "lazy-loading" } }, "depth": 3, "value": "Lazy loading" }, { "data": { "id": "komprimering", "hProperties": { "id": "komprimering" } }, "depth": 3, "value": "Komprimering" }, { "data": { "id": "manuella-chunkar", "hProperties": { "id": "manuella-chunkar" } }, "depth": 3, "value": "Manuella chunkar" }, { "data": { "id": "utvecklingsserver", "hProperties": { "id": "utvecklingsserver" } }, "depth": 3, "value": "Utvecklingsserver" }, { "data": { "id": "miljövariabler", "hProperties": { "id": "miljövariabler" } }, "depth": 3, "value": "Miljövariabler" }, { "data": { "id": "slutsats", "hProperties": { "id": "slutsats" } }, "depth": 2, "value": "Slutsats" }]; const readingTime = { "minutes": 7, "words": 2067, "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: "bakgrundshistorien", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#bakgrundshistorien", children: _jsx(_components.span, { children: "#" }) }), "Bakgrundshistorien"] }), "\n", _jsx(_components.p, { children: "Vi har tre huvudsakliga frontendprojekt på Logto: inloggningsupplevelsen, konsolen och liveförhandsvisningen. Dessa projekt är alla i TypeScript, React och SASS-moduler; totalt har de runt 100K kodrader." }), "\n", _jsxs(_components.p, { children: ["Vi älskade Parcel för dess enkelhet och nollkonfigurationsinställning. Jag kan fortfarande minnas dagen när jag blev chockad över hur enkelt det var att sätta upp ett nytt projekt med Parcel. Du kan bara köra ", _jsx(_components.code, { children: "parcel index.html" }), " och boom, alla nödvändiga beroenden är installerade och projektet körs. Om du är en \"erfaren\" utvecklare kan du känna samma sak och jämföra det med de gamla dagarna av att ställa in med Gulp och Webpack. Parcel är som en magisk trollstav."] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Parcels enkelhet var den främsta anledningen till att vi stannade med det så länge, även om det kunde vara lynnigt ibland. Till exempel:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Parcel misslyckades ibland med att paketera projektet eftersom det inte kunde hitta några chunkfiler som faktiskt fanns där." }), "\n", _jsx(_components.li, { children: "Det behövdes några krångliga konfigurationer för att få det att fungera med vår monorepo-inställning." }), "\n", _jsx(_components.li, { children: "Det stöder inte MDX 3 inhemskt, så vi var tvungna att skapa en anpassad omvandlare för det." }), "\n", _jsxs(_components.li, { children: ["Det stöder inte manuella chunkar (vid tidpunkten för skrivandet är funktionen för manuella chunkar fortfarande ", _jsx(_components.a, { href: "https://parceljs.org/features/code-splitting/#manual-shared-bundles", children: "i experimentstadiet" }), "), vilket är okej i de flesta fall, men ibland behöver du det."] }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Så varför beslutade vi oss för att migrera till något annat?" }) }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Vi satt fast med Parcel 2.9.3, som släpptes i juni 2023. Varje gång en ny version släpptes efter det försökte vi uppgradera, men det misslyckades alltid med byggfel." }), "\n", _jsx(_components.li, { children: "Den senaste versionen av Parcel var 2.12.0, släppt i februari 2024. Trots att det har nästan dagliga commits har ingen ny release gjorts sedan dess." }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Någon öppnade till och med en diskussion för att fråga ", _jsx(_components.a, { href: "https://github.com/parcel-bundler/parcel/discussions/9790", children: "om Parcel är död" }), ". Det officiella svaret är nej, Parcel är fortfarande vid liv, men det är i ett vi-jobbar-på-en-stor-omvandling-och-har-inte-tid-för-mindre-releaser tillstånd. För oss är det som en \"ankdöd\": Den senaste versionen vi kan använda är från mer än ett år sedan, och vi vet inte när nästa version kommer att släppas. Det ser ut som om det är dött, det agerar som om det är dött, så det är dött för oss."] }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/parcel_upgrades_238745d26d.png", alt: "Parcel uppgraderings pull requests" }) }), "\n", _jsx("center", { className: "alt", children: "Tro mig, vi har försökt." }), "\n", _jsxs(_components.h3, { id: "varför-vite", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#varför-vite", children: _jsx(_components.span, { children: "#" }) }), "Varför Vite?"] }), "\n", _jsxs(_components.p, { children: ["Vi kände till ", _jsx(_components.a, { href: "https://vitejs.dev/", children: "Vite" }), " från ", _jsx(_components.a, { href: "https://vitest.dev/", children: "Vitest" }), ". För flera månader sedan var vi trötta på Jests ESM-stöd (i tester) och ville prova något nytt. Vitest vann våra hjärtan med det inhemska ESM-stödet och Jest-kompatibilitet. Det har en fantastisk utvecklarupplevelse och drivs av Vite."] }), "\n", _jsxs(_components.h2, { id: "nuvarande-läget", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#nuvarande-läget", children: _jsx(_components.span, { children: "#" }) }), "Nuvarande läget"] }), "\n", _jsx(_components.p, { children: "Du kanske har olika inställningar i ditt projekt, men vanligtvis hittar du pluginersättningar då Vite-ekosystemet blommar. Här är våra inställningar vid migrationstillfället:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Monorepo:" }), " Vi använder PNPM (v9) arbetsytor för att hantera vår monorepo."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Modul:" }), " Vi använder ESM-moduler för alla våra projekt."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "TypeScript:" }), " Vi använder TypeScript (v5.5.3) för alla våra projekt med sökvägsalias."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "React:" }), " Vi använder React (v18.3.1) för alla våra frontendprojekt."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Stil:" }), " Vi använder SASS-moduler för styling."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "SVG:" }), " Vi använder SVGs som React-komponenter."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "MDX:" }), " Vi har MDX med GitHub Flavored Markdown och Mermaid-stöd."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Lazy loading:" }), " Vi behöver lazy load vissa av våra sidor och komponenter."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Komprimering:" }), " Vi producerar komprimerade tillgångar (gzip och brotli) för våra produktionsbyggnader."] }), "\n"] }), "\n", _jsxs(_components.h2, { id: "migrationen", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#migrationen", children: _jsx(_components.span, { children: "#" }) }), "Migrationen"] }), "\n", _jsx(_components.p, { children: "Vi började migrationen genom att skapa ett nytt Vite-projekt och leka runt med det för att se hur det fungerar. Processen var smidig och den riktiga migrationen tog bara några dagar." }), "\n", _jsxs(_components.h3, { id: "stöd-out-of-the-box", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#stöd-out-of-the-box", children: _jsx(_components.span, { children: "#" }) }), "Stöd out-of-the-box"] }), "\n", _jsx(_components.p, { children: "Vite har out-of-the-box stöd för monorepo, ESM, TypeScript, React och SASS. Vi behövde bara installera de nödvändiga plugins och konfigurationer för att få det att fungera." }), "\n", _jsxs(_components.h3, { id: "sökvägsalias", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#sökvägsalias", children: _jsx(_components.span, { children: "#" }) }), "Sökvägsalias"] }), "\n", _jsxs(_components.p, { children: ["Vite har inbyggt stöd för sökvägsalias, till exempel, i vår ", _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: ["Vi behövde bara lägga till samma upplösning i vår ", _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: ["Observera att ersättningsvägen bör vara en absolut sökväg, medan den är relativ till projektroten. Alternativt kan du använda pluginen ", _jsx(_components.a, { href: "https://github.com/aleclarson/vite-tsconfig-paths", children: "vite-tsconfig-paths" }), " för att läsa sökvägsaliasen från ", _jsx(_components.code, { children: "tsconfig.json" }), "."] }), "\n", _jsxs(_components.h3, { id: "react-fast-refresh-och-hmr", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#react-fast-refresh-och-hmr", children: _jsx(_components.span, { children: "#" }) }), "React Fast Refresh och HMR"] }), "\n", _jsxs(_components.p, { children: ["Även om Vite har inbyggt stöd för HMR, krävs det att installera en plugin för att aktivera React Fast Refresh. Vi använde pluginen ", _jsx(_components.a, { href: "https://github.com/vitejs/vite-plugin-react", children: "@vitejs/plugin-react" }), " som tillhandahålls av Vite-teamet och har utmärkt stöd för React-funktioner som 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-som-react-komponent", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#svg-som-react-komponent", children: _jsx(_components.span, { children: "#" }) }), "SVG som React komponent"] }), "\n", _jsxs(_components.p, { children: ["Vi använder pluginen ", _jsx(_components.a, { href: "https://github.com/pd4d10/vite-plugin-svgr", children: "vite-plugin-svgr" }), " för att konvertera SVGs till React-komponenter. Det är så enkelt som att lägga till pluginen i Vite-konfigurationen:"] }), "\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: ["Vi specificerade dock inte under vilken villkor SVG:erna skulle konverteras till React-komponenter, så alla importer konverterades. Pluginet erbjuder en bättre standardkonfiguration: konvertera endast SVG:er som importeras med ", _jsx(_components.code, { children: ".svg?react" }), "-tillägget. Vi uppdaterade våra importer därefter."] }), "\n", _jsxs(_components.h3, { id: "sass-moduler", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#sass-moduler", children: _jsx(_components.span, { children: "#" }) }), "SASS-moduler"] }), "\n", _jsxs(_components.p, { children: ["Även om Vite har inbyggt stöd för SASS-moduler, finns det en sak vi behöver bry oss om: hur klassnamnen är formaterade. Det kan vara besvärligt för användare och våra integrationstester om klassnamnen inte är formaterade konsekvent. En enkel rad konfiguration i ", _jsx(_components.code, { children: "vite.config.ts" }), " kan lösa problemet:"] }), "\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]', // Ersätt med ditt eget format\n },\n },\n});\n" }) }), "\n", _jsx(_components.p, { children: "Förresten, Parcel och Vite har olika sätt att importera SASS-filer:" }), "\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: ["Syntaxen ", _jsx(_components.code, { children: "* as" }), ", fungerar dock i Vite, men det kommer att orsaka förlust av modulariserade klassnamn när du använder dynamiska nycklar för att komma åt ", _jsx(_components.code, { children: "styles" }), "-objektet. Till exempel:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "const className = 'button';\n// Detta kommer inte att fungera som förväntat\nreturn ;\n" }) }), "\n", _jsxs(_components.h3, { id: "mdx-stöd", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#mdx-stöd", children: _jsx(_components.span, { children: "#" }) }), "MDX-stöd"] }), "\n", _jsxs(_components.p, { children: ["Eftersom Vite utnyttjar Rollup under huven, kan vi använda det officiella pluginet ", _jsx(_components.a, { href: "https://mdxjs.com/packages/rollup/", children: "@mdx-js/rollup" }), " för att stödja MDX såväl som dess plugins. Konfigurationen ser ut så här:"] }), "\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 // `enforce: 'pre'` krävs för att pluginet MDX ska fungera\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: ["Pluginet ", _jsx(_components.code, { children: "remarkGfm" }), " används för att stödja GitHub Flavored Markdown, och pluginet ", _jsx(_components.code, { children: "rehypeMdxCodeProps" }), " används för att överföra props till kodblocken i MDX-filerna som ", _jsx(_components.a, { href: "https://docusaurus.io/docs/markdown-features/code-blocks#code-title", children: "Docusaurus gör" }), "."] }), "\n", _jsxs(_components.h3, { id: "mermaid-stöd-inom-mdx", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#mermaid-stöd-inom-mdx", children: _jsx(_components.span, { children: "#" }) }), "Mermaid-stöd inom MDX"] }), "\n", _jsx(_components.p, { children: "Vi skulle vilja använda Mermaid-diagram i våra MDX-filer som andra programmeringsspråk. Användningen bör vara lika enkel som andra kodblock:" }), "\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: "Bör visas som:" }), "\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: "Eftersom vår app stöder ljusa och mörka teman, kodade vi lite för att få Mermaid-diagrammen att fungera med det mörka temat. En React-komponent skapas:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import { useEffect } from 'react';\nimport useTheme from '@/hooks/use-theme';\n\n// Kanske definierad någon annanstans\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" }), " är en anpassad hook för att få det aktuella temat från kontexten. Biblioteket ", _jsx(_components.code, { children: "mermaid" }), " importeras asynkront för att minska laddningsstorleken för den initiala sidladdningen."] }), "\n", _jsx(_components.p, { children: "För kodblocket i MDX-filen har vi en enhetlig komponent för att göra jobbet:" }), "\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 // Andra kodblock går här\n return {String(children).trimEnd()};\n}\n" }) }), "\n", _jsx(_components.p, { children: "Slutligen definierar vi MDX-leverantören enligt följande:" }), "\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 ` inte kan bytas ut med en\n // anpassad komponent nu.\n // Se: https://github.com/orgs/mdx-js/discussions/2231#discussioncomment-4729474\n Code,\n // ...andra komponenter\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: "Detta är inte något speciellt för Vite, men det är ändå värt att nämna eftersom vi uppdaterade våra sidor för att använda lazy loading under migrationen, och inget bröt efter det." }), "\n", _jsxs(_components.p, { children: ["React har en inbyggd funktion ", _jsx(_components.code, { children: "React.lazy" }), " för att lazy load komponenter. Däremot kan det orsaka vissa problem när du itererar snabbt. Vi skapade ett litet bibliotek kallat ", _jsx(_components.a, { href: "https://github.com/silverhand-io/react-safe-lazy", children: "react-safe-lazy" }), " för att lösa problemen. Det är en direkt ersättning för ", _jsx(_components.code, { children: "React.lazy" }), " och en detaljerad förklaring finns i detta ", _jsx(_components.a, { href: "https://blog.logto.io/react-safe-lazy/?ref=post-vite", children: "blogginlägg" }), "."] }), "\n", _jsxs(_components.h3, { id: "komprimering", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#komprimering", children: _jsx(_components.span, { children: "#" }) }), "Komprimering"] }), "\n", _jsxs(_components.p, { children: ["Det finns en cool plugin vid namn ", _jsx(_components.a, { href: "https://github.com/vbenjs/vite-plugin-compression", children: "vite-plugin-compression" }), " för att producera komprimerade tillgångar. Den stöder både gzip och brotli-komprimering. Konfigurationen är enkel:"] }), "\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 som standard\n viteCompression(),\n // Brotli\n viteCompression({ algorithm: 'brotliCompress' }),\n ],\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "manuella-chunkar", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#manuella-chunkar", children: _jsx(_components.span, { children: "#" }) }), "Manuella chunkar"] }), "\n", _jsxs(_components.p, { children: ["En fantastisk funktion hos Vite (eller den underliggande Rollup) är de manuella chunkarna. Medan ", _jsx(_components.code, { children: "React.lazy" }), " används för lazy loading komponenter, kan vi ha mer kontroll över chunkarna genom att specificera de manuella chunkarna för att bestämma vilka komponenter eller moduler som ska packas ihop."] }), "\n", _jsxs(_components.p, { children: ["Till exempel kan vi först använda ", _jsx(_components.a, { href: "https://github.com/KusStar/vite-bundle-visualizer", children: "vite-bundle-visualizer" }), " för att analysera buntstorleken och beroenden. Sedan kan vi skriva en korrekt funktion för att dela chunkarna:"] }), "\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 // Dynamiskt kontrollera om modulen har React-relaterade beroenden\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 // Varning: React-relaterade paket bör samlas ihop annars kan det orsaka runtime-fel\n if (id.includes('/node_modules/') && hasReactDependency(id)) {\n return 'react';\n }\n\n // Lägg dina stora paket till listan\n for (const largePackage of ['mermaid', 'elkjs']) {\n if (id.includes(`/node_modules/${largePackage}/`)) {\n return largePackage;\n }\n }\n\n // Alla andra paket i `node_modules`-mappen kommer att packas ihop\n if (id.includes('/node_modules/')) {\n return 'vendors';\n }\n\n // Använd standardbeteendet för andra moduler\n },\n },\n },\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "utvecklingsserver", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#utvecklingsserver", children: _jsx(_components.span, { children: "#" }) }), "Utvecklingsserver"] }), "\n", _jsxs(_components.p, { children: ["Till skillnad från produktionsbyggnaden, kommer Vite INTE att paketera din källkod i utvecklingsläget (inklusive länkade beroenden i samma monorepo) och behandlar varje modul som en separat fil. För oss kommer webbläsaren att ladda hundratals moduler för första gången, vilket ser galet ut men det är faktiskt bra i de flesta fall. Du kan se diskussionen ", _jsx(_components.a, { href: "https://github.com/vitejs/vite/discussions/4803", children: "här" }), "."] }), "\n", _jsxs(_components.p, { children: ["Om det är något för dig, en alternativ-men-inte- perfekt lösning är att lista de länkade beroenden i ", _jsx(_components.code, { children: "optimizeDeps" }), "-alternativet i ", _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: "Detta kommer \"för-bunta\" de länkade beroenden och göra utvecklingsservern snabbare. Fallgropen är att HMR kanske inte fungerar som förväntat för de länkade beroenden." }), "\n", _jsxs(_components.p, { children: ["Dessutom använder vi en proxy som serverar de statiska filerna i produktion och proxyerar förfrågningar till Vitest-servern i utveckling. Vi har några specifika portar konfigurerade för att undvika konflikter, och det är också lätt att ställa in i ", _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: "miljövariabler", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#miljövariabler", children: _jsx(_components.span, { children: "#" }) }), "Miljövariabler"] }), "\n", _jsxs(_components.p, { children: ["Till skillnad från Parcel, använder Vite ett modernt sätt att hantera miljövariabler genom att använda ", _jsx(_components.code, { children: "import.meta.env" }), ". Det kommer automatiskt att ladda ", _jsx(_components.code, { children: ".env" }), "-filerna och ersätta variablerna i koden. Dock krävs det att alla miljövariabler prefixas med ", _jsx(_components.code, { children: "VITE_" }), " (konfigurerbart)."] }), "\n", _jsxs(_components.p, { children: ["Medan vi använde Parcel, ersatte det helt enkelt ", _jsx(_components.code, { children: "process.env" }), "-variablerna utan att kontrollera prefixet. Så vi kom på en lösning med hjälp av ", _jsx(_components.code, { children: "define" }), " för att göra migrationen enklare:"] }), "\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: ["Detta gör att vi gradvis kan lägga till prefixet till miljövariablerna och ta bort fältet ", _jsx(_components.code, { children: "define" }), "."] }), "\n", _jsxs(_components.h2, { id: "slutsats", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#slutsats", children: _jsx(_components.span, { children: "#" }) }), "Slutsats"] }), "\n", _jsx(_components.p, { children: "Det var det! Vi har framgångsrikt migrerat våra tre frontendprojekt från Parcel till Vite, och hoppas denna korta historia kan hjälpa dig med din migration. Här är hur konfigurationen ser ut i slutet:" }), "\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 // Logik för manuella chunkar\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 };