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 manual shared bundles #9251

Merged
merged 27 commits into from
Oct 4, 2023
Merged

Add unstable manual shared bundles #9251

merged 27 commits into from
Oct 4, 2023

Conversation

AGawrys
Copy link
Contributor

@AGawrys AGawrys commented Sep 18, 2023

↪️ Pull Request

This is a PR for an unstable unstable_manualSharedBundles option for the Default Bundler. We've found that being able to stipulate unsplittable files via config helped transition bundlers internally, while leveraging previous bundler configs which Parcel could not interpret.

With this change, users can specify a "parent" file and a glob of assets, resulting in a single bundle containing those assets only, and deduplicating where possible. They can also specify a name and types of assets to be supported. The example below will create two bundles from "sharedFile.tsx" , one for css assets and one for js.

Config

Property Type Description
name string A unique name for each manual shared bundle. This value is added as a property to the Bundle so it can be referenced during naming.
assets Array<Glob> A list of globs matching the Assets that should be placed in the manual shared bundle.
split ?number The number of bunbdles to split into. Useful if your manual shared bundle is very large and you want to minimize cache invalidation.
parent ?string A project relative filepath matching the Asset that should be walked for Assets to match against. If no present the whole AssetGraph will be checked.
types ?Array<string> Assets types to match on. e.g. ['js', 'css']

Usage

{
  "@parcel/bundler-default": {
    "unstable_manualSharedBundles": [
      {
        "name": "mySharedCode",
        "parent": "src/packages/sharing/sharedfiles.tsx",
        "types": ["js", "css"],
        "assets": ["**/*"],
        "split": 3
      }
    ]
  }
}

This PR also includes the ability to have mode specific config for the bundler. Config inside a mode key will be merged over the general mode properties. Note that only development and production are currently supported, custom modes can't have custom config.

{
  "@parcel/bundler-default": {
    "development": {
      "disableSharedBundles": true
    }
  }
}

Notable Changes

  • Bundles can have a property manualSharedBundle which corresponds to the optional name from the user-defined config. This helps us name these new manual shared bundles appropriately later with a custom namer
  • Manual Shared Bundles can be "split" for caching purposes by specifying split: number.
  • Assets specified in an MSB will not be duplicated for any other bundles except entries. We've noticed this being less than ideal in cases where you'd like an MSB to exist for a set of bundles that load later in a page, and have certain assets duplicated for other, earlier-loading, bundles.

👂 Questions

  • How best to isolate these changes. As of now we basically hook into creation of bundles and placement of assets.
  • How best to define config for this change? MSBs change how the bundler fundamentally works. It almost feels like it should just be a separate phase entirely.

✔️ PR Todo

  • Added/updated unit tests for this change
  • Included links to related issues/PRs
  • Flow
  • Lint

@parcel-benchmark
Copy link

parcel-benchmark commented Sep 18, 2023

Benchmark Results

Kitchen Sink ✅

Timings

Description Time Difference
Cold 1.49s -4.00ms
Cached 278.00ms +22.00ms ⚠️

Cold Bundles

Bundle Size Difference Time Difference
dist/legacy/index.ff03421b.js 1.48kb +0.00b 377.00ms -26.00ms 🚀
dist/legacy/index.e9bb1616.js 1.06kb +0.00b 376.00ms -27.00ms 🚀
dist/modern/index.4a29d309.js 921.00b +0.00b 377.00ms -25.00ms 🚀

Cached Bundles

No bundle changes detected.

React HackerNews ✅

Timings

Description Time Difference
Cold 3.99s +13.00ms
Cached 432.00ms +19.00ms

Cold Bundles

Bundle Size Difference Time Difference
dist/PermalinkedComment.e9dc4a75.js 3.92kb +0.00b 391.00ms +41.00ms ⚠️
dist/UserProfile.8945a243.js 1.38kb +0.00b 391.00ms +41.00ms ⚠️
dist/NotFound.8b44a81d.js 269.00b +0.00b 391.00ms +41.00ms ⚠️

Cached Bundles

