การบิลด์แบบเพิ่มทีละส่วนและแคชในโมโนรีโป
เพิ่มประสิทธิภาพเวลาบิลด์ด้วยการคอมไพล์แบบเพิ่มทีละส่วนและ Turborepo
การบิลด์แบบเพิ่มทีละส่วนและแคชในโมโนรีโป เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
เหตุใดการสร้างแบบเพิ่มทีละส่วนจึงสำคัญ
ในโมโนรีโปขนาดใหญ่ การสร้างทุกแพ็กเกจใหม่ทุกครั้งที่มีการเปลี่ยนแปลงนั้นช้า การสร้างแบบเพิ่มทีละส่วนจะตรวจหาสิ่งที่เปลี่ยนแปลงและคอมไพล์ใหม่เฉพาะแพ็กเกจที่ได้รับผลกระทบ
# Without incremental: all 20 packages rebuild every time
# With incremental: only 2 changed packages rebuildโหมดการสร้างแบบเพิ่มทีละส่วนของ TypeScript
เปิดใช้ "incremental": true ใน tsconfig เพื่อสร้างไฟล์ .tsbuildinfo ซึ่งแคชสถานะการสร้างครั้งก่อนสำหรับการเรียกใช้ซ้ำที่รวดเร็ว
{
"compilerOptions": {
"incremental": true,
"tsBuildInfoFile": "./.tsbuildinfo"
}
}tsc --build สำหรับการอ้างอิงโครงการ
tsc --build ทำงานแบบเพิ่มทีละส่วนโดยพื้นฐานสำหรับเวิร์กสเปซที่ใช้การอ้างอิงโครงการ โดยติดตามเวลาประทับและข้ามแพ็กเกจที่เป็นปัจจุบันแล้ว
# First build: all packages compiled
tsc --build
# Second build: only changed packages compiled
tsc --build
# [12:00:01 PM] Project 'packages/core' is up to dateการแคชของ Turborepo
Turborepo จะแคชผลลัพธ์ของงาน เช่น dist/ และกู้คืนผลลัพธ์จากแคชเมื่อข้อมูลนำเข้าไม่เปลี่ยนแปลง โดยแชร์แคชระหว่างทีมผ่านแคชระยะไกล
// turbo.json
{
"pipeline": {
"build": {
"dependsOn": ["^build"],
"outputs": ["dist/**", ".tsbuildinfo"]
}
}
}การแคชระยะไกลด้วย Turborepo
แชร์แคชการสร้างระหว่างเครื่องของการผสานรวมอย่างต่อเนื่องและสมาชิกในทีม เพื่อไม่ให้ใครต้องสร้างสิ่งที่ผู้อื่นสร้างไว้แล้วซ้ำ
# Link to Vercel remote cache
npx turbo login
npx turbo linkแคชการคำนวณของ Nx
Nx มีการแคชลักษณะเดียวกัน พร้อมการวิเคราะห์สิ่งที่ได้รับผลกระทบอย่างละเอียดตามกราฟการพึ่งพาของโครงการ
# Nx: only test affected projects
npx nx affected --target=test --base=mainข้อมูลนำเข้าและผลลัพธ์ของแคช
เพื่อให้การแคชถูกต้อง ให้ประกาศข้อมูลนำเข้าทั้งหมด เช่น ไฟล์ต้นฉบับและตัวแปรสภาพแวดล้อม รวมถึงผลลัพธ์ เช่น ไดเรกทอรี dist และ tsbuildinfo ในการกำหนดค่าเครื่องมือสร้าง
// turbo.json with inputs
{
"pipeline": {
"build": {
"inputs": ["src/**", "tsconfig.json"],
"outputs": ["dist/**"]
}
}
}การทำให้แคชใช้ไม่ได้
แคชจะใช้ไม่ได้เมื่อข้อมูลนำเข้าเปลี่ยนแปลง หลีกเลี่ยงการรวมไฟล์ที่เปลี่ยนแปลงบ่อย เช่น บันทึกและเวลาประทับ เป็นข้อมูลนำเข้า เพื่อป้องกันการสร้างใหม่โดยไม่จำเป็น
# Force rebuild even if cached
turbo run build --forceการผสานรวมอย่างต่อเนื่อง
เชื่อมการผสานรวมอย่างต่อเนื่อง เช่น GitHub Actions และ CircleCI เข้ากับแคชระยะไกล เพื่อให้การสร้างสำหรับ PR รวดเร็วโดยนำผลลัพธ์การสร้างก่อนหน้ากลับมาใช้
# .github/workflows/ci.yml
- name: Build
run: npx turbo build
env:
TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
TURBO_TEAM: my-teamการตรวจสอบชนิดข้อมูลแบบเพิ่มทีละส่วนเท่านั้น
ใช้ tsc --noEmit --incremental สำหรับขั้นตอนการผสานรวมอย่างต่อเนื่องที่ตรวจสอบชนิดข้อมูลเท่านั้นได้อย่างรวดเร็ว โดยข้ามการสร้างผลลัพธ์แต่ยังได้ประโยชน์จากการแคช
npx tsc --noEmit --incremental
# Quick type check with .tsbuildinfo cacheทบทวน: การสร้างแบบเพิ่มทีละส่วน
การสร้างแบบเพิ่มทีละส่วนในโมโนรีโปใช้ tsBuildInfo ของ TypeScript ร่วมกับ tsc --build และการแคชของ Turborepo หรือ Nx เพื่อลดงานคอมไพล์ในการเปลี่ยนแปลงแต่ละครั้ง
ตรวจสอบอย่างรวดเร็ว
TypeScript สร้างไฟล์ใดเพื่อเปิดใช้การสร้างแบบเพิ่มทีละส่วน
สิ่งที่ได้เรียนรู้
การสร้างแบบเพิ่มทีละส่วนใช้ไฟล์ .tsbuildinfo ของ TypeScript และ tsc --build เพื่อข้ามแพ็กเกจที่ไม่มีการเปลี่ยนแปลง Turborepo และ Nx เพิ่มการแคชระยะไกลและการวิเคราะห์เฉพาะสิ่งที่ได้รับผลกระทบให้ครอบคลุมทั้งโมโนรีโป
เรียนรู้ TypeScript ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 101
- บทเรียน
- 352
คำถามที่พบบ่อย
บทเรียน “การบิลด์แบบเพิ่มทีละส่วนและแคชในโมโนรีโป” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การบิลด์แบบเพิ่มทีละส่วนและแคชในโมโนรีโป” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การบิลด์แบบเพิ่มทีละส่วนและแคชในโมโนรีโป”
เพิ่มประสิทธิภาพเวลาบิลด์ด้วยการคอมไพล์แบบเพิ่มทีละส่วนและ Turborepo คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “การบิลด์แบบเพิ่มทีละส่วนและแคชในโมโนรีโป” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม
ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- อธิบายการอ้างอิงโครงการ TypeScript
- เวิร์กสเปซ pnpm กับ TypeScript
- กลยุทธ์แพ็กเกจชนิดที่ใช้ร่วมกัน
- การบิลด์แบบเพิ่มทีละส่วนและแคชในโมโนรีโป