DEV Community

Jose Loui
Jose Loui

Posted on

How We Cut TypeScript Compile Times by 85% (And Saved Our Sanity)

#typescript #node #webdev #javascript

The Pain Was Real

Picture this: You're in full flow, crushing some complex business logic like a boss, when suddenly you need to test your changes. You hit save, run the build, and... wait. And wait. And wait some more.

18 seconds.

Every. Single. Time.

In 2025, waiting 18 seconds for TypeScript to compile 334 files feels like watching grass grow during playoff season. Our team had collectively developed some... interesting coping mechanisms:

  • The classic "alt-tab to social media while TypeScript does its thing"
  • The "grab a coffee and hope it's done when I get back" strategy
  • The occasional existential crisis about whether we should have just stuck with vanilla JavaScript

The Investigation

Our setup was pretty standard for a Node.js backend:

  • 334 TypeScript files (a solid mid-sized codebase)
  • TypeScript 4.8.3 (the "if it ain't broke, don't fix it" mentality)
  • 521MB node_modules (because of course)
  • ES6 target (living in the past like it's 2015)
  • No incremental compilation (rookie mistake)

The build times were consistently brutal:

  • Clean build: 14-18 seconds
  • Incremental build: Still 14-18 seconds (because we weren't actually doing incremental builds - zero incremental gains!)
  • Developer happiness: Approaching zero

What a mess. This was definitely not worth the time investment.

The Upgrade Journey

Step 1: Enable the Obvious Wins

First, we tackled the low-hanging fruit in our tsconfig.json. Basic optimizations, you know:

{
  "compilerOptions": {
    "incremental": true,           // 🎯 Game changer
    "skipLibCheck": true,          // Skip type checking of .d.ts files
    "tsBuildInfoFile": ".tsbuildinfo",
    "target": "es2020"             // Because it's not 2015 anymore
  }
}
Enter fullscreen mode Exit fullscreen mode

Result: Build times dropped to ~8 seconds (38% improvement). Good start, but we were just getting warmed up.

Step 2: The Big Guns - TypeScript 5.8.3

Here's where things got interesting. We took the plunge and upgraded from TypeScript 4.8.3 to 5.8.3. This isn't just a minor version bump – it's a proper generational leap, a substantial upgrade.

npm install --save-dev typescript@latest
Enter fullscreen mode Exit fullscreen mode

Then we updated our config to leverage TypeScript 5.x's full power:

{
  "compilerOptions": {
    "target": "es2022",                    // Modern JavaScript FTW
    "lib": ["es2022"],
    "moduleDetection": "auto",             // TS 5.x magic
    "isolatedModules": true,               // Faster transpilation
    "useDefineForClassFields": true        // Proper class field semantics
  }
}
Enter fullscreen mode Exit fullscreen mode

Step 3: Clean Up the Dependencies

TypeScript 5.x was throwing some serious shade at our ancient dependencies:

# Out with the old stuff
(node:44612) [DEP0040] DeprecationWarning: The `punycode` module is deprecated
(node:45118) [DEP0180] DeprecationWarning: fs.Stats constructor is deprecated

# In with the new
npm install --save-dev eslint@^8.57.0 @typescript-eslint/eslint-plugin@^6.0.0
npm install firebase-admin@^11.11.1 firebase-functions@^4.0.0
Enter fullscreen mode Exit fullscreen mode

The Results (Prepare to Be Amazed)

After the upgrade, our build times looked like this. Solid transformation:

Before:

  • Clean build: 13-14 seconds
  • Incremental build: 13-14 seconds (major frustration)
  • Developer mood: 😤

After:

  • Clean build: ~2 seconds (85% faster!)
  • Incremental build: ~2 seconds (consistent performance)
  • Developer mood: 🚀

Let me repeat that for emphasis: We went from 14 seconds to 2 seconds. That's an 85% improvement. Absolutely worth the effort!

The Unexpected Side Benefits

1. VSCode Actually Responds Now

Remember when you'd type something and wait for the red squiggles to appear like you're waiting for a slow train? Yeah, that's gone. TypeScript 5.x's language server is significantly faster.

2. Better Error Messages

TypeScript 5.x doesn't just compile faster – it also fails faster and with more helpful messages. Win-win situation.

3. Modern JavaScript Output

With ES2022 as our target, we're generating more efficient JavaScript. Classes, async/await, and optional chaining work beautifully – no more IE support headaches!

4. No More Deprecation Warnings

Those annoying Node.js deprecation warnings? Gone. Our console output is clean and our CI logs are actually readable instead of that warning spam.

5. Future-Proof Features

We now have access to TypeScript 5.x features like:

  • Better type inference (solid improvements)
  • Improved module resolution
  • Enhanced performance optimizations
  • Support for modern ECMAScript features

The Build Pipeline Improvements

We also streamlined our build process with some new Gulp tasks. Simple but effective:

npm run build:fast    # For development (2s) - lightning speed
npm run build:clean   # For CI/production (2s) - fresh build
npm run build         # Default (maintains compatibility)
Enter fullscreen mode Exit fullscreen mode

The incremental compilation cache (.tsbuildinfo) is now doing its job properly, and our .gitignore properly excludes it. No more accidental commits.

Moral of the Story

1. Don't Fear the Major Version Bump

Upgrading from TypeScript 4.x to 5.x sounds scary, but the performance improvements are totally worth it. The TypeScript team has done amazing work on compilation speed.

2. Enable Incremental Compilation Yesterday

If you're not using "incremental": true in your tsconfig.json, you're leaving massive performance gains on the table. Just do it, no excuses.

3. Skip the Library Checks

Unless you're debugging type definitions, "skipLibCheck": true is free performance. Your third-party libraries probably work fine anyway.

4. Modern Targets Are Your Friend

Stop targeting ES5 or ES6. It's 2024. ES2022 is well-supported and compiles faster. No more legacy browser headaches.

5. Clean House Regularly

Those deprecation warnings aren't just noise – they're hints that your dependencies are holding you back. Update them regularly, like cleaning your workspace.

6. Measure Everything

We went from "builds feel slow" to "builds are 85% faster" because we measured before and after. Time your builds and track improvements. Data speaks louder than feelings.

TL;DR: We upgraded TypeScript from 4.8.3 to 5.8.3, enabled incremental compilation, modernized our config, and cut build times from 14 seconds to 2 seconds. Our developers are happier, our CI is faster, and we're using modern JavaScript features. Solid win all around.

If you're still on an older TypeScript version, stop reading and go upgrade. Your future self will thank you.

P.S. - The 12 seconds we saved per build adds up to roughly 2 hours per developer per week. That's a lot of coffee breaks that can now be productive coding time. The math really adds up!

Quick Setup Guide

Want to implement this in your project? Here's the quick approach:

  1. Backup your current setup (basic common sense)
  2. Update TypeScript: npm install --save-dev typescript@latest
  3. Update your tsconfig.json with the optimizations mentioned above
  4. Test thoroughly - run your builds, check your app works
  5. Update dependencies that throw deprecation warnings
  6. Enjoy the speed and reduced frustration

Remember: Measure before and after. If something breaks, you can always rollback. But trust me, this upgrade is solid gold.

Happy coding! 🚀

Top comments (0)