Split ES5 and ES6

[codewithkyle]

We should split the TypeScript compiling process into two separate commands, the two processes should work as follows:

ES6

1. Transpile with TypeScript to ES6
2. Perform a optimized Webpack bundle process where each files is an entry
3. Use files with <script type="module">

ES5

1. Transpile with TypeScript to ES5
2. Force Webpack to bundle all files into one large file
3. Use one main script import in the head with <script type="text/javascript" nomodule>

Why should we do this?

Modern browsers support ES6 and are being developer in an evergreen state. By splitting our code for IE 11 away from the modern browsers we can ship faster and smaller scripts. It will cause production compile/bundle times to increase since we would be doubling the process, however, we'll be speeding up the parse time and performance of our scripts for 98% of the internet users.

[codewithkyle]

While adding this enhancement we should take a look at what the real benefits of Yii's view.registerJsFile are, if any. One of the major and noticeable downsides is that we can no longer use the {% cache %} tag.

An alternate solution could be to use the Papertrain module to generate <script type="module"> elements instead of the view.registerJsFile tag. This, however, conflicts with our current CSS / JS cache busting implementation. We could consider implementing a system to dynamically lazy-load and lazy-paint our CSS & JS files, see here for an example of how I've implemented something similar before.

Since the cache busting timestamps/hash is generated when we compile we could create a manifest.json file that allows us to always refer to a file via JavaScript as my-cool-component.js and the manifest will pair that key with the hashed cache value of my-cool-component-1519211809934.js

[codewithkyle]

This has been implemented in Papertrain v0.3 and will be in the next release.