Switch to using magic comments

packages/babel-preset-default/replace-polyfills.js

@@ -6,21 +6,27 @@ function replacePolyfills() {
 			this.hasAddedPolyfills = false;
 		},
 		visitor: {
+			Program: {
+				exit( path ) {
+					if ( this.hasAddedPolyfills ) {
+						// Add magic comment to top of file.
+						path.addComment(
+							'leading',
+							' wordpress: needs wp-polyfill '
+						);
+					}
+				},
+			},
 			// Handle `import` syntax.
 			ImportDeclaration( path ) {
 				const source = path?.node?.source;
 				const name = source?.value || '';
 
 				// Look for imports from `core-js`.
 				if ( name.startsWith( 'core-js/' ) ) {
-					if ( this.hasAddedPolyfills ) {
-						// Remove duplicate import.
-						path.remove();
-					} else {
-						// Replace with `@wordpress/polyfill`.
-						source.value = '@wordpress/polyfill';
-						this.hasAddedPolyfills = true;
-					}
+					// Remove import.
+					path.remove();
+					this.hasAddedPolyfills = true;
 				}
 			},
 
@@ -43,14 +49,9 @@ function replacePolyfills() {
 					arg.type === 'StringLiteral' &&
 					arg.value.startsWith( 'core-js/' )
 				) {
-					if ( this.hasAddedPolyfills ) {
-						// Remove duplicate import.
-						path.remove();
-					} else {
-						// Replace with `@wordpress/polyfill`.
-						arg.value = '@wordpress/polyfill';
-						this.hasAddedPolyfills = true;
-					}
+					// Remove import.
+					path.remove();
+					this.hasAddedPolyfills = true;
 				}
 			},
 		},

packages/dependency-extraction-webpack-plugin/lib/index.js

@@ -279,7 +279,7 @@ class DependencyExtractionWebpackPlugin {
 				}
 			}
 
-			// Go through the assets and hash the sources. We can't just use
+			// Prepare to hash the sources. We can't just use
 			// `chunk.contentHash` because that's not updated when
 			// assets are minified. In practice the hash is updated by
 			// `RealContentHashPlugin` after minification, but it only modifies
@@ -288,12 +288,36 @@ class DependencyExtractionWebpackPlugin {
 			const { hashFunction, hashDigest, hashDigestLength } =
 				compilation.outputOptions;
 
-			const contentHash = chunkFiles
-				.sort()
-				.reduce( ( hash, filename ) => {
-					const asset = compilation.getAsset( filename );
-					return hash.update( asset.source.buffer() );
-				}, createHash( hashFunction ) )
+			const hashBuilder = createHash( hashFunction );
+
+			const processContentsForHash = ( content ) => {
+				hashBuilder.update( content );
+			};
+
+			// Prepare to look for magic comments, in order to decide whether
+			// `wp-polyfill` is needed.
+			const processContentsForMagicComments = ( content ) => {
+				if (
+					content
+						.toString()
+						.includes( '/* wordpress: needs wp-polyfill */' )
+				) {
+					chunkStaticDeps.add( 'wp-polyfill' );
+				}
+			};
+
+			// Go through the assets to process the sources.
+			// This allows us to generate hashes, as well as look for magic comments.
+			chunkFiles.sort().forEach( ( filename ) => {
+				const asset = compilation.getAsset( filename );
+				const content = asset.source.buffer();
+
+				processContentsForHash( content );
+				processContentsForMagicComments( content );
+			} );
+
+			// Finalise hash.
+			const contentHash = hashBuilder
 				.digest( hashDigest )
 				.slice( 0, hashDigestLength );
 

packages/dependency-extraction-webpack-plugin/lib/util.js

@@ -93,7 +93,6 @@ function defaultRequestToExternalModule( request ) {
 	switch ( request ) {
 		case '@wordpress/interactivity-router':
 		case '@wordpress/a11y':
-		case '@wordpress/polyfill':
 			return `import ${ request }`;
 	}
 

tools/webpack/shared.js

@@ -25,7 +25,7 @@ const baseConfig = {
 				parallel: true,
 				terserOptions: {
 					output: {
-						comments: /translators:/i,
+						comments: /(translators|wordpress):/i,
 					},
 					compress: {
 						passes: 2,