"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "tausta", "hProperties": { "id": "tausta" } }, "depth": 2, "value": "Tausta" }, { "data": { "id": "miksi-vite", "hProperties": { "id": "miksi-vite" } }, "depth": 3, "value": "Miksi Vite?" }, { "data": { "id": "nykytilanne", "hProperties": { "id": "nykytilanne" } }, "depth": 2, "value": "Nykytilanne" }, { "data": { "id": "siirtymä", "hProperties": { "id": "siirtymä" } }, "depth": 2, "value": "Siirtymä" }, { "data": { "id": "valmiiksi-tuettu-tuki", "hProperties": { "id": "valmiiksi-tuettu-tuki" } }, "depth": 3, "value": "Valmiiksi tuettu tuki" }, { "data": { "id": "polkualias", "hProperties": { "id": "polkualias" } }, "depth": 3, "value": "Polkualias" }, { "data": { "id": "react-fast-refresh-ja-hmr", "hProperties": { "id": "react-fast-refresh-ja-hmr" } }, "depth": 3, "value": "React Fast Refresh ja HMR" }, { "data": { "id": "svg-react-komponenttina", "hProperties": { "id": "svg-react-komponenttina" } }, "depth": 3, "value": "SVG React-komponenttina" }, { "data": { "id": "sass-moduulit", "hProperties": { "id": "sass-moduulit" } }, "depth": 3, "value": "SASS-moduulit" }, { "data": { "id": "mdx-tuki", "hProperties": { "id": "mdx-tuki" } }, "depth": 3, "value": "MDX-tuki" }, { "data": { "id": "mermaidi-tuki-mdx-tiedostojen-sisällä", "hProperties": { "id": "mermaidi-tuki-mdx-tiedostojen-sisällä" } }, "depth": 3, "value": "Mermaidi-tuki MDX-tiedostojen sisällä" }, { "data": { "id": "latauksen-viivästys", "hProperties": { "id": "latauksen-viivästys" } }, "depth": 3, "value": "Latauksen viivästys" }, { "data": { "id": "pakkaus", "hProperties": { "id": "pakkaus" } }, "depth": 3, "value": "Pakkaus" }, { "data": { "id": "manuaaliset-kontit", "hProperties": { "id": "manuaaliset-kontit" } }, "depth": 3, "value": "Manuaaliset kontit" }, { "data": { "id": "kehityspalvelin", "hProperties": { "id": "kehityspalvelin" } }, "depth": 3, "value": "Kehityspalvelin" }, { "data": { "id": "ympäristömuuttujat", "hProperties": { "id": "ympäristömuuttujat" } }, "depth": 3, "value": "Ympäristömuuttujat" }, { "data": { "id": "yhteenveto", "hProperties": { "id": "yhteenveto" } }, "depth": 2, "value": "Yhteenveto" }]; const readingTime = { "minutes": 6, "words": 1699, "text": "6 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: "tausta", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#tausta", children: _jsx(_components.span, { children: "#" }) }), "Tausta"] }), "\n", _jsx(_components.p, { children: "Meillä on kolme pääasiallista frontend-projektia Logtossa: kirjautumiskokemus, Console ja live-esikatselu. Nämä projektit ovat kaikki TypeScriptillä, Reactilla ja SASS-moduuleilla; yhteensä niissä on noin 100 000 koodiriviä." }), "\n", _jsxs(_components.p, { children: ["Rakastimme Parcelia sen yksinkertaisuuden ja nolla-asetuksen vuoksi. Muistan vieläkin päivän, jolloin hämmästyin siitä, kuinka helppoa oli perustaa uusi projekti Parcelilla. Voit vain suorittaa ", _jsx(_components.code, { children: "parcel index.html" }), " ja boom, kaikki tarvittavat riippuvuudet asennetaan ja projekti toimii. Jos olet \"kokeneempi\" kehittäjä, saatat tuntea samoin verratessasi sitä vanhoihin päiviin Gul-pilla ja Webpackilla. Parcel on kuin taikasauva."] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Parcelin yksinkertaisuus oli pääsyy siihen, miksi pysyttäydyimme siinä niin pitkään, vaikka se saattoi olla joskus oikukas. Esimerkiksi:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Parcel epäonnistui joskus niputtamaan projektin, koska se ei löytänyt joitain chunk-tiedostoja, jotka olivat todella siellä." }), "\n", _jsx(_components.li, { children: "Se vaati joitain korjaustoimenpiteitä toimiakseen monorepo-asetuksellamme." }), "\n", _jsx(_components.li, { children: "Se ei tue MDX 3:ta natiivisti, joten meidän piti luoda sille mukautettu muunnin." }), "\n", _jsxs(_components.li, { children: ["Se ei tue manuaalisia konteja (kirjoitushetkellä manuaalinen chunks-ominaisuus on yhä ", _jsx(_components.a, { href: "https://parceljs.org/features/code-splitting/#manual-shared-bundles", children: "kokeiluvaiheessa" }), "), mikä on ok useimmissa tilanteissa, mutta joskus tarvitset sitä."] }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Miksi päätimme siirtyä muuhun?" }) }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Olimme jumissa Parcelin versiossa 2.9.3, joka julkaistiin kesäkuussa 2023. Joka kerta kun uusi versio julkaistiin sen jälkeen, yritimme päivittää, mutta se epäonnistui aina rakennusvirheisiin." }), "\n", _jsx(_components.li, { children: "Parcelin uusin versio oli 2.12.0, julkaistu helmikuussa 2024. Vaikka sillä on lähes päivittäiset commitit, uusia julkaisuja ei ole tehty siitä lähtien." }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Joku jopa avasi keskustelun kysyäkseen ", _jsx(_components.a, { href: "https://github.com/parcel-bundler/parcel/discussions/9790", children: "onko Parcel kuollut" }), ". Virallinen vastaus on että ei, Parcel on yhä elossa, mutta se on tilassa jossa \"meillä on käynnissä suuri refaktori eikä aikaa pienille julkaisuille\". Meille se on kuin \"ankan kuolema\": viimeisin versio, jota voimme käyttää, on yli vuoden takainen, emmekä tiedä milloin seuraava versio julkaistaan. Se näyttää kuolleelta, se käyttäytyy kuin kuollut, joten se on kuollut meille."] }), "\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: "Usko pois, olemme yrittäneet." }), "\n", _jsxs(_components.h3, { id: "miksi-vite", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#miksi-vite", children: _jsx(_components.span, { children: "#" }) }), "Miksi Vite?"] }), "\n", _jsxs(_components.p, { children: ["Tunsimme ", _jsx(_components.a, { href: "https://vitejs.dev/", children: "Viten" }), " ", _jsx(_components.a, { href: "https://vitest.dev/", children: "Vitestistä" }), ". Useita kuukausia sitten olimme väsyneitä Jestin ESM-tukeen (testauksessa) ja halusimme kokeilla jotain uutta. Vitest voitti sydämemme natiivilla ESM-tuellaan ja Jest-yhteensopivuudellaan. Sillä on loistava kehittäjäkokemus, ja se on Viten voimanlähde."] }), "\n", _jsxs(_components.h2, { id: "nykytilanne", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#nykytilanne", children: _jsx(_components.span, { children: "#" }) }), "Nykytilanne"] }), "\n", _jsx(_components.p, { children: "Sinulla saattaa olla erilaiset asetukset projektissasi, mutta yleensä löydät korvaavia plugineja, kun Vite-ekosysteemi kukoistaa. Tässä ovat asetuksemme siirtymähetkellä:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Monorepo:" }), " Käytämme PNPM (v9) työtiloja hallitaksemme monorepoamme."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Moduuli:" }), " Käytämme ESM -moduuleita kaikissa projekteissamme."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "TypeScript:" }), " Käytämme TypeScriptiä (v5.5.3) kaikissa projekteissamme polkualiasilla."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "React:" }), " Käytämme Reactia (v18.3.1) kaikissa frontend-projekteissamme."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Tyylit:" }), " Käytämme SASS-moduuleita tyylityksessä."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "SVG:" }), " Käytämme SVG:tä React-komponentteina."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "MDX:" }), " Meillä on MDX GitHub Flavored Markdownilla ja Mermaidi-tuella."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Lataamisen viivästys:" }), " Tarvitsemme viivästettyä latausta joillakin sivuillamme ja komponenteissamme."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Pakkaus:" }), " Tuotamme pakattuja resursseja (gzip ja brotli) tuotantorakennuksiimme."] }), "\n"] }), "\n", _jsxs(_components.h2, { id: "siirtymä", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#siirtymä", children: _jsx(_components.span, { children: "#" }) }), "Siirtymä"] }), "\n", _jsx(_components.p, { children: "Aloitimme siirtymän luomalla uuden Vite-projektin ja leikkimällä sillä nähdäksemme, miten se toimii. Prosessi oli sujuva ja varsinainen siirtymä kesti vain muutaman päivän." }), "\n", _jsxs(_components.h3, { id: "valmiiksi-tuettu-tuki", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#valmiiksi-tuettu-tuki", children: _jsx(_components.span, { children: "#" }) }), "Valmiiksi tuettu tuki"] }), "\n", _jsx(_components.p, { children: "Vite tukee valmiiksi monorepoja, ESM:ää, TypeScriptiä, Reactia ja SASS:ia. Meidän tarvitsi vain asentaa tarvittavat pluginit ja konfiguraatiot saadaksemme sen toimimaan." }), "\n", _jsxs(_components.h3, { id: "polkualias", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#polkualias", children: _jsx(_components.span, { children: "#" }) }), "Polkualias"] }), "\n", _jsxs(_components.p, { children: ["Vite tukee valmiiksi polkualiasia, esimerkiksi ", _jsx(_components.code, { children: "tsconfig.json" }), "-tiedostossamme:"] }), "\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: ["Meidän tarvitsi vain lisätä sama resoluutio ", _jsx(_components.code, { children: "vite.config.ts" }), "-tiedostoossa:"] }), "\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: ["Huomaa, että korvauspolun tulisi olla absoluuttinen polku, vaikka se on suhteellinen projektin juureen nähden. Vaihtoehtoisesti voit käyttää ", _jsx(_components.a, { href: "https://github.com/aleclarson/vite-tsconfig-paths", children: "vite-tsconfig-paths" }), " pluginia lukeaksesi polkualiasit ", _jsx(_components.code, { children: "tsconfig.json" }), "-tiedostosta."] }), "\n", _jsxs(_components.h3, { id: "react-fast-refresh-ja-hmr", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#react-fast-refresh-ja-hmr", children: _jsx(_components.span, { children: "#" }) }), "React Fast Refresh ja HMR"] }), "\n", _jsxs(_components.p, { children: ["Vaikka Vite tukee valmiiksi HMR:ää, se vaatii pluginin asentamisen React Fast Refreshin ottamiseksi käyttöön. Käytimme ", _jsx(_components.a, { href: "https://github.com/vitejs/vite-plugin-react", children: "@vitejs/plugin-react" }), "-pluginia, joka on Vite-tiimin tarjoama ja sisältää loistavan tuen React-ominaisuuksille, kuten 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-react-komponenttina", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#svg-react-komponenttina", children: _jsx(_components.span, { children: "#" }) }), "SVG React-komponenttina"] }), "\n", _jsxs(_components.p, { children: ["Käytämme ", _jsx(_components.a, { href: "https://github.com/pd4d10/vite-plugin-svgr", children: "vite-plugin-svgr" }), "-pluginia muuntaaksemme SVG:t React-komponenteiksi. Se on niin yksinkertaista kuin pluginin lisääminen Vite-konfiguraatioon:"] }), "\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: ["Emme kuitenkaan määrittäneet, millä ehdolla SVG:t tulisi muuntaa React-komponenteiksi, joten kaikki tuonnit muunnettiin. Plugin tarjoaa paremman oletuskonfiguraation: muunna vain SVG:t, jotka tuodaan ", _jsx(_components.code, { children: ".svg?react" }), "-laajennuksella. Päivitimme tuontimme vastaavasti."] }), "\n", _jsxs(_components.h3, { id: "sass-moduulit", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#sass-moduulit", children: _jsx(_components.span, { children: "#" }) }), "SASS-moduulit"] }), "\n", _jsxs(_components.p, { children: ["Vaikka Vite tukee valmiiksi SASS-moduuleita, on yksi asia, josta meidän on huolehdittava: kuinka luokkien nimet muotoillaan. Se voi olla vaivalloista käyttäjille ja integraatiotesteillemme, jos luokkien nimet eivät ole yhdenmukaisesti muotoiltuja. Yksinkertainen määritys ", _jsx(_components.code, { children: "vite.config.ts" }), "-tiedostossa voi ratkaista ongelman:"] }), "\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]', // Korvaa omalla muodollasi\n },\n },\n});\n" }) }), "\n", _jsx(_components.p, { children: "Muuten, Parcel ja Vite käyttävät erilaisia makuja tuontia varten SASS-tiedostoissa:" }), "\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: [_jsx(_components.code, { children: "* as" }), "-syntaksi toimii kuitenkin Vitessä, mutta se aiheuttaa modulaaristen luokkien nimien menetyksen, kun käytät dynaamisia avaimia tietorakenteen ", _jsx(_components.code, { children: "styles" }), " objektiin. Esimerkiksi:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "const className = 'button';\n// Tämä ei toimi odotetusti\nreturn ;\n" }) }), "\n", _jsxs(_components.h3, { id: "mdx-tuki", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#mdx-tuki", children: _jsx(_components.span, { children: "#" }) }), "MDX-tuki"] }), "\n", _jsxs(_components.p, { children: ["Koska Vite käyttää Rollupia taustalla, voimme käyttää virallista ", _jsx(_components.a, { href: "https://mdxjs.com/packages/rollup/", children: "@mdx-js/rollup" }), "-pluginia tukemaan MDX:ää sekä sen plugineja. Määritys näyttää tältä:"] }), "\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 // The `enforce: 'pre'` on tarvitaan, että MDX-plugini toimii\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: [_jsx(_components.code, { children: "remarkGfm" }), "-plugini tukee GitHub Flavored Markdownia, ja ", _jsx(_components.code, { children: "rehypeMdxCodeProps" }), "-plugini välittää rekvisiitat MDX-tiedostojen koodilohkoihin kuten ", _jsx(_components.a, { href: "https://docusaurus.io/docs/markdown-features/code-blocks#code-title", children: "Docusaurus tekee" }), "."] }), "\n", _jsxs(_components.h3, { id: "mermaidi-tuki-mdx-tiedostojen-sisällä", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#mermaidi-tuki-mdx-tiedostojen-sisällä", children: _jsx(_components.span, { children: "#" }) }), "Mermaidi-tuki MDX-tiedostojen sisällä"] }), "\n", _jsx(_components.p, { children: "Haluaisimme käyttää Mermaid-kaavioita MDX-tiedostoissamme muiden ohjelmointikielten tavoin. Käytön pitäisi olla yhtä yksinkertaista kuin muiden koodilohkojen:" }), "\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: "Pitäisi näyttää tältä:" }), "\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: "Koska sovelluksemme tukee valo- ja tummateemoja, koodasimme hieman saadaksemme Mermaid-kaaviot toimimaan tummalla teemalla. React-komponentti on luotu:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import { useEffect } from 'react';\nimport useTheme from '@/hooks/use-theme';\n\n// Ehkä määritelty aiemmin\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" }), " on räätälöity hook, joka hakee nykyisen teeman kontekstista. ", _jsx(_components.code, { children: "mermaid" }), "-kirjasto tuodaan asynkronisesti latauskokoon pienentämiseksi alkuperäisessä sivulatauksessa."] }), "\n", _jsx(_components.p, { children: "MDX-tiedoston koodilohkoa varten meillä on yhtenäinen komponentti työn suorittamiseksi:" }), "\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 // Muut koodilohkot tähän\n return {String(children).trimEnd()};\n}\n" }) }), "\n", _jsx(_components.p, { children: "Lopuksi määrittelimme MDX-tarjoajan seuraavasti:" }), "\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 `-elementtiä ei voi nyt vaihtaa mukautettuun komponenttiin.\n // Katso: https://github.com/orgs/mdx-js/discussions/2231#discussioncomment-4729474\n Code,\n // ...muut komponentit\n }}\n >\n {children}\n \n );\n}\n" }) }), "\n", _jsxs(_components.h3, { id: "latauksen-viivästys", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#latauksen-viivästys", children: _jsx(_components.span, { children: "#" }) }), "Latauksen viivästys"] }), "\n", _jsx(_components.p, { children: "Tämä ei ole Vite-spesifi asia, mutta se on silti mainitsemisen arvoinen, sillä päivitimme sivumme käyttämään latauksen viivästystä siirtymän aikana, eikä mikään rikkonut sen jälkeen." }), "\n", _jsxs(_components.p, { children: ["Reactin sisäänrakennettu ", _jsx(_components.code, { children: "React.lazy" }), "-funktio viivästettyjen komponenttien lataamiseksi kuitenkin saattaa aiheuttaa joitain ongelmia nopean iteroinnin aikana. Loimme pienen kirjaston nimeltä ", _jsx(_components.a, { href: "https://github.com/silverhand-io/react-safe-lazy", children: "react-safe-lazy" }), " ongelmien ratkaisemiseksi. Se on pudotusvaihtoehto ", _jsx(_components.code, { children: "React.lazylle" }), ", ja yksityiskohtainen selitys löytyy tästä ", _jsx(_components.a, { href: "https://blog.logto.io/react-safe-lazy/?ref=post-vite", children: "blogikirjoituksesta" }), "."] }), "\n", _jsxs(_components.h3, { id: "pakkaus", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#pakkaus", children: _jsx(_components.span, { children: "#" }) }), "Pakkaus"] }), "\n", _jsxs(_components.p, { children: ["On olemassa kätevä plugin nimeltä ", _jsx(_components.a, { href: "https://github.com/vbenjs/vite-plugin-compression", children: "vite-plugin-compression" }), " pakattujen resurssien tuottamiseksi. Se tukee sekä gzip- että brotli-pakkausta. Määritys on yksinkertainen:"] }), "\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 // Oletuksena Gzip\n viteCompression(),\n // Brotli\n viteCompression({ algorithm: 'brotliCompress' }),\n ],\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "manuaaliset-kontit", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#manuaaliset-kontit", children: _jsx(_components.span, { children: "#" }) }), "Manuaaliset kontit"] }), "\n", _jsxs(_components.p, { children: ["Yksi hieno ominaisuus Viteessa (tai taustalla olevassa Rollupissa) on manuaaliset kontit. Vaikka ", _jsx(_components.code, { children: "React.lazy" }), " käytetään komponenttien laiskaan lataamiseen, meillä on enemmän hallintaa kontteihin määrittämällä manuaaliset kontit päättääksemme, mitkä komponentit tai moduulit pitäisi niputtaa yhteen."] }), "\n", _jsxs(_components.p, { children: ["Esimerkiksi voimme ensin käyttää ", _jsx(_components.a, { href: "https://github.com/KusStar/vite-bundle-visualizer", children: "vite-bundle-visualizer" }), " analysoidaksemme paketin kokoa ja riippuvuuksia. Sitten voimme kirjoittaa asianmukaisen funktion lohkojen jakamiseksi:"] }), "\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 // Dynaamisesti tarkistaako moduuli onko sillä Reactiin liittyviä riippuvuuksia\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 // Huomioi: Reactiin liittyvät paketit tulee niputtaa yhteen, muuten se voi aiheuttaa käynnistysvirheitä\n if (id.includes('/node_modules/') && hasReactDependency(id)) {\n return 'react';\n }\n\n // Lisää suuret paketit listaan\n for (const largePackage of ['mermaid', 'elkjs']) {\n if (id.includes(`/node_modules/${largePackage}/`)) {\n return largePackage;\n }\n }\n\n // Kaikki muut paketit `node_modules`-kansiossa niputetaan yhteen\n if (id.includes('/node_modules/')) {\n return 'vendors';\n }\n\n // Käytä oletuskäyttäytymistä muille moduuleille\n },\n },\n },\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "kehityspalvelin", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#kehityspalvelin", children: _jsx(_components.span, { children: "#" }) }), "Kehityspalvelin"] }), "\n", _jsxs(_components.p, { children: ["Toisin kuin tuotantorakenne, Vite EI niputa lähdekoodiasi kehitystilassa (mukaan lukien linkitetyt riippuvuudet samassa monorepossa) ja käsittelee jokaista moduulia tiedostona. Meille selain lataa satoja moduuleja ensimmäisellä kerralla, mikä näyttää hullulta, mutta se on oikeastaan fine useimmissa tapauksissa. Voit nähdä keskustelun ", _jsx(_components.a, { href: "https://github.com/vitejs/vite/discussions/4803", children: "tässä" }), "."] }), "\n", _jsxs(_components.p, { children: ["Jos tämä on sinulle ongelma, vaihtoehtoinen mutta epätäydellinen ratkaisu on listata linkitetyt riippuvuudet ", _jsx(_components.code, { children: "optimizeDeps" }), "-vaihtoehtoon ", _jsx(_components.code, { children: "vite.config.ts" }), "-tiedostoossa:"] }), "\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: "Tämä \"ennakkoniputtaa\" linkitetyt riippuvuudet ja nopeuttaa kehityspalvelinta. Haittapuoli on, että HMR ei välttämättä toimi odotetusti linkitetyillä riippuvuuksilla." }), "\n", _jsxs(_components.p, { children: ["Lisäksi käytämme välityspalvelinta, joka palvelee staattisia tiedostoja tuotannossa ja välittää pyynnöt Vite-palvelimeen kehityksessä. Meillä on joitain määritettyjä portteja konfliktien välttämiseksi, ja se on myös helppo määrittää ", _jsx(_components.code, { children: "vite.config.ts" }), "-tiedostoossa:"] }), "\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: "ympäristömuuttujat", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ympäristömuuttujat", children: _jsx(_components.span, { children: "#" }) }), "Ympäristömuuttujat"] }), "\n", _jsxs(_components.p, { children: ["Toisin kuin Parcel, Vite käyttää modernia lähestymistapaa ympäristömuuttujien käsittelyyn käyttämällä ", _jsx(_components.code, { children: "import.meta.env" }), ". Se lataa automaattisesti ", _jsx(_components.code, { children: ".env" }), "-tiedostot ja korvaa muuttujat koodissa. Se vaatii kuitenkin, että kaikilla ympäristömuuttujilla on ", _jsx(_components.code, { children: "VITE_" }), "-etuliite (määritettävissä)."] }), "\n", _jsxs(_components.p, { children: ["Kun käytimme Parcelia, se yksinkertaisesti korvasi ", _jsx(_components.code, { children: "process.env" }), "-muuttujat ilman etuliitteen tarkistamista. Joten olemme keksineet kiertotavan käyttämällä ", _jsx(_components.code, { children: "define" }), "-kenttää helpottamaan siirtymää:"] }), "\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: ["Tämä sallii meidän lisätä vähitellen etuliitteen ympäristömuuttujille ja poistaa ", _jsx(_components.code, { children: "define" }), "-kentän."] }), "\n", _jsxs(_components.h2, { id: "yhteenveto", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#yhteenveto", children: _jsx(_components.span, { children: "#" }) }), "Yhteenveto"] }), "\n", _jsx(_components.p, { children: "Siinä se! Olemme onnistuneesti siirtäneet kolme frontend-projektiamme Parcelista Viteen, ja toivomme, että tämä lyhyt tarina voi auttaa sinua omassa siirtymässäsi. Tässä miltä konfiguraatio näyttää lopussa:" }), "\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 // Manuaaliset kontit logiikka\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 };