Support script attributes like "async", "defer", "preload"

[kadamwhite]

We should have a way of registering that a script should be rendered with an async attribute, or included in a preload list.

In another project using this asset loader, a team recently wrote a custom wrapper which used this logic to set the "defaults" for scripts:

• If async is not explicitly set, and the script has no dependencies, then default to async loading.
• If defer is not explicitly set, but the script has dependencies, then default to defer loading.

Then when registering the script the wrapper would add the relevant parameters:

		foreach ( [ 'async', 'defer' ] as $attr ) {
			if ( ! empty( $args[ $attr ] ) ) {
				wp_script_add_data( $args['handle'], $attr, true );
				break;
			}
		}

Then, filter the script based on that data:

function filter_script_loader_tag( string $tag, string $handle ) : string {
	foreach ( [ 'async', 'defer' ] as $attr ) {
		if ( ! wp_scripts()->get_data( $handle, $attr ) ) {
			continue;
		}

		// Prevent adding attribute when already added in #12009.
		if ( ! preg_match( ":\s$attr(=|>|\s):", $tag ) ) {
			$tag = preg_replace( ':(?=></script>):', " $attr", $tag, 1 );
		}

		// Only allow async or defer, not both.
		break;
	}

	return $tag;
}

The note about #12009 refers to this ticket to add async and defer handling to core wp_enqueue_script itself.

[mattheu]

I wrote this on the other project… but I’m not 100% sure about it. It’s a bit “magic” and I’m not sure we can just default to async without unexpectedly breaking things.

Async scripts can execute before the DOM is ready, so need to be sure to handle that case in your JS If necessary. Enabling this in an update could well break existing code.

I also am unsure about another case. What if a defer loaded script depends on an async one. Will it wait for that to be available before execution? I think so, but Im not totally sure.

I think we should add async and defer loading as an option in asset loader but i probably would default to nothing (or possibly defer…)

[mattheu]

Async scripts can execute before the DOM is ready, so need to be sure to handle that case in your JS If necessary. Enabling this in an update could well break existing code.

I guess this wouldn’t really be a problem if you loaded your script in the footer, even if it’s async 🤔