CODEWITHSUNDEEP
typescript
Nick
Nick

Reputation: 783

What is the pros / cons of compiling TypeScript into single js file?

As title asked. Whats the pros and cons of translating multiple .ts files into a single .js file? e.g. Is it just performance reason? Will it make debugging harder?

Upvotes: 0

Views: 286

Answers (2)

Alex
Alex

Reputation: 14503

This depends entirely on you project setup and environment.

If you are taking advantage of http/2 and its ability to send multiple files over one channel, whether you concatenate the files or not will not affect page-load performance. If you don't, performance will be improved by loading one large file instead of multiple smaller files.

If you are thinking about concatenating files, you are not using dependency loaders. This is ok, but this means that you need to reference all your files in the html page. This is simple if you only have one concatenated file to reference, and a bit harder if you have hundreds of files. You could use a build tool like gulp to build your html and include all references automatically, but if you don't, you will have a royal mess.

Regarding debugging, you can use sourcemaps which mean that you can debug your typescript directly in the browser, and that is a really good idea. Just like you can debug C# instead of of the compiled IL. If you are using sourcemaps, your debugging experience will be the same regardless of whether you are concatenating files or not. Use sourcemaps when developing with TypeScript.

Upvotes: 0

Chiru
Chiru

Reputation: 4091

Transpiling your sources into one single file…

  • …makes debugging harder (yes, there's sourcemaps, but then you'll have to take care of not including them in your production build, leading to a bigger build pipeline). Though, If you use good transpilers, you'll probably already use sourcemaps anyway.
  • …leads to bad website/initial rendering performance (especially with HTTP/2, big bundles are now a thing of the past. Just use HTTP/2 and something like jspm).
  • …prevents you from using hot-reloading plugins in an acceptable manner (that is, plugins that automatically refresh your browser once a file changes). If you change only one source file, only that file should compile; it's unnecessary to re-build the whole bundle. Big applications become pretty unmaintainable if you bundle everything up on file changes.
  • …doesn't affect how much you need to put into your HTML files. Hence, what @Alex says is not entirely true. Your HTML should only import one core module anyway; it doesn't matter if you bundle everything up or not. Have a look at System.import, the WHATWG Loader spec and jspm. Also have a look at the Akamai HTTP/2 demo.

TL;DR: Do not create a single bundle. It's a thing of the past and will likely die with web servers (and browsers) optimizing for HTTP/2.

Upvotes: 1

Related Questions