Bundle Size Difference Time Difference
dist/PermalinkedComment.e9dc4a75.js 3.92kb +0.00b 353.00ms +34.00ms ⚠️
dist/UserProfile.8945a243.js 1.38kb +0.00b 353.00ms +34.00ms ⚠️
dist/NotFound.8b44a81d.js 269.00b +0.00b 353.00ms +34.00ms ⚠️
dist/logo.8dd07848.png 244.00b +0.00b 248.00ms +23.00ms ⚠️

AtlasKit Editor ✅

Timings

Description Time Difference
Cold 35.11s -1.43s
Cached 2.32s -5.00ms

Cold Bundles

Bundle Size Difference Time Difference
dist/index.62f8ad91.js 3.78mb +0.00b 17.13s -1.03s 🚀
dist/pdfRenderer.ba28cccc.js 1.11mb +0.00b 12.73s -1.04s 🚀
dist/editorView.a0126b37.js 619.22kb +0.00b 13.86s -884.00ms 🚀
dist/refractor.3e0cc31b.js 598.96kb +0.00b 11.42s -868.00ms 🚀
dist/media-viewer.38e3999a.js 536.13kb +0.00b 8.31s -3.98s 🚀
dist/popup.a77286c1.js 321.45kb +0.00b 11.42s -871.00ms 🚀
dist/ConfigPanelFieldsLoader.182d39bc.js 303.43kb +0.00b 8.32s -459.00ms 🚀
dist/EmojiPickerComponent.4a196252.js 188.61kb +0.00b 8.33s -3.97s 🚀
dist/card.d06de810.js 138.91kb +0.00b 8.31s -470.00ms 🚀
dist/ConfigPanelFieldsLoader.28b428a5.js 82.73kb +0.00b 8.33s -3.97s 🚀
dist/mobile-upload.f21df36e.js 66.34kb +0.00b 5.11s -454.00ms 🚀
dist/esm.34897092.js 62.95kb +0.00b 11.42s -871.00ms 🚀
dist/ElementBrowser.e8f01080.js 61.94kb +0.00b 8.31s -469.00ms 🚀
dist/archive.c374f622.js 59.90kb +0.00b 11.42s -868.00ms 🚀
dist/esm.bfca2115.js 59.30kb +0.00b 8.32s -460.00ms 🚀
dist/component.a781cbb6.js 57.16kb +0.00b 5.11s -443.00ms 🚀
dist/DatePicker.042aeb21.js 47.46kb +0.00b 5.94s -749.00ms 🚀
dist/esm.5e913efb.js 39.11kb +0.00b 11.42s -868.00ms 🚀
dist/Modal.38d9f78c.js 27.83kb +0.00b 5.10s -445.00ms 🚀
dist/DatePicker.dd4c3679.js 24.96kb +0.00b 5.94s -748.00ms 🚀
dist/smartMediaEditor.efa59853.js 21.68kb +0.00b 11.42s -870.00ms 🚀
dist/esm.aee9cbf1.js 20.43kb +0.00b 11.42s -870.00ms 🚀
dist/component.c2c7f470.js 18.68kb +0.00b 5.10s -446.00ms 🚀
dist/js.e1035d4d.js 17.15kb +0.00b 5.10s -447.00ms 🚀
dist/ConfigPanelFieldsLoader.2b7c03be.js 15.74kb +0.00b 8.31s -469.00ms 🚀
dist/ui.8c117104.js 14.48kb +0.00b 8.31s -469.00ms 🚀
dist/ConfigPanelFieldsLoader.5dfde67d.js 13.63kb +0.00b 8.31s -468.00ms 🚀
dist/dropzone.77a8e729.js 13.40kb +0.00b 11.42s -869.00ms 🚀
dist/pdfRenderer.01deafa1.js 12.04kb +0.00b 8.31s -470.00ms 🚀
dist/dropzone.1c15cdc1.js 11.48kb +0.00b 11.42s -869.00ms 🚀
dist/Toolbar.4d256e97.js 9.36kb +0.00b 11.42s -868.00ms 🚀
dist/clipboard.400013a2.js 7.92kb +0.00b 11.42s -871.00ms 🚀
dist/mobile-upload.3747b689.js 7.79kb +0.00b 5.10s -452.00ms 🚀
dist/mobile-upload.3baad8e4.js 7.79kb +0.00b 8.32s -460.00ms 🚀
dist/mobile-upload.7a892a37.js 7.79kb +0.00b 8.32s -460.00ms 🚀
dist/mobile-upload.2102debb.js 7.79kb +0.00b 11.42s -870.00ms 🚀
dist/index.runtime.e32c1d2d.js 7.29kb +0.00b 11.42s -976.00ms 🚀
dist/browser.0009c8b4.js 7.19kb +0.00b 11.42s -869.00ms 🚀
dist/index.b16227d6.css 4.08kb +0.00b 11.44s -1.09s 🚀
dist/Modal.850345b4.js 3.86kb +0.00b 5.10s -445.00ms 🚀
dist/component.360dba95.js 3.20kb +0.00b 5.10s -446.00ms 🚀
dist/media-viewer-analytics-error-boundary.60bdaa4c.js 3.18kb +0.00b 11.42s -867.00ms 🚀
dist/media-picker-analytics-error-boundary.c493f011.js 3.18kb +0.00b 11.42s -869.00ms 🚀
dist/media-card-analytics-error-boundary.74e0c7f9.js 3.18kb +0.00b 11.42s -868.00ms 🚀
dist/png-chunks-extract.92497b2d.js 3.06kb +0.00b 5.10s -451.00ms 🚀
dist/ru.0cf3f40e.js 2.81kb +0.00b 8.31s -470.00ms 🚀
dist/uk.282f23b1.js 2.76kb +0.00b 8.31s -470.00ms 🚀
dist/codeViewerRenderer.51140ec8.js 2.61kb +0.00b 11.42s +2.64s ⚠️
dist/th.137e1013.js 2.60kb +0.00b 8.31s -470.00ms 🚀
dist/ResourcedEmojiComponent.9a253c26.js 2.47kb +0.00b 5.94s -748.00ms 🚀
dist/pl.bce591be.js 2.25kb +0.00b 5.94s -750.00ms 🚀
dist/cs.bf42283b.js 2.23kb +0.00b 5.94s -748.00ms 🚀
dist/de.90d5c4fa.js 2.17kb +0.00b 5.94s -748.00ms 🚀
dist/fr.ff5d335f.js 2.13kb +0.00b 5.94s -748.00ms 🚀
dist/es.80bf0476.js 2.12kb +0.00b 5.94s -749.00ms 🚀
dist/hu.223c2cde.js 2.10kb +0.00b 5.94s -748.00ms 🚀
dist/fi.98bb8fa8.js 2.09kb +0.00b 5.94s -749.00ms 🚀
dist/ja.7d4156df.js 2.09kb +0.00b 5.94s -748.00ms 🚀
dist/vi.b46097db.js 2.09kb +0.00b 8.31s -470.00ms 🚀
dist/pt_BR.b9e37d37.js 2.06kb +0.00b 5.94s -751.00ms 🚀
dist/tr.c85d90a9.js 2.03kb +0.00b 8.31s -470.00ms 🚀
dist/ko.9c6bf469.js 1.98kb +0.00b 5.94s -748.00ms 🚀
dist/sv.1c06c95c.js 1.98kb +0.00b 8.31s -470.00ms 🚀
dist/it.04edb54a.js 1.97kb +0.00b 5.94s -748.00ms 🚀
dist/nb.9bd6db78.js 1.96kb +0.00b 5.94s -750.00ms 🚀
dist/date.139a08b0.js 1.95kb +0.00b 5.38s -462.00ms 🚀
dist/da.d2d8303e.js 1.95kb +0.00b 5.94s -748.00ms 🚀
dist/nl.c4d12122.js 1.94kb +0.00b 5.94s -750.00ms 🚀
dist/images.774ef3be.js 1.90kb +0.00b 5.38s -461.00ms 🚀
dist/zh_TW.b7c55aa6.js 1.86kb +0.00b 8.31s -469.00ms 🚀
dist/zh.b01fe721.js 1.84kb +0.00b 8.31s -469.00ms 🚀
dist/feedback.4b745631.js 1.76kb +0.00b 5.94s -749.00ms 🚀
dist/status.20808f9b.js 1.67kb +0.00b 5.38s -461.00ms 🚀
dist/code.3ce450f8.js 1.56kb +0.00b 5.38s -462.00ms 🚀
dist/workerHasher.4f6584da.js 1.56kb +0.00b 5.10s -451.00ms 🚀
dist/workerHasher.540c9790.js 1.56kb +0.00b 8.32s -460.00ms 🚀
dist/workerHasher.c840c607.js 1.56kb +0.00b 8.32s -460.00ms 🚀
dist/workerHasher.730f3766.js 1.56kb +0.00b 11.42s -871.00ms 🚀
dist/workerHasher.9b1fcdbf.js 1.56kb +0.00b 11.42s -869.00ms 🚀
dist/workerHasher.02b63a21.js 1.56kb +0.00b 11.42s -870.00ms 🚀
dist/list-number.fdc97a50.js 1.47kb +0.00b 5.38s -461.00ms 🚀
dist/heading6.e6e03f52.js 1.36kb +0.00b 5.94s -749.00ms 🚀
dist/16.4998f52b.js 1.35kb +0.00b 5.10s -447.00ms 🚀
dist/heading3.73972e33.js 1.35kb +0.00b 5.38s -461.00ms 🚀
dist/16.330880f6.js 1.29kb +0.00b 5.11s -445.00ms 🚀
dist/link.71e06c5e.js 1.28kb +0.00b 5.38s -461.00ms 🚀
dist/emoji.8f9f45dc.js 1.25kb +0.00b 5.38s -461.00ms 🚀
dist/heading5.d2f94d9d.js 1.23kb +0.00b 5.94s -748.00ms 🚀
dist/expand.c983e90a.js 1.18kb +0.00b 5.94s -749.00ms 🚀
dist/heading2.c27d912d.js 1.17kb +0.00b 5.38s -461.00ms 🚀
dist/heading4.be08fc9e.js 1.12kb +0.00b 5.38s -461.00ms 🚀
dist/mention.f4723418.js 1.09kb +0.00b 5.38s -462.00ms 🚀
dist/layout.b5e3a7ef.js 1.05kb +0.00b 5.38s -461.00ms 🚀
dist/divider.7bb33712.js 1.04kb +0.00b 5.38s -461.00ms 🚀
dist/action.c407ac14.js 1.02kb +0.00b 5.38s -463.00ms 🚀
dist/heading1.d7caae19.js 1.02kb +0.00b 5.38s -461.00ms 🚀
dist/16.371e251f.js 1.00kb +0.00b 5.11s -445.00ms 🚀
dist/list.bd698aa0.js 1011.00b +0.00b 5.38s -461.00ms 🚀
dist/quote.d6bda47a.js 1011.00b +0.00b 5.38s -461.00ms 🚀
dist/decision.a17a0d00.js 992.00b +0.00b 5.38s -462.00ms 🚀
dist/16.8adad466.js 980.00b +0.00b 5.10s -446.00ms 🚀
dist/16.71432140.js 980.00b +0.00b 5.11s -454.00ms 🚀
dist/panel-warning.772e8569.js 968.00b +0.00b 5.38s -461.00ms 🚀
dist/16.e5f05248.js 960.00b +0.00b 5.10s -445.00ms 🚀
dist/16.549c63e3.js 955.00b +0.00b 5.38s -462.00ms 🚀
dist/table.e0e68580.js 946.00b +0.00b 5.38s -461.00ms 🚀
dist/16.79864de1.js 920.00b +0.00b 5.11s -454.00ms 🚀
dist/panel.45c00b08.js 887.00b +0.00b 5.38s -461.00ms 🚀
dist/panel-error.bfda44fb.js 864.00b +0.00b 5.38s -461.00ms 🚀
dist/16.7d7d7930.js 862.00b +0.00b 5.10s -455.00ms 🚀
dist/16.4556c00f.js 834.00b +0.00b 5.11s -454.00ms 🚀
dist/16.a44bb474.js 827.00b +0.00b 5.10s -446.00ms 🚀
dist/16.bf9fb66d.js 821.00b +0.00b 5.38s -462.00ms 🚀
dist/panel-success.4afcba7a.js 805.00b +0.00b 5.38s -461.00ms 🚀
dist/panel-note.58ef2b52.js 795.00b +0.00b 5.38s -461.00ms 🚀
dist/16.dffb58fe.js 782.00b +0.00b 5.11s -446.00ms 🚀
dist/16.0118b1f8.js 776.00b +0.00b 5.11s -445.00ms 🚀
dist/16.9a311f76.js 776.00b +0.00b 5.11s -445.00ms 🚀
dist/16.edf70d70.js 775.00b +0.00b 5.11s -445.00ms 🚀
dist/16.4af9f37f.js 774.00b +0.00b 5.10s -446.00ms 🚀
dist/16.aa70dcce.js 773.00b +0.00b 5.10s -445.00ms 🚀
dist/16.c715b7e1.js 746.00b +0.00b 5.38s -463.00ms 🚀
dist/16.54ffa2b2.js 725.00b +0.00b 5.10s -446.00ms 🚀
dist/16.d7c3881b.js 697.00b +0.00b 5.10s -455.00ms 🚀
dist/sk.4be9c93f.js 656.00b +0.00b 8.31s -470.00ms 🚀
dist/pt_PT.e211e609.js 635.00b +0.00b 5.94s -751.00ms 🚀
dist/et.88ef7cb4.js 633.00b +0.00b 5.94s -749.00ms 🚀
dist/simpleHasher.09765db3.js 589.00b +0.00b 5.10s -451.00ms 🚀
dist/simpleHasher.c14e20b4.js 589.00b +0.00b 8.32s -460.00ms 🚀
dist/simpleHasher.23db7a52.js 589.00b +0.00b 8.32s -460.00ms 🚀
dist/simpleHasher.eefc98b4.js 589.00b +0.00b 11.42s -871.00ms 🚀
dist/simpleHasher.47b9c809.js 589.00b +0.00b 11.42s -869.00ms 🚀
dist/simpleHasher.cadc19c6.js 589.00b +0.00b 11.42s -870.00ms 🚀
dist/is.5f045a22.js 495.00b +0.00b 5.94s -748.00ms 🚀
dist/ro.8d5b380a.js 482.00b +0.00b 8.31s +1.63s ⚠️
dist/en_GB.4c40e6c6.js 472.00b +0.00b 5.94s -748.00ms 🚀
dist/en.e1d21f6d.js 469.00b +0.00b 5.94s -748.00ms 🚀
dist/index.html 248.00b +0.00b 11.46s -1.08s 🚀

