RequireWP is a WordPress plugin that extends the WP_Scripts class with new methods and filters and replaces the default scripts output with the Require.js syntax. It loads JavaScript scripts asynchronously and, by default, defers loading until the DOMContentLoaded event has occurred indicating the entire document object model (DOM) has been completed. It is designed to be used in conjunction with encryption and HTTP/2 connections and to encourage the development of asynchronous-ready JavaScript.

I have seen ~20% decrease in page load time on this site!

For some people, simply installing and activating is enough. However, others may have to do some tweaking changes to get it to work while others using more exotic plugins may require additional changes to the script. There are a few methods that may get it to work with those stubborn plugins but this plugin is also to encourage asynchronous-ready JavaScript so it is discouraged.

By default all plugins are loaded as shims (except the built-in WordPress scripts that are known to be Asynchronous Module Definition [AMD] compatible). You may load your plugin as a standard module by adding a filter for your script handle that returns an empty string:

add_filter('rwp_script_type-myScript', function($type){
    return '';

Make sure “myScript” is replaced by the handle of the script you want to alter!

What if I want to add a specific type — like a bundle or package?

First, add the same rwp_script_type-myScript filter as shown above but instead return “bundle”, “package”, etc. — then add the filter:

add_filter('rwp_type_config-bundle', function($configAry, $handle, $script){
    if( $handle == 'myScript' ) {
        $configAry['myScript'] = [ 'myOtherBundledScript', 'myOtherOtherBundledScript' ];
    return $configAry;
}, 10, 3);

Where do I add these filters?

They can be added anywhere prior to when the output of the scripts happens (such as in the “init” action or right after you register/enqueue your script with wp_register_script()!

What if I need to add a configuration change, like a map?

$wp_scripts = wp_scripts();
$wp_scripts->add_rwp_config('map', [
    'foo' => 'foo1.2'
], 'some/module');

Once again, remember to replace “some/module” with the module you want the map to be applied to as well as the contents of the array (the name of the module to map and it’s destination).

WordPress Plugin Repository [new Plugin Repository design]


Introduction Article