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

Add unstable async bundle runtime to the JS Packager #9227

Merged
merged 11 commits into from Sep 7, 2023

Conversation

mattcompiles
Copy link
Contributor

↪️ Pull Request

This PR adds an experimental bundle queueing runtime to the JS packager, allowing bundles to be loaded out of order. Our primary use-case is when loading scripts with type="module" async. This allows scripts to start executing ASAP but without any order guarantees.

The runtime only caters to scope hoisted ESM bundles for now and can be enabled by setting the following config in the root package.json.

"@parcel/packager-js": {
    "unstable_asyncBundleRuntime": true
}

🚨 Test instructions

I've added a test which enables the feature, ensures the runtime is present and executes the bundles.

✔️ PR Todo

  • Added/updated unit tests for this change
  • Filled out test instructions (In case there aren't any unit tests)
  • Included links to related issues/PRs

@parcel-benchmark
Copy link

parcel-benchmark commented Sep 5, 2023

Benchmark Results

Kitchen Sink ✅

Timings

Description Time Difference
Cold 1.57s +32.00ms
Cached 247.00ms -5.00ms

Cold Bundles

Bundle Size Difference Time Difference
dist/legacy/parcel.7cdb0fad.webp 102.94kb +0.00b 267.00ms +15.00ms ⚠️
dist/legacy/parcel.7cdb0fad.webp 102.94kb +0.00b 279.00ms +19.00ms ⚠️
dist/modern/parcel.7cdb0fad.webp 102.94kb +0.00b 279.00ms +19.00ms ⚠️
dist/legacy/index.8692583b.js 1.48kb +0.00b 391.00ms +26.00ms ⚠️
dist/legacy/index.a2819fc3.js 1.06kb +0.00b 391.00ms +26.00ms ⚠️
dist/modern/index.d90ef1a6.js 917.00b +0.00b 391.00ms +26.00ms ⚠️
dist/legacy/index.html 826.00b +0.00b 413.00ms +21.00ms ⚠️
dist/modern/index.html 749.00b +0.00b 412.00ms +21.00ms ⚠️
dist/legacy/index.b8ae99ba.css 94.00b +0.00b 281.00ms +20.00ms ⚠️
dist/modern/index.31cedca9.css 94.00b +0.00b 281.00ms +20.00ms ⚠️

Cached Bundles

Bundle Size Difference Time Difference
dist/legacy/parcel.7cdb0fad.webp 102.94kb +0.00b 267.00ms +16.00ms ⚠️
dist/modern/parcel.7cdb0fad.webp 102.94kb +0.00b 267.00ms +16.00ms ⚠️

React HackerNews ✅

Timings

Description Time Difference
Cold 4.45s +24.00ms
Cached 404.00ms -5.00ms

Cold Bundles

Bundle Size Difference Time Difference
dist/PermalinkedComment.3145598b.js 3.94kb +0.00b 481.00ms +53.00ms ⚠️
dist/UserProfile.b37bbaff.js 1.38kb +0.00b 481.00ms +52.00ms ⚠️
dist/NotFound.c08212ea.js 265.00b +0.00b 481.00ms +52.00ms ⚠️

Cached Bundles

Bundle Size Difference Time Difference
dist/PermalinkedComment.3145598b.js 3.94kb +0.00b 459.00ms +81.00ms ⚠️
dist/UserProfile.b37bbaff.js 1.38kb +0.00b 459.00ms +81.00ms ⚠️
dist/NotFound.c08212ea.js 265.00b +0.00b 458.00ms +80.00ms ⚠️

AtlasKit Editor ✅

Timings

Description Time Difference
Cold 42.69s +716.00ms
Cached 2.46s +121.00ms

Cold Bundles

Bundle Size Difference Time Difference
dist/media-viewer.bc1a2415.js 537.32kb +0.00b 14.08s +4.29s ⚠️
dist/mobile-upload.0917d4f0.js 66.50kb +0.00b 6.41s +462.00ms ⚠️
dist/component.508d12ab.js 57.88kb +0.00b 6.40s +463.00ms ⚠️
dist/Modal.f90b31a7.js 28.20kb +0.00b 6.40s +463.00ms ⚠️
dist/component.d038388b.js 18.68kb +0.00b 6.40s +463.00ms ⚠️
dist/js.9cb9c5be.js 17.21kb +0.00b 6.40s +467.00ms ⚠️
dist/mobile-upload.86840439.js 7.86kb +0.00b 6.40s +463.00ms ⚠️
dist/Modal.efe95f7f.js 3.87kb +0.00b 6.40s +463.00ms ⚠️
dist/component.342752e9.js 3.22kb +0.00b 6.40s +463.00ms ⚠️
dist/png-chunks-extract.01ed8f60.js 3.06kb +0.00b 6.40s +466.00ms ⚠️
dist/workerHasher.e01f8bcf.js 1.56kb +0.00b 6.40s +466.00ms ⚠️
dist/16.a4c7368c.js 1.35kb +0.00b 6.40s +463.00ms ⚠️
dist/16.347f2ad3.js 1.28kb +0.00b 6.40s +462.00ms ⚠️
dist/16.1d939d76.js 1.00kb +0.00b 6.40s +462.00ms ⚠️
dist/16.92be0d97.js 976.00b +0.00b 6.40s +462.00ms ⚠️
dist/16.5befcdea.js 976.00b +0.00b 6.40s +462.00ms ⚠️
dist/16.ef2df2b6.js 956.00b +0.00b 6.40s +462.00ms ⚠️
dist/16.01cdc55d.js 916.00b +0.00b 6.41s +461.00ms ⚠️
dist/16.8fc349c9.js 858.00b +0.00b 6.41s +475.00ms ⚠️
dist/16.c5423dbe.js 830.00b +0.00b 6.40s +464.00ms ⚠️
dist/16.1be49b4b.js 823.00b +0.00b 6.40s +463.00ms ⚠️
dist/16.924dd2e3.js 778.00b +0.00b 6.40s +463.00ms ⚠️
dist/16.01e372d3.js 772.00b +0.00b 6.40s +462.00ms ⚠️
dist/16.0cd21a5f.js 772.00b +0.00b 6.40s +463.00ms ⚠️
dist/16.a0490963.js 771.00b +0.00b 6.40s +463.00ms ⚠️
dist/16.a5f45cdb.js 770.00b +0.00b 6.40s +462.00ms ⚠️
dist/16.bc1a05f3.js 769.00b +0.00b 6.40s +462.00ms ⚠️
dist/16.e3d16653.js 721.00b +0.00b 6.40s +463.00ms ⚠️
dist/16.592b5fd3.js 693.00b +0.00b 6.41s +461.00ms ⚠️
dist/simpleHasher.329400f6.js 585.00b +0.00b 6.40s +467.00ms ⚠️

Cached Bundles

Bundle Size Difference Time Difference
dist/index.83b40af7.js 3.79mb +0.00b 19.65s +1.20s ⚠️
dist/refractor.61b4c5e1.js 601.68kb +0.00b 14.24s +714.00ms ⚠️
dist/media-viewer.bc1a2415.js 537.32kb +0.00b 14.24s +714.00ms ⚠️
dist/popup.32b3d0ef.js 324.46kb +0.00b 14.24s +714.00ms ⚠️
dist/ConfigPanelFieldsLoader.8648eeee.js 306.81kb +0.00b 10.36s +734.00ms ⚠️
dist/EmojiPickerComponent.c199902f.js 189.68kb +0.00b 14.24s +715.00ms ⚠️
dist/card.3521c96b.js 140.18kb +0.00b 10.36s +734.00ms ⚠️
dist/ConfigPanelFieldsLoader.1a016f33.js 82.96kb +0.00b 14.24s +713.00ms ⚠️
dist/mobile-upload.0917d4f0.js 66.50kb +0.00b 6.42s +566.00ms ⚠️
dist/esm.5b5f7c9f.js 63.36kb +0.00b 14.24s +714.00ms ⚠️
dist/ElementBrowser.c496dd44.js 62.20kb +0.00b 10.36s +734.00ms ⚠️
dist/archive.fe044de4.js 60.16kb +0.00b 14.24s +714.00ms ⚠️
dist/esm.ce3e12df.js 59.72kb +0.00b 10.36s +732.00ms ⚠️
dist/component-lazy.aeb22f50.js 59.50kb +0.00b 6.78s +558.00ms ⚠️
dist/component.508d12ab.js 57.88kb +0.00b 6.42s +571.00ms ⚠️
dist/DatePicker.f4cb448f.js 47.85kb +0.00b 7.58s +580.00ms ⚠️
dist/esm.f9edadb2.js 39.42kb +0.00b 14.24s +714.00ms ⚠️
dist/Modal.f90b31a7.js 28.20kb +0.00b 6.42s +566.00ms ⚠️
dist/DatePicker.412226fe.js 25.02kb +0.00b 7.58s +580.00ms ⚠️
dist/smartMediaEditor.226eb0f2.js 21.76kb +0.00b 14.24s +714.00ms ⚠️
dist/esm.a421c1ca.js 20.52kb +0.00b 14.24s +714.00ms ⚠️
dist/component.d038388b.js 18.68kb +0.00b 6.42s +568.00ms ⚠️
dist/js.9cb9c5be.js 17.21kb +0.00b 6.41s +566.00ms ⚠️
dist/ConfigPanelFieldsLoader.8efb299e.js 15.82kb +0.00b 10.36s +733.00ms ⚠️
dist/ui.8e1e1200.js 14.49kb +0.00b 10.36s +734.00ms ⚠️
dist/ConfigPanelFieldsLoader.f78f3b60.js 13.65kb +0.00b 10.36s +734.00ms ⚠️
dist/dropzone.452cdf0e.js 13.48kb +0.00b 14.24s +713.00ms ⚠️
dist/pdfRenderer.6335b9a2.js 12.08kb +0.00b 10.36s +733.00ms ⚠️
dist/dropzone.eff4ce1e.js 11.51kb +0.00b 14.24s +713.00ms ⚠️
dist/Toolbar.759db587.js 9.40kb +0.00b 14.24s +714.00ms ⚠️
dist/clipboard.121b0510.js 7.94kb +0.00b 14.24s +713.00ms ⚠️
dist/mobile-upload.86840439.js 7.86kb +0.00b 6.42s +573.00ms ⚠️
dist/mobile-upload.c687ddb2.js 7.86kb +0.00b 10.36s +735.00ms ⚠️
dist/mobile-upload.e9eb996a.js 7.86kb +0.00b 10.36s +734.00ms ⚠️
dist/mobile-upload.d7818b6e.js 7.86kb +0.00b 14.24s +714.00ms ⚠️
dist/browser.857fa69b.js 7.20kb +0.00b 14.24s +714.00ms ⚠️
dist/Modal.efe95f7f.js 3.87kb +0.00b 6.42s +571.00ms ⚠️
dist/component.342752e9.js 3.22kb +0.00b 6.42s +571.00ms ⚠️
dist/media-viewer-analytics-error-boundary.54c54975.js 3.19kb +0.00b 14.24s +713.00ms ⚠️
dist/media-picker-analytics-error-boundary.6a30027d.js 3.19kb +0.00b 14.24s +713.00ms ⚠️
dist/media-card-analytics-error-boundary.b80de757.js 3.19kb +0.00b 14.24s +714.00ms ⚠️
dist/png-chunks-extract.01ed8f60.js 3.06kb +0.00b 6.41s +569.00ms ⚠️
dist/ru.aaea8ba6.js 2.81kb +0.00b 10.36s +734.00ms ⚠️
dist/uk.5d2e97bd.js 2.76kb +0.00b 10.36s +734.00ms ⚠️
dist/codeViewerRenderer.7d374cd5.js 2.61kb +0.00b 10.36s +733.00ms ⚠️
dist/th.df60823c.js 2.60kb +0.00b 10.36s +734.00ms ⚠️
dist/ResourcedEmojiComponent.184d62aa.js 2.47kb +0.00b 7.58s +580.00ms ⚠️
dist/pl.f089a702.js 2.25kb +0.00b 7.58s +581.00ms ⚠️
dist/cs.c0d356c1.js 2.23kb +0.00b 7.58s +580.00ms ⚠️
dist/de.1a167b65.js 2.17kb +0.00b 7.58s +580.00ms ⚠️
dist/fr.6cc5b166.js 2.12kb +0.00b 7.58s +581.00ms ⚠️
dist/es.38a88442.js 2.12kb +0.00b 7.58s +580.00ms ⚠️
dist/hu.026ff8dd.js 2.10kb +0.00b 7.58s +581.00ms ⚠️
dist/fi.84541eb7.js 2.09kb +0.00b 7.58s +581.00ms ⚠️
dist/ja.a9cd0bd6.js 2.09kb +0.00b 7.58s +581.00ms ⚠️
dist/vi.3e6d5bcb.js 2.09kb +0.00b 10.36s +734.00ms ⚠️
dist/pt_BR.1db6fd92.js 2.06kb +0.00b 7.58s +580.00ms ⚠️
dist/tr.4de346b9.js 2.03kb +0.00b 10.36s +734.00ms ⚠️
dist/ko.954590a1.js 1.97kb +0.00b 7.58s +581.00ms ⚠️
dist/sv.b893ead3.js 1.97kb +0.00b 10.36s +734.00ms ⚠️
dist/it.5c7edaaf.js 1.97kb +0.00b 7.58s +581.00ms ⚠️
dist/nb.7f52770f.js 1.96kb +0.00b 7.58s +581.00ms ⚠️
dist/date.6db71354.js 1.94kb +0.00b 6.77s +557.00ms ⚠️
dist/da.23f674ea.js 1.94kb +0.00b 7.58s +580.00ms ⚠️
dist/nl.fd54481e.js 1.94kb +0.00b 7.58s +582.00ms ⚠️
dist/images.21df3a8f.js 1.90kb +0.00b 6.77s +558.00ms ⚠️
dist/zh_TW.3d130b76.js 1.85kb +0.00b 10.36s +733.00ms ⚠️
dist/zh.fb21f066.js 1.83kb +0.00b 10.36s +733.00ms ⚠️
dist/feedback.647089cf.js 1.76kb +0.00b 7.58s +580.00ms ⚠️
dist/status.be4e3842.js 1.67kb +0.00b 6.78s +559.00ms ⚠️
dist/code.64a301f3.js 1.56kb +0.00b 6.77s +557.00ms ⚠️
dist/workerHasher.e01f8bcf.js 1.56kb +0.00b 6.41s +570.00ms ⚠️
dist/workerHasher.322762e4.js 1.56kb +0.00b 10.36s +735.00ms ⚠️
dist/workerHasher.8fdadeba.js 1.56kb +0.00b 10.36s +734.00ms ⚠️
dist/workerHasher.65b703b7.js 1.56kb +0.00b 14.24s +714.00ms ⚠️
dist/workerHasher.100ea0bf.js 1.56kb +0.00b 14.24s +713.00ms ⚠️
dist/workerHasher.81697bdc.js 1.56kb +0.00b 14.24s +714.00ms ⚠️
dist/list-number.e454dc8e.js 1.47kb +0.00b 6.78s +559.00ms ⚠️
dist/heading6.eae34279.js 1.36kb +0.00b 7.58s +580.00ms ⚠️
dist/16.a4c7368c.js 1.35kb +0.00b 6.42s +567.00ms ⚠️
dist/heading3.82217cc7.js 1.35kb +0.00b 6.78s +557.00ms ⚠️
dist/16.347f2ad3.js 1.28kb +0.00b 6.42s +568.00ms ⚠️
dist/link.ef87b7d4.js 1.28kb +0.00b 6.78s +559.00ms ⚠️
dist/emoji.f9caa19f.js 1.25kb +0.00b 6.77s +558.00ms ⚠️
dist/heading5.20183aa6.js 1.23kb +0.00b 7.58s +581.00ms ⚠️
dist/expand.e7437f2e.js 1.18kb +0.00b 7.58s +580.00ms ⚠️
dist/heading2.a43a84af.js 1.17kb +0.00b 6.78s +559.00ms ⚠️
dist/heading4.bc1ea347.js 1.12kb +0.00b 6.78s +557.00ms ⚠️
dist/mention.12d040af.js 1.08kb +0.00b 6.78s +558.00ms ⚠️
dist/layout.467fc22b.js 1.04kb +0.00b 6.78s +559.00ms ⚠️
dist/divider.875eeb9b.js 1.04kb +0.00b 6.77s +558.00ms ⚠️
dist/action.4747cf93.js 1.02kb +0.00b 6.77s +557.00ms ⚠️
dist/heading1.a2a2d506.js 1.01kb +0.00b 6.78s +559.00ms ⚠️
dist/16.1d939d76.js 1.00kb +0.00b 6.42s +567.00ms ⚠️
dist/list.a024d070.js 1007.00b +0.00b 6.78s +559.00ms ⚠️
dist/quote.790784b0.js 1007.00b +0.00b 6.78s +558.00ms ⚠️
dist/decision.f09ec841.js 988.00b +0.00b 6.77s +558.00ms ⚠️
dist/16.92be0d97.js 976.00b +0.00b 6.42s +568.00ms ⚠️
dist/16.5befcdea.js 976.00b +0.00b 6.42s +567.00ms ⚠️
dist/panel-warning.b246d7d3.js 964.00b +0.00b 6.78s +558.00ms ⚠️
dist/16.ef2df2b6.js 956.00b +0.00b 6.42s +570.00ms ⚠️
dist/16.792a9556.js 951.00b +0.00b 6.77s +558.00ms ⚠️
dist/table.348d2eb0.js 942.00b +0.00b 6.78s +559.00ms ⚠️
dist/16.01cdc55d.js 916.00b +0.00b 6.42s +566.00ms ⚠️
dist/panel.bc621c8f.js 883.00b +0.00b 6.78s +558.00ms ⚠️
dist/panel-error.9152f129.js 860.00b +0.00b 6.78s +558.00ms ⚠️
dist/16.8fc349c9.js 858.00b +0.00b 6.42s +567.00ms ⚠️
dist/16.c5423dbe.js 830.00b +0.00b 6.42s +566.00ms ⚠️
dist/16.1be49b4b.js 823.00b +0.00b 6.42s +571.00ms ⚠️
dist/16.eb6f51c1.js 817.00b +0.00b 6.77s +558.00ms ⚠️
dist/panel-success.25629fed.js 801.00b +0.00b 6.78s +558.00ms ⚠️
dist/panel-note.f23dd251.js 791.00b +0.00b 6.78s +558.00ms ⚠️
dist/16.924dd2e3.js 778.00b +0.00b 6.42s +567.00ms ⚠️
dist/16.01e372d3.js 772.00b +0.00b 6.42s +569.00ms ⚠️
dist/16.0cd21a5f.js 772.00b +0.00b 6.42s +567.00ms ⚠️
dist/16.a0490963.js 771.00b +0.00b 6.42s +567.00ms ⚠️
dist/16.a5f45cdb.js 770.00b +0.00b 6.42s +568.00ms ⚠️
dist/16.bc1a05f3.js 769.00b +0.00b 6.42s +570.00ms ⚠️
dist/16.d9cd1f88.js 742.00b +0.00b 6.77s +558.00ms ⚠️
dist/16.e3d16653.js 721.00b +0.00b 6.42s +571.00ms ⚠️
dist/16.592b5fd3.js 693.00b +0.00b 6.42s +566.00ms ⚠️
dist/sk.1a0c584e.js 652.00b +0.00b 10.36s +734.00ms ⚠️
dist/pt_PT.16308ef8.js 631.00b +0.00b 7.58s +581.00ms ⚠️
dist/et.3d28125f.js 629.00b +0.00b 7.58s +582.00ms ⚠️
dist/simpleHasher.329400f6.js 585.00b +0.00b 6.41s +570.00ms ⚠️
dist/simpleHasher.0488d56a.js 585.00b +0.00b 10.36s +735.00ms ⚠️
dist/simpleHasher.180c1d91.js 585.00b +0.00b 10.36s +734.00ms ⚠️
dist/simpleHasher.88f1b387.js 585.00b +0.00b 14.24s +713.00ms ⚠️
dist/simpleHasher.2c36efc2.js 585.00b +0.00b 14.24s +713.00ms ⚠️
dist/simpleHasher.37be2994.js 585.00b +0.00b 14.24s +714.00ms ⚠️
dist/is.b5f0121f.js 491.00b +0.00b 7.58s +581.00ms ⚠️
dist/ro.ee42c980.js 478.00b +0.00b 7.58s +580.00ms ⚠️
dist/en_GB.f6c48dd5.js 468.00b +0.00b 7.58s +581.00ms ⚠️
dist/en.b8f14ffb.js 465.00b +0.00b 7.58s +581.00ms ⚠️

Three.js ✅

Timings

Description Time Difference
Cold 3.23s -86.00ms
Cached 324.00ms -6.00ms

Cold Bundles

No bundle changes detected.

Cached Bundles

No bundle changes detected.

Click here to view a detailed benchmark overview.

Copy link
Contributor

@marcins marcins left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM if this is still working as expected at runtime with the changes made! Just a few comments to add some comments to the short variable names.

It's not needed for our use case - but should the HTML packager add async to script tags if this feature is enabled? I guess that then ties into config that needs to span multiple packages/plugins.

packages/packagers/js/src/helpers.js Show resolved Hide resolved
packages/packagers/js/src/helpers.js Show resolved Hide resolved
@mattcompiles
Copy link
Contributor Author

@marcins I agree we might need to do some HTML work to get this fully released. I was thinking maybe adding async to the HTML entrypoint might trigger the behaviour. However I'll leave that for a future revision.

@mattcompiles mattcompiles merged commit 0b5edcf into v2 Sep 7, 2023
16 checks passed
@mattcompiles mattcompiles deleted the async-bundle-queue branch September 7, 2023 00:34
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.

None yet

4 participants