0Pricing
TypeScript Academy · Lekcja

Profilowanie powolnej kompilacji TypeScript

Używaj --extendedDiagnostics i --generateTrace, aby znajdować wąskie gardła.

Profilowanie powolnej kompilacji TypeScript to bezpłatna lekcja TypeScript Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej TypeScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs TypeScript Academy zawiera 4 lekcji w sumie.

Dlaczego TypeScript może działać wolno

Złożone typy warunkowe, duże rozkłady unii i głęboko rekurencyjne typy mapowane mogą znacznie spowolnić mechanizm sprawdzania typów TypeScript w dużych projektach.

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

Flaga --extendedDiagnostics

Należy uruchomić tsc --extendedDiagnostics, aby zobaczyć rozkład czasu kompilacji na analizowanie składni, wiązanie, sprawdzanie typów i generowanie plików.

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

Flaga --generateTrace

tsc --generateTrace ./trace tworzy plik śledzenia zgodny z Chrome DevTools, który można załadować na karcie Performance, aby sprawdzić, które typy wymagają najwięcej obliczeń.

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

Analizowanie śladu

W śladzie należy szukać długich poziomych pasków reprezentujących kosztowne tworzenie instancji typów. Nazwa typu i lokalizacja w kodzie źródłowym wskazują, co należy zoptymalizować.

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

Flaga --listFiles

tsc --listFiles wyświetla każdy plik uwzględniony w kompilacji. Przypadkowo dołączone duże katalogi node_modules często powodują problemy z wydajnością.

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

Ograniczanie liczby dołączanych plików

Należy użyć include i exclude w tsconfig, aby ograniczyć zbiór plików przetwarzanych przez TypeScript.

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

skipLibCheck — szybkie usprawnienia

skipLibCheck: true pomija sprawdzanie typów we wszystkich plikach deklaracji .d.ts, co może znacznie przyspieszyć kompilację projektów z wieloma zależnościami.

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

Izolowanie kosztownych typów

Należy wydzielać kosztowne obliczenia typów do nazwanych typów pośrednich, aby TypeScript mógł je buforować zamiast obliczać ponownie w każdym miejscu użycia.

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

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

Sprawdzanie za pomocą transpileOnly

Podczas tworzenia aplikacji należy używać ts-jest lub esbuild z opcją transpileOnly: true, aby pominąć sprawdzanie typów i przyspieszyć iterację. Pełne sprawdzanie typów należy uruchamiać osobno w CI.

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

Wydajność edytora

Spowolnienia serwera języka TypeScript w VS Code często wynikają z tych samych kosztownych typów. Należy sprawdzić TypeScript: Restart TS Server oraz ślad TS z serwera języka.

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

Podsumowanie: profilowanie kompilacji

Należy użyć --extendedDiagnostics do uzyskania ogólnych czasów działania, --generateTrace do analizy poszczególnych typów, a także ograniczyć uwzględnianie plików, głębokie typy warunkowe i duże rozkłady unii, aby przyspieszyć kompilację.

Szybkie sprawdzenie

Która flaga generuje plik śladu zgodny z Chrome DevTools?

Czego się Państwo nauczyli

Należy profilować kompilację TypeScript za pomocą --extendedDiagnostics i --generateTrace. Czas kompilacji można skrócić przez ograniczenie uwzględniania plików, użycie skipLibCheck, buforowanie typów pośrednich oraz unikanie głęboko rekurencyjnych lub rozdzielających operacji na typach.

Często zadawane pytania

Czy lekcja „Profilowanie powolnej kompilacji TypeScript” jest bezpłatna?

Tak — pełny tekst „Profilowanie powolnej kompilacji TypeScript” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu TypeScript Academy, przejdź na CoddyKit PRO. Kurs TypeScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Profilowanie powolnej kompilacji TypeScript”?

Używaj --extendedDiagnostics i --generateTrace, aby znajdować wąskie gardła. Ćwiczysz TypeScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć TypeScript Academy?

Nie wymagamy żadnego doświadczenia. TypeScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Profilowanie powolnej kompilacji TypeScript”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji TypeScript Academy?

Tak. Każda lekcja TypeScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Profilowanie powolnej kompilacji TypeScript
  2. Unikanie kosztownych operacji na typach
  3. skipLibCheck i izolowane deklaracje
  4. Sprawdzanie typów w CI: strategie i narzędzia
← Powrót do TypeScript Academy