Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Do we need to manually set Nuxt send gzipped or brotli-compressed files?

in order to improve lighthouse score I need to enable gzip and/or brotli compression so it will increase performance score. I added two webpack plugins to my nuxt.config.js file:

plugins: [
    new CompressionPlugin({
      filename: `[path].gz[query]`,
      algorithm: `gzip`,
      test: /\.js$|\.css$|\.html$/,
      threshold: 10240,
      minRatio: 0.8
    }),
    new BrotliPlugin({
      asset: `[path].br[query]`,
      test: /\.js$|\.css$|\.html$/,
      threshold: 10240,
      minRatio: 0.8
    })
  ]

And I can confirm, that adding these two plugins is actually creating .gz and .br versions of my files.

Main questions is: should I do something additionaly with my nuxt config file in order to send these compressed files or nuxt will handle this by itself? Can it be checked on localhost (because I've read that brotli, for example, is only for HTTPS protocol)?

P.S. I don't use any framework like express or restify

like image 827
Артур Пипченко Avatar asked Oct 01 '18 08:10

Артур Пипченко


People also ask

Should I use Brotli compression?

Currently, Brotli is the best compression algorithm available for websites. If you see you are not offering Brotli, move to a web hosting partner that has it enabled. A hosting partner like SiteGround! You can get +15-20% smaller files with Brotli and smaller files means a faster loading website.

How do you implement Brotli compression?

You can use one of the following to brotli compress your files: Brotli executable : Download source and create executable from here. Brotli npm package : Write your own node program to brotli compress files. Brotli webpack plugin : Setup brotli files during webpack bundling.


1 Answers

If you are using nuxt 2, it can be done more easily.

In your nuxt.config.js file:

import shrinkRay from 'shrink-ray-current'

export default {
  render: {
    compressor: shrinkRay()
  }
}

See this article for moore detials https://blog.lichter.io/posts/nuxtjs-on-brotli

like image 96
Aldarund Avatar answered Oct 23 '22 15:10

Aldarund