Cached Bundles

Bundle Size Difference Time Difference
dist/component-lazy.51d1dec9.js 58.94kb +0.00b 5.59s -470.00ms 🚀
dist/codeViewerRenderer.51140ec8.js 2.61kb +0.00b 8.36s -3.29s 🚀
dist/ro.8d5b380a.js 482.00b +0.00b 6.30s -1.81s 🚀

Three.js ✅

Timings

Description Time Difference
Cold 2.99s +31.00ms
Cached 324.00ms -4.00ms

Cold Bundles

No bundle changes detected.

Cached Bundles

No bundle changes detected.

Click here to view a detailed benchmark overview.

packages/bundlers/default/src/DefaultBundler.js Outdated Show resolved Hide resolved
packages/core/integration-tests/test/bundler.js Outdated Show resolved Hide resolved
packages/core/integration-tests/test/bundler.js Outdated Show resolved Hide resolved
packages/core/integration-tests/test/bundler.js Outdated Show resolved Hide resolved
@mattcompiles mattcompiles marked this pull request as ready for review September 28, 2023 04:36
@mattcompiles mattcompiles changed the title [WIP] Unstable manual bundles draft Add unstable manual shared bundles Sep 28, 2023
Copy link
Contributor

@mattcompiles mattcompiles left a comment

Choose a reason for hiding this comment

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

Amazing work 👏 🚀

@mattcompiles mattcompiles merged commit 3027926 into v2 Oct 4, 2023
15 of 16 checks passed
@mattcompiles mattcompiles deleted the unstable_manual_bundles branch October 4, 2023 02:15
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