Vue Academy · บทเรียน

การตัดโค้ดที่ไม่ใช้และการนำเข้าอัตโนมัติ

Named exports สำหรับการตัดโค้ดที่ไม่ใช้ การผสานรวม unplugin-vue-components และการกำหนดค่า resolver

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

การตัดโค้ดที่ไม่ได้ใช้คืออะไร

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

การส่งออกแบบระบุชื่อช่วยให้ทำได้

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

// GOOD: named exports
export { MyButton } from "./MyButton.vue";
export { MyCard } from "./MyCard.vue";

หลีกเลี่ยงอ็อบเจ็กต์รวมแบบค่าเริ่มต้น

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

// BAD: defeats tree-shaking
export default { MyButton, MyCard, MyTable };

ผู้ใช้แพ็กเกจนำเข้าเฉพาะสิ่งที่ต้องใช้

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

import { MyButton } from "my-ui-lib";
// MyCard, MyTable are never bundled

ฟิลด์ sideEffects

ตัวรวมจะถือว่าโมดูลอาจมีผลข้างเคียงและจะเก็บโมดูลเหล่านั้นไว้ การตั้งค่า "sideEffects": false ใน package.json จะบอกว่ามอดูลของคุณบริสุทธิ์และสามารถตัดออกได้อย่างปลอดภัย

{
  "sideEffects": false
}

การประกาศผลข้างเคียงของ CSS

หากแพ็กเกจของคุณมีการนำเข้า CSS ที่ห้ามลบออก ให้ระบุรายการเหล่านั้นเพื่อให้เก็บไว้เฉพาะรายการดังกล่าว

{
  "sideEffects": ["**/*.css"]
}

การนำเข้าอัตโนมัติสำหรับผู้ใช้แพ็กเกจ

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

npm install -D unplugin-vue-components

การจัดเตรียมตัวแก้ไข

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

// my-ui-lib/resolver.js
export function MyUiResolver() {
  return {
    type: "component",
    resolve: (name) => {
      if (name.startsWith("My")) {
        return { name, from: "my-ui-lib" };
      }
    }
  };
}

การกำหนดค่าของผู้ใช้แพ็กเกจ

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

// consumer vite.config.ts
import Components from "unplugin-vue-components/vite";
import { MyUiResolver } from "my-ui-lib/resolver";

export default defineConfig({
  plugins: [
    vue(),
    Components({ resolvers: [MyUiResolver()] })
  ]
});

การนำเข้าอัตโนมัติพร้อมการตัดโค้ดที่ไม่ได้ใช้

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

หลีกเลี่ยงการลงทะเบียนทั่วทั้งระบบ

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

ตรวจสอบอย่างรวดเร็ว

การตั้งค่าใดใน package.json ที่บอกตัวรวมว่าโมดูลของคุณปลอดภัยสำหรับการตัดโค้ดที่ไม่ได้ใช้

สรุป

เปิดใช้การตัดโค้ดที่ไม่ได้ใช้โดยใช้การส่งออกแบบระบุชื่อ (ไม่ใช้อ็อบเจ็กต์รวมแบบค่าเริ่มต้น) และตั้งค่า "sideEffects": false (หรือระบุ CSS) เพื่อความสะดวก ให้ส่งตัวแก้ไขสำหรับ unplugin-vue-components เพื่อให้ผู้ใช้แพ็กเกจนำเข้าคอมโพเนนต์ที่ใช้โดยอัตโนมัติ พร้อมรวมไว้เฉพาะสิ่งที่ใช้งาน และหลีกเลี่ยงการบังคับลงทะเบียนทั่วทั้งระบบ

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

บทเรียน “การตัดโค้ดที่ไม่ใช้และการนำเข้าอัตโนมัติ” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การตัดโค้ดที่ไม่ใช้และการนำเข้าอัตโนมัติ”

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

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

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

บทเรียน “การตัดโค้ดที่ไม่ใช้และการนำเข้าอัตโนมัติ” ใช้เวลานานแค่ไหน

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

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

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

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

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

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