WIP: Add option to build modern ES6 code #4964

prichodko · 2018-09-04T13:10:10Z

This PR is currently a proof of concept. If @Timer or @gaearon would agree to have this in CRA, there are some other improvements I would do before landing.

Background

All modern browsers support ES modules via script tag. That means that they support things like async/await, classes, arrow functions, fetch etc., which allows us to skip a lot of transpilation and polyfills and therefore build less verbose code, which should be faster to parse and run.

For more in depth explanation I recommend reading this great article by @philipwalton.

Implementation

It's based on my recent PR - #4852, which switches from unmaintained uglify-es to terser.

The implementation is inspired by an awesome work of the Vue team - link.

A new --modern flag is added to a build command.

Code is built twice using webpack's multi-compiler. Firstly it's built using current configuration, secondly with babel-preset-env targets option set to esmodules.

Then script tags in index.html are concatenated with correct attributes - type="module" for modern code and nomodule (+ safari fix) for legacy code.

Improvements

For this PR I decided to go with webpack's multi-compiler, so I didn't have to modify build command, but if we decide to ship it to CRA, I would separate it to two separate builds to improve overall DX (making in it clear what's being built, better handling of messages, diff between legacy and modern assets).

Potentially extracting webpack plugin to separate module and making it less naive.

Other improvements could be to add support for rel=preload, but I think it's out of scope of this PR.

Results

There are some small improvements already when I tried that on the base template:

  38.01 KB  build/static/js/vendors.c5915f63.chunk.js
  31.58 KB  build/static/js/vendors.8f7a7647.chunk.m.js

  1.74 KB   build/static/js/main.9f0bbc18.chunk.js
  1.01 KB   build/static/js/main.f6d883db.chunk.m.js

  619 B     build/static/js/runtime~main.6dc408cf.m.js
  617 B     build/static/js/runtime~main.41117e05.js

  257 B     build/static/css/main.5c4bc340.chunk.css
  257 B     build/static/css/main.72f56e40.chunk.css

With a little custom configuration I was able to build Spectrum (cc @mxstbr):

  337.59 KB  build/static/js/vendors.a558cfde.chunk.js
  323.47 KB  build/static/js/vendors.5f3218c3.chunk.m.js

  186.38 KB  build/static/js/main.e89ef961.chunk.js
  165.06 KB  build/static/js/main.64166e32.chunk.m.js

  25.92 KB   build/static/js/Splash.46e74c85.chunk.js
  23.87 KB   build/static/js/Splash.7ffab923.chunk.m.js

  17.47 KB   build/static/js/communitySettings.0ac076e5.chunk.js
  13.56 KB   build/static/js/communitySettings.22122a1f.chunk.m.js

  11.54 KB   build/static/js/Thread.91502d68.chunk.js
  10 KB      build/static/js/Thread.cb8fdd14.chunk.m.js
   ...

While building Spectrum I found out that template literals are not minified, so size differences are not that huge.

Try it out

git clone https://github.com/prichodko/create-react-app.git

cd create-react-app/packages/react-scripts

yarn link

cd ~/your-project

yarn link react-scripts

yarn build --modern

Timer · 2018-09-04T13:20:09Z

This is really neat, @prichodko! Thanks for putting this together.

I don't believe we're opposed to adding something like this, though I'm not sure if we'd want it behind a flag or on by default (assuming it works with backwards compatibility).

Dan and I should have more time to focus on CRA in the coming weeks, so you'll likely hear much more from us soon.

prichodko · 2018-09-04T13:28:31Z

Great to hear that @Timer. 👍

Then, in upcoming days, I will write down my thoughts on how the final implementation could look like (so maybe other folks could chime in).

prichodko · 2018-11-05T00:43:43Z

@gaearon not considering anymore?

prichodko · 2018-11-06T02:52:55Z

@Timer ?

Timer · 2018-11-06T02:58:13Z

Accident :-)

the plugin is taken from here: facebook/create-react-app#4964 It works sometimes. The order of processing of configs is not fixed, and therfore at builds the es5 bundles are injected in place of es6 and vice versa

justingrant · 2018-12-14T07:31:28Z

Another use-case to consider is dev vs. production builds. I'm gonna go nuts if I have to step through the regenerator runtime in a debugger again today. Except relatively rare cases of downlevel testing or debugging, developers will always be on a modern browser.

There should be a way to configure CRA when in Dev mode to produce only ESnext (no ES5) so I won't have to pay the time and battery-life price of compiling ES5 dev builds that I'll never use.

It's an interesting question of whether ES6-only should be the default for dev mode. Might be worth it if it saves a lot of build time in the default case.

Feel free to ignore this feedback if compiling to ES5 and ESnext (as opposed to just ESnext) is really fast at build time.

