Frontend Academy · บทเรียน

Turbo: การแคชและไปป์ไลน์งาน

กำหนดไปป์ไลน์ใน turbo.json ตั้งค่าการพึ่งพาของงานด้วย dependsOn และเปิดใช้แคชระยะไกลเพื่อแชร์เอาต์พุตที่แคชไว้ระหว่างเครื่อง

บทเรียน 4 จาก 417 ขั้นตอน

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

สรุป Turborepo

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

เหตุใดการแคชจึงสำคัญ

ในโมโนรีโพที่มี 20 แพ็กเกจ การเรียกใช้ 'test' ทุกครั้งที่พุชนั้นใช้ทรัพยากรมาก หากมีการเปลี่ยนแปลงเพียงแพ็กเกจเดียว Turbo จะเรียกใช้การทดสอบของแพ็กเกจนั้นอีกครั้ง และนำผลลัพธ์ที่แคชไว้ของอีก 19 แพ็กเกจกลับมาใช้ ทำให้เวลาจากหลายนาทีลดเหลือเพียงไม่กี่วินาที

การทำแฮชทำงานอย่างไร

Turbo สร้างแฮชจาก: ไฟล์ซอร์ส (กลุ่มอินพุต), การพึ่งพา (package.json + lockfile), ตัวแปรสภาพแวดล้อมที่คุณประกาศ และการตั้งค่าของงานนั้นเอง แฮชเดียวกัน = งานเหมือนกันทุกประการ = พบข้อมูลในแคช

turbo.json — ไปป์ไลน์

ประกาศงานและความสัมพันธ์ระหว่างงานไว้ใน turbo.json

// turbo.json
{
  "$schema": "https://turbo.build/schema.json",
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["src/**", "package.json"],
      "outputs": ["dist/**", ".next/**"]
    },
    "test": {
      "dependsOn": ["^build"],
      "inputs": ["src/**", "test/**", "package.json"]
    },
    "lint": { "inputs": ["**/*.{ts,tsx,js,jsx}", ".eslintrc*"] },
    "dev": { "cache": false, "persistent": true }
  }
}

ข้อมูลเข้าและผลลัพธ์

ข้อมูลเข้า: ไฟล์ที่มีส่วนต่อค่าแฮช ผลลัพธ์: ไฟล์ที่ Turbo ควรแคชและกู้คืน หากกำหนดสองส่วนนี้ถูกต้อง อัตราการพบข้อมูลในแคชจะเพิ่มขึ้นถึง 90% ขึ้นไป

dependsOn

['^build']: สร้างการพึ่งพาก่อน ['lint']: เรียกใช้การตรวจโค้ดก่อนงานนี้ในแพ็กเกจเดียวกัน ['^build', 'lint']: รวมทั้งสองแบบ

cache: false และ persistent: true

งานอย่าง dev จะไม่ถูกแคช (เป็นงานโต้ตอบและทำงานเป็นเวลานาน) และจะทำงานต่อเนื่อง (Turbo จะคงงานไว้) ให้ตั้งค่าทั้งสองอย่างสำหรับเซิร์ฟเวอร์พัฒนา

การเรียกใช้งาน

ใช้ Turbo CLI

npx turbo run build
npx turbo run test lint
npx turbo run build --filter=web
npx turbo run build --filter=web... --concurrency=10

ตำแหน่งแคช

โดยค่าเริ่มต้น แคชในเครื่องจะอยู่ที่ node_modules/.cache/turbo การเรียกใช้แต่ละครั้งจะสร้างบันทึกและผลลัพธ์ที่บันทึกไว้ เมื่อพบข้อมูลในแคชจะแสดงข้อความ: 'cache hit, replaying logs'

การแคชระยะไกล

ส่งแคชไปยังคลังระยะไกลเพื่อให้การผสานรวมอย่างต่อเนื่องและเพื่อนร่วมทีมใช้ข้อมูลที่พบในแคชร่วมกันได้ สมัครใช้งานฟรีผ่าน turbo login (Vercel Remote Cache) หรือโฮสต์เอง

npx turbo login
npx turbo link    # link to a Vercel remote cache

# In CI:
env:
  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
  TURBO_TEAM: yourteam

แคชระยะไกลที่โฮสต์เอง

ทางเลือกแบบ OSS: turborepo-remote-cache (Node), turbo-cache-server (Go) ติดตั้งบนโครงสร้างพื้นฐานของคุณ แล้วตั้งค่าตัวแปรสภาพแวดล้อม TURBO_API

อินพุตจากตัวแปรสภาพแวดล้อม

ประกาศว่าตัวแปรสภาพแวดล้อมใดส่งผลต่อผลลัพธ์ — Turbo จะถือว่าตัวแปรเหล่านั้นเป็นอินพุต ดังนั้นเมื่อมีการเปลี่ยนแปลง แคชจะไม่สามารถใช้ต่อได้

// turbo.json
{
  "tasks": {
    "build": {
      "env": ["NODE_ENV", "VITE_API_URL"],
      "outputs": ["dist/**"]
    }
  },
  "globalEnv": ["GITHUB_SHA"]
}

การกรอง

เรียกใช้งานสำหรับแพ็กเกจที่ระบุ หรือแพ็กเกจที่ได้รับผลกระทบจากการเปลี่ยนแปลง

# Specific package and its dependencies:
turbo run build --filter=web...

# Packages that depend on shared/ui:
turbo run test --filter='...@repo/ui'

# Changed since main:
turbo run lint --filter='[origin/main]'

# Combine:
turbo run build --filter=web...[origin/main]

DRY_RUN และการสร้างโปรไฟล์

--dry=json จะแสดงกราฟงานโดยไม่เรียกใช้งานจริง ส่วน --profile จะสร้างร่องรอยรูปแบบ Chrome-DevTools

turbo run build --dry=json | jq
turbo run build --profile=trace.json
# open chrome://tracing and load trace.json

ข้อผิดพลาดที่พบบ่อย

1) ลืมประกาศผลลัพธ์ (Turbo จะไม่แคชผลลัพธ์เหล่านั้น) 2) ลืมตัวแปรสภาพแวดล้อมที่ส่งผลต่อการสร้าง 3) แคชเซิร์ฟเวอร์พัฒนา (ให้ตั้งค่า cache: false) 4) ไม่ใช้ --frozen-lockfile ในการผสานรวมอย่างต่อเนื่อง (การเปลี่ยนแปลงของ lockfile อาจทำให้ค่าแฮชเปลี่ยน)

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

ฟิลด์สองรายการใดในการตั้งค่างานของ Turbo ที่กำหนดว่าจะนำผลลัพธ์กลับมาใช้จากแคชได้หรือไม่

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุป: Turbo

การแคชตามค่าแฮชทั้งในเครื่องและระยะไกลสำหรับงานของโมโนรีโพ turbo.json ใช้ประกาศงานพร้อม dependsOn, อินพุต, ผลลัพธ์ และ env ใช้ cache: false + persistent: true สำหรับเซิร์ฟเวอร์พัฒนา กรองงานด้วย --filter=web... และ changed-since=[origin/main] แคชระยะไกล (Vercel หรือโฮสต์เอง) ช่วยแชร์ข้อมูลที่พบในแคชระหว่างการผสานรวมอย่างต่อเนื่องและทีม ใช้ --profile เพื่อสร้างโปรไฟล์ กำหนดอินพุตและผลลัพธ์ให้ถูกต้องเพื่อให้อัตราการพบข้อมูลในแคชสูงที่สุด

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 41
บทเรียน: 163

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

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

บทเรียน “Turbo: การแคชและไปป์ไลน์งาน” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “Turbo: การแคชและไปป์ไลน์งาน”

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

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

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

บทเรียน “Turbo: การแคชและไปป์ไลน์งาน” ใช้เวลานานแค่ไหน

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

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

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

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

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