Reduce JavaScript size by importing custom element definitions directly#6357
Merged
Reduce JavaScript size by importing custom element definitions directly#6357
Conversation
**Why**: So that React is not included in bundles which are expecting to use only the native custom element implementation. changelog: Improvements, Performance, Reduce download size of compiled JavaScript
Merged
zachmargolis
pushed a commit
that referenced
this pull request
May 17, 2022
**Why**: So that React is not included in bundles which are expecting to use only the native custom element implementation. changelog: Improvements, Performance, Reduce download size of compiled JavaScript (cherry picked from commit 37e8d8b)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why: So that React is not included in bundles which are expecting to use only the native custom element implementation.
There isn't expected to be a net reduction in bundle size (i.e. no celebration warranted), but instead resolves a regression in the form of inflated bundle sizes, caused by the introduction of a pattern of workspace packages which export both custom element and React component implementations of a UI component.
Ideally, this could also be addressed using Webpack tree shaking features. In particular, the custom element definition is expected to be the only side-effecty file of the package. Thus, it would be expected that defining something like
"sideEffects": ["./print-button-element.ts"]inpackage.jsonwould suffice to exclude React from the default import, but this does not work in practice. I'm still unclear how to configure it correctly (expecting built file names? full relative file paths? original import string without file extension?). In the meantime, the proposed changes should suffice as an alternative.Performance Impact:
Measured against http://localhost:3000 as the full transferred size of JavaScript after running
NODE_ENV=production yarn build && rails s. Notably, there is no compression reflected in these sizes.