DEV Community

loading...

Discussion on: Does typescript increase the bundle size of a project?

Collapse
ericgeek profile image
EricGeek • Edited

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.