search

Experience-Monks / nyg-jam3

Second generation of the Jam3 Generator, many new features and breaking change features
https://generator.jam3.net
MIT License
11 stars 4 forks source link

Load ES2015+ bundle in modern browsers #70

Open iranreyes opened 6 years ago

iranreyes commented 6 years ago

It's not a surprise we are penalizing the modern browsers with all the polyfills and transpiling.

Currently, we transpile with babel and includes polyfills for the lowest supported browser. If the modern browsers load only a ES2015+ bundle the loading time will be faster because:

  1. Small bundle (not transpiled)
  2. Lower parse time (lower amount of code to parse)

Solution:

  1. Create two bundles (can be even more), and base our support in <script type="module">.

Note: The browsers that support type="module" are really modern/green browsers

  1. Serve ES2015+ bundle only to the browsers that support type="module"
<!-- Browsers with ES module support load this file. -->
<script type="module" src="main.js"></script>

<!-- Older browsers load this file (and module-supporting -->
<!-- browsers know *not* to load this file). -->
<script nomodule src="main-legacy.js"></script>

Reference: https://philipwalton.com/articles/deploying-es2015-code-in-production-today/

DonghyukJacobJang commented 6 years ago

config example code https://github.com/philipwalton/webpack-esnext-boilerplate/blob/master/tasks/bundles.js

neo commented 6 years ago

In one of the IO videos they mentioned that not having transpiled code would not only save on the bundle size (by a lot) but also in some cases more performant with the new language features than their transpiled version.

So it would be really good to implement it. Plus in some of our device matrixes we might not even need the nomodule tag 😉

PeterAltamirano commented 6 years ago

in the near future we should still have legacy code, even the device matrix says otherwise.

neo commented 6 years ago

true true, but it would still be a great performance leap for the modern browsers

PeterAltamirano commented 6 years ago

modern browsers would not pick up nomodule.

hm.. okay maybe we misunderstood, I am saying we should split it as described, but I was thinking you say we can go ES6 only, without legacy version for old browsers. My point is to have both. Exactly as in the description.

iranreyes commented 6 years ago

Google IO Link: https://youtu.be/mIWCLOftfRw?t=7m2s

iranreyes commented 6 years ago

@wongbsn Could you add here the branch where you were working and what you did?