kirilloid

TL;DR: I want to reduce resulting JavaScript code size by mangling privates — what technology stack to use?

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.

INTRO

There are bunch of tools for static code analysis in JavaScript. For the sake of simplicity, I'll split them in two large groups: eslint et al, which works at the level of one file and type analysers: ternjs, flowtype and even typescript. Tools in the former group need to know how to resolve modules and usually rely on the folder structure. Unfortunately, in enterprise development it's impossible to keep files wherever you want.

THE QUESTION

I need a solution to statically analyze types and signatures in the code with one extra condition: it should be able to track dependencies in complicated directory structure, possibly with ~multiple roots, w/o configuring every file individually.

E.g.: Modules which name starts from 'core' should be search in /project/bundle/js/core/: like 'core.data.http' would be in /project/bundle/js/core/data/http.js. Modules which name starts from 'personalization' will be in /project/vendor/adobe/personalization/. All other modules to be looked up in /project/components/.

At last the tool should be easily added to CI process.

EXAMPLES

Using TypeScript is an option, but I'm currently seeing it only as keeping files in plain JavaScript, adding .d.ts for the most important modules and run tsc with --noEmit. On top of that, adding files to tsconfig manually is a tedious task and I'm not sure that search by mask with exclusions will work. Hacking tools like flowtype (which is still in beta for windows BTW) and even creating a pull request is also an option, but it requires significant amount of time =)

So I'm still seeking for something better.