0Pricing
TypeScript Academy · Pelajaran

Membuat Profil Kompilasi TypeScript yang Lambat

Gunakan --extendedDiagnostics dan --generateTrace untuk menemukan hambatan.

Membuat Profil Kompilasi TypeScript yang Lambat adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar TypeScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus TypeScript Academy mencakup 4 pelajaran total.

Mengapa TypeScript Bisa Lambat

Tipe kondisional yang kompleks, distribusi gabungan yang besar, dan tipe terpetakan yang sangat rekursif dapat menyebabkan pemeriksa tipe TypeScript melambat drastis pada proyek besar.

// Expensive: distributive conditional on large union
type Slow = LargeUnion extends infer T ? T extends string ? T : never : never;

Bendera --extendedDiagnostics

Jalankan tsc --extendedDiagnostics untuk melihat perincian waktu kompilasi: penguraian, pengikatan, pemeriksaan tipe, dan fase pembuatan keluaran.

tsc --extendedDiagnostics 2>&1 | head -40
# Output:
# Files:             212
# Lines:            48320
# Check time:       8.23s  ← focus here

Bendera --generateTrace

tsc --generateTrace ./trace menghasilkan berkas pelacakan yang kompatibel dengan Chrome DevTools. Anda dapat memuatnya di tab Performance untuk melihat tipe mana yang memerlukan banyak sumber daya.

tsc --generateTrace ./trace-output
# Open trace-output/trace.json in Chrome DevTools > Performance

Menganalisis Pelacakan

Dalam pelacakan, cari bilah horizontal panjang yang menunjukkan pembuatan instansiasi tipe yang membutuhkan banyak sumber daya. Nama tipe dan lokasi sumber menunjukkan bagian yang perlu dioptimalkan.

# Common culprits in traces:
# - Recursive mapped types with large inputs
# - Distributive conditionals over 50+ member unions
# - Deep infer chains on complex generics

Bendera --listFiles

tsc --listFiles menampilkan setiap berkas yang disertakan dalam kompilasi. Folder node_modules besar yang tidak sengaja disertakan merupakan penyebab umum masalah kinerja.

tsc --listFiles 2>&1 | grep node_modules | wc -l
# If this is large, check your include/exclude settings

Mengurangi Penyertaan Berkas

Gunakan include dan exclude dalam tsconfig untuk membatasi berkas yang diproses TypeScript.

{
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist", "**/*.test.ts"]
}

skipLibCheck untuk Hasil Cepat

skipLibCheck: true melewati pemeriksaan tipe semua berkas deklarasi .d.ts, yang dapat mempercepat kompilasi secara signifikan pada proyek dengan banyak dependensi.

{
  "compilerOptions": {
    "skipLibCheck": true
  }
}

Mengisolasi Tipe yang Berat

Ekstrak perhitungan tipe yang berat ke dalam tipe perantara bernama agar TypeScript dapat menyimpannya, bukan menghitungnya ulang di setiap lokasi penggunaan.

// Slow: recomputed at each usage
type Result = ComplexUnion extends string ? ComplexUnion : never;

// Fast: cached
type FilteredUnion = ComplexUnion extends string ? ComplexUnion : never;
type Result = FilteredUnion;

Memeriksa dengan transpileOnly

Dalam pengembangan, gunakan ts-jest atau esbuild dengan transpileOnly: true untuk melewati pemeriksaan tipe agar iterasi lebih cepat. Jalankan pemeriksaan tipe lengkap secara terpisah dalam CI.

// jest.config.js with ts-jest
{
  transform: {
    "^.+\.tsx?$": ["ts-jest", { diagnostics: false }]
  }
}

Performa Editor

Perlambatan server bahasa TypeScript di VS Code sering kali disebabkan oleh tipe mahal yang sama. Periksa TypeScript: Restart TS Server dan jejak TS dari server bahasa.

// VS Code settings.json to enable detailed TS server log:
// "typescript.tsserver.log": "verbose"

Rangkuman: Membuat Profil Kompilasi

Gunakan --extendedDiagnostics untuk pengukuran waktu tingkat tinggi, --generateTrace untuk analisis per tipe, lalu kurangi penyertaan berkas, kondisional mendalam, dan distribusi gabungan besar untuk mempercepat kompilasi.

Pemeriksaan Singkat

Bendera mana yang menghasilkan berkas jejak yang kompatibel dengan Chrome DevTools?

Yang Anda Pelajari

Buat profil kompilasi TypeScript dengan --extendedDiagnostics dan --generateTrace. Kurangi waktu kompilasi dengan membatasi penyertaan berkas, menggunakan skipLibCheck, melakukan cache pada tipe perantara, serta menghindari operasi tipe yang sangat rekursif atau distributif.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Membuat Profil Kompilasi TypeScript yang Lambat” gratis?

Ya — teks lengkap “Membuat Profil Kompilasi TypeScript yang Lambat” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus TypeScript Academy, upgrade ke CoddyKit PRO. Kursus TypeScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Membuat Profil Kompilasi TypeScript yang Lambat”?

Gunakan --extendedDiagnostics dan --generateTrace untuk menemukan hambatan. Kamu berlatih TypeScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai TypeScript Academy?

Tidak diperlukan pengalaman sebelumnya. TypeScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Membuat Profil Kompilasi TypeScript yang Lambat” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran TypeScript Academy ini?

Ya. Setiap pelajaran TypeScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Membuat Profil Kompilasi TypeScript yang Lambat
  2. Menghindari Operasi Tipe yang Mahal
  3. skipLibCheck dan Deklarasi Terisolasi
  4. Pemeriksaan Tipe di CI: Strategi dan Alat
← Kembali ke TypeScript Academy