การแยกโค้ดและการนำเข้าแบบไดนามิก
แยกชุดโค้ดของคุณโดยอัตโนมัติตามเส้นทาง และใช้ import() แบบไดนามิกสำหรับส่วนข้อมูลที่โหลดตามต้องการ
การแยกโค้ดและการนำเข้าแบบไดนามิก เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
การแบ่งอัตโนมัติ
SvelteKit แบ่งชุดโค้ดตามเส้นทางโดยอัตโนมัติ ผู้เข้าชมจะดาวน์โหลดเฉพาะ JS สำหรับเส้นทางที่เข้าชมเท่านั้น
การนำเข้าแบบไดนามิก
หากต้องการแบ่งให้ละเอียดขึ้น ให้ใช้การนำเข้าแบบไดนามิก import() เพื่อโหลดโมดูลเมื่อจำเป็น
const Heavy = (await import("./Heavy.svelte")).default;การโหลดตามเงื่อนไข
โหลดไลบรารีขนาดใหญ่เฉพาะเมื่อการกระทำบางอย่างของผู้ใช้จำเป็นต้องใช้ไลบรารีนั้น
async function openEditor() {
const { default: Editor } = await import("./Editor.svelte");
// ...
}การตั้งชื่อชังก์
Vite ตั้งชื่อชังก์อย่างชาญฉลาด หากจำเป็น คุณสามารถบอกใบ้ด้วยคอมเมนต์รูปแบบ webpackChunkName ได้
การโหลดล่วงหน้า
ใช้ data-sveltekit-preload-code เพื่อโหลดโค้ดของเส้นทางล่วงหน้าเมื่อวางเมาส์เหนือเส้นทาง
ขนาดชุดโค้ด
ชุดโค้ดเริ่มต้นที่เล็กลงหมายถึงการโหลดหน้าที่เร็วขึ้นและค่าตัวชี้วัด Core Web Vitals ที่ดีขึ้น
การตัดโค้ดที่ไม่ใช้
SvelteKit (ผ่าน Vite/Rollup) จะตัดการส่งออกที่ไม่ได้ใช้ออกโดยอัตโนมัติ
Component แบบโหลดช้า
ห่อการนำเข้าแบบไดนามิกไว้ใน Component ที่จะแสดงผลเมื่อโหลดเสร็จแล้ว
ข้อควรระวัง
การนำเข้าแบบไดนามิกจะเพิ่มขอบเขตแบบอะซิงโครนัส ควรจัดการสถานะการโหลดอย่างเหมาะสม
การวิเคราะห์ชุดโค้ด
ใช้เครื่องมือแสดงภาพชุดโค้ดเพื่อระบุว่าควรแบ่งส่วนใดต่อไป
กรณีที่ไม่ควรแบ่ง
สำหรับโมดูลขนาดเล็กมาก ต้นทุนของการแบ่งอาจสูงกว่าประโยชน์ที่ได้รับ ควรวัดประสิทธิภาพเพื่อหาระดับความละเอียดที่เหมาะสม
ตรวจสอบความเข้าใจ
โดยค่าเริ่มต้น SvelteKit แบ่งชุดโค้ดอย่างไร
สรุปทบทวน
การแบ่งโค้ดใน SvelteKit ทำโดยอัตโนมัติตามเส้นทาง ให้ใช้การนำเข้าแบบไดนามิก import() สำหรับการโหลดแบบช้าที่ละเอียดขึ้น
คำถามที่พบบ่อย
บทเรียน “การแยกโค้ดและการนำเข้าแบบไดนามิก” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การแยกโค้ดและการนำเข้าแบบไดนามิก” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การแยกโค้ดและการนำเข้าแบบไดนามิก”
แยกชุดโค้ดของคุณโดยอัตโนมัติตามเส้นทาง และใช้ import() แบบไดนามิกสำหรับส่วนข้อมูลที่โหลดตามต้องการ คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “การแยกโค้ดและการนำเข้าแบบไดนามิก” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การแยกโค้ดและการนำเข้าแบบไดนามิก
- การปรับรูปภาพให้เหมาะสมด้วย @sveltejs/enhanced-img
- การโหลดคอมโพเนนต์แบบขี้เกียจ
- การวิเคราะห์ประสิทธิภาพแอป SvelteKit