Has anyone converted from using exports and require to a single file output for Typescript

Question

We started our TS project using the external modules with require Foo = ('./Foo') and while the organization of it is very useful, it requires then that you use requirejs(AMD moddules) or similar. While this isn't a problem I have noticed in doing perf analysis that this ends up with our page making a large number of requests for JS files. We have a reasonably complex app with a lot of smaller js files and that ends up with us making about 160 requests for various files. This obviously has a large overhead and mobile clients don't deal well with lots of requests. I am looking in to what it would take to move away from this pattern and use TypeScripts -out parameter to generate one file. I was curious if anyone had made a similar jump and had any advice for making this type of change.

Answer 1

Using external modules is correct. Switching to internal modules to reduce network requests is wrong and goes against best practices when writing future-proof, modular code. To reduce the number of files loaded for a production application you simply need to add an AMD optimizer to your build process. If you are using RequireJS as your loader then your easiest path forward is to use r.js for optimizing your AMD modules into layers.

Answer 2

You can certainly emit all your source into one script. The source code for TypeScript itself is split across a number of input source files that all emit into the one output file. They all extend the same top level module ("TypeScript") also, as modules are open ended and you can continue adding to them.

One key thing a module system such as AMD gives you is a dependency management, so you can ensure the module you depend on are loaded and initialized before you need to use them (ignoring circular dependencies for the moment). If you just emit code into one output script top to bottom without a module system, then you'll need to ensure the ordering of any code that runs at load time is correct.

So your options would seem to be either move to using internal modules and the --out parameter to get one large script with no dependency on a module loader (such as AMD or NodeJS) and ensure there are no ordering issues as load time, or as C. Snover alludes to, use the RequireJS optimizer to merge all your AMD modules into one script. The second is probably easier if you already have your code written as RequireJS modules.