DEV Community

Haruan Justino
Haruan Justino

Posted on

Does typescript increase the bundle size of a project?

Does typescript increase the bundle size of a project?

Discussion (7)

Collapse
bennypowers profile image
Benny Powers ๐Ÿ‡ฎ๐Ÿ‡ฑ๐Ÿ‡จ๐Ÿ‡ฆ • Edited on

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

Collapse
ericgeek profile image
EricGeek • Edited on

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.

Collapse
ender_minyard profile image
ender minyard

How would it not?

Collapse
haruanm profile image
Haruan Justino Author

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

Collapse
ender_minyard profile image
ender minyard • Edited on

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.

Thread Thread
haruanm profile image
Haruan Justino Author

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

Collapse
jfbrennan profile image
Jordan Brennan

Yes. TSLib tries to help, but not a cure-all. Depending on your stack and build pipeline, it is possible to double to the size of your source code. That's how bad things have got.