docs: build modern and legacy bundles from one source with layers - #8401
Merged
Merged
Conversation
Adds the differential-serving recipe the shimming guide was missing: an entry per layer so webpack walks the graph twice and issuerLayer picks the babel targets and polyfills for each copy, plus the array-of-configurations form for when the modern build has to be emitted as real ECMAScript modules. Also documents the polyfill entry array on the entry page, with what importing all of core-js/stable actually costs, and links both to the shimming guide.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This branch was successfully deployed
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
1 participant
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.
Summary
The shimming guide showed how to compile polyfills twice by tagging imports with a
?legacyquery, but not the layer version of the same idea, where an entry'slayermakes webpack walk the whole graph twice andRule.issuerLayerpicks the Babel targets and polyfills per copy — one compilation, two bundles, no browser sniffing in the page. Adds that section, and next to it the array-of-configurations form for when the modern build has to be emitted as real ECMAScript modules, sinceoutput.moduleandoutput.environmentare compilation-wide and layers cannot vary them.Also picks up the idea behind #8215: the entry page now documents the polyfill entry array, with the measured cost of importing all of
core-js/stable(637 modules, 215 KB minified / 71 KB gzipped with core-js 3.50) and a pointer touseBuiltIns: 'usage'and to the shimming guide, so the example teaches the cost rather than only the syntax. Refs #8215.Every configuration here was run against webpack 5.110.3 before being written down: the layer build emits each bundle carrying only its own layer's loader output with no shared modules across layers, and the array build emits
exportplusimport()chunk loading for the modern compilation and avarlibrary with script-tag chunk loading for the legacy one.What kind of change does this PR introduce?
docs
Did you add tests for your changes?
n/a — documentation only.
Does this PR introduce a breaking change?
No.
If relevant, what needs to be documented once your changes are merged or what have you already documented?
n/a — this PR is the documentation.
Use of AI
AI was used. Claude Code checked which options are per-entry and which are per-compilation against the webpack schema and sources, ran every configuration in this PR as a real build to confirm what it emits, measured the core-js figure quoted above, and drafted the sections; I reviewed and edited the result before pushing.
Generated by Claude Code