crazyxhz · 2019-02-17T09:48:33Z

Any update to this PR? When will this feature be released?

JoviDeCroock · 2019-03-01T16:28:47Z

Hey,

Let me start off by saying the bundle size diff would be bigger if libraries would ship a .modern bundle, discussed here.

I also have a start to develop a feature like the following here

My POC however is not ideal to be set up on a large scale that is why we should have to integrate it into some plugin/webpack.

This being said, I support OP's notion to divide this into two seperate builds rather than making it into one huge multi compiled thing. This however makes it harder to make your .html file.

Is there anything holding this feature back, I would love to help on it where I can.

EDIT: in my POC I wrote a script for the shim and sliding in the bundles but apparently there's a neat plugin for this: https://github.com/firsttris/html-webpack-multi-build-plugin

This way we can include the multiple bundles and the shim, so this could be included in the webpack config. I assume we just need to find how we would be able to add a build when --modern is added.

iansu · 2019-03-05T20:03:55Z

@JoviDeCroock This is still something we'd like to have in the future. That webpack plugin looks like it could be useful. I think as @Timer said previously, we'd like to have this enabled by default and build both the modern and legacy bundles all the time and just let the browser decided which one to use.

I'm not sure about the best way to proceed though. This PR is a bit out of date so it might be easier to start fresh. @prichodko Is this still something you're interested in working on? Perhaps the two of you could coordinate and work on it together.

ColCh · 2019-04-11T10:43:03Z

packages/react-scripts/config/webpack/html-webpack-esmodules-plugin.js

+
+const ID = 'html-webpack-esmodules-plugin';
+
+const safariFix = `(function(){var d=document;var c=d.createElement('script');if(!('noModule' in c)&&'onbeforeload' in c){var s=!1;d.addEventListener('beforeload',function(e){if(e.target===c){s=!0}else if(!e.target.hasAttribute('nomodule')||!s){return}e.preventDefault()},!0);c.type='module';c.src='.';d.head.appendChild(c);c.remove()}}())`;


hey but other browsers would download bundles twice or event thrice, isn't it?

issue with dicsussion philipwalton/webpack-esnext-boilerplate#1

Haven't noticed this yet. I use it actively in this package: https://github.com/JoviDeCroock/webpack-module-nomodule-plugin

Have not fond any browsers yet that do this and it's running in a relatively big production app at this point. If you find any please let me know, I'll see what I can do about it

Tested with IE11 and did not download 2

What about MS Edge? I tested my code and it loads ES6 bundle twice and ES5 bundle once.

Please, explain fast steps to run your code. I just wanted to test it out with my devices.

It would be very cool if code in this PR works as it should!

well you can try out this repo: https://github.com/JoviDeCroock/POC-ModularLegacyBuild

Here's where I've done a full POC for the project I talked about in my first response (also uses ES6 libs in modern build)

Also maybe better to look at my recent PR since this is more up to date than this one.
#6590

here is it, for JoviDeCroock/POC-ModularLegacyBuild

❌ it seems that IE11 on Win7 loads both bundles. Same for IE11 on Win10

❌MS Edge loads both bundles too (loads modern bundle twice)

✅ Safari 10.1 loads only modern bundle

I just faced same problem in my work process, and this is amazing that there is PR for CRA to load legacy&modern bundles.

Can I provide some friendly advice?

After my struggles (aka investigation process), I found that it's currently impossible to reliable load code trough only HTML code.

The only check which works on all problematic browsers is this:

'noModule' in HTMLScriptElement.prototype

That snippet returns true on Safari 10.1. As for IE and MSEdge, here are some screenshots:

MS EDGE, WIN 10

IE 11, WIN 10

Also, I can be wrong. Feel free to correct me, as I don't have much experience with loading modern/legacy bundles at this very moment.

As far as I see these quirks are not present in the new Microsoft browser and they are stepping back from supporting IE and the old edge so it's a tradeoff I'd take any day. Makes my app more performant but I closed the PR to CRA.
Every dev should consider it for their own user demographic

aye, these are only presented in IE and MS Edge which would fade away very soon.
I just wanted to check solution out.

Totally agreed that every decision should be considered under usage and analysis

facebook-github-bot added the CLA Signed label Sep 4, 2018

prichodko changed the title ~~WIP: Add option to build ES6 code~~ WIP: Add option to build modern ES6 code Sep 4, 2018

Timer added the issue: proposal label Sep 4, 2018

prichodko added 3 commits September 5, 2018 12:00

Switch from uglify-es to terser

793a4ff

Update babel-preset to support esmodules target

58b78b0

Add support for creating modern and legacy build

8295dbd

prichodko force-pushed the feat/modern branch from f4f055a to 8295dbd Compare September 5, 2018 10:01

