7

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

Артур Пипченко
  • 444
  • 1
  • 5
  • 15

1 Answers1

10

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

Herii
  • 422
  • 5
  • 23
Aldarund
  • 17,312
  • 5
  • 73
  • 104