From 59a61fad59d22b830c20f8f052b8b9cd380f2871 Mon Sep 17 00:00:00 2001 From: Dario Date: Mon, 4 Oct 2021 10:58:53 -0700 Subject: [PATCH 1/6] Dynamic imports loaded as low-priority scripts when compiled, fixes #6980 --- packages/core/integration-tests/test/html.js | 24 +++++++++++++++++++ .../integration/html-high-prio-async/async.js | 3 +++ .../html-high-prio-async/async2.js | 6 +++++ .../html-high-prio-async/index.html | 14 +++++++++++ .../integration/html-high-prio-async/index.js | 5 ++++ .../js/src/helpers/browser/js-loader.js | 7 ++++++ 6 files changed, 59 insertions(+) create mode 100644 packages/core/integration-tests/test/integration/html-high-prio-async/async.js create mode 100644 packages/core/integration-tests/test/integration/html-high-prio-async/async2.js create mode 100644 packages/core/integration-tests/test/integration/html-high-prio-async/index.html create mode 100644 packages/core/integration-tests/test/integration/html-high-prio-async/index.js diff --git a/packages/core/integration-tests/test/html.js b/packages/core/integration-tests/test/html.js index e1fa04cd7f4..b620ea7db4d 100644 --- a/packages/core/integration-tests/test/html.js +++ b/packages/core/integration-tests/test/html.js @@ -1919,6 +1919,30 @@ describe('html', function() { assert(output.sort(), ['a', 'b', 'c']); }); + it('dynamic imports loaded as high-priority scripts when not all engines support esmodules natively', async function() { + let b = await bundle( + path.join(__dirname, '/integration/html-high-prio-async/index.html'), + { + defaultTargetOptions: { + mode: 'production', + shouldScopeHoist: true, + engines: { + browsers: '>= 0.25%', + }, + }, + }, + ); + + let bundles = b.getBundles(); + let html = await outputFS.readFile( + bundles.find(b => b.type === 'html').filePath, + 'utf8', + ); + + assert(html.includes('rel="preload" as="script">')); + assert(html.includes(' + + + +

Hello world

+ + + \ No newline at end of file diff --git a/packages/core/integration-tests/test/integration/html-high-prio-async/index.js b/packages/core/integration-tests/test/integration/html-high-prio-async/index.js new file mode 100644 index 00000000000..eca4075f9c4 --- /dev/null +++ b/packages/core/integration-tests/test/integration/html-high-prio-async/index.js @@ -0,0 +1,5 @@ +import('./async'); +import('./async2'); + +class Test {} +new Test(); diff --git a/packages/runtimes/js/src/helpers/browser/js-loader.js b/packages/runtimes/js/src/helpers/browser/js-loader.js index 977aaeae0db..eb8e9284e4b 100644 --- a/packages/runtimes/js/src/helpers/browser/js-loader.js +++ b/packages/runtimes/js/src/helpers/browser/js-loader.js @@ -13,6 +13,12 @@ module.exports = cacheLoader(function loadJSBundle(bundle) { return; } + var link = document.createElement('link'); + link.href = bundle; + link.rel = 'preload'; + link.as = 'script'; + document.head.appendChild(link); + var script = document.createElement('script'); script.async = true; script.type = 'text/javascript'; @@ -29,6 +35,7 @@ module.exports = cacheLoader(function loadJSBundle(bundle) { resolve(); }; + document.getElementsByTagName('head')[0].appendChild(link); document.getElementsByTagName('head')[0].appendChild(script); }); }); From 663544393daa2fdd72dd9d5d9eccc400f71ed85a Mon Sep 17 00:00:00 2001 From: Dario Date: Tue, 12 Oct 2021 15:20:26 -0700 Subject: [PATCH 2/6] Fixing unit test for dynamic imports loaded as high-priority scripts when esmodules natively is not natively supported --- .../dynamic-imports-high-prio/async.js | 1 + .../dynamic-imports-high-prio/index.js | 1 + .../integration/html-high-prio-async/async.js | 3 --- .../integration/html-high-prio-async/async2.js | 6 ------ .../integration/html-high-prio-async/index.html | 14 -------------- .../integration/html-high-prio-async/index.js | 5 ----- .../core/integration-tests/test/javascript.js | 16 ++++++++++++++++ 7 files changed, 18 insertions(+), 28 deletions(-) create mode 100644 packages/core/integration-tests/test/integration/dynamic-imports-high-prio/async.js create mode 100644 packages/core/integration-tests/test/integration/dynamic-imports-high-prio/index.js delete mode 100644 packages/core/integration-tests/test/integration/html-high-prio-async/async.js delete mode 100644 packages/core/integration-tests/test/integration/html-high-prio-async/async2.js delete mode 100644 packages/core/integration-tests/test/integration/html-high-prio-async/index.html delete mode 100644 packages/core/integration-tests/test/integration/html-high-prio-async/index.js diff --git a/packages/core/integration-tests/test/integration/dynamic-imports-high-prio/async.js b/packages/core/integration-tests/test/integration/dynamic-imports-high-prio/async.js new file mode 100644 index 00000000000..b54dc22e5c2 --- /dev/null +++ b/packages/core/integration-tests/test/integration/dynamic-imports-high-prio/async.js @@ -0,0 +1 @@ +console.log("Don't really have much here"); \ No newline at end of file diff --git a/packages/core/integration-tests/test/integration/dynamic-imports-high-prio/index.js b/packages/core/integration-tests/test/integration/dynamic-imports-high-prio/index.js new file mode 100644 index 00000000000..0a0f551e1ca --- /dev/null +++ b/packages/core/integration-tests/test/integration/dynamic-imports-high-prio/index.js @@ -0,0 +1 @@ +export default import('./async').then(() => document.head.children); diff --git a/packages/core/integration-tests/test/integration/html-high-prio-async/async.js b/packages/core/integration-tests/test/integration/html-high-prio-async/async.js deleted file mode 100644 index c0d01b96ba3..00000000000 --- a/packages/core/integration-tests/test/integration/html-high-prio-async/async.js +++ /dev/null @@ -1,3 +0,0 @@ -console.log(require('react')); -console.log('async2'); -require('lodash'); \ No newline at end of file diff --git a/packages/core/integration-tests/test/integration/html-high-prio-async/async2.js b/packages/core/integration-tests/test/integration/html-high-prio-async/async2.js deleted file mode 100644 index 66aba351cab..00000000000 --- a/packages/core/integration-tests/test/integration/html-high-prio-async/async2.js +++ /dev/null @@ -1,6 +0,0 @@ -console.log(require('react')); -require('lodash'); -console.log('async'); - -class Foo {} -new Foo(); diff --git a/packages/core/integration-tests/test/integration/html-high-prio-async/index.html b/packages/core/integration-tests/test/integration/html-high-prio-async/index.html deleted file mode 100644 index f0b31ec6d7a..00000000000 --- a/packages/core/integration-tests/test/integration/html-high-prio-async/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - HTML Example - - - - -

