How do I make my Nuxt app (v3) serve .mjs.br (brotli) files instead of the regular .mjs files? (Text compression)

Question

I deployed a simple Nuxt (version 3) app over Google Cloud Run and tested the performance using Lighthouse. The score was pretty horrible but one of the most impactful improvements it offered was to enable text compression (gzip or brotli).

I was able to make the server output .mjs.br files implementing vite-plugin-compression in the nuxt config:

import viteCompression from "vite-plugin-compression";

export default defineNuxtConfig({
  vite: {
    plugins: [viteCompression({ algorithm: "brotliCompress" })],
  },
...

Despite .mjs.br files being generated, .mjs files were still being served by default.

How can I make Nuxt serve the brotli-compressed files instead? Or is this not possible yet?

Alike

Did you manage to figure it out? – Laellaertes

@Laellaertes No, I reverted back to Nuxt 2 where the files seem to be compressed by default (gzip). – Alike

Answer 1

Nuxt 3.0.0-rc.9 supports compression out of the box (though there seems to be still bugs surrounding static site generation https://github.com/nuxt/framework/issues/7197).

nuxt.config.ts:

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  nitro: {
    compressPublicAssets: true,
  },
})

Alike

Answer 2

This one works great on me: nuxt-compression

install:

npm i -D @averjs/nuxt-compression

nuxt.config.ts

export default defineNuxtConfig({
  buildModules: ['@averjs/nuxt-compression'],
});

just works! default compression is brotli.

Longlived

Answer 3

Someone made a module for this: compression

Crumb

Answer 4

i do this and it make lighthouse little better

nuxt.configs.js

export default {
    ssr: true,
    nitro: {
        compressPublicAssets: true,
        minify: true
    },
    minify: true,
    collapseBooleanAttributes: true,
    decodeEntities: true,
    minifyCSS: true,
    minifyJS: true,
    processConditionalComments: true,
    removeEmptyAttributes: true,
    removeRedundantAttributes: true,
    trimCustomFragments: true,
    useShortDoctype: true,
}

Moskow

where did you find these options? i did not find them in nuxt docs – Keele