Minit for WordPress

Places all your CSS and Javascript files into dedicated bundles that can be cached by browsers and re-used between requests. It assumes that a single request with slightly larger transfer size is more performant than multiple smaller requests (even with HTTP/2 multiplexing).

Install

Install using Composer:

composer require kasparsd/minit

or by manually downloading the latest release file.

How it Works

• Concatenates all CSS files and Javascript files one file for each type (.js and .css), and stores them in the WordPress uploads directory under /minit. See the configuration section below for how to exclude files from the bundle.

• Uses the combined version numbers of the enqueued assets to version the bundles.

• Loads the concatenated Javascript file in the footer as deferred. This will probably break all inline scripts that rely on jQuery being available. See the configuration section below for how to disable this.

Screenshots

1. All CSS files combined in a single file
2. All external Javascript files loading asynchronously

Configuration

See the Wiki for additional documentation.

Disable Deferring Javascript

Use the minit-script-tag-async filter (legacy name when async was preferred) to load the concatenated Javascript synchronously:

add_filter( 'minit-script-tag-async', '__return_false' );

Exclude Files

Use the minit-exclude-js and minit-exclude-css filters to exclude files from the concatenated bundles:

add_filter( 'minit-exclude-js', function( $handles ) {
    $handles[] = 'jquery';

    return $handles;
} );

Integrate with Block Themes

Full block-based themes enqueue the individual stylesheets only for the blocks that are required for the current request. This leads to bundles being unique between requests thus defeating the purpose or cache re-use. Use the should_load_separate_core_block_assets filter to enqueue a single block-library stylesheet instead on all requests:

add_action(
    'plugins_loaded',
    function () {
        if ( class_exists( 'Minit_Plugin' ) ) {
            // Add late to override the default behaviour.
            add_filter( 'should_load_separate_core_block_assets', '__return_false', 20 );
        }
    },
    100 // Do it after all plugins are loaded.
);

Minify CSS

Use this filter to apply basic CSS minification to the created bundle:

add_filter(
    'minit-content-css',
    function ( $css ) {
            $css = preg_replace( '/[\n\r\t]/mi', ' ', $css ); // Line breaks to spaces.
            $css = preg_replace( '/\s+/mi', ' ', $css ); // Multiple spaces to single spaces.

            return $css;
    },
    5 // Do it before the debug comment in the head.
);

Minit Addons

• Minit-Pro
• Minit Cron Purge
• Minit Cache Bump
• Minit CDN
• Minit Manual Inclusion

Contribute

Requirements:

• Docker
• Node.js
• Composer

To setup the development environment:

1. Clone this repository.
2. Run npm install to install the dependencies (which also runs composer install).
3. Run npm run start to start the included WordPress development environment.
4. Run npm run test and npm run lint to run the tests.

Credits

Created by Kaspars Dambis and contributors.