Viteส่งเสียงดังในชุมชนส่วนหน้า ดาวน์โหลดด้วย npm เพิ่มขึ้นสี่เท่าในปีที่แล้วและยังคงได้รับความนิยมอย่างต่อเนื่อง

สิ่งแรกที่คุณอ่านเกี่ยวกับ Vite บนเว็บไซต์ของพวกเขาคือคำว่า "รวดเร็ว" ในภาษาฝรั่งเศส Vite สัญญาว่าจะเพิ่มประสิทธิภาพอย่างมีนัยสำคัญ แล้ว Vite จะบรรลุเป้าหมายนั้นได้อย่างไร

Webpack และ Bundler แบบดั้งเดิมอื่นๆ ทำงานด้วยวิธีการแบบเก่าในการอ่านซอร์สโค้ดทั้งหมดของคุณและคอมไพล์เป็นไฟล์ JS สองไฟล์

เป็นเวลาหลายปีแล้วที่การสนับสนุน ESM พร้อมใช้งานในเบราว์เซอร์หลักทั้งหมด ดังนั้น Vite จึงใช้วิธีที่แตกต่างออกไป โดยจะป้อนซอร์สโค้ดของคุณตามที่เป็นอยู่ในเบราว์เซอร์ของคุณและปล่อยให้จัดการการนำเข้าโมดูลด้วยตัวเอง สิ่งนี้ช่วยเร่งกระบวนการสร้างได้อย่างมากเนื่องจากการรวมกลุ่มไม่จำเป็นสำหรับงานพัฒนาอีกต่อไป

แต่เช่นเคย มีสิ่งที่จับได้

เบราว์เซอร์ใช้เวลาในการแก้ไขโมดูลเนทีฟ การเปิดบันเดิลเดียวเร็วกว่าการเปิดการพึ่งพาหลายร้อยรายการ แล้วประสิทธิภาพต่างกันยังไง จริงไหม? ฉันได้จัดทำโครงการจำลองด้วยจำนวนไฟล์ที่แตกต่างกันเพื่อแสดงให้เห็นถึงความแตกต่างของประสิทธิภาพ

การเปรียบเทียบ

ฉันสร้างสคริปต์ที่สร้างโปรเจ็กต์พร้อมสร้างโดยอัตโนมัติด้วย Vite และ Webpack และยังสร้างส่วนประกอบจำลองในจำนวนที่กำหนดไว้ล่วงหน้าซึ่งแสดงผลทั้งหมดในหน้าเดียว คุณสามารถค้นหาลิงก์ GitHub ได้ที่นี่

ฉันเริ่มโครงการที่สร้างโดยอัตโนมัติด้วยnpm startและบันทึกเมตริกสองรายการ:

1. เวลาในการสร้างตามที่ Bundler รายงาน
2. เวลาในการโหลดตามที่รายงานโดยเครื่องมือพัฒนาของ Chrome

ไม่น่าแปลกใจที่เบราว์เซอร์ไม่ได้สร้างมาเพื่อดึงไฟล์นับพันไฟล์อย่างมีประสิทธิภาพในไม่กี่วินาที เนื่องจากคุณไม่ควรมีไฟล์ 5,000 ไฟล์ในบันเดิล JS เดียว

การแยกรหัสเพื่อช่วยเหลือ!

ในความเป็นจริง คุณควรโหลดโค้ด JS เมื่อคุณต้องการ ชิ้นเริ่มต้นของคุณควรมีขนาดเล็กที่สุด ซึ่งมักจะทำผ่านการกำหนดเส้นทาง เมื่อเราเตอร์จัดการกับโมดูลที่โหลดอย่างเกียจคร้าน เมื่อคุณนำทางไปยังเส้นทางที่ต้องการ อ่าน เพิ่มเติมใน React docs

ด้วย Vite และการแยกโค้ด เบราว์เซอร์ของคุณจะดึงเฉพาะไฟล์ JS เป็นกลุ่มเล็กๆ เท่านั้น ส่งผลให้ประสิทธิภาพดีขึ้นมาก

แต่ Webpack นั้นไม่ได้ล้าหลังอย่างที่คิด พร้อมใช้งานตั้งแต่ 5.20 Webpack สามารถเลื่อนการคอมไพล์ของโมดูลที่นำเข้าแบบไดนามิก ด้วยexperiments.lazyCompilationตัวเลือกการกำหนดค่า ประสิทธิภาพการสร้างของคุณสามารถปรับปรุงได้อย่างมากด้วยการแบ่งโค้ดเช่นกัน

มาวัดผลกันเถอะ!

ครั้งนี้ ฉันใช้โปรเจ็กต์ที่สร้างอัตโนมัติแบบเดียวกัน แต่ส่วนประกอบนับร้อยเหล่านั้นถูกโหลดอย่างเกียจคร้าน ดังนั้นอันแรกจึงเป็นโปรเจ็กต์ที่เกือบจะว่างเปล่า

นี่คือผลลัพธ์:

เป็นภาพเดียวกับที่เรามีกับไฟล์ 10 ไฟล์ในโครงการ มีความแตกต่างภายในเสี้ยววินาที แต่ Vite ชนะที่นี่ ซึ่งก็ไม่น่าจะมีใครแปลกใจ! เมื่อคุณขี้เกียจโหลดเกือบทุกอย่าง เวลาในการสร้างเริ่มต้นของคุณจะสั้นที่สุดเท่าที่จะเป็นไปได้ และถ้าคุณสามารถเก็บชิ้นส่วนทั้งหมดของคุณให้เล็กลงได้ Vite จะให้ประโยชน์แก่คุณในการสร้างอย่างรวดเร็ว

บทสรุป

หากคุณสามารถแยกรหัสแอปของคุณและทำให้ส่วนย่อยของคุณเล็กลง Vite จะช่วยให้คุณประหยัดเวลาได้ครึ่งวินาทีที่นี่และที่นั่น

แต่ Webpack ไม่ได้ล้าหลังอย่างที่คิด โดยเฉพาะอย่างยิ่งเนื่องจากนวัตกรรม ต่างๆเช่นlazyCompilationและ swc-loaderหากการสร้าง Webpack ของคุณใช้เวลา 30+ วินาที คุณอาจต้องลองปรับแต่งการกำหนดค่าของคุณด้วยตัวเลือกที่ใหม่กว่าเหล่านี้ก่อน

Webpack ยังคงเป็นตัวเลือกที่ดีหากคุณต้องการรับการสนับสนุนที่กว้างขึ้นสำหรับกรณีการใช้งานที่คลุมเครือ หรือหากก้อนบันเดิลเริ่มต้นของคุณมีขนาดใหญ่และคุณไม่สามารถแยกได้

Vite เป็นแนวทางที่ทันสมัยกว่า ด้วยการตั้งค่าและการกำหนดค่าที่ง่ายกว่ามาก และประสิทธิภาพที่ยอดเยี่ยมในทันที

ท้ายที่สุดแล้ว ขึ้นอยู่กับคุณและความต้องการของคุณเสมอ!