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.
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.
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.
The former is at least partially (properties) available in google closure compiler. The latter is possible with prepack.io.
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.
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.
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
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).
^1 — Just to be sure: I'm not talking about npm packages, but rather something like Java packages.
