how to gzip compress CSS and JS

I tried to find a way to compress files and version them but couldn’t find a way to do this.

Basically, I want to do something like this,

mix.compress(['path/to/file1.css', 'path/to/file2.js'], 'destination/path/');

Result:

'destination/path/file1.css.gz'
'destination/path/file2.js.gz'

Could someone please point me in the right direction? Thanks!

PS Thank you so much for your awesome work @JeffreyWay

[ankurk91]

@mrajabtech Most modern web servers has ability to serve gzip content on the fly. Apache has mod_gzip and mod_deflate while nginx can also do that.

We should not serve *.gz content unless browser request for it, and web-servers can take care of that automatically.

Is there any other good reason that Laravel Mix should generate *.gz files ?

[populov]

@ankurk91 Reason is simple: if you have 1000 requests to *.js file with gzip enabled, it will be compressed by nginx 1000 times. Same file with exactly same output. if we have *.js.gz file and gzip_static enabled, nginx will just output that file to user. It not only saves CPU (and you can rent less powerful servers and pay less), but also significantly reduces TTFB (Time to first byte) - user doesn’t wait for compression to complete.

I used this:

npm install --save compression-webpack-plugin

webpack.mix.js

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

...

  plugins: [
    new LiveReloadPlugin(),
    new webpack.ProvidePlugin({
      jQuery: 'jquery',
    }),
    new CompressionPlugin({
      asset: "[path].gz[query]",
      algorithm: "gzip",
      test: /\.js$|\.css$|\.html$|\.svg$/,
      threshold: 10240,
      minRatio: 0.8
    })
  ],
});

mix.js('resources/assets/js/app.js', 'public/assets/js')
  .sass('resources/assets/sass/app.scss', 'public/assets/styles')
  .copyDirectory('resources/assets/img', 'public/assets/img')
  .copyDirectory('resources/assets/fonts', 'public/assets/fonts')

and it works well for .js & .css files, but it ignores, for example, .svg files, copied from resources to public folder. Any Idea, how to gzip them?