Vue Academy · บทเรียน

การโหลดแบบขี้เกียจและการแยกโค้ด

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

การโหลดแบบขี้เกียจและการแยกโค้ด เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 3 บทเรียน

เหตุใดขนาดบันเดิลจึงสำคัญ

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

การนำเข้าแบบไดนามิก

เครื่องมือสำคัญคือฟังก์ชัน import() แบบไดนามิก ต่างจากการนำเข้าแบบคงที่ที่ด้านบนของไฟล์ ฟังก์ชันนี้จะโหลดโมดูลเมื่อจำเป็นและคืนค่าพรอมิส เครื่องมือรวมบันเดิลจะแยกการนำเข้าแบบไดนามิกแต่ละรายการเป็นส่วนย่อยของตนเอง

const module = await import("./heavyModule.js")
module.doSomething()

การแบ่งโค้ดตามเส้นทาง

ประโยชน์ที่เห็นได้ชัดที่สุดคือการแบ่งตามเส้นทาง เพื่อให้แต่ละหน้าโหลดโค้ดของตนเอง ใน Vue Router ให้ส่งฟังก์ชันที่คืนค่าการนำเข้าแบบไดนามิก แทนการนำเข้าคอมโพเนนต์โดยตรง

const routes = [
  {
    path: "/dashboard",
    component: () => import("./views/Dashboard.vue")
  }
]

เส้นทางแบบคงที่เทียบกับแบบโหลดเมื่อจำเป็น

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

// eager (always loaded)
import Dashboard from "./views/Dashboard.vue"

// lazy (loaded on demand)
const Dashboard = () => import("./views/Dashboard.vue")

defineAsyncComponent

หากต้องการโหลดคอมโพเนนต์เมื่อจำเป็นนอกเราเตอร์ ให้ครอบการนำเข้าแบบไดนามิกด้วย defineAsyncComponent Vue จะโหลดคอมโพเนนต์นั้นเมื่อมีการเรนเดอร์ครั้งแรกเท่านั้น

import { defineAsyncComponent } from "vue"

const Chart = defineAsyncComponent(() =>
  import("./components/HeavyChart.vue")
)

การลงทะเบียนคอมโพเนนต์แบบอะซิงโครนัส

ลงทะเบียนคอมโพเนนต์แบบอะซิงโครนัสเช่นเดียวกับคอมโพเนนต์อื่น แล้วนำไปใช้ในแม่แบบ Vue จะจัดการการโหลดให้โดยอัตโนมัติ

export default {
  components: {
    HeavyChart: defineAsyncComponent(() =>
      import("./components/HeavyChart.vue")
    )
  }
}

สถานะกำลังโหลดและข้อผิดพลาด

รูปแบบขั้นสูงของ defineAsyncComponent รับตัวเลือกเพื่อแสดงตัวแทนระหว่างโหลด และแสดงเนื้อหาสำรองหากการโหลดล้มเหลว

const Chart = defineAsyncComponent({
  loader: () => import("./HeavyChart.vue"),
  loadingComponent: Spinner,
  errorComponent: LoadError,
  delay: 200,
  timeout: 5000
})

การโหลดคอมโพเนนต์ขนาดใหญ่เมื่อจำเป็น

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

const RichEditor = defineAsyncComponent(() =>
  import("./components/RichTextEditor.vue")
)
// only downloaded when the editor is actually shown

การโหลดตามเงื่อนไขด้วย v-if

ใช้คอมโพเนนต์แบบอะซิงโครนัสร่วมกับ v-if เพื่อให้ดึงส่วนย่อยมาเฉพาะเมื่อผู้ใช้เรียกใช้งาน

<template>
  <button @click="showEditor = true">Edit</button>
  <RichEditor v-if="showEditor" />
</template>

ส่วนย่อยที่ตั้งชื่อเพื่อแก้จุดบกพร่อง

คอมเมนต์พิเศษรูปแบบ Webpack ช่วยตั้งชื่อส่วนย่อยให้อ่านง่าย ทำให้ตรวจสอบแท็บเครือข่ายและผลลัพธ์การสร้างได้สะดวกขึ้น

const Reports = () => import(
  /* webpackChunkName: "reports" */ "./views/Reports.vue"
)

การวัดผลกระทบ

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

ตรวจสอบความเข้าใจ

ทดสอบความรู้ของคุณเกี่ยวกับการโหลดแบบขี้เกียจ

สรุปทบทวน

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

คำถามที่พบบ่อย

บทเรียน “การโหลดแบบขี้เกียจและการแยกโค้ด” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การโหลดแบบขี้เกียจและการแยกโค้ด” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 3 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การโหลดแบบขี้เกียจและการแยกโค้ด”

แยกชุดโค้ดและโหลดส่วนประกอบกับเส้นทางแบบขี้เกียจ คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน

บทเรียน “การโหลดแบบขี้เกียจและการแยกโค้ด” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

การโหลดแบบขี้เกียจและการแยกโค้ด
เทคนิคการจดจำผลลัพธ์
การระบุและแก้ไขคอขวด

← กลับไปที่ Vue Academy