rslanzi/laravel-mix-critical

mix.critical()

Laravel Mix Critical

This extension provides instant Critical support to your Mix (v2.1 and up) builds.

Usage

First, install the extension.

npm install laravel-mix-critical --save-dev

Then, require it within your webpack.mix.js file, like so:

let mix = require('laravel-mix');

require('laravel-mix-critical');

mix
    .js('resources/assets/js/app.js', 'public/js')
    .less('resources/assets/less/app.less', 'public/css')
    .critical({
        enabled: mix.inProduction(),
        urls: [
            { src: process.env.BASE_URL + '/', dest: 'public/css/index_critical.min.css' },
        ],
        options: {
            minify: true,
        },
    });

And you're done! Compile everything down with npm run dev.

Options

Only urls is required - all other options are optional.

Name	Type	Default	Description
urls	array	[]	An array of url objects, each with a src and dest: { src: 'http://example.com', dest: 'public/css/index_critical.min.ss' }
enabled	boolean	mix.inProduction()	If generating Critical CSS should be enabled
options	object	{}	An object of Critical options