0Pricing
Frontend Academy · บทเรียน

แนวคิดการรวมโค้ด: tree shaking และ code splitting

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

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

เครื่องมือรวมชุดโค้ดทำอะไร

เครื่องมือรวมชุดโค้ด (Vite, webpack, Rollup, Parcel) อ่านไฟล์ต้นฉบับของคุณ แก้การนำเข้า แปลงโค้ด (ทรานส์ไพล์ ลดขนาด และปรับให้เหมาะสม) แล้วส่งออกไฟล์ที่เบราว์เซอร์สามารถโหลดได้อย่างมีประสิทธิภาพ

กราฟโมดูล

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

Tree Shaking — การกำจัดโค้ดที่ไม่ใช้งาน

Tree shaking วิเคราะห์กราฟโมดูลและลบการส่งออกที่ไม่เคยถูกนำเข้าออก การนำเข้าแบบคงที่ของโมดูล ES เท่านั้นที่เปิดใช้ tree shaking ได้ ส่วน require() ของ CommonJS เป็นแบบไดนามิกและไม่สามารถวิเคราะห์แบบคงที่ได้

// utils.js
export const add = (a, b) => a + b;       // used → included
export const multiply = (a, b) => a * b;  // never imported → removed

// app.js
import { add } from './utils.js';
console.log(add(2, 3));

ผลข้างเคียงและ sideEffects: false

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

// package.json of a library:
{
  "sideEffects": false
  // or list files with side effects:
  "sideEffects": ["./src/polyfills.js"]
}

การแบ่งโค้ด

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

การแบ่งตามจุดเริ่มต้น

แอปหลายหน้ามีจุดเริ่มต้นหลายจุด โดยแต่ละจุดจะสร้างชุดโค้ดของตนเอง โค้ดที่ใช้ร่วมกัน (เช่น React) จะถูกแยกออกเป็นชังก์ที่ใช้ร่วมกันโดยอัตโนมัติ

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

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

// vite / rollup automatically creates a separate chunk:
const Admin = lazy(() => import('./Admin'));
const Reports = lazy(() => import('./Reports'));

การแยกชังก์ของผู้ให้บริการ

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

// vite.config.ts
build: {
  rollupOptions: {
    output: {
      manualChunks: { vendor: ['react', 'react-dom'] }
    }
  }
}

การลดขนาด

เครื่องมือลดขนาด (esbuild, terser) ลบช่องว่าง เปลี่ยนชื่อตัวแปรให้เป็นตัวอักษรเดี่ยว และใช้การลดขนาดรูปแบบอื่น ๆ โดยทั่วไปแอป React จะมีขนาดลดลง 60–70% หลังการลดขนาด

การทำแฮชตามเนื้อหา

เครื่องมือรวมชุดโค้ดจะเพิ่มแฮชของเนื้อหาไฟล์ลงในชื่อไฟล์: index-a1b2c3.js เมื่อเนื้อหาเปลี่ยนแปลง แฮชและชื่อไฟล์ก็จะเปลี่ยนตาม ทำให้เบราว์เซอร์ดึงไฟล์ใหม่มาใช้ ส่วนชังก์ที่ไม่เปลี่ยนแปลงจะถูกแคชไว้อย่างไม่มีกำหนด

แผนผังต้นฉบับ

แผนผังต้นฉบับจะเชื่อมเอาต์พุตที่ลดขนาดแล้วกลับไปยังโค้ดต้นฉบับของคุณ โดยสร้างแยกต่างหาก (ไม่ส่งให้ผู้ใช้) และใช้โดย DevTools เพื่อแก้ไขข้อบกพร่อง เปิดใช้ได้ด้วย build.sourcemap: true

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

ข้อกำหนดหลักที่ทำให้ tree shaking ทำงานได้คืออะไร?

สรุป: แนวคิดการรวมชุดโค้ด

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

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

บทเรียน “แนวคิดการรวมโค้ด: tree shaking และ code splitting” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “แนวคิดการรวมโค้ด: tree shaking และ code splitting”

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

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

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

บทเรียน “แนวคิดการรวมโค้ด: tree shaking และ code splitting” ใช้เวลานานแค่ไหน

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

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

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

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

  1. ES Modules: import, export และ dynamic import
  2. npm และ package.json: dependencies และ scripts
  3. Vite: เซิร์ฟเวอร์พัฒนาและการบิลด์
  4. แนวคิดการรวมโค้ด: tree shaking และ code splitting
← กลับไปที่ Frontend Academy