2

I'm currently exploring TypeScript and I was wondering why not compile the whole app to a single JS file instead of compiling every .ts file to it's corresponding .js.

Example for such an app is TypeDoc, which basically compiles to a single bin/typedoc.js file.

The common concept is to compile each .ts file in a .js file with --module commonjs as an argument to the typescript compiler.

Is there something that I need to worry about if I build a scalable ( big ) web application which compiles to a single file ?

Improve this question
3
  • What do you mean by "bad practice?" Is there something you're specifically worried about? Commented May 18, 2015 at 22:07
  • Yes I'm worried, about debugging, compilation speed and runtime speed Commented May 18, 2015 at 22:11
  • 1
    From my experience the reason to merge and minify multiple scripts into a file is to cut down on file size and therefore latency over the internet. For the purposes of server side programming I am unsure of the benefits aside from loading fewer files. Regardless - you shouldn't need to combine & minify script files until you go into production. To answer your question - not necessarily but it may make debugging during development harder. Commented May 18, 2015 at 22:27

1 Answer 1

Reset to default
2

There are certain benefits that you can gleen from having one combined javascript file over many smaller files. It does come with a few drawbacks, though.

Pros:

  • Better maintenance in your markup - Maintaining .js file references is easier. Just put one/few references across your main wrapper designs, and you don't have to worry about adding anything new later.
  • Caching advantages - If you have your HTTP headers set up properly when serving up your JS files, you will have browsers caching your javascript automatically. This means that all of your client side logic will download once initially, and be carried over to other pages 'for free'.
  • Cutting out round trips - Every javascript file you load on it's own is another round trip to the server, so you are cutting down potential round trips if you need multiple files for a particular page.

Cons:

  • First/All page loads are longer - All of your logic had to come in at once, so it will be a larger file than a fraction of whatever you could have had previously. If you have a caching strategy, you only take this hit once on the first page load.
  • Issues with cached JS - If you are caching, which you likely are, if that file changes in an important way that needs to be reflected immediately to the updated application, you may run into issues. Make sure to use cache buster query strings in this case. Consider reading the 'Time created' date from the file system to have this process be automatic.
  • Be careful with certain JS concepts - You probably don't want to put any logic in your library that would actually run on loading. Think JQuery's 'Document Ready' functionality. That will effectively run on every page, and you likely don't want that in most scenarios. I personally use an MVC like pattern where I have a controller 'module' per page that I have an Init() function for pages that need special handling on page load. Just call it from your page in a small script tag, and you're done.

I haven't noticed a particular difficulty in debugging that you seem to be concerned with. My advice would be to create a minified and unminified version of your combined .js file. Then you may want to have your application cleverly tell weather you are in a development environment or not, and add the '.min.js' or just '.js' to the end of your file. There will be few times when you will need to debug something specifically in production, and this should cover 95% of your debugging cases or more.

Improve this answer
3
  • Thank you for your time, but I'm talking about server side (NodeJS) web applications, not ones that live in the browser. Commented Aug 15, 2015 at 7:48
  • @drinchev Ah, my mistake. Unfortunately I've only used node to compile my files for the browser, and therein lies my poor assumption. :) That does beg the question of why you may want to combine your JS for this application though? Doesn't seem like you'd get much out of it. Commented Aug 15, 2015 at 15:39
  • @drinchev Also, I think a consideration that may not have been considered is distribution. TypeDoc is a public library that is given away, correct? It makes so much more sense from a distribution standpoint to make it into a single file for other people's consumption. Weather or not that is a factor to you is worth considering. Commented Aug 15, 2015 at 15:51

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.