Hello world

- - - \ No newline at end of file diff --git a/packages/core/integration-tests/test/integration/html-high-prio-async/index.js b/packages/core/integration-tests/test/integration/html-high-prio-async/index.js deleted file mode 100644 index eca4075f9c4..00000000000 --- a/packages/core/integration-tests/test/integration/html-high-prio-async/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import('./async'); -import('./async2'); - -class Test {} -new Test(); diff --git a/packages/core/integration-tests/test/javascript.js b/packages/core/integration-tests/test/javascript.js index e5f3e25ede9..95a4922854c 100644 --- a/packages/core/integration-tests/test/javascript.js +++ b/packages/core/integration-tests/test/javascript.js @@ -868,6 +868,22 @@ describe('javascript', function() { assert.deepEqual(res, {default: 42}); }); + it('dynamic imports loaded as high-priority scripts when not all engines support esmodules natively', async function() { + let b = await bundle( + path.join(__dirname, '/integration/dynamic-imports-high-prio/index.js'), + ); + + let output = await run(b); + let headChildren = await output.default; + + assert(headChildren[1].tag === 'link'); + assert(headChildren[1].rel === 'preload'); + assert(headChildren[1].as === 'script'); + + assert(headChildren[2].tag === 'script'); + assert(headChildren[2].src.match(/async\..*\.js/)); + }); + it('should support bundling workers with dynamic import in both page and worker', async function() { let b = await bundle( path.join(__dirname, '/integration/worker-dynamic/index-async.js'), From b2d0671083538f1123db4c1fedb573e5ae92090b Mon Sep 17 00:00:00 2001 From: Dario Date: Tue, 12 Oct 2021 17:12:34 -0700 Subject: [PATCH 3/6] Making sure an specific browser is set, cleanup to remove noise from the test, reverted a change that shouldn't have been in the PR --- packages/core/integration-tests/test/html.js | 24 ------------------- .../dynamic-imports-high-prio/async.js | 2 +- .../core/integration-tests/test/javascript.js | 7 ++++++ 3 files changed, 8 insertions(+), 25 deletions(-) diff --git a/packages/core/integration-tests/test/html.js b/packages/core/integration-tests/test/html.js index b620ea7db4d..e1fa04cd7f4 100644 --- a/packages/core/integration-tests/test/html.js +++ b/packages/core/integration-tests/test/html.js @@ -1919,30 +1919,6 @@ describe('html', function() { assert(output.sort(), ['a', 'b', 'c']); }); - it('dynamic imports loaded as high-priority scripts when not all engines support esmodules natively', async function() { - let b = await bundle( - path.join(__dirname, '/integration/html-high-prio-async/index.html'), - { - defaultTargetOptions: { - mode: 'production', - shouldScopeHoist: true, - engines: { - browsers: '>= 0.25%', - }, - }, - }, - ); - - let bundles = b.getBundles(); - let html = await outputFS.readFile( - bundles.find(b => b.type === 'html').filePath, - 'utf8', - ); - - assert(html.includes('rel="preload" as="script">')); - assert(html.includes('