Does typescript increase the bundle size of a project?
Haruan Justino

Haruan Justino @haruanm

Joined:
Jan 1, 2018

Does typescript increase the bundle size of a project?

Publish Date: Sep 24 '20
2 7

Does typescript increase the bundle size of a project?

Comments 7 total

  • ender minyard
    ender minyardSep 24, 2020

    How would it not?

    • Haruan Justino
      Haruan JustinoSep 24, 2020

      No idea, I'm not a frontend dev, but I was trying to find how much it tends to increase, nothing found :'(

      • ender minyard
        ender minyardSep 24, 2020

        If you have a specific use case for TypeScript in a specific project, bundlesize can help.

        The size of TypeScript on NPM is 56.8 MB.

        • Haruan Justino
          Haruan JustinoSep 24, 2020

          For sure it will, I will run it on all my projects, thanks

  • Benny Powers 🇮🇱🇨🇦
    Benny Powers 🇮🇱🇨🇦Sep 24, 2020

    it depends on how it's used
    optional chaining will have some effect,
    if you don't use tslib, there could be significant duplication of code across a large project
    also typescript prefers certain constructs like typeguard functions, which a javascript developer wouldn't necessarily have written

    edit: that being said, typescript can do some work in types which javascript would have had to do at run time, so there could be some byte-savings there, if conscientiously applied

  • EricGeek
    EricGeekSep 24, 2020

    Very much so if you're doing a small project and your target doesn't match the features you're using. One of the first things I had to figure out was why typescript was transpiling async/await and all other post-ES5 code into ES5 compatible code even though my project file was specifying a target of es2020, and for a small project, that was tripling the size of the necessary JavaScript.

    In case anyone is curious, the problem turned out to be a very old version of typescript installed as part of a MS Dev SDK that had been refusing to uninstall and was winding up in the path ahead of the 4.0.3 version I had installed myself. It didn't know about projects, so was ignoring my tsconfig.json.

    For the most part, as long as the actual Typescript you write doesn't use features that your target ES version doesn't support, then the resulting JavaScript will be about the same size as hand written JavaScript doing the same thing using the same features. There are options you can set that can balloon the size of the bundle (inline source maps, anyone?), but for the most part, you have to turn them on yourself. You can also set a few options that could make the bundle a little smaller if you're not minimizing the bundle somewhere else, but I can't think of any that would actually make the bundle smaller than a minimized native-JS bundle.

Add comment