"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "la-storia-di-fondo", "hProperties": { "id": "la-storia-di-fondo" } }, "depth": 2, "value": "La storia di fondo" }, { "data": { "id": "perché-vite", "hProperties": { "id": "perché-vite" } }, "depth": 3, "value": "Perché Vite?" }, { "data": { "id": "lo-stato-attuale", "hProperties": { "id": "lo-stato-attuale" } }, "depth": 2, "value": "Lo stato attuale" }, { "data": { "id": "la-migrazione", "hProperties": { "id": "la-migrazione" } }, "depth": 2, "value": "La migrazione" }, { "data": { "id": "supporto-pronto-alluso", "hProperties": { "id": "supporto-pronto-alluso" } }, "depth": 3, "value": "Supporto pronto all'uso" }, { "data": { "id": "alias-di-percorso", "hProperties": { "id": "alias-di-percorso" } }, "depth": 3, "value": "Alias di percorso" }, { "data": { "id": "react-fast-refresh-e-hmr", "hProperties": { "id": "react-fast-refresh-e-hmr" } }, "depth": 3, "value": "React Fast Refresh e HMR" }, { "data": { "id": "svg-come-componente-react", "hProperties": { "id": "svg-come-componente-react" } }, "depth": 3, "value": "SVG come componente React" }, { "data": { "id": "moduli-sass", "hProperties": { "id": "moduli-sass" } }, "depth": 3, "value": "Moduli SASS" }, { "data": { "id": "supporto-mdx", "hProperties": { "id": "supporto-mdx" } }, "depth": 3, "value": "Supporto MDX" }, { "data": { "id": "supporto-per-mermiad-allinterno-di-mdx", "hProperties": { "id": "supporto-per-mermiad-allinterno-di-mdx" } }, "depth": 3, "value": "Supporto per Mermiad all'interno di MDX" }, { "data": { "id": "caricamento-lazy", "hProperties": { "id": "caricamento-lazy" } }, "depth": 3, "value": "Caricamento lazy" }, { "data": { "id": "compressione", "hProperties": { "id": "compressione" } }, "depth": 3, "value": "Compressione" }, { "data": { "id": "chunk-manuali", "hProperties": { "id": "chunk-manuali" } }, "depth": 3, "value": "Chunk manuali" }, { "data": { "id": "server-di-sviluppo", "hProperties": { "id": "server-di-sviluppo" } }, "depth": 3, "value": "Server di sviluppo" }, { "data": { "id": "variabili-dambiente", "hProperties": { "id": "variabili-dambiente" } }, "depth": 3, "value": "Variabili d'ambiente" }, { "data": { "id": "conclusione", "hProperties": { "id": "conclusione" } }, "depth": 2, "value": "Conclusione" }]; const readingTime = { "minutes": 7, "words": 2193, "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: "la-storia-di-fondo", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#la-storia-di-fondo", children: _jsx(_components.span, { children: "#" }) }), "La storia di fondo"] }), "\n", _jsx(_components.p, { children: "Abbiamo tre principali progetti frontend in Logto: l'esperienza di accesso, la Console e l'anteprima live. Questi progetti sono tutti in TypeScript, React, e moduli SASS; in totale, contano circa 100K linee di codice." }), "\n", _jsxs(_components.p, { children: ["Abbiamo amato Parcel per la sua semplicità e la configurazione zero. Ricordo ancora il giorno in cui rimasi sbalordito da quanto fosse facile configurare un nuovo progetto con Parcel. Puoi semplicemente eseguire ", _jsx(_components.code, { children: "parcel index.html" }), " e boom, tutte le dipendenze necessarie vengono installate e il progetto è in esecuzione. Se sei un sviluppatore \"esperto\", potresti provare la stessa sensazione paragonandolo ai vecchi tempi dell'impostazione con Gulp e Webpack. Parcel è come una bacchetta magica."] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "La semplicità di Parcel è stata la ragione principale per cui siamo rimasti con lui per così tanto tempo, anche se a volte può essere capriccioso. Ad esempio:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Parcel a volte non riusciva a creare il pacchetto del progetto perché non riusciva a trovare alcuni file chunk che erano effettivamente lì." }), "\n", _jsx(_components.li, { children: "Aveva bisogno di alcune configurazioni hacky per funzionare con la nostra configurazione monorepo." }), "\n", _jsx(_components.li, { children: "Non supporta MDX 3 nativamente, quindi abbiamo dovuto creare un trasformatore personalizzato per esso." }), "\n", _jsxs(_components.li, { children: ["Non supporta i chunk manuali (al momento della stesura, la funzione dei chunk manuali è ancora ", _jsx(_components.a, { href: "https://parceljs.org/features/code-splitting/#manual-shared-bundles", children: "in fase sperimentale" }), "), che va bene nella maggior parte dei casi, ma a volte ne hai bisogno."] }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Allora perché abbiamo deciso di migrare a qualcos'altro?" }) }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Eravamo bloccati con Parcel 2.9.3, che è stato rilasciato a giugno 2023. Ogni volta che veniva rilasciata una nuova versione dopo quella, cercavamo di aggiornarci, ma falliva sempre con errori di build." }), "\n", _jsx(_components.li, { children: "L'ultima versione di Parcel era 2.12.0, rilasciata a febbraio 2024. Sebbene vi siano quasi commit giornalieri, non è stata rilasciata nessuna nuova versione da allora." }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Qualcuno ha persino aperto una discussione per chiedere ", _jsx(_components.a, { href: "https://github.com/parcel-bundler/parcel/discussions/9790", children: "se Parcel è morto" }), ". La risposta ufficiale è no, Parcel è ancora vivo, ma è in uno stato di stiamo-lavorando-su-una-grande-rifattorizzazione-e-non-c'è-tempo-per-le-rilasci-minori. Per noi, è come una \"morte dell'anatra\": l'ultima versione che possiamo usare risale a più di un anno fa, e non sappiamo quando sarà rilasciata la prossima versione. Sembra che sia morto, si comporta come se fosse morto, quindi per noi è morto."] }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/parcel_upgrades_238745d26d.png", alt: "Richieste di pull per l'aggiornamento di Parcel" }) }), "\n", _jsx("center", { className: "alt", children: "Fidati di me, ci abbiamo provato." }), "\n", _jsxs(_components.h3, { id: "perché-vite", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#perché-vite", children: _jsx(_components.span, { children: "#" }) }), "Perché Vite?"] }), "\n", _jsxs(_components.p, { children: ["Conoscevamo ", _jsx(_components.a, { href: "https://vitejs.dev/", children: "Vite" }), " da ", _jsx(_components.a, { href: "https://vitest.dev/", children: "Vitest" }), ". Alcuni mesi fa, ci siamo stancati del supporto ESM di Jest (nei test) e volevamo provare qualcosa di nuovo. Vitest ci ha conquistato con il supporto nativo a ESM e la compatibilità con Jest. Ha un'esperienza per sviluppatori fantastica, ed è alimentato da Vite."] }), "\n", _jsxs(_components.h2, { id: "lo-stato-attuale", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#lo-stato-attuale", children: _jsx(_components.span, { children: "#" }) }), "Lo stato attuale"] }), "\n", _jsx(_components.p, { children: "Potresti avere impostazioni diverse nel tuo progetto, ma di solito troverai sostituzioni di plugin poiché l'ecosistema Vite è in piena espansione. Ecco le nostre configurazioni al momento della migrazione:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Monorepo:" }), " Usiamo gli spazi di lavoro di PNPM (v9) per gestire il nostro monorepo."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Modulo:" }), " Utilizziamo moduli ESM per tutti i nostri progetti."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "TypeScript:" }), " Utilizziamo TypeScript (v5.5.3) per tutti i nostri progetti con alias di percorso."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "React:" }), " Usiamo React (v18.3.1) per tutti i nostri progetti frontend."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Stilizzazione:" }), " Usiamo moduli SASS per la stilizzazione."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "SVG:" }), " Usiamo SVG come componenti React."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "MDX:" }), " Abbiamo MDX con Markdown in stile GitHub e supporto per Mermaid."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Caricamento lazy:" }), " Abbiamo bisogno di caricare in modo lazy alcune delle nostre pagine e componenti."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Compressione:" }), " Produciamo asset compressi (gzip e brotli) per le nostre build di produzione."] }), "\n"] }), "\n", _jsxs(_components.h2, { id: "la-migrazione", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#la-migrazione", children: _jsx(_components.span, { children: "#" }) }), "La migrazione"] }), "\n", _jsx(_components.p, { children: "Abbiamo iniziato la migrazione creando un nuovo progetto Vite e sperimentandolo per vedere come funziona. Il processo è stato fluido e la migrazione effettiva ha richiesto solo pochi giorni." }), "\n", _jsxs(_components.h3, { id: "supporto-pronto-alluso", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#supporto-pronto-alluso", children: _jsx(_components.span, { children: "#" }) }), "Supporto pronto all'uso"] }), "\n", _jsx(_components.p, { children: "Vite offre supporto pronto all'uso per monorepo, ESM, TypeScript, React e SASS. Abbiamo solo dovuto installare i plugin necessari e le configurazioni per farlo funzionare." }), "\n", _jsxs(_components.h3, { id: "alias-di-percorso", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#alias-di-percorso", children: _jsx(_components.span, { children: "#" }) }), "Alias di percorso"] }), "\n", _jsxs(_components.p, { children: ["Vite ha il supporto integrato per gli alias di percorso, ad esempio, nel nostro ", _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: ["Abbiamo solo dovuto aggiungere la stessa risoluzione nel nostro ", _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: ["Nota che il percorso di sostituzione dovrebbe essere un percorso assoluto, mentre è relativo alla radice del progetto. In alternativa, puoi utilizzare il plugin ", _jsx(_components.a, { href: "https://github.com/aleclarson/vite-tsconfig-paths", children: "vite-tsconfig-paths" }), " per leggere gli alias di percorso dal ", _jsx(_components.code, { children: "tsconfig.json" }), "."] }), "\n", _jsxs(_components.h3, { id: "react-fast-refresh-e-hmr", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#react-fast-refresh-e-hmr", children: _jsx(_components.span, { children: "#" }) }), "React Fast Refresh e HMR"] }), "\n", _jsxs(_components.p, { children: ["Sebbene Vite abbia il supporto integrato per HMR, è necessario installare un plugin per abilitare React Fast Refresh. Abbiamo usato il plugin ", _jsx(_components.a, { href: "https://github.com/vitejs/vite-plugin-react", children: "@vitejs/plugin-react" }), " fornito dal team di Vite, che offre un ottimo supporto per le funzionalità di React come 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-come-componente-react", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#svg-come-componente-react", children: _jsx(_components.span, { children: "#" }) }), "SVG come componente React"] }), "\n", _jsxs(_components.p, { children: ["Utilizziamo il plugin ", _jsx(_components.a, { href: "https://github.com/pd4d10/vite-plugin-svgr", children: "vite-plugin-svgr" }), " per convertire SVG in componenti React. È semplice come aggiungere il plugin alla configurazione di Vite:"] }), "\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: ["Tuttavia, non abbiamo specificato in base a quale condizione gli SVG dovrebbero essere convertiti in componenti React, quindi tutte le importazioni sono state convertite. Il plugin offre una configurazione predefinita migliore: convertire solo gli SVG che sono stati importati con l'estensione ", _jsx(_components.code, { children: ".svg?react" }), ". Abbiamo aggiornato di conseguenza le nostre importazioni."] }), "\n", _jsxs(_components.h3, { id: "moduli-sass", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#moduli-sass", children: _jsx(_components.span, { children: "#" }) }), "Moduli SASS"] }), "\n", _jsxs(_components.p, { children: ["Sebbene Vite abbia il supporto integrato per i moduli SASS, c'è una cosa di cui dobbiamo occuparci: come i nomi delle classi sono formattati. Potrebbe essere problematico per gli utenti e per i nostri test di integrazione se i nomi delle classi non sono formattati in modo coerente. La configurazione in una riga nel ", _jsx(_components.code, { children: "vite.config.ts" }), " può risolvere il problema:"] }), "\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]', // Sostituisci con il tuo formato\n },\n },\n});\n" }) }), "\n", _jsx(_components.p, { children: "A proposito, Parcel e Vite hanno diversi modi di importare i file SASS:" }), "\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: ["La sintassi ", _jsx(_components.code, { children: "* as" }), ", tuttavia, funziona in Vite, ma causerà la perdita di nomi di classe modularizzati quando si utilizzano chiavi dinamiche per accedere all'oggetto ", _jsx(_components.code, { children: "styles" }), ". Ad esempio:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "const className = 'button';\n// Questo non funzionerà come previsto\nreturn ;\n" }) }), "\n", _jsxs(_components.h3, { id: "supporto-mdx", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#supporto-mdx", children: _jsx(_components.span, { children: "#" }) }), "Supporto MDX"] }), "\n", _jsxs(_components.p, { children: ["Poiché Vite utilizza Rollup sotto il cofano, possiamo utilizzare il plugin ufficiale ", _jsx(_components.a, { href: "https://mdxjs.com/packages/rollup/", children: "@mdx-js/rollup" }), " per supportare MDX e i suoi plugin. La configurazione è la seguente:"] }), "\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 // Il `enforce: 'pre'` è richiesto per far funzionare il plugin MDX\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: ["Il plugin ", _jsx(_components.code, { children: "remarkGfm" }), " è utilizzato per supportare Markdown in stile GitHub e il plugin ", _jsx(_components.code, { children: "rehypeMdxCodeProps" }), " è utilizzato per passare le proprietà ai blocchi di codice nei file MDX come fa ", _jsx(_components.a, { href: "https://docusaurus.io/docs/markdown-features/code-blocks#code-title", children: "Docusaurus" }), "."] }), "\n", _jsxs(_components.h3, { id: "supporto-per-mermiad-allinterno-di-mdx", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#supporto-per-mermiad-allinterno-di-mdx", children: _jsx(_components.span, { children: "#" }) }), "Supporto per Mermiad all'interno di MDX"] }), "\n", _jsx(_components.p, { children: "Vorremmo utilizzare diagrammi Mermaid nei nostri file MDX come se fossero altri linguaggi di programmazione. L'uso dovrebbe essere semplice come altri blocchi di codice:" }), "\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: "Dovrebbe essere reso come:" }), "\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: "Poiché la nostra app supporta temi chiari e scuri, abbiamo scritto un po' di codice per far funzionare i diagrammi Mermaid con il tema scuro. È stato creato un componente React:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import { useEffect } from 'react';\nimport useTheme from '@/hooks/use-theme';\n\n// Magari definito altrove\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" }), " è un hook personalizzato per ottenere il tema corrente dal contesto. La libreria ", _jsx(_components.code, { children: "mermaid" }), " è importata in modo asincrono per ridurre le dimensioni di caricamento della pagina iniziale."] }), "\n", _jsx(_components.p, { children: "Per il blocco di codice nel file MDX, abbiamo un componente unificato per svolgere il lavoro:" }), "\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 // Altri blocchi di codice vanno qui\n return {String(children).trimEnd()};\n}\n" }) }), "\n", _jsx(_components.p, { children: "Infine, definiamo il provider MDX come segue:" }), "\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 ` non può essere sostituito con un\n // componente personalizzato adesso.\n // Vedi: https://github.com/orgs/mdx-js/discussions/2231#discussioncomment-4729474\n Code,\n // ...altri componenti\n }}\n >\n {children}\n \n );\n}\n" }) }), "\n", _jsxs(_components.h3, { id: "caricamento-lazy", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#caricamento-lazy", children: _jsx(_components.span, { children: "#" }) }), "Caricamento lazy"] }), "\n", _jsx(_components.p, { children: "Questa non è una cosa specifica di Vite, vale comunque la pena menzionarla dato che abbiamo aggiornato le nostre pagine per utilizzare il caricamento lazy durante la migrazione, e nulla si è rotto successivamente." }), "\n", _jsxs(_components.p, { children: ["React ha una funzione integrata ", _jsx(_components.code, { children: "React.lazy" }), " per caricare in modo lazy i componenti. Tuttavia, potrebbe causare alcuni problemi quando stai iterando velocemente. Abbiamo creato una piccola libreria chiamata ", _jsx(_components.a, { href: "https://github.com/silverhand-io/react-safe-lazy", children: "react-safe-lazy" }), " per risolvere i problemi. È un sostituto drop-in per ", _jsx(_components.code, { children: "React.lazy" }), " e una spiegazione dettagliata può essere trovata in questo ", _jsx(_components.a, { href: "https://blog.logto.io/react-safe-lazy/?ref=post-vite", children: "post sul blog" }), "."] }), "\n", _jsxs(_components.h3, { id: "compressione", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#compressione", children: _jsx(_components.span, { children: "#" }) }), "Compressione"] }), "\n", _jsxs(_components.p, { children: ["C'è un plugin carino chiamato ", _jsx(_components.a, { href: "https://github.com/vbenjs/vite-plugin-compression", children: "vite-plugin-compression" }), " per produrre asset compressi. Supporta sia la compressione gzip che brotli. La configurazione è semplice:"] }), "\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 di default\n viteCompression(),\n // Brotli\n viteCompression({ algorithm: 'brotliCompress' }),\n ],\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "chunk-manuali", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#chunk-manuali", children: _jsx(_components.span, { children: "#" }) }), "Chunk manuali"] }), "\n", _jsxs(_components.p, { children: ["Una grande funzionalità di Vite (o dell'underlying Rollup) è i chunk manuali. Mentre ", _jsx(_components.code, { children: "React.lazy" }), " viene utilizzato per il caricamento lazy dei componenti, possiamo avere un maggiore controllo sui chunk specificando i chunk manuali per decidere quali componenti o moduli dovrebbero essere raggruppati insieme."] }), "\n", _jsxs(_components.p, { children: ["Ad esempio, possiamo prima usare ", _jsx(_components.a, { href: "https://github.com/KusStar/vite-bundle-visualizer", children: "vite-bundle-visualizer" }), " per analizzare la dimensione del bundle e le dipendenze. Poi possiamo scrivere una funzione appropriata per dividere i chunk:"] }), "\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 // Controlla dinamicamente se il modulo ha dipendenze relative a React\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 // Attenzione: i pacchetti relativi a React dovrebbero essere raggruppati insieme altrimenti potrebbe causare errori in fase di runtime\n if (id.includes('/node_modules/') && hasReactDependency(id)) {\n return 'react';\n }\n\n // Aggiungi i tuoi grandi pacchetti alla lista\n per esempio ['mermaid', 'elkjs'] {\n if (id.includes(`/node_modules/${largePackage}/`)) {\n return largePackage;\n }\n }\n\n // Tutti gli altri pacchetti nella cartella `node_modules` verranno raggruppati insieme\n if (id.includes('/node_modules/')) {\n return 'vendors';\n }\n\n // Usa il comportamento predefinito per altri moduli\n },\n },\n },\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "server-di-sviluppo", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#server-di-sviluppo", children: _jsx(_components.span, { children: "#" }) }), "Server di sviluppo"] }), "\n", _jsxs(_components.p, { children: ["A differenza della build di produzione, Vite NON raggrupperà il tuo codice sorgente in modalità sviluppo (inclusi dipendenze collegate nello stesso monorepo) e tratterà ogni modulo come un file. Per noi, il browser caricherà centinaia di moduli per la prima volta, il che sembra pazzesco ma in realtà va bene nella maggior parte dei casi. Puoi vedere la discussione ", _jsx(_components.a, { href: "https://github.com/vitejs/vite/discussions/4803", children: "qui" }), "."] }), "\n", _jsxs(_components.p, { children: ["Se è un problema per te, una soluzione alternativa ma non perfetta è elencare le dipendenze collegate nell'opzione ", _jsx(_components.code, { children: "optimizeDeps" }), " del ", _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: "Ciò \"pre-bundle\" le dipendenze collegate e rende il server di sviluppo più veloce. Il problema è che HMR potrebbe non funzionare come previsto per le dipendenze collegate." }), "\n", _jsxs(_components.p, { children: ["Inoltre, utilizziamo un proxy che serve i file statici in produzione e instrada le richieste al server Vitest in fase di sviluppo. Abbiamo configurato alcune porte specifiche per evitare conflitti, ed è anche facile configurarlo nel ", _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: "variabili-dambiente", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#variabili-dambiente", children: _jsx(_components.span, { children: "#" }) }), "Variabili d'ambiente"] }), "\n", _jsxs(_components.p, { children: ["A differenza di Parcel, Vite utilizza un approccio moderno per gestire le variabili d'ambiente utilizzando ", _jsx(_components.code, { children: "import.meta.env" }), ". Caricherà automaticamente i file ", _jsx(_components.code, { children: ".env" }), " e sostituirà le variabili nel codice. Tuttavia, richiede che tutte le variabili d'ambiente siano prefissate con ", _jsx(_components.code, { children: "VITE_" }), " (configurabile)."] }), "\n", _jsxs(_components.p, { children: ["Mentre utilizzavamo Parcel, semplicemente sostituiva le variabili ", _jsx(_components.code, { children: "process.env" }), " senza controllare il prefisso. Quindi abbiamo trovato una soluzione temporanea utilizzando il campo ", _jsx(_components.code, { children: "define" }), " per facilitare la migrazione:"] }), "\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: ["Questo ci consente di aggiungere gradualmente il prefisso alle variabili d'ambiente e rimuovere il campo ", _jsx(_components.code, { children: "define" }), "."] }), "\n", _jsxs(_components.h2, { id: "conclusione", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#conclusione", children: _jsx(_components.span, { children: "#" }) }), "Conclusione"] }), "\n", _jsx(_components.p, { children: "Ecco fatto! Abbiamo migrato con successo i nostri tre progetti frontend da Parcel a Vite e speriamo che questa breve storia possa aiutarti nella tua migrazione. Ecco come appare la configurazione alla fine:" }), "\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 dei chunk manuali\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 };