TL;DR: I want to reduce resulting JavaScript code size by mangling privates — what technology stack to use?<p>Infrastructure for building a front-end project consists of a lot of parts, but I'd like to focus on bundling & code size. I'm obsessed with code size optimizations, but I still want to have a nicely organized modular code.<p>Mainstream tools like WebPack do a great job eliminating dead code, but I want more. Keeping that, I want to reduce the code size further by employing two more techniques. Both of them require an introduction of "packages". JavaScript doesn't have packages^1 at the language level, but the code could be organized into blocks.<p>1. Mangling private properties and whole "private" classes.
2. Inlining declarations of private modules. With small modules, a percentage of module declarations overhead with all its imports and exports is significant.<p>The former is at least partially (properties) available in google closure compiler.
The latter is possible with prepack.io.<p>These are just two examples and actually, possibilities are much broader. But not stack is easy to combine. For example, I already had had hard times combining prepack with fuse-box.<p>I'm actually open to considering almost any compile-to-js language, both mainstream like TypeScript and less so, like Purescript. But they'd better have minimalistic (~10kB) runtimes. So Scala.js and GHCJS are not the best options.<p>To give a little more perspective here are examples of build-stacks, I'm looking for.
Possible options are like
- handwritten es6 | google-closure-compiler | prepack
- TypeScript | tsicle | google-closure-compiler | prepack
- TypeScript -m amd | prepack
- ClosureScript<p>Apart from bare stack descriptions, it'd be nice to hear details as well: main pain points, what was the actual code reduction (even rough and empirical).<p>^1 — Just to be sure: I'm not talking about npm packages, but rather something like Java packages.
It seems, that TypeScript with google-closure-compiler is a decent enough approach.
<a href="https://github.com/angular/closure-demo" rel="nofollow">https://github.com/angular/closure-demo</a>