"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "arka-plan-hikayesi", "hProperties": { "id": "arka-plan-hikayesi" } }, "depth": 2, "value": "Arka plan hikayesi" }, { "data": { "id": "neden-vite", "hProperties": { "id": "neden-vite" } }, "depth": 3, "value": "Neden Vite?" }, { "data": { "id": "mevcut-durum", "hProperties": { "id": "mevcut-durum" } }, "depth": 2, "value": "Mevcut durum" }, { "data": { "id": "geçiş", "hProperties": { "id": "geçiş" } }, "depth": 2, "value": "Geçiş" }, { "data": { "id": "hazır-destek", "hProperties": { "id": "hazır-destek" } }, "depth": 3, "value": "Hazır destek" }, { "data": { "id": "yol-takma-adları", "hProperties": { "id": "yol-takma-adları" } }, "depth": 3, "value": "Yol takma adları" }, { "data": { "id": "react-fast-refresh-ve-hmr", "hProperties": { "id": "react-fast-refresh-ve-hmr" } }, "depth": 3, "value": "React Fast Refresh ve HMR" }, { "data": { "id": "svgyi-react-bileşeni-olarak-kullanma", "hProperties": { "id": "svgyi-react-bileşeni-olarak-kullanma" } }, "depth": 3, "value": "SVG'yi React bileşeni olarak kullanma" }, { "data": { "id": "sass-modülleri", "hProperties": { "id": "sass-modülleri" } }, "depth": 3, "value": "SASS modülleri" }, { "data": { "id": "mdx-desteği", "hProperties": { "id": "mdx-desteği" } }, "depth": 3, "value": "MDX desteği" }, { "data": { "id": "mdx-içerisinde-mermiad-desteği", "hProperties": { "id": "mdx-içerisinde-mermiad-desteği" } }, "depth": 3, "value": "MDX içerisinde Mermiad desteği" }, { "data": { "id": "tembel-yükleme", "hProperties": { "id": "tembel-yükleme" } }, "depth": 3, "value": "Tembel yükleme" }, { "data": { "id": "sıkıştırma", "hProperties": { "id": "sıkıştırma" } }, "depth": 3, "value": "Sıkıştırma" }, { "data": { "id": "manuel-parçalar", "hProperties": { "id": "manuel-parçalar" } }, "depth": 3, "value": "Manuel parçalar" }, { "data": { "id": "geliştirme-sunucusu", "hProperties": { "id": "geliştirme-sunucusu" } }, "depth": 3, "value": "Geliştirme sunucusu" }, { "data": { "id": "ortam-değişkenleri", "hProperties": { "id": "ortam-değişkenleri" } }, "depth": 3, "value": "Ortam değişkenleri" }, { "data": { "id": "sonuç", "hProperties": { "id": "sonuç" } }, "depth": 2, "value": "Sonuç" }]; const readingTime = { "minutes": 6, "words": 1813, "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: "arka-plan-hikayesi", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#arka-plan-hikayesi", children: _jsx(_components.span, { children: "#" }) }), "Arka plan hikayesi"] }), "\n", _jsx(_components.p, { children: "Logto'da üç ana ön yüz projemiz var: giriş deneyimi, Konsol ve canlı önizleme. Bu projelerin hepsi TypeScript, React ve SASS modüllerini kullanmakta; toplamda yaklaşık 100K satırlık koddan oluşuyorlar." }), "\n", _jsxs(_components.p, { children: ["Parcel'ı basitliği ve sıfır yapılandırma ile kullanıma hazır olması nedeniyle çok sevdik. Parcel ile yeni bir proje kurmanın ne kadar kolay olduğuna şaşırdığım günü hala hatırlayabiliyorum. Sadece ", _jsx(_components.code, { children: "parcel index.html" }), " komutunu çalıştırıyorsunuz ve bum, gerekli tüm bağımlılıklar yükleniyor ve proje çalışıyor. Eğer \"deneyimli\" bir geliştiriciyseniz, bu durumu Gulp ve Webpack ile kurulum yapmanın eski günleriyle karşılaştırdığınızda aynı şekilde hissedebilirsiniz. Parcel sihirli bir değnek gibi."] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Parcel'ın sadeliği, onu bu kadar uzun süre kullanmamızın ana nedeniydi, ancak bazen huysuz olabiliyordu. Örneğin:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Parcel, aslında orada olan bazı parça dosyalarını bulamadığı için projeyi derlemekte başarısız olabiliyordu." }), "\n", _jsx(_components.li, { children: "Monorepo kurulumumuzla çalışması için bazı hileli yapılandırmalar gerekiyordu." }), "\n", _jsx(_components.li, { children: "MDX 3'ü yerel olarak desteklemiyor, bu yüzden onun için özel bir dönüştürücü oluşturmamız gerekiyordu." }), "\n", _jsxs(_components.li, { children: ["Manuel parçaları desteklemiyor (bu yazının yazıldığı dönemde manuel parça özelliği hala ", _jsx(_components.a, { href: "https://parceljs.org/features/code-splitting/#manual-shared-bundles", children: "deneysel aşamada" }), "), bu çoğu durumda sorun değil, ancak bazen buna ihtiyaç duyulabiliyor."] }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Peki neden başka bir şeye geçmeye karar verdik?" }) }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Haziran 2023'te yayımlanan Parcel 2.9.3 sürümüne takılıp kaldık. O zamandan sonra her yeni sürüm çıktığında denedik fakat her zaman derleme hataları ile karşılaştık." }), "\n", _jsx(_components.li, { children: "Parcel'ın en son sürümü Şubat 2024'te yayımlanan 2.12.0'ydı. Neredeyse her gün yeni commitler olsa da, o zamandan bugüne kadar yeni bir sürüm yayımlanmadı." }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Birisi, ", _jsx(_components.a, { href: "https://github.com/parcel-bundler/parcel/discussions/9790", children: "Parcel öldü mü" }), " diye bir tartışma bile başlattı. Resmi cevap hayır, Parcel hala hayatta, ama üzerinde büyük bir yeniden yapılanma çalışıyoruz ve küçük sürümler için zamanımız yok halinde. Bizim için bu durum \"ördek ölümü\" gibiydi: Kullanabileceğimiz en son sürüm bir yıldan daha eskiydi ve bir sonraki sürümün ne zaman çıkacağı hakkında hiçbir bilgimiz yoktu. Ölmüş gibi görünüyor, ölmüş gibi davranıyor, bu nedenle bizim için ölmüş durumda."] }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/parcel_upgrades_238745d26d.png", alt: "Parcel yükseltme istekleri" }) }), "\n", _jsx("center", { className: "alt", children: "Bana güvenin, denedik." }), "\n", _jsxs(_components.h3, { id: "neden-vite", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#neden-vite", children: _jsx(_components.span, { children: "#" }) }), "Neden Vite?"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://vitejs.dev/", children: "Vite" }), "'i ", _jsx(_components.a, { href: "https://vitest.dev/", children: "Vitest" }), " sayesinde tanıdık. Birkaç ay önce, Jest'in ESM desteğinden (testlerde) bıktık ve yeni bir şey denemek istedik. Vitest, yerel ESM desteği ve Jest uyumluluğu ile kalplerimizi kazandı. Harika bir geliştirici deneyimi sunuyor ve Vite tarafından destekleniyor."] }), "\n", _jsxs(_components.h2, { id: "mevcut-durum", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#mevcut-durum", children: _jsx(_components.span, { children: "#" }) }), "Mevcut durum"] }), "\n", _jsx(_components.p, { children: "Projenizde farklı ayarlar olabilir, ama genellikle Vite ekosistemi geliştiği için eklenti ikameleri bulursunuz. İşte geçiş sırasında kullandığımız ayarlar:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Monorepo:" }), " Monorepo'muzu yönetmek için PNPM (v9) çalışma alanlarını kullanıyoruz."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Modül:" }), " Tüm projelerimiz için ESM modüllerini kullanıyoruz."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "TypeScript:" }), " Tüm projelerimizde yol takma adları ile TypeScript (v5.5.3) kullanıyoruz."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "React:" }), " Tüm ön yüz projelerimizde React (v18.3.1) kullanıyoruz."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Stil:" }), " Tarzlama için SASS modüllerini kullanıyoruz."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "SVG:" }), " SVG'leri React bileşenleri olarak kullanıyoruz."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "MDX:" }), " GitHub Tarzı Markdown ve Mermaid desteği ile MDX kullanıyoruz."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Tembel yükleme:" }), " Bazı sayfalarımızı ve bileşenlerimizi tembel yüklememiz gerekiyor."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Sıkıştırma:" }), " Üretim derlemeleri için sıkıştırılmış varlıklar (gzip ve brotli) üretiyoruz."] }), "\n"] }), "\n", _jsxs(_components.h2, { id: "geçiş", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#geçiş", children: _jsx(_components.span, { children: "#" }) }), "Geçiş"] }), "\n", _jsx(_components.p, { children: "Geçişe yeni bir Vite projesi oluşturarak ve nasıl çalıştığını görmek için etkileşimde bulunarak başladık. Süreç sorunsuz geçti ve gerçek geçiş sadece birkaç gün sürdü." }), "\n", _jsxs(_components.h3, { id: "hazır-destek", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#hazır-destek", children: _jsx(_components.span, { children: "#" }) }), "Hazır destek"] }), "\n", _jsx(_components.p, { children: "Vite, monorepo, ESM, TypeScript, React ve SASS için yerleşik desteğe sahip. Sadece gerekli eklentileri ve yapılandırmaları kurmak yeterliydi." }), "\n", _jsxs(_components.h3, { id: "yol-takma-adları", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#yol-takma-adları", children: _jsx(_components.span, { children: "#" }) }), "Yol takma adları"] }), "\n", _jsxs(_components.p, { children: ["Vite, yol takma adları için yerleşik desteğe sahiptir, örneğin ", _jsx(_components.code, { children: "tsconfig.json" }), " dosyamızda:"] }), "\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: ["Sadece ", _jsx(_components.code, { children: "vite.config.ts" }), " dosyamızda aynı çözümlemeyi eklememiz yeterli oldu:"] }), "\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: ["Dikkat edilmesi gereken nokta: Değiştirilen yolun proje köküne göre göreli olmasının yanında, mutlak yol olması gerekir. Alternatif olarak, ", _jsx(_components.a, { href: "https://github.com/aleclarson/vite-tsconfig-paths", children: "vite-tsconfig-paths" }), " eklentisini kullanarak yol takma adlarını ", _jsx(_components.code, { children: "tsconfig.json" }), " dosyasından okuyabilirsiniz."] }), "\n", _jsxs(_components.h3, { id: "react-fast-refresh-ve-hmr", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#react-fast-refresh-ve-hmr", children: _jsx(_components.span, { children: "#" }) }), "React Fast Refresh ve HMR"] }), "\n", _jsxs(_components.p, { children: ["Vite, HMR için yerleşik desteğe sahip olsa da, React Fast Refresh'i etkinleştirmek için bir eklenti kurulması gereklidir. Vite ekibi tarafından sağlanan ve Fast Refresh gibi React özellikleri için mükemmel destek sunan ", _jsx(_components.a, { href: "https://github.com/vitejs/vite-plugin-react", children: "@vitejs/plugin-react" }), " eklentisini kullandık:"] }), "\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: "svgyi-react-bileşeni-olarak-kullanma", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#svgyi-react-bileşeni-olarak-kullanma", children: _jsx(_components.span, { children: "#" }) }), "SVG'yi React bileşeni olarak kullanma"] }), "\n", _jsxs(_components.p, { children: ["SVG'leri React bileşenlerine dönüştürmek için ", _jsx(_components.a, { href: "https://github.com/pd4d10/vite-plugin-svgr", children: "vite-plugin-svgr" }), " eklentisini kullandık. Vite yapılandırmasına eklentiyi eklemek kadar basit:"] }), "\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: ["Ancak, SVG'lerin hangi koşulda React bileşenlerine dönüştürüleceğini belirtmedik, bu nedenle tüm ithalatlar dönüştürüldü. Eklenti, yalnızca ", _jsx(_components.code, { children: ".svg?react" }), " uzantısıyla ithal edilen SVG'leri dönüştürmeyi öneren daha iyi bir varsayılan yapılandırma sunuyor. İthalatlarımızı buna göre güncelledik."] }), "\n", _jsxs(_components.h3, { id: "sass-modülleri", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#sass-modülleri", children: _jsx(_components.span, { children: "#" }) }), "SASS modülleri"] }), "\n", _jsxs(_components.p, { children: ["Vite, SASS modülleri için yerleşik desteğe sahip olsa da, üzerinde durmamız gereken bir konu var: sınıf adlarının nasıl biçimlendirildiği. Sınıf adları tutarlı bir şekilde biçimlendirilmediğinde kullanıcılar ve entegrasyon testleri için sorun yaratabilir. ", _jsx(_components.code, { children: "vite.config.ts" }), " dosyasındaki tek satırlık yapılandırma bu sorunu çözebilir:"] }), "\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]', // Kendi formatınızla değiştirin\n },\n },\n});\n" }) }), "\n", _jsx(_components.p, { children: "Bu arada, Parcel ve Vite'in SASS dosyalarını ithalatlarındaki bazı farkları vardır:" }), "\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" }), " sözdizimi Vite'de çalışır, ancak ", _jsx(_components.code, { children: "styles" }), " nesnesine dinamik anahtarlar kullanarak erişirken modüler sınıf adlarının kaybına neden olur. Örneğin:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "const className = 'button';\n// Beklendiği gibi çalışmayacaktır\nreturn ;\n" }) }), "\n", _jsxs(_components.h3, { id: "mdx-desteği", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#mdx-desteği", children: _jsx(_components.span, { children: "#" }) }), "MDX desteği"] }), "\n", _jsxs(_components.p, { children: ["Vite, kaputun altında Rollup kullandığından, MDX ve eklentilerini desteklemek için resmi ", _jsx(_components.a, { href: "https://mdxjs.com/packages/rollup/", children: "@mdx-js/rollup" }), " eklentisini kullanabiliriz. Yapılandırma şu şekildedir:"] }), "\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 // MDX eklentisinin çalışması için `enforce: 'pre'` gereklidir\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" }), " eklentisi, GitHub Tarzı Markdown'u desteklemek için kullanılır ve ", _jsx(_components.code, { children: "rehypeMdxCodeProps" }), " eklentisi, MDX dosyalarında kod bloklarına prop'ları vermek için kullanılır; bu özellik ", _jsx(_components.a, { href: "https://docusaurus.io/docs/markdown-features/code-blocks#code-title", children: "Docusaurus'un yaptığı gibi" }), " çalışır."] }), "\n", _jsxs(_components.h3, { id: "mdx-içerisinde-mermiad-desteği", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#mdx-içerisinde-mermiad-desteği", children: _jsx(_components.span, { children: "#" }) }), "MDX içerisinde Mermiad desteği"] }), "\n", _jsx(_components.p, { children: "MDX dosyalarımızda diğer programlama dilleri gibi Mermaid diyagramlarını kullanmak istiyoruz. Kullanımı diğer kod blokları kadar basit olmalıdır:" }), "\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: "Şu şekilde render edilmelidir:" }), "\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: "Uygulamamız açık ve koyu temaları desteklediğinden, Mermaid diyagramlarının koyu temayla çalışması için biraz kodlama yaptık. Bir React bileşeni oluşturduk:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import { useEffect } from 'react';\nimport useTheme from '@/hooks/use-theme';\n\n// Belki başka bir yerde tanımlanmıştır\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" }), " mevcut temayı bağlamdan almak için kullanılan özel bir hook'tur. ", _jsx(_components.code, { children: "mermaid" }), " kütüphanesi, ilk sayfa yükleme boyutunu azaltmak için asenkron olarak yüklenir."] }), "\n", _jsx(_components.p, { children: "MDX dosyasındaki kod bloğu için, işi yapmak için birleşik bir bileşene sahibiz:" }), "\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 // Diğer kod blokları buraya gelir\n return {String(children).trimEnd()};\n}\n" }) }), "\n", _jsx(_components.p, { children: "Sonunda MDX sağlayıcısını şu şekilde tanımlıyoruz:" }), "\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 ` yerine özelleştirilmiş bir bileşen yerleştirilemediği için `Code` bileşenini açıkça belirleyin.\n // Bakınız: https://github.com/orgs/mdx-js/discussions/2231#discussioncomment-4729474\n Code,\n // ...diğer bileşenler\n }}\n >\n {children}\n \n );\n}\n" }) }), "\n", _jsxs(_components.h3, { id: "tembel-yükleme", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#tembel-yükleme", children: _jsx(_components.span, { children: "#" }) }), "Tembel yükleme"] }), "\n", _jsx(_components.p, { children: "Bu Vite'e özgü bir şey değil, ancak geçiş sırasında sayfalarımızı tembel yüklemeye güncellediğimiz için ve hiçbir şey bozulmadığı için bahsetmeye değer." }), "\n", _jsxs(_components.p, { children: ["React, bileşenleri tembel yüklemek için yerleşik bir ", _jsx(_components.code, { children: "React.lazy" }), " işlevine sahiptir. Ancak, hızlı iterasyon yaparken bazı sorunlara neden olabilir. Bu sorunları çözmek için ", _jsx(_components.a, { href: "https://github.com/silverhand-io/react-safe-lazy", children: "react-safe-lazy" }), " adında küçük bir kütüphane geliştirdik. Bu, ", _jsx(_components.code, { children: "React.lazy" }), " için bir bırakma değiştiricidir ve bu ", _jsx(_components.a, { href: "https://blog.logto.io/react-safe-lazy/?ref=post-vite", children: "blog gönderisinde" }), " ayrıntılı bir açıklama bulabilirsiniz."] }), "\n", _jsxs(_components.h3, { id: "sıkıştırma", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#sıkıştırma", children: _jsx(_components.span, { children: "#" }) }), "Sıkıştırma"] }), "\n", _jsxs(_components.p, { children: ["Üretim varlıklarını sıkıştırmak için ", _jsx(_components.a, { href: "https://github.com/vbenjs/vite-plugin-compression", children: "vite-plugin-compression" }), " adlı güzel bir eklenti bulunuyor. Hem gzip hem de brotli sıkıştırmasını destekliyor. Yapılandırma basit:"] }), "\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 // Varsayılan olarak Gzip\n viteCompression(),\n // Brotli\n viteCompression({ algorithm: 'brotliCompress' }),\n ],\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "manuel-parçalar", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#manuel-parçalar", children: _jsx(_components.span, { children: "#" }) }), "Manuel parçalar"] }), "\n", _jsxs(_components.p, { children: ["Vite'in (veya alttaki Rollup'ın) harika özelliklerinden biri manuel parçalardır. ", _jsx(_components.code, { children: "React.lazy" }), " bileşenleri tembel yüklemek için kullanılırken, hangi bileşenlerin veya modüllerin birlikte paketlenmesi gerektiğine karar vermek için manuel parçaları belirleyerek parçalar üzerinde daha fazla kontrol sağlayabiliriz."] }), "\n", _jsxs(_components.p, { children: ["Örneğin, önce ", _jsx(_components.a, { href: "https://github.com/KusStar/vite-bundle-visualizer", children: "vite-bundle-visualizer" }), " kullanarak paket boyutunu ve bağımlılıkları analiz edebiliriz. Ardından parçaları bölmek için uygun bir işlev yazabiliriz:"] }), "\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 // Modülün React ile ilgili bağımlılıkları olup olmadığını dinamik olarak kontrol etme\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 // Dikkat: React ile ilgili paketlerin birlikte paketlenmesi gerekir, aksi takdirde çalışma zamanı hatalarına neden olabilir\n if (id.includes('/node_modules/') && hasReactDependency(id)) {\n return 'react';\n }\n\n // Büyük paketlerinizi listeye ekleyin\n for (const largePackage of ['mermaid', 'elkjs']) {\n if (id.includes(`/node_modules/${largePackage}/`)) {\n return largePackage;\n }\n }\n\n // `node_modules` klasöründeki diğer tüm paketler birlikte paketlenecektir\n if (id.includes('/node_modules/')) {\n return 'vendors';\n }\n\n // Diğer modüller için varsayılan davranışı kullanın\n },\n },\n },\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "geliştirme-sunucusu", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#geliştirme-sunucusu", children: _jsx(_components.span, { children: "#" }) }), "Geliştirme sunucusu"] }), "\n", _jsxs(_components.p, { children: ["Üretim derlemesinin aksine, Vite geliştirici modunda kaynak kodunuzu DERLEMEZ (aynı monorepo'daki bağlı bağımlılıklar dahil) ve her modülü bir dosya olarak ele alır. Bizim için tarayıcı, ilk kez yüzlerce modül yükleyecektir, bu çılgınca görünebilir ama aslında çoğu durumda bir sorun değildir. Tartışmaya ", _jsx(_components.a, { href: "https://github.com/vitejs/vite/discussions/4803", children: "buradan" }), " göz atabilirsiniz."] }), "\n", _jsxs(_components.p, { children: ["Bu sizin için bir sorun ise, mükemmel olmayan alternatif bir çözüm ", _jsx(_components.code, { children: "vite.config.ts" }), " dosyasındaki ", _jsx(_components.code, { children: "optimizeDeps" }), " seçeneğinde bağlı bağımlılıkları listelemektir:"] }), "\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: "Bu, bağlı bağımlılıkları \"ön-derleyecek\" ve geliştirme sunucusunu daha hızlı hale getirecektir. Dezavantajı ise bağlı bağımlılıklar için HMR'ın beklendiği gibi çalışmama olasılığıdır." }), "\n", _jsxs(_components.p, { children: ["Ayrıca, üretimde statik dosyaları sunan ve geliştirme sırasında istekleri Vitest sunucusuna yönlendiren bir proxy kullanıyoruz. Çakışmalardan kaçınmak için belirli portları yapılandırdık ve ", _jsx(_components.code, { children: "vite.config.ts" }), " dosyasını ayarlamak da oldukça kolay:"] }), "\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: "ortam-değişkenleri", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ortam-değişkenleri", children: _jsx(_components.span, { children: "#" }) }), "Ortam değişkenleri"] }), "\n", _jsxs(_components.p, { children: ["Parcel'dan farklı olarak, Vite, ", _jsx(_components.code, { children: "import.meta.env" }), " kullanarak ortam değişkenlerini modern bir yaklaşımla ele alır. ", _jsx(_components.code, { children: ".env" }), " dosyalarını otomatik olarak yükler ve koddaki değişkenleri değiştirir. Ancak, tüm ortam değişkenlerinin ", _jsx(_components.code, { children: "VITE_" }), " (yapılandırılabilir) önekiyle başlaması gerekir."] }), "\n", _jsxs(_components.p, { children: ["Parcel'ı kullanırken, sadece önek kontrolü yapmadan ", _jsx(_components.code, { children: "process.env" }), " değişkenlerini değiştiriyordu. Bu nedenle, geçişi kolaylaştırmak için ", _jsx(_components.code, { children: "define" }), " alanını kullanarak bir çözüm bulduk:"] }), "\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: ["Bu, ortam değişkenlerine yavaş yavaş önek eklememize ve ", _jsx(_components.code, { children: "define" }), " alanını kaldırmamıza olanak tanır."] }), "\n", _jsxs(_components.h2, { id: "sonuç", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#sonuç", children: _jsx(_components.span, { children: "#" }) }), "Sonuç"] }), "\n", _jsx(_components.p, { children: "Hepsi bu kadar! Üç ön yüz projemizi Parcel'dan Vite'a başarılı bir şekilde geçirdik ve umarız bu kısa hikaye, sizin geçişinize de yardımcı olur. İşte son yapılandırmanın nasıl göründüğü:" }), "\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 // Manuel parçalar mantığı\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 };