Extract dedicated polyfill package #6060
Conversation
**Why**: - So that a majority of users don't have to pay a performance penalty associated with supporting legacy browsers. - Simplify logic for initialization by setting expectation of feature availability - And, consequently, as an incremental step toward dropping polyfill/IE11 support altogether - Reduce size of bundles by excluding more polyfills injected by core-js (notably, Promise and URL polyfills)
| @@ -8,6 +8,7 @@ | |||
| "clipboard-polyfill": "^3.0.3", | |||
| "custom-event-polyfill": "^1.0.7", | |||
| "js-polyfills": "^0.1.43", | |||
| "promise-polyfill": "^8.2.3", | |||
There was a problem hiding this comment.
Promises were only polyfilled previously because we use them in our own code, via @babel/preset-env's useBuiltIns: 'usage' option. By default, third-party packages are excluded from Babel transforms. Since some of the polyfills themselves rely on the Promise polyfill (fetch, webcrypto-shim), it needs to be explicitly included.
| @@ -61,7 +61,7 @@ module.exports = /** @type {import('webpack').Configuration} */ ({ | |||
| }, | |||
| optimization: { | |||
| chunkIds: 'natural', | |||
| splitChunks: { chunks: 'all' }, | |||
| splitChunks: { chunks: (chunk) => chunk.name !== 'polyfill' }, | |||
There was a problem hiding this comment.
The reason for this is to ensure that polyfill is kept as a single, self-contained pack, since we don't (and cannot reasonably) share default script chunk rendering between the polyfill and other scripts, due to the need for nomodule attribute on the polyfill script.
Restore initializer function, exclude from test side-effect via similar pattern as webauthn-unhide script
…r modern browsers
|
Based on some rough measuring, seems like this has a pretty nice improvement for script size sent for modern browsers, down ~10% (90.3kb to 81kb) for the sign in page. Thinking this is due to a combination of:
|
I think there could still be some valid use-cases for dynamic imports, such as importing some heavy JavaScript in specific conditions / events. The overhead is probably not too much. It's mostly realizing that each dynamic import causes a chunk to be created, and each chunk carries with it a small amount of base cost. Here, I'm guessing it's the polyfill exclusions that have the biggest impact on size reduction. In the future, we can probably get more aggressive with this once we can target newer browsers via |
**Why**: Since it won't be loaded by modern browsers, and since those modern browsers like to complain about preload header not followed by actual load of the script
A more realistic short-term option could be to disable all Babel polyfilling ( |
**Why**: - Because polyfills are intended to be confined to the polyfill package (#6060) - So that it's not included in modern browsers (#6068, -0.9kb gzipped) - To reduce surface area of dependencies shared with USWDS (related to 18F/identity-design-system#312 (comment)) changelog: Internal, Optimization, Reduce size of JavaScript for modern browsers
**Why**: - Because polyfills are intended to be confined to the polyfill package (#6060) - So that it's not included in modern browsers (#6068, -0.9kb gzipped) - To reduce surface area of dependencies shared with USWDS (related to 18F/identity-design-system#312 (comment)) changelog: Internal, Optimization, Reduce size of JavaScript for modern browsers
Context: #6023 (comment)
Why: