การวิเคราะห์การคอมไพล์ TypeScript ที่ช้า
ใช้ --extendedDiagnostics และ --generateTrace เพื่อค้นหาคอขวด
การวิเคราะห์การคอมไพล์ TypeScript ที่ช้า เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
เหตุใด TypeScript จึงทำงานช้าได้
ชนิดข้อมูลเงื่อนไขที่ซับซ้อน การกระจายยูเนียนขนาดใหญ่ และชนิดข้อมูลแมปแบบเวียนเกิดลึก อาจทำให้ตัวตรวจสอบชนิดข้อมูลของ TypeScript ทำงานช้าลงอย่างมากในโครงการขนาดใหญ่
// Expensive: distributive conditional on large union
type Slow = LargeUnion extends infer T ? T extends string ? T : never : never;แฟล็ก --extendedDiagnostics
เรียกใช้ tsc --extendedDiagnostics เพื่อดูรายละเอียดเวลาการคอมไพล์ ได้แก่ ขั้นตอนการวิเคราะห์ไวยากรณ์ การผูก การตรวจสอบชนิดข้อมูล และการสร้างผลลัพธ์
tsc --extendedDiagnostics 2>&1 | head -40
# Output:
# Files: 212
# Lines: 48320
# Check time: 8.23s ← focus hereแฟล็ก --generateTrace
tsc --generateTrace ./trace จะสร้างไฟล์บันทึกการทำงานที่เข้ากันได้กับ Chrome DevTools ซึ่งคุณโหลดได้ในแท็บประสิทธิภาพ เพื่อดูว่าชนิดข้อมูลใดใช้ทรัพยากรมาก
tsc --generateTrace ./trace-output
# Open trace-output/trace.json in Chrome DevTools > Performanceการวิเคราะห์บันทึกการทำงาน
ในบันทึกการทำงาน ให้มองหาแถบแนวนอนยาวที่แสดงการสร้างอินสแตนซ์ของชนิดข้อมูลซึ่งใช้ทรัพยากรมาก ชื่อชนิดข้อมูลและตำแหน่งในต้นฉบับจะบอกคุณว่าควรปรับปรุงส่วนใด
# Common culprits in traces:
# - Recursive mapped types with large inputs
# - Distributive conditionals over 50+ member unions
# - Deep infer chains on complex genericsแฟล็ก --listFiles
tsc --listFiles จะแสดงไฟล์ทุกไฟล์ที่รวมอยู่ในการคอมไพล์ โฟลเดอร์ node_modules ขนาดใหญ่ที่ถูกนำเข้ามาโดยไม่ตั้งใจเป็นสาเหตุทั่วไปที่ทำให้ประสิทธิภาพลดลง
tsc --listFiles 2>&1 | grep node_modules | wc -l
# If this is large, check your include/exclude settingsการลดการรวมไฟล์
ใช้ include และ exclude ใน tsconfig เพื่อจำกัดไฟล์ที่ TypeScript ประมวลผล
{
"include": ["src/**/*"],
"exclude": ["node_modules", "dist", "**/*.test.ts"]
}skipLibCheck เพื่อการปรับปรุงอย่างรวดเร็ว
skipLibCheck: true จะข้ามการตรวจสอบชนิดข้อมูลของไฟล์ประกาศ .d.ts ทั้งหมด ซึ่งช่วยเร่งการคอมไพล์ได้อย่างมากในโครงการที่มีการพึ่งพาจำนวนมาก
{
"compilerOptions": {
"skipLibCheck": true
}
}การแยกชนิดข้อมูลที่ใช้ทรัพยากรมาก
แยกการคำนวณชนิดข้อมูลที่ใช้ทรัพยากรมากออกมาเป็นชนิดข้อมูลขั้นกลางที่มีชื่อ เพื่อให้ TypeScript แคชผลลัพธ์แทนการคำนวณใหม่ทุกจุดที่ใช้งาน
// Slow: recomputed at each usage
type Result = ComplexUnion extends string ? ComplexUnion : never;
// Fast: cached
type FilteredUnion = ComplexUnion extends string ? ComplexUnion : never;
type Result = FilteredUnion;การตรวจสอบด้วย transpileOnly
ระหว่างการพัฒนา ให้ใช้ ts-jest หรือ esbuild ร่วมกับ transpileOnly: true เพื่อข้ามการตรวจสอบชนิดข้อมูลและทำให้การทำงานวนรอบรวดเร็วขึ้น เรียกใช้การตรวจสอบชนิดข้อมูลแบบเต็มแยกต่างหากในการผสานรวมอย่างต่อเนื่อง
// jest.config.js with ts-jest
{
transform: {
"^.+\.tsx?$": ["ts-jest", { diagnostics: false }]
}
}ประสิทธิภาพของตัวแก้ไข
ปัญหาการทำงานช้าลงของเซิร์ฟเวอร์ภาษาของ TypeScript ใน VS Code มักย้อนกลับไปพบชนิดข้อมูลราคาแพงชุดเดิม ตรวจสอบ TypeScript: Restart TS Server และการติดตามจากเซิร์ฟเวอร์ภาษา TypeScript
// VS Code settings.json to enable detailed TS server log:
// "typescript.tsserver.log": "verbose"ทบทวน: การวิเคราะห์ประสิทธิภาพการคอมไพล์
ใช้ --extendedDiagnostics สำหรับการจับเวลาระดับสูง ใช้ --generateTrace สำหรับการวิเคราะห์แต่ละชนิดข้อมูล และลดการรวมไฟล์ เงื่อนไขเชิงลึก และการกระจายยูเนียนขนาดใหญ่เพื่อเร่งการคอมไพล์
ตรวจสอบอย่างรวดเร็ว
แฟล็กใดสร้างไฟล์การติดตามที่เข้ากันได้กับ Chrome DevTools
สิ่งที่คุณได้เรียนรู้
วิเคราะห์ประสิทธิภาพการคอมไพล์ TypeScript ด้วย --extendedDiagnostics และ --generateTrace ลดเวลาคอมไพล์ด้วยการจำกัดการรวมไฟล์ ใช้ skipLibCheck แคชชนิดข้อมูลระหว่างกลาง และหลีกเลี่ยงการดำเนินการกับชนิดข้อมูลที่เรียกซ้ำลึกหรือกระจายตัว
คำถามที่พบบ่อย
บทเรียน “การวิเคราะห์การคอมไพล์ TypeScript ที่ช้า” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การวิเคราะห์การคอมไพล์ TypeScript ที่ช้า” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การวิเคราะห์การคอมไพล์ TypeScript ที่ช้า”
ใช้ --extendedDiagnostics และ --generateTrace เพื่อค้นหาคอขวด คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “การวิเคราะห์การคอมไพล์ TypeScript ที่ช้า” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม
ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การวิเคราะห์การคอมไพล์ TypeScript ที่ช้า
- หลีกเลี่ยงการดำเนินการกับชนิดที่มีค่าใช้จ่ายสูง
- skipLibCheck และคำประกาศแบบแยกส่วน
- การตรวจสอบชนิดใน CI: กลยุทธ์และเครื่องมือ