Skip to content

Conversation

@osmestad
Copy link

I did a quick test of my suggestion in #3, it seems to work better in the Edge version I have available (17), and seemed okay in the other browsers I tested too :-)

This uses the approach from https://medium.com/@WebReflection/a-universal-bundle-loader-6d7f3e628f93
Basically the deferring of 'ubl.js' should ensure browsers with bugs will load that file, but not any more files if ESM is supported.
I did simplify the script slightly, to only have a ES2017 and a ES5 bundle (not a ES2015 variant).

This uses the approach from https://medium.com/@WebReflection/a-universal-bundle-loader-6d7f3e628f93
Basically the deferring of 'ubl.js' should ensure browsers with bugs will load that file, but not any more files if ESM is supported.
I did simplify the script slightly, to only have a ES2017 and a ES5 bundle (not a ES2015 variant).
@johnstew
Copy link
Owner

johnstew commented May 1, 2019

@osmestad thanks for the PR! I'd like to merge this in but was wondering if you could add a new section to the readme documenting this workaround and what is actually going on. Also what are the new results with this workaround in place?

@osmestad
Copy link
Author

osmestad commented May 3, 2019

I can give it a try :-)

@osmestad
Copy link
Author

osmestad commented May 3, 2019

Hmm, but looking at it some more, it might be better to add this as a separate example? As I think it might flip what you would want to recommend :-)

Test results:
Chrome 73 OK (loads ESM)
Safari 12.1 OK (loads ESM)
Firefox 66 OK (loads ESM)
IE 11 OK (loads ES5)
Edge 42 (EdgeHTML 17) OK (loads ESM, but also downloads ubl.js)

I expect Safari 10.1 would work like Edge, by running the ESM code-path but downloading 'ubl.js' as well, but I do not have that browser available.

Here is a short description on how/why this works:

  1. First we try to load the ESM compatible code, setting a flag: window.ESM to true if we are in an environment where import statements are supported.
  2. Then we load a small script file ubl.js with defer attribute set to enforce this running after the module code has run (in the nomodule code-path).
  3. Inside the ubl.js file we check if window.ESM is set, which would mean the environment supports ES Modules and the other code path has ran, so we do nothing. Otherwise a script node is injected to load the legacy version of the code.

Of drawbacks with this method I guess it can make it harder for browsers to speculatively find scripts to download (as it is wrapped with an import call) for the ESM path, but not sure how much difference that would make. Also for the legacy path it does get delayed a bit since it has one script load before it (the ubl.js file), so that will load slower. Probably not possible to optimize for all cases!

@johnstew
Copy link
Owner

johnstew commented May 7, 2019

I'd rather keep the original examples as is and move this to another example. Then from the readme just a few sentence description on this would be helpful with a link to this and maybe the article you referenced in #3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants