เราได้ย้ายโปรเจค frontend ทั้งสามของเราจาก Parcel ไปเป็น Vite, และกระบวนการก็... ราบรื่น
เรามีสามโปรเจค frontend ที่ Logto: ประสบการณ์การลงชื่อเข้าใช้, Console, และ live preview. โปรเจคเหล่านี้ทั้งหมดใช้ TypeScript, React, และ SASS modules; รวมแล้วมีประมาณ 100K บรรทัดของโค้ด
เราเคยชอบ Parcel สำหรับความง่ายและการตั้งค่าแบบ zero-config. ฉันยังจำได้ถึงวันที่ตกใจกับความง่ายในการตั้งค่าโปรเจคใหม่ด้วย Parcel. คุณเพียงแค่รัน parcel index.html แล้วปัง เหมือนมีเวทมนตร์.
ความง่ายของ Parcel เป็นเหตุผลหลักที่เรายึดติดกับมันมานาน แม้ว่าบางครั้งมันจะอารมณ์ไม่ดี เช่น:
ทำไมเราถึงตัดสินใจย้ายไปที่อื่น?
บางคนถึงกับเปิดการสนทนาเพื่อถามว่า Parcel ตายแล้วหรือไม่. คำตอบอย่างเป็นทางการคือไม่, Parcel ยังไม่ตาย แต่กำลังอยู่ในโหมดเรากำลังทำการ refactor ขนาดใหญ่และไม่มีเวลาสำหรับการปล่อยรอง. สำหรับเรา มันเหมือน "ตายเงียบ": เวอร์ชันล่าสุดที่เราใช้ได้คือเมื่อกว่าปีที่แล้วและเราไม่รู้ว่าเวอร์ชันถัดไปจะปล่อยเมื่อไหร่. มันดูเหมือนมันตายแล้ว, มันแสดงบทบาทเหมือนมันตาย, ดังนั้นมันตายสำหรับเรา.
เรารู้จัก Vite จาก Vitest. เมื่อหลายเดือนก่อน, เราเบื่อกับการรองรับ ESM ของ Jest (ใน testing) และต้องการลองสิ่งใหม่. Vitest ชนะใจของเราด้วยการรองรับ ESM แบบเนทีฟและความเข้ากันได้กับ Jest. มันมีประสบการณ์สำหรับนักพัฒนาที่น่าทึ่ง และขับเคลื่อนโดย Vite.
คุณอาจมีการตั้งค่าที่ต่างกันในโปรเจคของคุณ แต่ปกติแล้วคุณจะพบว่า plugin replacements ในขณะที่ระบบนิเวศของ Vite กำลังบานสะพรั่ง นี่คือการตั้งค่าของเราในขณะที่ย้าย:
เราเริ่มการย้ายโดยการสร้างโปรเจค Vite ใหม่และทดลองเล่นกับมันเพื่อดูว่ามันทำงานอย่างไร. กระบวนการราบรื่นและการย้ายจริงใช้เวลาเพียงไม่กี่วัน.
Vite มีการรองรับอัตโนมัติสำหรับ monorepo, ESM, TypeScript, React, และ SASS. เราเพียงแค่ต้องติดตั้ง plugins และการตั้งค่าที่จำเป็น.
Vite มีการรองรับในตัวสำหรับการใช้นามแฝง เช่นใน tsconfig.json ของเรา:
เราจำเป็นต้องเพิ่มการตั้งค่าเดียวกันใน vite.config.ts ของเรา:
การแทนที่ path ควรเป็น path แบบสมบูรณ์ ในขณะที่มันสัมพันธ์กับรากของโปรเจค. หรือคุณสามารถใช้ plugin vite-tsconfig-paths เพื่ออ่านการใช้นามแฝงจาก tsconfig.json.
แม้ว่า Vite จะมีการรองรับในตัวสำหรับ HMR แต่จำเป็นต้องติดตั้ง plugin เพื่อเปิดใช้งาน React Fast Refresh. เราใช้ plugin @vitejs/plugin-react ที่มีการรองรับฟีเจอร์ของ React เช่น Fast Refresh:
เราใช้ plugin vite-plugin-svgr เพื่อแปลง SVGs เป็น React components. มันง่ายเหมือนการเพิ่ม plugin ลงใน config ของ Vite:
อย่างไรก็ตาม เรายังไม่ได้ระบุเงื่อนไขในการแปลง SVGs เป็น React components ดังนั้นการนำเข้าสินค้าทั้งหมดจะถูกแปลง. plugin มีการตั้งค่าที่ดีกว่า: แปลงเฉพาะ SVGs ที่นำเข้าด้วยนามสกุล .svg?react. เราได้อัพเดทการนำเข้าสินค้าตามนั้น.
แม้ว่า Vite จะมีการรองรับในตัวสำหรับ SASS modules แต่มีสิ่งหนึ่งที่เราต้องใส่ใจ: วิธีการจัดรูปแบบชื่อ class. มันอาจเป็นปัญหาสำหรับผู้ใช้และการทดสอบ integration ของเราหากชื่อ class ไม่จัดเรียงแบบเดียวกัน. การตั้งค่าเพียงบรรทัดเดียวใน vite.config.ts สามารถแก้ปัญหาได้:
อย่างไรก็ตาม Parcel และ Vite มีรูปแบบที่ต่างกันในการนำเข้าไฟล์ SASS:
การใช้ไวยากรณ์ * as นั้นทำงานใน Vite แต่จะทำให้เสียชื่อ class แบบ modularized เมื่อคุณใช้คีย์ในการเข้าถึงวัตถุ styles. เช่น:
เนื่องจาก Vite ใช้ Rollup เป็นสิ่งสำคัญ เราสามารถใช้ plugin อย่างเป็นทางการ @mdx-js/rollup เพื่อรองรับ MDX รวมถึง plugins ของมันด้วย
plugin remarkGfm ใช้ในการรองรับ GitHub Flavored Markdown, และ plugin rehypeMdxCodeProps ใช้ในการผ่าน props ไปยัง code blocks ในไฟล์ MDX เหมือนกับ Docusaurus ทำ.
เราต้องการใช้ Mermaid diagrams ในไฟล์ MDX ของเราเช่นเดียวกับภาษาการเขียนโปรแกรมอื่น ๆ การใช้งานควรเป็นเรื่องง่ายเหมือน code blocks อื่นๆ:
ควรถูกแสดงเป็น:
%3btext-align:center%3b%7d%23mermaid-0 .edgeLabel p%7bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3b%7d%23mermaid-0 .edgeLabel rect%7bopacity:0.5%3bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3bfill:rgba(232%2c232%2c232%2c 0.8)%3b%7d%23mermaid-0 .labelBkg%7bbackground-color:rgba(232%2c 232%2c 232%2c 0.5)%3b%7d%23mermaid-0 .cluster rect%7bfill:%23ffffde%3bstroke:%23aaaa33%3bstroke-width:1px%3b%7d%23mermaid-0 .cluster text%7bfill:%23333%3b%7d%23mermaid-0 .cluster span%7bcolor:%23333%3b%7d%23mermaid-0 div.mermaidTooltip%7bposition:absolute%3btext-align:center%3bmax-width:200px%3bpadding:2px%3bfont-family:arial%2csans-serif%3bfont-size:12px%3bbackground:hsl(80%2c 100%25%2c 96.2745098039%25)%3bborder:1px solid %23aaaa33%3bborder-radius:2px%3bpointer-events:none%3bz-index:100%3b%7d%23mermaid-0 .flowchartTitleText%7btext-anchor:middle%3bfont-size:18px%3bfill:%23333%3b%7d%23mermaid-0 rect.text%7bfill:none%3bstroke-width:0%3b%7d%23mermaid-0 .icon-shape%2c%23mermaid-0 .image-shape%7bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3btext-align:center%3b%7d%23mermaid-0 .icon-shape p%2c%23mermaid-0 .image-shape p%7bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3bpadding:2px%3b%7d%23mermaid-0 .icon-shape rect%2c%23mermaid-0 .image-shape rect%7bopacity:0.5%3bbackground-color:rgba(232%2c232%2c232%2c 0.8)%3bfill:rgba(232%2c232%2c232%2c 0.8)%3b%7d%23mermaid-0 :root%7b--mermaid-font-family:arial%2csans-serif%3b%7d%3c/style%3e%3cg%3e%3cmarker orient='auto' markerHeight='8' markerWidth='8' markerUnits='userSpaceOnUse' refY='5' refX='5' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-pointEnd'%3e%3cpath style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 0 0 L 10 5 L 0 10 z'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='8' markerWidth='8' markerUnits='userSpaceOnUse' refY='5' refX='4.5' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-pointStart'%3e%3cpath style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 0 5 L 10 10 L 10 0 z'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5' refX='11' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-circleEnd'%3e%3ccircle style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' r='5' cy='5' cx='5'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5' refX='-1' viewBox='0 0 10 10' class='marker flowchart-v2' id='mermaid-0_flowchart-v2-circleStart'%3e%3ccircle style='stroke-width: 1%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' r='5' cy='5' cx='5'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5.2' refX='12' viewBox='0 0 11 11' class='marker cross flowchart-v2' id='mermaid-0_flowchart-v2-crossEnd'%3e%3cpath style='stroke-width: 2%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 1%2c1 l 9%2c9 M 10%2c1 l -9%2c9'/%3e%3c/marker%3e%3cmarker orient='auto' markerHeight='11' markerWidth='11' markerUnits='userSpaceOnUse' refY='5.2' refX='-1' viewBox='0 0 11 11' class='marker cross flowchart-v2' id='mermaid-0_flowchart-v2-crossStart'%3e%3cpath style='stroke-width: 2%3b stroke-dasharray: 1%2c 0%3b' class='arrowMarkerPath' d='M 1%2c1 l 9%2c9 M 10%2c1 l -9%2c9'/%3e%3c/marker%3e%3cg class='root'%3e%3cg class='clusters'/%3e%3cg class='edgePaths'%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_A_B_0' d='M72.451%2c62L67.598%2c66.167C62.746%2c70.333%2c53.041%2c78.667%2c48.188%2c86.333C43.336%2c94%2c43.336%2c101%2c43.336%2c104.5L43.336%2c108'/%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_A_C_1' d='M135.338%2c62L140.191%2c66.167C145.043%2c70.333%2c154.748%2c78.667%2c159.601%2c86.333C164.453%2c94%2c164.453%2c101%2c164.453%2c104.5L164.453%2c108'/%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_B_D_2' d='M43.336%2c166L43.336%2c170.167C43.336%2c174.333%2c43.336%2c182.667%2c47.683%2c190.566C52.029%2c198.465%2c60.723%2c205.929%2c65.069%2c209.662L69.416%2c213.394'/%3e%3cpath marker-end='url(%23mermaid-0_flowchart-v2-pointEnd)' style='' class='edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link' id='L_C_D_3' d='M164.453%2c166L164.453%2c170.167C164.453%2c174.333%2c164.453%2c182.667%2c160.106%2c190.566C155.76%2c198.465%2c147.066%2c205.929%2c142.72%2c209.662L138.373%2c213.394'/%3e%3c/g%3e%3cg class='edgeLabels'%3e%3cg class='edgeLabel'%3e%3cg transform='translate(0%2c 0)' class='label'%3e%3cforeignObject height='0' width='0'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg class='edgeLabel'%3e%3cg transform='translate(0%2c 0)' class='label'%3e%3cforeignObject height='0' width='0'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg class='edgeLabel'%3e%3cg transform='translate(0%2c 0)' class='label'%3e%3cforeignObject height='0' width='0'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg class='edgeLabel'%3e%3cg transform='translate(0%2c 0)' class='label'%3e%3cforeignObject height='0' width='0'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' class='labelBkg' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='edgeLabel'%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3c/g%3e%3cg class='nodes'%3e%3cg transform='translate(103.89453125%2c 35)' id='flowchart-A-0' class='node default'%3e%3crect height='54' width='70.671875' y='-27' x='-35.3359375' style='' class='basic label-container'/%3e%3cg transform='translate(-5.3359375%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='10.671875'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eA%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(43.3359375%2c 139)' id='flowchart-B-1' class='node default'%3e%3crect height='54' width='70.671875' y='-27' x='-35.3359375' style='' class='basic label-container'/%3e%3cg transform='translate(-5.3359375%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='10.671875'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eB%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(164.453125%2c 139)' id='flowchart-C-3' class='node default'%3e%3crect height='54' width='71.5625' y='-27' x='-35.78125' style='' class='basic label-container'/%3e%3cg transform='translate(-5.78125%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='11.5625'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eC%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3cg transform='translate(103.89453125%2c 243)' id='flowchart-D-5' class='node default'%3e%3crect height='54' width='71.5625' y='-27' x='-35.78125' style='' class='basic label-container'/%3e%3cg transform='translate(-5.78125%2c -12)' style='' class='label'%3e%3crect/%3e%3cforeignObject height='24' width='11.5625'%3e%3cdiv style='display: table-cell%3b white-space: nowrap%3b line-height: 1.5%3b max-width: 200px%3b text-align: center%3b' xmlns='http://www.w3.org/1999/xhtml'%3e%3cspan class='nodeLabel'%3e%3cp%3eD%3c/p%3e%3c/span%3e%3c/div%3e%3c/foreignObject%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e)
เนื่องจากแอปของเรารองรับ theme แสงและมืด เราเขียนโค้ดเล็กน้อยให้ Mermaid diagrams ทำงานกับ theme มืด. เราสร้าง React component:
useTheme เป็น custom hook เพื่อดึง theme ปัจจุบันจาก context. ไลบราลี่ mermaid ถูกนำเข้าแบบอะซิงค์เพื่อลดโหลดหน้าเริ่มต้น.
สำหรับ code block ในไฟล์ MDX เรามี component แบบรวมที่สุดในการทำงาน:
สุดท้ายเรากำหนด MDX provider โดย:
นี่ไม่ใช่เรื่องเฉพาะของ Vite มันยังคงเป็นสิ่งที่คุ้มค่าที่จะกล่าวถึงเพราะเราอัพเดทหน้าเพจของเราให้ใช้การโหลดแบบ lazy ในระหว่างการย้ายและไม่มีอะไรพังหลังจากนั้น
React มีฟังก์ชัน React.lazy ในตัวเพื่อโหลด components แบบ lazy. อย่างไรก็ตาม มันอาจก่อให้เกิดปัญหาบางอย่างเมื่อคุณกำลังทำงานอย่างรวดเร็ว. เราสร้างไลบราลี่เล็ก ๆ ชื่อ react-safe-lazy เพื่อแก้ปัญหา. มันเป็นตัวแทนโดยตรงสำหรับ React.lazy และคำอธิบายอย่างละเอียดสามารถพบได้ใน โพสต์บล็อกนี้.
มี plugin ที่เรียบง่ายชื่อ vite-plugin-compression เพื่อผลิต assets ที่ถูกบีบอัด. มันรองรับทั้งการบีบอัดแบบ gzip และ brotli. การตั้งค่าง่ายมาก:
ฟีเจอร์ที่ดีของ Vite (หรือ Rollup ที่อยู่ภายใต้) คือ manual chunks. แม้ว่า React.lazy ใช้สำหรับการโหลด components แบบ lazy, เราสามารถควบคุม chunks ได้มากขึ้นโดยการระบุ manual chunks เพื่อตัดสินใจว่า components หรือ modules ไหนควรถูกจับกลุ่มเข้าด้วยกัน.
ตัวอย่างเช่น เราสามารถใช้ vite-bundle-visualizer เพื่อวิเคราะห์ขนาดของ bundle และ dependencies. จากนั้นเราสามารถเขียนฟังก์ชันที่เหมาะสมในการแยก chunks:
แตกต่างจากการสร้าง production, Vite จะไม่จับกลุ่มซอร์สโค้ดของคุณในโหมด dev (รวมถึง dependencies ที่เชื่อมโยงได้ใน monorepo เดียวกัน) และปฏิบัติต่อทุก module ตามไฟล์. สำหรับเรา, เบราว์เซอร์จะโหลด modules เป็นร้อย ๆ ครั้งแรก, ซึ่งดูบ้าแต่จริง ๆ แล้วมันไม่เป็นปัญหาในกรณีส่วนใหญ่. คุณสามารถดูการสนทนาได้ ที่นี่.
หากมันเป็นปัญหาสำหรับคุณ, ตัวเลือกอื่น ๆ แต่ไม่สมบูรณ์คือการระบุ dependencies ที่เชื่อมโยงในตัวเลือก optimizeDeps ของ vite.config.ts:
นี้จะ "pre-bundle" dependencies ที่เชื่อมโยงและทำให้เซิร์ฟเวอร์ dev เร็วขึ้น. จุดบกพร่องคือ HMR อาจไม่ทำงานตามที่ต้องการสำหรับ dependencies ที่เชื่อมโยง.
นอกจากนี้ เราใช้ proxy ที่ให้บริการไฟล์ static ใน production และส่งคำขอไปยังเซิร์ฟเวอร์ Vitest ในการพัฒนา. เรามีการตั้งค่าพอร์ตบางอย่างเพื่อหลีกเลี่ยงความขัดแย้งและมันก็ตั้งค่าได้ง่ายใน vite.config.ts:
แตกต่างจาก Parcel, Vite ใช้แนวทางที่ทันสมัยในการจัดการตัวแปรสภาพแวดล้อมโดยใช้ import.meta.env. มันจะโหลดไฟล์ .env อัตโนมัติและแทนที่ตัวแปรในโค้ด. อย่างไรก็ตาม, มันต้องการให้ตัวแปรสภาพแวดล้อมทั้งหมดมีคำนำหน้า VITE_ (กำหนดได้).
ในขณะที่เราใช้ Parcel, มันแค่แทนที่ตัวแปร process.env โดยไม่ตรวจสอบคำนำหน้า. ดังนั้นเรามีวิธีแก้ไขโดยใช้ฟิลด์ define เพื่อทำให้การย้ายง่ายขึ้น:
นี้ทำให้เราสามารถเพิ่มคำนำหน้าไปที่ตัวแปรสภาพแวดล้อมอย่างค่อยเป็นค่อยไปและลบฟิลด์ define ออก.
แค่นี้ล่ะ! เราได้ย้ายโปรเจค frontend ทั้งสามจาก Parcel มาเป็น Vite สำเร็จแล้วและหวังว่าเรื่องสั้นนี้จะช่วยคุณในการย้ายของคุณ. นี่คือสิ่งที่การตั้งค่าในตอนท้ายดูเหมือน: