ฉันจะลดขนาดชุดของแอปพลิเคชัน vue.js ของฉันได้อย่างไร

ใช้ขั้นตอนการสร้างด้วยการเขย่าต้นไม้

หนึ่งในวิธีที่มีประสิทธิภาพที่สุดในการลดขนาดชุดคือการใช้เครื่องมือสร้างที่ทันสมัยที่รองรับการเขย่าต้นไม้ การเขย่าแบบต้นไม้เป็นกระบวนการที่กำจัดรหัสที่ไม่ได้ใช้ออกจากชุดสุดท้าย APIs ของ Vue และห้องสมุด JavaScript ที่ทันสมัยหลายแห่งได้รับการออกแบบให้สั่นสะเทือนต้นไม้เมื่อรวมเข้าด้วยกันอย่างถูกต้อง ตัวอย่างเช่นส่วนประกอบ Vue ที่ไม่ได้ใช้เช่น `` ในตัวจะไม่รวมอยู่ในการสร้างการผลิตหากไม่ได้ใช้ เทมเพลตการคอมไพล์ล่วงหน้าในระหว่างเวลาสร้างยังหลีกเลี่ยงการจัดส่งคอมไพเลอร์ Vue ไปยังเบราว์เซอร์ซึ่งสามารถประหยัดได้ประมาณ 14 kb ของจาวาสคริปต์ขนาดเล็กและ gzipped ลดค่าใช้จ่ายรันไทม์

จัดการและวิเคราะห์การพึ่งพา

การพึ่งพามักจะมีส่วนร่วมอย่างมีนัยสำคัญกับขนาดมัด เป็นสิ่งสำคัญสำหรับ:

-เลือกการพึ่งพาที่เสนอรูปแบบโมดูล ES และเป็นมิตรกับต้นไม้ที่เป็นมิตร (เช่น `lodash-es` แทนที่จะเป็น` Lodash`)
-ตรวจสอบการพึ่งพาของคุณเป็นประจำโดยใช้เครื่องมือเช่น `webpack-bundle-analyzer` เพื่อระบุแพ็คเกจขนาดใหญ่หรือไม่จำเป็น
- ลบการพึ่งพาที่ไม่ได้ใช้โดยใช้เครื่องมือเช่น `depcheck` หรือ` npm prune '
- แทนที่การพึ่งพาขนาดใหญ่ด้วยทางเลือกที่เล็กกว่าและมุ่งเน้นมากขึ้น ตัวอย่างเช่นการเปลี่ยนไลบรารีแผนภูมิหนักเช่น `echarts` ด้วยห้องเล็ก ๆ เช่น Chartist.js สามารถลดขนาดชุดได้อย่างมาก

เส้นทางโหลดและส่วนประกอบขี้เกียจ

Lazy Loading เป็นกลยุทธ์ที่รหัสสำหรับเส้นทางหรือส่วนประกอบจะถูกโหลดเฉพาะเมื่อจำเป็นแทนที่จะรวมทุกอย่างล่วงหน้า Vue Router รองรับเส้นทางการโหลดขี้เกียจโดยการนำเข้าส่วนประกอบแบบไดนามิกแยกมัดออกเป็นชิ้นเล็ก ๆ ที่ปรับปรุงประสิทธิภาพการโหลดเริ่มต้น วิธีนี้จะช่วยลดขนาดของชุดหลักอย่างมีนัยสำคัญและกระจายโหลดโค้ดเมื่อเวลาผ่านไปเมื่อผู้ใช้นำทางผ่านแอปพลิเคชัน

ใช้การแยกรหัสและการนำเข้าแบบไดนามิก

WebPack ซึ่งใช้กันทั่วไปในโครงการ Vue รองรับการแยกรหัสผ่านคำสั่ง `นำเข้า ()` แบบไดนามิก ซึ่งหมายความว่าส่วนต่าง ๆ ของแอปพลิเคชันของคุณสามารถแบ่งออกเป็นชุดแยกต่างหากที่โหลดแบบอะซิงโครนัส การใช้รหัสการแยกอย่างเหมาะสมช่วยในการจัดการขนาดชุดโดยการโหลดเฉพาะรหัสที่ต้องการตามความต้องการ

minification และการบีบอัด

Minification ช่วยลดขนาดของไฟล์ JavaScript โดยการลบ whitespace, ความคิดเห็นและการทำให้ชื่อตัวแปรสั้นลง เครื่องมือเช่น Uglifyjs หรือ terser (มักจะรวมอยู่ในกระบวนการสร้างที่ทันสมัย) จะลดรหัสโดยอัตโนมัติในระหว่างขั้นตอนการสร้างการผลิต นอกจากนี้การบีบอัด Gzipping หรือ Brotli จะช่วยลดขนาดของสินทรัพย์ให้กับผู้ใช้

ใช้ทางเลือก VUE ขนาดเล็กสำหรับกรณีการใช้งานเฉพาะ

สำหรับโครงการที่เฟรมเวิร์ก Vue.js เต็มรูปแบบอาจหนักเกินไปโดยเฉพาะอย่างยิ่งสำหรับกรณีการปรับปรุงแบบก้าวหน้าให้พิจารณาใช้ทางเลือกที่เบากว่าเช่น Petite Vue ซึ่งมีขนาดประมาณ 6 kb สิ่งนี้มีประโยชน์หากโครงการไม่จำเป็นต้องใช้ระบบนิเวศ Vue เต็มรูปแบบ

ขอบเขตและนำเข้าเฉพาะส่วนที่จำเป็นของห้องสมุด

ห้องสมุดขนาดใหญ่จำนวนมากเช่น Bootstrap Vue หรือ Lodash อนุญาตให้นำเข้าส่วนประกอบหรือฟังก์ชั่นเฉพาะเฉพาะมากกว่าไลบรารีทั้งหมด ตัวอย่างเช่นแทนที่จะนำเข้าไลบรารี Bootstrap Vue ทั้งหมดนำเข้าเฉพาะส่วนประกอบที่คุณต้องการซึ่งจะช่วยลดขนาดชุดโดยไม่รวมชิ้นส่วนที่ไม่ได้ใช้ ในทำนองเดียวกันนำเข้าฟังก์ชั่น Lodash อย่างเป็นโมดูล (`นำเข้าแผนที่จาก 'Lodash/Map'` แทนที่จะเป็น Lodash ทั้งหมด)

หลีกเลี่ยงสไตล์อินไลน์และเฟรมเวิร์ก CSS ขนาดใหญ่หากไม่จำเป็น

เฟรมเวิร์ก CSS เช่น bootstrap เพิ่มขนาดชุด ประเมินว่าคุณต้องการเฟรมเวิร์กทั้งหมดและพิจารณาทางเลือกอื่น ๆ เช่น Tailwind CSS สำหรับการรวมกลุ่ม CSS ที่ยืดหยุ่นและเล็กลง นอกจากนี้ให้พิจารณาลบการนำเข้าสไตล์ที่ไม่ได้ใช้หรือโฮสต์ CSS ภายนอกถ้าเป็นไปได้

การเรนเดอร์ฝั่งเซิร์ฟเวอร์และการสร้างไซต์คงที่

การย้ายการเรนเดอร์ไปยังเซิร์ฟเวอร์ผ่าน SSR (การเรนเดอร์ฝั่งเซิร์ฟเวอร์) หรือ SSG (การสร้างไซต์แบบคงที่) ช่วยลดปริมาณของจาวาสคริปต์ที่จำเป็นในฝั่งไคลเอ็นต์ลดขนาดของมัดได้อย่างมีประสิทธิภาพ สิ่งนี้จะเปลี่ยนความรับผิดชอบในการแสดงผลไปยังเซิร์ฟเวอร์ส่ง HTML ที่สร้างไว้ล่วงหน้าไปยังไคลเอนต์ที่มี JS น้อยที่สุดสำหรับการโต้ตอบ

เพิ่มประสิทธิภาพรูปภาพและสินทรัพย์อื่น ๆ

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

ใช้คุณสมบัติ JavaScript ที่ทันสมัยและ polyfills อย่างชาญฉลาด

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

สรุปการปฏิบัติเพื่อลดขนาดชุด vue.js

- ใช้เครื่องมือสร้างด้วยการเขย่าแบบต้นไม้ (เช่น WebPack, Vite)
- เทมเพลต Vue ที่คอมไพล์ล่วงหน้า
-วิเคราะห์เนื้อหามัดด้วยเครื่องมือเช่น `webpack-bundle-analyzer`
- ลบหรือแทนที่การพึ่งพาหนัก
- นำเข้าส่วนประกอบหรือฟังก์ชั่นที่จำเป็นเท่านั้นจากไลบรารี
- ใช้การโหลดขี้เกียจสำหรับเส้นทางและส่วนประกอบ
- ใช้การแยกรหัสและการนำเข้าแบบไดนามิก
- ใช้ minification และการบีบอัด
- พิจารณาทางเลือกที่เล็กกว่าเช่น Petite Vue สำหรับแอปพลิเคชันเฉพาะ
- เพิ่มประสิทธิภาพการใช้งาน CSS และหลีกเลี่ยงการนำเข้าเฟรมเวิร์กทั้งหมดโดยไม่จำเป็น
- ใช้ SSR หรือ SSG เพื่อลดขนาดกลุ่มฝั่งไคลเอ็นต์
- เพิ่มประสิทธิภาพสินทรัพย์และใช้คุณสมบัติ JavaScript ที่ทันสมัยอย่างระมัดระวัง