"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "เรื่องก่อนหน้า", "hProperties": { "id": "เรื่องก่อนหน้า" } }, "depth": 2, "value": "เรื่องก่อนหน้า" }, { "data": { "id": "ทำไมต้อง-vite", "hProperties": { "id": "ทำไมต้อง-vite" } }, "depth": 3, "value": "ทำไมต้อง Vite?" }, { "data": { "id": "สถานะปัจจุบัน", "hProperties": { "id": "สถานะปัจจุบัน" } }, "depth": 2, "value": "สถานะปัจจุบัน" }, { "data": { "id": "การย้าย", "hProperties": { "id": "การย้าย" } }, "depth": 2, "value": "การย้าย" }, { "data": { "id": "รองรับอัตโนมัติ", "hProperties": { "id": "รองรับอัตโนมัติ" } }, "depth": 3, "value": "รองรับอัตโนมัติ" }, { "data": { "id": "การใช้นามแฝงสำหรับ-path", "hProperties": { "id": "การใช้นามแฝงสำหรับ-path" } }, "depth": 3, "value": "การใช้นามแฝงสำหรับ path" }, { "data": { "id": "react-fast-refresh-และ-hmr", "hProperties": { "id": "react-fast-refresh-และ-hmr" } }, "depth": 3, "value": "React Fast Refresh และ HMR" }, { "data": { "id": "svg-เป็น-react-component", "hProperties": { "id": "svg-เป็น-react-component" } }, "depth": 3, "value": "SVG เป็น React component" }, { "data": { "id": "sass-modules", "hProperties": { "id": "sass-modules" } }, "depth": 3, "value": "SASS modules" }, { "data": { "id": "การรองรับ-mdx", "hProperties": { "id": "การรองรับ-mdx" } }, "depth": 3, "value": "การรองรับ MDX" }, { "data": { "id": "การรองรับ-mermaid-ใน-mdx", "hProperties": { "id": "การรองรับ-mermaid-ใน-mdx" } }, "depth": 3, "value": "การรองรับ Mermaid ใน MDX" }, { "data": { "id": "การโหลดแบบ-lazy", "hProperties": { "id": "การโหลดแบบ-lazy" } }, "depth": 3, "value": "การโหลดแบบ lazy" }, { "data": { "id": "การบีบอัด", "hProperties": { "id": "การบีบอัด" } }, "depth": 3, "value": "การบีบอัด" }, { "data": { "id": "manual-chunks", "hProperties": { "id": "manual-chunks" } }, "depth": 3, "value": "Manual chunks" }, { "data": { "id": "เซิร์ฟเวอร์สำหรับการพัฒนา", "hProperties": { "id": "เซิร์ฟเวอร์สำหรับการพัฒนา" } }, "depth": 3, "value": "เซิร์ฟเวอร์สำหรับการพัฒนา" }, { "data": { "id": "ตัวแปรสภาพแวดล้อม", "hProperties": { "id": "ตัวแปรสภาพแวดล้อม" } }, "depth": 3, "value": "ตัวแปรสภาพแวดล้อม" }, { "data": { "id": "สรุป", "hProperties": { "id": "สรุป" } }, "depth": 2, "value": "สรุป" }]; const readingTime = { "minutes": 3, "words": 912, "text": "3 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: "เรื่องก่อนหน้า", children: ["เรื่องก่อนหน้า", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#เรื่องก่อนหน้า", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "เรามีสามโปรเจค frontend ที่ Logto: ประสบการณ์การลงชื่อเข้าใช้, Console, และ live preview. โปรเจคเหล่านี้ทั้งหมดใช้ TypeScript, React, และ SASS modules; รวมแล้วมีประมาณ 100K บรรทัดของโค้ด" }), "\n", _jsxs(_components.p, { children: ["เราเคยชอบ Parcel สำหรับความง่ายและการตั้งค่าแบบ zero-config. ฉันยังจำได้ถึงวันที่ตกใจกับความง่ายในการตั้งค่าโปรเจคใหม่ด้วย Parcel. คุณเพียงแค่รัน ", _jsx(_components.code, { children: "parcel index.html" }), " แล้วปัง เหมือนมีเวทมนตร์."] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "ความง่ายของ Parcel เป็นเหตุผลหลักที่เรายึดติดกับมันมานาน แม้ว่าบางครั้งมันจะอารมณ์ไม่ดี เช่น:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Parcel บางครั้งไม่สามารถจับกลุ่มโปรเจคได้เพราะมันไม่พบบาง chunk files ที่มีอยู่จริง" }), "\n", _jsx(_components.li, { children: "มันต้องการการตั้งค่าที่ซับซ้อนเพื่อให้ทำงานกับ monorepo ของเราได้" }), "\n", _jsx(_components.li, { children: "มันไม่รองรับ MDX 3 ตามค่าเริ่มต้น ดังนั้นเราต้องสร้าง custom transformer ขึ้น" }), "\n", _jsxs(_components.li, { children: ["มันไม่รองรับ manual chunks (ณ ขณะที่เขียน ฟีเจอร์ manual chunks ยังอยู่ ", _jsx(_components.a, { href: "https://parceljs.org/features/code-splitting/#manual-shared-bundles", children: "ในขั้นทดสอบเชิงทดลอง" }), ") ซึ่งโอเคในสถานการณ์ส่วนใหญ่ แต่บางครั้งคุณต้องการมัน"] }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "ทำไมเราถึงตัดสินใจย้ายไปที่อื่น?" }) }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "เราติดอยู่กับ Parcel 2.9.3 ซึ่งปล่อยเมื่อเดือนมิถุนายน 2023 ทุกครั้งที่มีการปล่อยเวอร์ชันใหม่หลังจากนั้น เราพยายามอัพเกรดแต่มันมักจะล้มเหลวด้วยข้อผิดพลาดในการสร้าง" }), "\n", _jsx(_components.li, { children: "เวอร์ชันล่าสุดของ Parcel คือ 2.12.0, ปล่อยในเดือนกุมภาพันธ์ 2024. แม้ว่าจะมีการ commit แทบทุกวัน แต่ไม่มีการปล่อยเวอร์ชันใหม่ตั้งแต่นั้น" }), "\n"] }), "\n", _jsxs(_components.p, { children: ["บางคนถึงกับเปิดการสนทนาเพื่อถามว่า ", _jsx(_components.a, { href: "https://github.com/parcel-bundler/parcel/discussions/9790", children: "Parcel ตายแล้วหรือไม่" }), ". คำตอบอย่างเป็นทางการคือไม่, Parcel ยังไม่ตาย แต่กำลังอยู่ในโหมดเรากำลังทำการ refactor ขนาดใหญ่และไม่มีเวลาสำหรับการปล่อยรอง. สำหรับเรา มันเหมือน \"ตายเงียบ\": เวอร์ชันล่าสุดที่เราใช้ได้คือเมื่อกว่าปีที่แล้วและเราไม่รู้ว่าเวอร์ชันถัดไปจะปล่อยเมื่อไหร่. มันดูเหมือนมันตายแล้ว, มันแสดงบทบาทเหมือนมันตาย, ดังนั้นมันตายสำหรับเรา."] }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/parcel_upgrades_238745d26d.png", alt: "คำขออัพเกรด Parcel" }) }), "\n", _jsx("center", { className: "alt", children: "เชื่อฉันเถอะ, เราพยายามแล้ว" }), "\n", _jsxs(_components.h3, { id: "ทำไมต้อง-vite", children: ["ทำไมต้อง Vite?", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ทำไมต้อง-vite", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["เรารู้จัก ", _jsx(_components.a, { href: "https://vitejs.dev/", children: "Vite" }), " จาก ", _jsx(_components.a, { href: "https://vitest.dev/", children: "Vitest" }), ". เมื่อหลายเดือนก่อน, เราเบื่อกับการรองรับ ESM ของ Jest (ใน testing) และต้องการลองสิ่งใหม่. Vitest ชนะใจของเราด้วยการรองรับ ESM แบบเนทีฟและความเข้ากันได้กับ Jest. มันมีประสบการณ์สำหรับนักพัฒนาที่น่าทึ่ง และขับเคลื่อนโดย Vite."] }), "\n", _jsxs(_components.h2, { id: "สถานะปัจจุบัน", children: ["สถานะปัจจุบัน", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#สถานะปัจจุบัน", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "คุณอาจมีการตั้งค่าที่ต่างกันในโปรเจคของคุณ แต่ปกติแล้วคุณจะพบว่า plugin replacements ในขณะที่ระบบนิเวศของ Vite กำลังบานสะพรั่ง นี่คือการตั้งค่าของเราในขณะที่ย้าย:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Monorepo:" }), " เราใช้ PNPM (v9) workspaces เพื่อจัดการ monorepo ของเรา"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Module:" }), " เราใช้ ESM modules สำหรับทุกโปรเจคของเรา"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "TypeScript:" }), " เราใช้ TypeScript (v5.5.3) สำหรับทุกโปรเจคพร้อม path aliases"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "React:" }), " เราใช้ React (v18.3.1) สำหรับทุกโปรเจค frontend"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Styling:" }), " เราใช้ SASS modules สำหรับ styling"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "SVG:" }), " เราใช้ SVGs เป็น React components"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "MDX:" }), " เรามี MDX ที่มีการรองรับ GitHub Flavored Markdown และ Mermaid"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Lazy loading:" }), " เราจำเป็นต้อง lazy load บางหน้าและ components ของเรา"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Compression:" }), " เราผลิต assets ที่ถูกบีบอัด (gzip และ brotli) สำหรับการสร้าง production"] }), "\n"] }), "\n", _jsxs(_components.h2, { id: "การย้าย", children: ["การย้าย", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#การย้าย", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "เราเริ่มการย้ายโดยการสร้างโปรเจค Vite ใหม่และทดลองเล่นกับมันเพื่อดูว่ามันทำงานอย่างไร. กระบวนการราบรื่นและการย้ายจริงใช้เวลาเพียงไม่กี่วัน." }), "\n", _jsxs(_components.h3, { id: "รองรับอัตโนมัติ", children: ["รองรับอัตโนมัติ", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#รองรับอัตโนมัติ", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Vite มีการรองรับอัตโนมัติสำหรับ monorepo, ESM, TypeScript, React, และ SASS. เราเพียงแค่ต้องติดตั้ง plugins และการตั้งค่าที่จำเป็น." }), "\n", _jsxs(_components.h3, { id: "การใช้นามแฝงสำหรับ-path", children: ["การใช้นามแฝงสำหรับ path", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#การใช้นามแฝงสำหรับ-path", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Vite มีการรองรับในตัวสำหรับการใช้นามแฝง เช่นใน ", _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: ["เราจำเป็นต้องเพิ่มการตั้งค่าเดียวกันใน ", _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: ["การแทนที่ path ควรเป็น path แบบสมบูรณ์ ในขณะที่มันสัมพันธ์กับรากของโปรเจค. หรือคุณสามารถใช้ plugin ", _jsx(_components.a, { href: "https://github.com/aleclarson/vite-tsconfig-paths", children: "vite-tsconfig-paths" }), " เพื่ออ่านการใช้นามแฝงจาก ", _jsx(_components.code, { children: "tsconfig.json" }), "."] }), "\n", _jsxs(_components.h3, { id: "react-fast-refresh-และ-hmr", children: ["React Fast Refresh และ HMR", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#react-fast-refresh-และ-hmr", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["แม้ว่า Vite จะมีการรองรับในตัวสำหรับ HMR แต่จำเป็นต้องติดตั้ง plugin เพื่อเปิดใช้งาน React Fast Refresh. เราใช้ plugin ", _jsx(_components.a, { href: "https://github.com/vitejs/vite-plugin-react", children: "@vitejs/plugin-react" }), " ที่มีการรองรับฟีเจอร์ของ React เช่น 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-component", children: ["SVG เป็น React component", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#svg-เป็น-react-component", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["เราใช้ plugin ", _jsx(_components.a, { href: "https://github.com/pd4d10/vite-plugin-svgr", children: "vite-plugin-svgr" }), " เพื่อแปลง SVGs เป็น React components. มันง่ายเหมือนการเพิ่ม plugin ลงใน config ของ 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: ["อย่างไรก็ตาม เรายังไม่ได้ระบุเงื่อนไขในการแปลง SVGs เป็น React components ดังนั้นการนำเข้าสินค้าทั้งหมดจะถูกแปลง. plugin มีการตั้งค่าที่ดีกว่า: แปลงเฉพาะ SVGs ที่นำเข้าด้วยนามสกุล ", _jsx(_components.code, { children: ".svg?react" }), ". เราได้อัพเดทการนำเข้าสินค้าตามนั้น."] }), "\n", _jsxs(_components.h3, { id: "sass-modules", children: ["SASS modules", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#sass-modules", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["แม้ว่า Vite จะมีการรองรับในตัวสำหรับ SASS modules แต่มีสิ่งหนึ่งที่เราต้องใส่ใจ: วิธีการจัดรูปแบบชื่อ class. มันอาจเป็นปัญหาสำหรับผู้ใช้และการทดสอบ integration ของเราหากชื่อ class ไม่จัดเรียงแบบเดียวกัน. การตั้งค่าเพียงบรรทัดเดียวใน ", _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 css: {\n modules: {\n generateScopedName: '[name]__[local]--[hash:base64:5]', // แทนที่ด้วยรูปแบบของคุณเอง\n },\n },\n});\n" }) }), "\n", _jsx(_components.p, { children: "อย่างไรก็ตาม Parcel และ Vite มีรูปแบบที่ต่างกันในการนำเข้าไฟล์ 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: ["การใช้ไวยากรณ์ ", _jsx(_components.code, { children: "* as" }), " นั้นทำงานใน Vite แต่จะทำให้เสียชื่อ class แบบ modularized เมื่อคุณใช้คีย์ในการเข้าถึงวัตถุ ", _jsx(_components.code, { children: "styles" }), ". เช่น:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "const className = 'button';\n// นี่จะไม่ทำงานอย่างที่คาดหวัง\nreturn ;\n" }) }), "\n", _jsxs(_components.h3, { id: "การรองรับ-mdx", children: ["การรองรับ MDX", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#การรองรับ-mdx", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["เนื่องจาก Vite ใช้ Rollup เป็นสิ่งสำคัญ เราสามารถใช้ plugin อย่างเป็นทางการ ", _jsx(_components.a, { href: "https://mdxjs.com/packages/rollup/", children: "@mdx-js/rollup" }), " เพื่อรองรับ MDX รวมถึง plugins ของมันด้วย"] }), "\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 plugin ให้ทำงาน\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: ["plugin ", _jsx(_components.code, { children: "remarkGfm" }), " ใช้ในการรองรับ GitHub Flavored Markdown, และ plugin ", _jsx(_components.code, { children: "rehypeMdxCodeProps" }), " ใช้ในการผ่าน props ไปยัง code blocks ในไฟล์ MDX เหมือนกับ ", _jsx(_components.a, { href: "https://docusaurus.io/docs/markdown-features/code-blocks#code-title", children: "Docusaurus ทำ" }), "."] }), "\n", _jsxs(_components.h3, { id: "การรองรับ-mermaid-ใน-mdx", children: ["การรองรับ Mermaid ใน MDX", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#การรองรับ-mermaid-ใน-mdx", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "เราต้องการใช้ Mermaid diagrams ในไฟล์ MDX ของเราเช่นเดียวกับภาษาการเขียนโปรแกรมอื่น ๆ การใช้งานควรเป็นเรื่องง่ายเหมือน code blocks อื่นๆ:" }), "\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: "ควรถูกแสดงเป็น:" }), "\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: "เนื่องจากแอปของเรารองรับ theme แสงและมืด เราเขียนโค้ดเล็กน้อยให้ Mermaid diagrams ทำงานกับ theme มืด. เราสร้าง React component:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import { useEffect from 'react';\nimport useTheme from '@/hooks/use-theme';\n\n// อาจถูกกำหนดไว้ที่อื่น\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" }), " เป็น custom hook เพื่อดึง theme ปัจจุบันจาก context. ไลบราลี่ ", _jsx(_components.code, { children: "mermaid" }), " ถูกนำเข้าแบบอะซิงค์เพื่อลดโหลดหน้าเริ่มต้น."] }), "\n", _jsx(_components.p, { children: "สำหรับ code block ในไฟล์ MDX เรามี component แบบรวมที่สุดในการทำงาน:" }), "\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 // Other code blocks go here\n return {String(children).trimEnd()};\n}\n" }) }), "\n", _jsx(_components.p, { children: "สุดท้ายเรากำหนด MDX provider โดย:" }), "\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 ` ไม่สามารถเปลี่ยนแปลงด้วย component แบบกำหนดเองในขณะนี้\n // ดู: https://github.com/orgs/mdx-js/discussions/2231#discussioncomment-4729474\n Code,\n // ...components อื่นๆ\n }}\n >\n {children}\n \n );\n}\n" }) }), "\n", _jsxs(_components.h3, { id: "การโหลดแบบ-lazy", children: ["การโหลดแบบ lazy", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#การโหลดแบบ-lazy", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "นี่ไม่ใช่เรื่องเฉพาะของ Vite มันยังคงเป็นสิ่งที่คุ้มค่าที่จะกล่าวถึงเพราะเราอัพเดทหน้าเพจของเราให้ใช้การโหลดแบบ lazy ในระหว่างการย้ายและไม่มีอะไรพังหลังจากนั้น" }), "\n", _jsxs(_components.p, { children: ["React มีฟังก์ชัน ", _jsx(_components.code, { children: "React.lazy" }), " ในตัวเพื่อโหลด components แบบ lazy. อย่างไรก็ตาม มันอาจก่อให้เกิดปัญหาบางอย่างเมื่อคุณกำลังทำงานอย่างรวดเร็ว. เราสร้างไลบราลี่เล็ก ๆ ชื่อ ", _jsx(_components.a, { href: "https://github.com/silverhand-io/react-safe-lazy", children: "react-safe-lazy" }), " เพื่อแก้ปัญหา. มันเป็นตัวแทนโดยตรงสำหรับ ", _jsx(_components.code, { children: "React.lazy" }), " และคำอธิบายอย่างละเอียดสามารถพบได้ใน ", _jsx(_components.a, { href: "https://blog.logto.io/react-safe-lazy/?ref=post-vite", children: "โพสต์บล็อกนี้" }), "."] }), "\n", _jsxs(_components.h3, { id: "การบีบอัด", children: ["การบีบอัด", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#การบีบอัด", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["มี plugin ที่เรียบง่ายชื่อ ", _jsx(_components.a, { href: "https://github.com/vbenjs/vite-plugin-compression", children: "vite-plugin-compression" }), " เพื่อผลิต assets ที่ถูกบีบอัด. มันรองรับทั้งการบีบอัดแบบ gzip และ brotli. การตั้งค่าง่ายมาก:"] }), "\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 โดยค่าเริ่มต้น\n viteCompression(),\n // Brotli\n viteCompression({ algorithm: 'brotliCompress' }),\n ],\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "manual-chunks", children: ["Manual chunks", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#manual-chunks", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["ฟีเจอร์ที่ดีของ Vite (หรือ Rollup ที่อยู่ภายใต้) คือ manual chunks. แม้ว่า ", _jsx(_components.code, { children: "React.lazy" }), " ใช้สำหรับการโหลด components แบบ lazy, เราสามารถควบคุม chunks ได้มากขึ้นโดยการระบุ manual chunks เพื่อตัดสินใจว่า components หรือ modules ไหนควรถูกจับกลุ่มเข้าด้วยกัน."] }), "\n", _jsxs(_components.p, { children: ["ตัวอย่างเช่น เราสามารถใช้ ", _jsx(_components.a, { href: "https://github.com/KusStar/vite-bundle-visualizer", children: "vite-bundle-visualizer" }), " เพื่อวิเคราะห์ขนาดของ bundle และ dependencies. จากนั้นเราสามารถเขียนฟังก์ชันที่เหมาะสมในการแยก chunks:"] }), "\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 // ตรวจสอบ module ที่มีความสัมพันธ์กับ 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 // เตือนว่าควรรวม packages ที่เกี่ยวข้องกับ React เข้าด้วยกัน มิฉะนั้นมันอาจทำให้เกิดข้อผิดพลาดขณะรันไทม์\n if (id.includes('/node_modules/') && hasReactDependency(id)) {\n return 'react';\n }\n\n // เพิ่ม packages ขนาดใหญ่ของคุณลงในรายการ\n for (const largePackage of ['mermaid', 'elkjs']) {\n if (id.includes(`/node_modules/${largePackage}/`)) {\n return largePackage;\n }\n }\n\n // ทุก packages อื่น ๆ ในโฟลเดอร์ `node_modules` จะถูกจับกลุ่มเข้าด้วยกัน\n if (id.includes('/node_modules/')) {\n return 'vendors';\n }\n\n // ใช้พฤติกรรมตามค่าเริ่มต้นสำหรับ modules อื่น ๆ\n },\n },\n },\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "เซิร์ฟเวอร์สำหรับการพัฒนา", children: ["เซิร์ฟเวอร์สำหรับการพัฒนา", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#เซิร์ฟเวอร์สำหรับการพัฒนา", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["แตกต่างจากการสร้าง production, Vite จะไม่จับกลุ่มซอร์สโค้ดของคุณในโหมด dev (รวมถึง dependencies ที่เชื่อมโยงได้ใน monorepo เดียวกัน) และปฏิบัติต่อทุก module ตามไฟล์. สำหรับเรา, เบราว์เซอร์จะโหลด modules เป็นร้อย ๆ ครั้งแรก, ซึ่งดูบ้าแต่จริง ๆ แล้วมันไม่เป็นปัญหาในกรณีส่วนใหญ่. คุณสามารถดูการสนทนาได้ ", _jsx(_components.a, { href: "https://github.com/vitejs/vite/discussions/4803", children: "ที่นี่" }), "."] }), "\n", _jsxs(_components.p, { children: ["หากมันเป็นปัญหาสำหรับคุณ, ตัวเลือกอื่น ๆ แต่ไม่สมบูรณ์คือการระบุ dependencies ที่เชื่อมโยงในตัวเลือก ", _jsx(_components.code, { children: "optimizeDeps" }), " ของ ", _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: "นี้จะ \"pre-bundle\" dependencies ที่เชื่อมโยงและทำให้เซิร์ฟเวอร์ dev เร็วขึ้น. จุดบกพร่องคือ HMR อาจไม่ทำงานตามที่ต้องการสำหรับ dependencies ที่เชื่อมโยง." }), "\n", _jsxs(_components.p, { children: ["นอกจากนี้ เราใช้ proxy ที่ให้บริการไฟล์ static ใน production และส่งคำขอไปยังเซิร์ฟเวอร์ Vitest ในการพัฒนา. เรามีการตั้งค่าพอร์ตบางอย่างเพื่อหลีกเลี่ยงความขัดแย้งและมันก็ตั้งค่าได้ง่ายใน ", _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: "ตัวแปรสภาพแวดล้อม", children: ["ตัวแปรสภาพแวดล้อม", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ตัวแปรสภาพแวดล้อม", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["แตกต่างจาก Parcel, Vite ใช้แนวทางที่ทันสมัยในการจัดการตัวแปรสภาพแวดล้อมโดยใช้ ", _jsx(_components.code, { children: "import.meta.env" }), ". มันจะโหลดไฟล์ ", _jsx(_components.code, { children: ".env" }), " อัตโนมัติและแทนที่ตัวแปรในโค้ด. อย่างไรก็ตาม, มันต้องการให้ตัวแปรสภาพแวดล้อมทั้งหมดมีคำนำหน้า ", _jsx(_components.code, { children: "VITE_" }), " (กำหนดได้)."] }), "\n", _jsxs(_components.p, { children: ["ในขณะที่เราใช้ Parcel, มันแค่แทนที่ตัวแปร ", _jsx(_components.code, { children: "process.env" }), " โดยไม่ตรวจสอบคำนำหน้า. ดังนั้นเรามีวิธีแก้ไขโดยใช้ฟิลด์ ", _jsx(_components.code, { children: "define" }), " เพื่อทำให้การย้ายง่ายขึ้น:"] }), "\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: ["นี้ทำให้เราสามารถเพิ่มคำนำหน้าไปที่ตัวแปรสภาพแวดล้อมอย่างค่อยเป็นค่อยไปและลบฟิลด์ ", _jsx(_components.code, { children: "define" }), " ออก."] }), "\n", _jsxs(_components.h2, { id: "สรุป", children: ["สรุป", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#สรุป", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "แค่นี้ล่ะ! เราได้ย้ายโปรเจค frontend ทั้งสามจาก Parcel มาเป็น Vite สำเร็จแล้วและหวังว่าเรื่องสั้นนี้จะช่วยคุณในการย้ายของคุณ. นี่คือสิ่งที่การตั้งค่าในตอนท้ายดูเหมือน:" }), "\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 // Manual chunks logic\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 };