kasparsd/minit

A WordPress plugin to combine CSS and Javascript files

Installs: 369

Dependents: 0

Suggesters: 0

Security: 0

Stars: 286

Watchers: 31

Forks: 46

Open Issues: 11

Type:wordpress-plugin

1.6.0 2024-09-10 14:01 UTC

This package is auto-updated.

Last update: 2024-10-10 18:30:25 UTC


README

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 asynchronously in the footer. 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 Asynchronous Javascript

Use the minit-script-tag-async filter 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

Credits

Created by Kaspars Dambis and contributors.