I'm working on a large typescript project. I prefer to create many small classes and put each in a separate file, and use deeply nested namespaces ('internal modules' in typescript). I consider this to be good practice as it encourages encapsulation, testability, reusability etc. I have more than a hundred small typescript files with deep namespaces.
The compiled .js output for each typescript file contains 3 lines of autogenerated 'boilerplate' for each file, for each level of namespace (2 at the top, one at the bottom). For example, here is a typescript file containing a single empty class, inside 4 levels of namespace:
module a.b.c.d {
export class MyClass {
constructor() {
}
}
}
This compiles into the following .js:
var a;
(function (a) {
var b;
(function (b) {
var c;
(function (c) {
var d;
(function (d) {
var MyClass = (function () {
function MyClass() {
}
return MyClass;
})();
d.MyClass = MyClass;
})(d = c.d || (c.d = {}));
})(c = b.c || (b.c = {}));
})(b = a.b || (a.b = {}));
})(a || (a = {}));
For performance, I want to merge/minify my .js files into a single file for production. If I simply append the files in the correct order, the boilerplate for getting in and out of the namespace will be repeated for each file. In the case of small .ts files, this will comprise a significant overhead.
My question: is there some way to merge/minify my .js files in a way that strips out the boilerplate for these deep namespaces in cases where sequential .js files share the same namespace?
