Project structure
- TypeScript course
- Expert
- Lesson 25/35
- 4 min
Learn performance with project references.
Performance with project references
Project references split a large project into smaller, independently compiled sub-projects. Only the changed sub-project and its dependents are recompiled; this significantly reduces compile time in large codebases. Each sub-project has composite: true and its own .tsbuildinfo cache.
// app → core → utils
// if utils changes: utils + core + app
// if app changes: only appBuild mode resolves the dependency order automatically.
Incremental cache
Each sub-project writes the previous build's type graph to a .tsbuildinfo file. On the next build, only changed files and the types they affect are re-resolved. This saves minutes instead of seconds in large projects.
// core/.tsbuildinfo
// type graph of the last buildIf the cache is deleted, a full rebuild occurs.
Practice Compute the rebuild scope
Write a computeRebuildScope function taking changed projects and a reverse dependency map. Collect the changed project and its dependents into a set and return a sorted array. When core changes and core → app is a dependency, produce the output app, core.
Starter code
// değişen projeleri ve bağımlılarını bul
// bir kümede topla
// sıralı diziye çevir
// sonucu yazdırSample solution
function computeRebuildScope(changed: string[], reverseDeps: Record<string, string[]>): string[] {
const rebuild = new Set<string>(changed);
for (const file of changed) {
for (const dependent of reverseDeps[file] || []) {
rebuild.add(dependent);
}
}
return Array.from(rebuild).sort();
}
const changed = ["core"];
const reverseDeps = { core: ["app"], utils: ["core"] };
console.log(computeRebuildScope(changed, reverseDeps).join(", "));Expected output
app, core
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 How do project references improve build time?
- They disable type checking entirely
- They reduce bundle size
- They recompile only changed and dependent projects Correct answer
- They remove the need for a tsconfig file
Explanation: References provide incremental builds by recompiling the changed project and its dependents; type checking is not disabled, bundle size is unchanged, and tsconfig is still required.
2 Incremental flag
{
"compilerOptions": {
"composite": true,
"____": true
}
}{
"compilerOptions": {
"composite": true,
"incremental": true
}
}Explanation: For incremental builds use incremental; increment, cache, and fast are not valid option names.
3 Structure parts
| Term | Meaning |
|---|---|
Project references |
splits project into sub-projects |
.tsbuildinfo |
type graph cache |
composite: true |
enables referenceability |
Build modu |
resolves dependency order |