"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "historia-w-tle", "hProperties": { "id": "historia-w-tle" } }, "depth": 2, "value": "Historia w tle" }, { "data": { "id": "dlaczego-vite", "hProperties": { "id": "dlaczego-vite" } }, "depth": 3, "value": "Dlaczego Vite?" }, { "data": { "id": "stan-rzeczy", "hProperties": { "id": "stan-rzeczy" } }, "depth": 2, "value": "Stan rzeczy" }, { "data": { "id": "migracja", "hProperties": { "id": "migracja" } }, "depth": 2, "value": "Migracja" }, { "data": { "id": "obsługa-z-pudełka", "hProperties": { "id": "obsługa-z-pudełka" } }, "depth": 3, "value": "Obsługa z pudełka" }, { "data": { "id": "alias-ścieżek", "hProperties": { "id": "alias-ścieżek" } }, "depth": 3, "value": "Alias ścieżek" }, { "data": { "id": "react-fast-refresh-i-hmr", "hProperties": { "id": "react-fast-refresh-i-hmr" } }, "depth": 3, "value": "React Fast Refresh i HMR" }, { "data": { "id": "svg-jako-komponent-react", "hProperties": { "id": "svg-jako-komponent-react" } }, "depth": 3, "value": "SVG jako komponent React" }, { "data": { "id": "moduły-sass", "hProperties": { "id": "moduły-sass" } }, "depth": 3, "value": "Moduły SASS" }, { "data": { "id": "obsługa-mdx", "hProperties": { "id": "obsługa-mdx" } }, "depth": 3, "value": "Obsługa MDX" }, { "data": { "id": "wsparcie-dla-mermiad-w-mdx", "hProperties": { "id": "wsparcie-dla-mermiad-w-mdx" } }, "depth": 3, "value": "Wsparcie dla Mermiad w MDX" }, { "data": { "id": "ładowanie-opóźnione", "hProperties": { "id": "ładowanie-opóźnione" } }, "depth": 3, "value": "Ładowanie opóźnione" }, { "data": { "id": "kompresja", "hProperties": { "id": "kompresja" } }, "depth": 3, "value": "Kompresja" }, { "data": { "id": "ręczne-chunkowanie", "hProperties": { "id": "ręczne-chunkowanie" } }, "depth": 3, "value": "Ręczne chunkowanie" }, { "data": { "id": "serwer-deweloperski", "hProperties": { "id": "serwer-deweloperski" } }, "depth": 3, "value": "Serwer deweloperski" }, { "data": { "id": "zmienne-środowiskowe", "hProperties": { "id": "zmienne-środowiskowe" } }, "depth": 3, "value": "Zmienne środowiskowe" }, { "data": { "id": "podsumowanie", "hProperties": { "id": "podsumowanie" } }, "depth": 2, "value": "Podsumowanie" }]; const readingTime = { "minutes": 6, "words": 1903, "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: "historia-w-tle", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#historia-w-tle", children: _jsx(_components.span, { children: "#" }) }), "Historia w tle"] }), "\n", _jsx(_components.p, { children: "Mamy trzy główne projekty frontendowe w Logto: doświadczenie logowania, Konsolę i podgląd na żywo. Projekty te są napisane w TypeScript, React i modułach SASS; w sumie mają około 100 tysięcy linii kodu." }), "\n", _jsxs(_components.p, { children: ["Uwielbialiśmy Parcel za jego prostotę i konfigurację zerową. Wciąż pamiętam dzień, kiedy byłem zszokowany, jak łatwo było uruchomić nowy projekt za pomocą Parcel. Można po prostu uruchomić ", _jsx(_components.code, { children: "parcel index.html" }), " i boom, wszystkie niezbędne zależności są załadowane, a projekt działa. Jeśli jesteś \"doświadczonym\" programistą, możesz czuć to samo, porównując go do dawnych dni konfigurowania z Gulp i Webpack. Parcel to jak magiczna różdżka."] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Prostota Parcel była głównym powodem, dla którego trzymaliśmy się go tak długo, pomimo że czasem bywał kapryśny. Na przykład:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Parcel czasami nieudanie łączył projekt, ponieważ nie mógł znaleźć niektórych plików chunk, które tam faktycznie były." }), "\n", _jsx(_components.li, { children: "Potrzebował pewnych hakerniczych konfiguracji, aby działał z naszym układem monorepo." }), "\n", _jsx(_components.li, { children: "Nie obsługuje natywnie MDX 3, więc musieliśmy stworzyć własny transformator." }), "\n", _jsxs(_components.li, { children: ["Nie obsługuje ręcznych chunków (na chwilę obecną funkcja ręcznych chunków jest nadal ", _jsx(_components.a, { href: "https://parceljs.org/features/code-splitting/#manual-shared-bundles", children: "w fazie eksperymentalnej" }), "), co jest ok w większości przypadków, ale czasem tego potrzeba."] }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Dlaczego więc postanowiliśmy migrować do czegoś innego?" }) }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Utknęliśmy na Parcel 2.9.3, który został wydany w czerwcu 2023 roku. Za każdym razem, gdy wydawano nową wersję po tym, próbowaliśmy się zaktualizować, ale zawsze kończyło się to błędami budowania." }), "\n", _jsx(_components.li, { children: "Najnowsza wersja Parcel to 2.12.0, wydana w lutym 2024 roku. Chociaż codziennie pojawiały się prawie codzienne commit-y, od tego czasu nie wydano żadnej nowej wersji." }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Ktoś nawet otworzył dyskusję, pytając ", _jsx(_components.a, { href: "https://github.com/parcel-bundler/parcel/discussions/9790", children: "czy Parcel jest martwy" }), ". Oficjalna odpowiedź brzmi nie, Parcel nadal żyje, ale jest w stanie \"pracujemy nad dużym refaktorem i nie mamy czasu na drobne wydania\". Dla nas to jak \"śmierć kaczki\": najnowsza wersja, której możemy używać, pochodzi sprzed ponad roku, i nie wiemy, kiedy zostanie wydana następna wersja. Wygląda, jakby był martwy, działa tak, jakby był martwy, więc dla nas jest martwy."] }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/parcel_upgrades_238745d26d.png", alt: "Pull requests aktualizacji Parcel" }) }), "\n", _jsx("center", { className: "alt", children: "Uwierz mi, próbowaliśmy." }), "\n", _jsxs(_components.h3, { id: "dlaczego-vite", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#dlaczego-vite", children: _jsx(_components.span, { children: "#" }) }), "Dlaczego Vite?"] }), "\n", _jsxs(_components.p, { children: ["Poznaliśmy ", _jsx(_components.a, { href: "https://vitejs.dev/", children: "Vite" }), " dzięki ", _jsx(_components.a, { href: "https://vitest.dev/", children: "Vitest" }), ". Kilka miesięcy temu, zmęczeni wsparciem ESM w Jest (w testowaniu), chcieliśmy spróbować czegoś nowego. Vitest zdobył nasze serca dzięki natywnemu wsparciu ESM i kompatybilności z Jest. Ma ono niesamowite doświadczenie programisty i jest napędzane przez Vite."] }), "\n", _jsxs(_components.h2, { id: "stan-rzeczy", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#stan-rzeczy", children: _jsx(_components.span, { children: "#" }) }), "Stan rzeczy"] }), "\n", _jsx(_components.p, { children: "Możesz mieć inne ustawienia w swoim projekcie, ale zwykle znajdziesz zamienniki wtyczek, ponieważ ekosystem Vite rozkwita. Oto nasze ustawienia na moment migracji:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Monorepo:" }), " Używamy przestrzeni roboczych PNPM (v9) do zarządzania naszym monorepo."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Moduł:" }), " Używamy modułów ESM we wszystkich naszych projektach."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "TypeScript:" }), " Używamy TypeScript (v5.5.3) we wszystkich naszych projektach z aliasami ścieżek."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "React:" }), " Używamy React (v18.3.1) we wszystkich naszych projektach frontendowych."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Stylowanie:" }), " Używamy modułów SASS do stylowania."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "SVG:" }), " Używamy SVG jako komponentów React."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "MDX:" }), " Posiadamy obsługę MDX z markdownem w stylu GitHuba i wsparciem dla Mermaid."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Ładowanie opóźnione:" }), " Musimy opóźniać ładowanie niektórych naszych stron i komponentów."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Kompresja:" }), " Produkujemy skompresowane zasoby (gzip i brotli) dla naszych buildów produkcyjnych."] }), "\n"] }), "\n", _jsxs(_components.h2, { id: "migracja", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#migracja", children: _jsx(_components.span, { children: "#" }) }), "Migracja"] }), "\n", _jsx(_components.p, { children: "Zaczęliśmy migrację, tworząc nowy projekt Vite i testując go, aby zobaczyć, jak działa. Proces był płynny, a rzeczywista migracja zajęła tylko kilka dni." }), "\n", _jsxs(_components.h3, { id: "obsługa-z-pudełka", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#obsługa-z-pudełka", children: _jsx(_components.span, { children: "#" }) }), "Obsługa z pudełka"] }), "\n", _jsx(_components.p, { children: "Vite ma wbudowaną obsługę monorepo, ESM, TypeScript, React i SASS. Musieliśmy jedynie zainstalować niezbędne wtyczki i konfiguracje, aby wszystko działało." }), "\n", _jsxs(_components.h3, { id: "alias-ścieżek", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#alias-ścieżek", children: _jsx(_components.span, { children: "#" }) }), "Alias ścieżek"] }), "\n", _jsxs(_components.p, { children: ["Vite ma wbudowane wsparcie dla aliasów ścieżek, na przykład w naszym ", _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: ["Musieliśmy tylko dodać tę samą rozdzielczość do naszego ", _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: ["Zauważ, że ścieżka zastępująca powinna być ścieżką absolutną, podczas gdy jest ona względna do katalogu głównego projektu. Alternatywnie, możesz użyć wtyczki ", _jsx(_components.a, { href: "https://github.com/aleclarson/vite-tsconfig-paths", children: "vite-tsconfig-paths" }), ", aby odczytać aliasy ścieżek z ", _jsx(_components.code, { children: "tsconfig.json" }), "."] }), "\n", _jsxs(_components.h3, { id: "react-fast-refresh-i-hmr", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#react-fast-refresh-i-hmr", children: _jsx(_components.span, { children: "#" }) }), "React Fast Refresh i HMR"] }), "\n", _jsxs(_components.p, { children: ["Chociaż Vite ma wbudowaną obsługę HMR, konieczne było zainstalowanie wtyczki, aby włączyć React Fast Refresh. Użyliśmy wtyczki ", _jsx(_components.a, { href: "https://github.com/vitejs/vite-plugin-react", children: "@vitejs/plugin-react" }), ", którą dostarcza zespół Vite i która ma doskonałe wsparcie dla funkcji React, takich jak 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-jako-komponent-react", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#svg-jako-komponent-react", children: _jsx(_components.span, { children: "#" }) }), "SVG jako komponent React"] }), "\n", _jsxs(_components.p, { children: ["Używamy wtyczki ", _jsx(_components.a, { href: "https://github.com/pd4d10/vite-plugin-svgr", children: "vite-plugin-svgr" }), ", aby konwertować SVG na komponenty React. Wystarczy dodać tę wtyczkę do konfiguracji 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: ["Jednak nie określiliśmy, w jakiej sytuacji SVG powinno być konwertowane na komponenty React, więc wszystkie importy zostały przekonwertowane. Wtyczka oferuje lepszą domyślną konfigurację: tylko SVG importowane z rozszerzeniem ", _jsx(_components.code, { children: ".svg?react" }), " będą konwertowane. Zaktualizowaliśmy odpowiednio nasze importy."] }), "\n", _jsxs(_components.h3, { id: "moduły-sass", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#moduły-sass", children: _jsx(_components.span, { children: "#" }) }), "Moduły SASS"] }), "\n", _jsxs(_components.p, { children: ["Chociaż Vite ma wbudowaną obsługę modułów SASS, jest jedna rzecz, na którą musimy zwrócić uwagę: jak formatowane są nazwy klas. Może to być problematyczne dla użytkowników i naszych testów integracyjnych, jeśli nazwy klas nie są formatowane konsekwentnie. Jednolinijkowa konfiguracja w ", _jsx(_components.code, { children: "vite.config.ts" }), " może rozwiązać ten problem:"] }), "\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]', // Zamień na swój własny format\n },\n },\n});\n" }) }), "\n", _jsx(_components.p, { children: "Przy okazji, Parcel i Vite mają różne sposoby importowania plików 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: ["Składnia ", _jsx(_components.code, { children: "* as" }), ", jednak, działa w Vite, ale spowoduje utratę zmodularyzowanych nazw klas, kiedy używasz dynamicznych kluczy do dostępu do obiektu ", _jsx(_components.code, { children: "styles" }), ". Na przykład:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "const className = 'button';\n// To nie będzie działać tak, jak oczekiwano\nreturn ;\n" }) }), "\n", _jsxs(_components.h3, { id: "obsługa-mdx", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#obsługa-mdx", children: _jsx(_components.span, { children: "#" }) }), "Obsługa MDX"] }), "\n", _jsxs(_components.p, { children: ["Ponieważ Vite wykorzystuje Rollup pod spodem, możemy użyć oficjalnej wtyczki ", _jsx(_components.a, { href: "https://mdxjs.com/packages/rollup/", children: "@mdx-js/rollup" }), " do obsługi MDX oraz jego wtyczek. Konfiguracja wygląda tak:"] }), "\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 // Wymagane `enforce: 'pre'`, aby wtyczka MDX działała\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: ["Wtyczka ", _jsx(_components.code, { children: "remarkGfm" }), " jest używana do obsługi markdownu w stylu GitHuba, a wtyczka ", _jsx(_components.code, { children: "rehypeMdxCodeProps" }), " jest używana do przekazywania props do bloków kodu w plikach MDX, tak jak ", _jsx(_components.a, { href: "https://docusaurus.io/docs/markdown-features/code-blocks#code-title", children: "Docusaurus robi" }), "."] }), "\n", _jsxs(_components.h3, { id: "wsparcie-dla-mermiad-w-mdx", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#wsparcie-dla-mermiad-w-mdx", children: _jsx(_components.span, { children: "#" }) }), "Wsparcie dla Mermiad w MDX"] }), "\n", _jsx(_components.p, { children: "Chcielibyśmy używać diagramów Mermaid w naszych plikach MDX jako innych języków programowania. Używanie powinno być tak proste, jak inne bloki kodu:" }), "\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: "Powinny być renderowane jako:" }), "\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: "Ponieważ nasza aplikacja obsługuje jasne i ciemne motywy, zakodowaliśmy trochę, aby diagramy Mermaid działały z motywem ciemnym. Stworzono komponent 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// Może być zdefiniowane gdzie indziej\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" }), " to niestandardowy hook do pobierania bieżącego motywu z kontekstu. Biblioteka ", _jsx(_components.code, { children: "mermaid" }), " jest importowana asynchronicznie, aby zmniejszyć rozmiar ładowania strony początkowej."] }), "\n", _jsx(_components.p, { children: "Dla bloku kodu w pliku MDX mamy zdefiniowany uniwersalny komponent, który wykonuje zadanie:" }), "\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 // Inne bloki kodu umieszczamy tutaj\n return {String(children).trimEnd()};\n}\n" }) }), "\n", _jsx(_components.p, { children: "Na końcu definiujemy dostawcę MDX w następujący sposób:" }), "\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 ` nie można teraz zamienić na\n // niestandardowy komponent.\n // Zobacz: https://github.com/orgs/mdx-js/discussions/2231#discussioncomment-4729474\n Code,\n // ...inne komponenty\n }}\n >\n {children}\n \n );\n}\n" }) }), "\n", _jsxs(_components.h3, { id: "ładowanie-opóźnione", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ładowanie-opóźnione", children: _jsx(_components.span, { children: "#" }) }), "Ładowanie opóźnione"] }), "\n", _jsx(_components.p, { children: "To nie jest coś specyficznego dla Vite, ale warto to wspomnieć, ponieważ podczas migracji zaktualizowaliśmy nasze strony, aby używały ładowania opóźnionego, i nic się nie zepsuło po tym." }), "\n", _jsxs(_components.p, { children: ["React ma wbudowaną funkcję ", _jsx(_components.code, { children: "React.lazy" }), ", aby opóźniać ładowanie komponentów. Jednak może to powodować pewne problemy, gdy iterujesz szybko. Stworzyliśmy małą bibliotekę zwaną ", _jsx(_components.a, { href: "https://github.com/silverhand-io/react-safe-lazy", children: "react-safe-lazy" }), ", aby rozwiązać te problemy. To zamiennik dla ", _jsx(_components.code, { children: "React.lazy" }), ", a szczegółowe wyjaśnienie można znaleźć w tym ", _jsx(_components.a, { href: "https://blog.logto.io/react-safe-lazy/?ref=post-vite", children: "poście na blogu" }), "."] }), "\n", _jsxs(_components.h3, { id: "kompresja", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#kompresja", children: _jsx(_components.span, { children: "#" }) }), "Kompresja"] }), "\n", _jsxs(_components.p, { children: ["Jest schludna wtyczka o nazwie ", _jsx(_components.a, { href: "https://github.com/vbenjs/vite-plugin-compression", children: "vite-plugin-compression" }), ", która pozwala produkować skompresowane zasoby. Obsługuje zarówno kompresję gzip, jak i brotli. Konfiguracja jest prosta:"] }), "\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 domyślnie\n viteCompression(),\n // Brotli\n viteCompression({ algorithm: 'brotliCompress' }),\n ],\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "ręczne-chunkowanie", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ręczne-chunkowanie", children: _jsx(_components.span, { children: "#" }) }), "Ręczne chunkowanie"] }), "\n", _jsxs(_components.p, { children: ["Jedną z wielkich cech Vite (lub podstawy Rollup) jest ręczne chunkowanie. Podczas gdy ", _jsx(_components.code, { children: "React.lazy" }), " jest używany do opóźnionego ładowania komponentów, możemy mieć większą kontrolę nad chunkami, określając ręczne chunki, aby zdecydować, które komponenty lub moduły powinny być łączone razem."] }), "\n", _jsxs(_components.p, { children: ["Na przykład, możemy najpierw użyć ", _jsx(_components.a, { href: "https://github.com/KusStar/vite-bundle-visualizer", children: "vite-bundle-visualizer" }), ", aby przeanalizować rozmiar pakietu i zależności. Następnie możemy napisać odpowiednią funkcję do podziału chunków:"] }), "\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 // Dynamiczne sprawdzanie, czy moduł ma zależności związane z 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 // Uważaj: Pakiety związane z React powinny być łączone razem, w przeciwnym razie może to powodować błędy w czasie wykonywania.\n if (id.includes('/node_modules/') && hasReactDependency(id)) {\n return 'react';\n }\n\n // Dodaj swoje duże pakiety do listy\n for (const largePackage of ['mermaid', 'elkjs']) {\n if (id.includes(`/node_modules/${largePackage}/`)) {\n return largePackage;\n }\n }\n\n // Wszystkie inne pakiety w folderze `node_modules` będą łączone razem\n if (id.includes('/node_modules/')) {\n return 'vendors';\n }\n\n // Użyj domyślnego zachowania dla innych modułów\n },\n },\n },\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "serwer-deweloperski", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#serwer-deweloperski", children: _jsx(_components.span, { children: "#" }) }), "Serwer deweloperski"] }), "\n", _jsxs(_components.p, { children: ["W przeciwieństwie do builda produkcyjnego, Vite NIE będzie łączyć twojego kodu źródłowego w trybie deweloperskim (w tym połączonych zależności w tym samym monorepo) i traktuje każdy moduł jako plik. Dla nas przeglądarka załaduje setki modułów po raz pierwszy, co wygląda szalenie, ale w większości przypadków to jest w porządku. Można zobaczyć dyskusję ", _jsx(_components.a, { href: "https://github.com/vitejs/vite/discussions/4803", children: "tutaj" }), "."] }), "\n", _jsxs(_components.p, { children: ["Jeśli to problem dla ciebie, alternatywnym, lecz nie idealnym rozwiązaniem jest wymienienie połączonych zależności w opcji ", _jsx(_components.code, { children: "optimizeDeps" }), " w ", _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: "To \"wstępnie połączy\" połączone zależności i przyspieszy serwer deweloperski. Wadą jest to, że HMR może nie działać zgodnie z oczekiwaniami dla połączonych zależności." }), "\n", _jsxs(_components.p, { children: ["Dodatkowo, używamy proxy, które serwuje statyczne pliki w produkcji i przekierowuje zapytania do serwera Vitest w trybie deweloperskim. Mamy skonfigurowane specyficzne porty, aby uniknąć konfliktów, co również jest łatwe do ustawienia w ", _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: "zmienne-środowiskowe", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#zmienne-środowiskowe", children: _jsx(_components.span, { children: "#" }) }), "Zmienne środowiskowe"] }), "\n", _jsxs(_components.p, { children: ["W przeciwieństwie do Parcel, Vite stosuje nowoczesne podejście do obsługi zmiennych środowiskowych, używając ", _jsx(_components.code, { children: "import.meta.env" }), ". Automatycznie ładuje pliki ", _jsx(_components.code, { children: ".env" }), " i zastępuje zmienne w kodzie. Jednak wymaga, aby wszystkie zmienne środowiskowe były prefiksowane ", _jsx(_components.code, { children: "VITE_" }), " (konfigurowalne)."] }), "\n", _jsxs(_components.p, { children: ["Podczas używania Parcel-a, po prostu zastępował ", _jsx(_components.code, { children: "process.env" }), " bez sprawdzania prefiksu. Więc wymyśliliśmy rozwiązanie, używając pola ", _jsx(_components.code, { children: "define" }), ", aby ułatwić migrację:"] }), "\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: ["To pozwala nam stopniowo dodawać prefiks do zmiennych środowiskowych i usuwać pole ", _jsx(_components.code, { children: "define" }), "."] }), "\n", _jsxs(_components.h2, { id: "podsumowanie", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#podsumowanie", children: _jsx(_components.span, { children: "#" }) }), "Podsumowanie"] }), "\n", _jsx(_components.p, { children: "To wszystko! Udało nam się pomyślnie przenieść nasze trzy projekty frontendowe z Parcel na Vite i mamy nadzieję, że ta krótka historia pomoże w twojej migracji. Oto jak wygląda konfiguracja na końcu:" }), "\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 // Logika ręcznego chunkowania\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 };