Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Split ES5 and ES6 #189

Open
codewithkyle opened this issue Aug 8, 2019 · 1 comment

Comments

@codewithkyle
Copy link
Collaborator

commented Aug 8, 2019

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

This comment has been minimized.

Copy link
Collaborator Author

commented Aug 16, 2019

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 codewithkyle self-assigned this Aug 16, 2019

@codewithkyle codewithkyle added this to the v0.3 milestone Aug 16, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
1 participant
You can’t perform that action at this time.