prichodko mentioned this pull request Sep 19, 2018

Completion roadmap for react-scripts@2.0 #5024

Closed

Timer closed this Sep 26, 2018

Timer reopened this Sep 26, 2018

rayshan mentioned this pull request Oct 12, 2018

Feature/es6 module build #3136

Closed

gaearon closed this Nov 1, 2018

Timer changed the base branch from next to master November 6, 2018 02:58

Timer reopened this Nov 6, 2018

Timer added this to the 3.0 milestone Nov 6, 2018

JoviDeCroock mentioned this pull request Mar 7, 2019

WIP: differential serving allow modern ES2015 and legacy ES5 build #6590

Closed

7 tasks

amyrlam force-pushed the master branch from cecd762 to d3b19f9 Compare March 24, 2019 20:42

iansu removed this from the 3.0 milestone Apr 3, 2019

iansu added this to the 3.x milestone Apr 3, 2019

ColCh reviewed Apr 11, 2019

View reviewed changes

iansu mentioned this pull request May 31, 2019

Chrome Framework Fund Proposal Umbrella #7106

Open

iansu mentioned this pull request Jun 25, 2019

Suggestion: add 2 bundles for legacy and modern browsers #7263

Closed

petetnt mentioned this pull request Oct 10, 2019

How to make build for es5 and es6 browser from create-react-app ? #7781

Closed

Menci mentioned this pull request Nov 15, 2020

Use it with create-react-app? JoviDeCroock/webpack-module-nomodule-plugin#20

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WIP: Add option to build modern ES6 code #4964

WIP: Add option to build modern ES6 code #4964

prichodko commented Sep 4, 2018 •

edited

Loading

Timer commented Sep 4, 2018

prichodko commented Sep 4, 2018 •

edited

Loading

prichodko commented Nov 5, 2018 •

edited

Loading

prichodko commented Nov 6, 2018

Timer commented Nov 6, 2018

justingrant commented Dec 14, 2018

crazyxhz commented Feb 17, 2019

JoviDeCroock commented Mar 1, 2019 •

edited

Loading

iansu commented Mar 5, 2019

ColCh Apr 11, 2019

JoviDeCroock Apr 11, 2019 •

edited

Loading

ColCh Apr 11, 2019

JoviDeCroock Apr 11, 2019 •

edited

Loading

ColCh Apr 11, 2019 •

edited

Loading

JoviDeCroock Apr 11, 2019

ColCh Apr 11, 2019 •

edited

Loading


		const ID = 'html-webpack-esmodules-plugin';

		const safariFix = `(function(){var d=document;var c=d.createElement('script');if(!('noModule' in c)&&'onbeforeload' in c){var s=!1;d.addEventListener('beforeload',function(e){if(e.target===c){s=!0}else if(!e.target.hasAttribute('nomodule')\|\|!s){return}e.preventDefault()},!0);c.type='module';c.src='.';d.head.appendChild(c);c.remove()}}())`;

WIP: Add option to build modern ES6 code #4964

Are you sure you want to change the base?

WIP: Add option to build modern ES6 code #4964

Conversation

prichodko commented Sep 4, 2018 • edited Loading

Background

Implementation

Improvements

Results

Try it out

Timer commented Sep 4, 2018

prichodko commented Sep 4, 2018 • edited Loading

prichodko commented Nov 5, 2018 • edited Loading

prichodko commented Nov 6, 2018

Timer commented Nov 6, 2018

justingrant commented Dec 14, 2018

crazyxhz commented Feb 17, 2019

JoviDeCroock commented Mar 1, 2019 • edited Loading

iansu commented Mar 5, 2019

ColCh Apr 11, 2019

Choose a reason for hiding this comment

JoviDeCroock Apr 11, 2019 • edited Loading

Choose a reason for hiding this comment

ColCh Apr 11, 2019

Choose a reason for hiding this comment

JoviDeCroock Apr 11, 2019 • edited Loading

Choose a reason for hiding this comment

ColCh Apr 11, 2019 • edited Loading

Choose a reason for hiding this comment

JoviDeCroock Apr 11, 2019

Choose a reason for hiding this comment

ColCh Apr 11, 2019 • edited Loading

Choose a reason for hiding this comment

prichodko commented Sep 4, 2018 •

edited

Loading

prichodko commented Sep 4, 2018 •

edited

Loading

prichodko commented Nov 5, 2018 •

edited

Loading

JoviDeCroock commented Mar 1, 2019 •

edited

Loading

JoviDeCroock Apr 11, 2019 •

edited

Loading

JoviDeCroock Apr 11, 2019 •

edited

Loading

ColCh Apr 11, 2019 •

edited

Loading

ColCh Apr 11, 2019 •

edited

Loading