Compression plugin with Laravel mix

Question

I want to generate compressed resources files (br, or gz) after npm run prod with laravel.

My (simplified) webpack.mix.js (about the same with mix.styles too) :

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

mix.options({
    cleanCss: {
        level: {
            1: {
                specialComments: 'none'
            }
        }
    },
    purifyCss: true
});


mix.scripts([
    'node_modules/popper.js/dist/umd/popper.min.js',
    'node_modules/bootstrap/dist/js/bootstrap.min.js',
    'node_modules/toastr/build/toastr.min.js',
    'resources/js/material/custom.js',
    'resources/js/material/waves.js',
    'node_modules/socket.io-client/dist/socket.io.js',
    'node_modules/laravel-echo/dist/echo.iife.js'
],'public/js/admin-all.js');

const CompressionPlugin = require('compression-webpack-plugin');

mix.webpackConfig({
    plugins: [
       
        new CompressionPlugin({
            filename: '[path].br[query]',
            algorithm: 'brotliCompress',
            test: /\.(js|css|html|svg)$/,
            compressionOptions: { level: 11 },
            minRatio: 1,
            deleteOriginalAssets: false,
        }),
    ]
});

I want to generate .css.br .js.br ... next to the .css or .js files in public folder But after npm run prod, no .br file generated.

npm run prod ===> cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

It output a mix.js.br file but I dont know where the source of this file is ??

How to do it ?

npm version : 6.12.1 node version : 12.13 os : Windows 10 pro x64

Answer 1

It's not possible to use diretly broli compress with laravel mix.script or mix.styles, the best way to do is to install :

npm install bread-compressor-cli -D

and edit your project package.json with this :

"prod": "npm run production && npm run compress",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"compress": "bread-compressor -s public/css/*.css public/js/*.js"

after just use npm run prod and it will run laravel mix (scripts concat) + brotli and gzip compress after. You can edit the compress script to follow your needs.

You can serve br and gzip files diretly to avoid compression on every request with apache/nginx, to save time and CPU !

Answer 2

Your mix configuration looks alright.

Size of your assets are likely below the set threshold and that's why they are not being processed.

You may not need asset compression in your project if your assets are still less than 2KB.

As you mentioned adding to the end of your webpack.mix.js, I have assumed it to be the same with the out of box one.

Move the files to resources/assets. I say this because you refer to the need to still have them pre-processed. Common practice in Laravel projects is to keep distribution ready assets in public folder.

The files now in resources/assets will need to be registered as components to be preprocessed either using js or css or other mix APIs.

Note that you can register one or more entrypoints by successively calling mix API methods or using wildcards.

For example, to process all Javascript files via Webpack separately in resources/assets/js. One can write:

mix.js('resources/assets/js/**/*.js', 'public/js');

Mix API processes components either via Webpack, Babel, or a plain task.

mix.scripts is one of the APIs processing components using a plain old task.

So long as none of your components are registered to be processed through Webpack, the compression plugin added in the Webpack configuration will not be applied.

Currently, mix.js.br is a left over from an hack in the mix project to satisfy the requirement for an entry in Webpack. See https://github.com/JeffreyWay/laravel-mix/blob/v5.0.0/src/webpackPlugins/MockEntryPlugin.js