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

neoteknic · Accepted Answer · 2020-10-20 07:50:59Z

2

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 !

edited Oct 20, 2020 at 7:50

answered Nov 6, 2019 at 14:12

neoteknic

2,00017 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Oluwafemi Sule · Accepted Answer · 2019-11-05 16:19:39Z

0

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

edited Nov 5, 2019 at 16:19

answered Nov 4, 2019 at 10:45

Oluwafemi Sule

39.3k1 gold badge63 silver badges88 bronze badges

6 Comments

neoteknic Over a year ago

it's upper than the threashold ex I have a 528kB file, my assets are in public/css public/js

neoteknic Over a year ago

I udapted my answer, maybe a path problem ? Something like : test: /\.(js|css|html|svg)$/, include: /\/public/,

neoteknic Over a year ago

updated again with a full webpack.mix.js file, not a problem of laravel mix, I know how to use it.

Oluwafemi Sule Over a year ago

@neoteknic See my latest update. I hope it further clarifies why your components are not processed and there is a mix.js.br output particularly in my link in the final paragraph.

neoteknic Over a year ago

thank you, so no way to use it with scripts, styles ? It's not possible to concat files and use css or js tools to minify, compress, etc... after the compilation ?

|

Collectives™ on Stack Overflow

Compression plugin with Laravel mix

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related