How to minify page source code to one line in Nuxt 3

[runic summit]

You can compress your files by adding the following to nuxt config. This way, the page will weigh a fraction of its original size compared to its raw html version. If the server doesn't support brotli, it should fall back to gzip.

nitro: {
compressPublicAssets: {
gzip: true, brotli: true 
}
}

https://nitro.unjs.io/config#compresspublicassets

[steady shoal]

@runic summit only this in nuxt.config.ts doesn't work. Do i need to create a nitro.config.ts file;

[runic summit]

You don’t need a separate Nitro config. After running generate, are there any .br and .gz files in your .output directory? BTW, works with build too.

[runic summit]

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

Here's my public test repo config if you need to see anything else. https://github.com/djmtype/app-ipsum/blob/main/nuxt.config.ts#L1

I had also tried a 3rd-party module prior to Nitro's integration which also seemed to work with Nuxt 3, but the ReadMe was dated. https://github.com/Baroshem/compression
Instead of configuring it within the buildModules array, use modules instead. Again, you can see this commented out in my Nuxt Config from the link above.

[steady shoal]

@runic summit Thank you very much for your response and your time! But even in your own project when I press ctrl + U in the browser, it doesn't show me the code in one line.

[south swallow]

@steady shoal the "one line" really doesn't matter when it is compressed 🙂

it won't give a significant performance boost

[steady shoal]

@south swallow I agree with you but that's what they told me to do.

In nuxt2 we use this https://nuxtjs.org/docs/configuration-glossary/configuration-build/#htmlminify so they want the same approach.

[south swallow]

@steady shoal I see. Then you could use a nitro plugin together with https://github.com/kangax/html-minifier to make it work. Hook into render:html or render:response and alter it 😋

See https://nuxt.com/docs/guide/going-further/hooks#nitro-app-hooks-runtime

[weary yew]

@south swallow possible feature request for nitro ? 🤔

[south swallow]

Feel free to raise an issue 👍
But not sure how much benefit it will bring to an app - curious about more use cases though if you have some!

[weary yew]

I don't know either, maybe for lighthouse ?

[south swallow]

Even there I think it should not make a difference as the size of the file will only change marginally by removing line breaks (especially given compression).
But that's just an assumption, might be worth testing ☺️

[steady shoal]

@south swallow I create a plugin file that I passed this https://nuxt.com/docs/guide/going-further/hooks#usage-within-a-nitro-plugin but in nuxt.config.ts doesn't accept the hooks object. Do you have a repo to see how to use a nitro plugin with a package;

[south swallow]

@steady shoal create the plugin file in /server/plugins/yourPlugin.ts

because it is a nitro plugin, it lives in the server dir

[steady shoal]

You are right!! And in nuxt.config.ts;

[weary yew]

yeah testing on some big html responses would be nice 🙂

[weary yew]

server/plugins should be auto registered so you don't need to declare it in nuxt.config

[steady shoal]

Yes I know but @south swallow said me to hook into render:html

[runic summit]

@steady shoal Sorry, I mispoke since minifying and compression are not the same thing. I should've said Nitro will shrink your pages by compressing them. Still the greatest gain is the compression, not minimizing. After manually minifying my index HTML file it was still 46kb. By comparison the brotli version was 15kb. Minimizing only shaved off mere bytes while compression shaved off 31kb. With that said, my demo pages don't contain a lot of content so it's not a fair assessment.

[steady shoal]

I do this inside server/plugins/yourPlugin.ts but it doesn't work yet.```import { minify } from 'html-minifier';

export default defineNitroPlugin((nitroApp) => {
nitroApp.hooks.hook('render:html', (html, { event }) => {
const minifiedHtml = minify(html, {
collapseBooleanAttributes: true,
decodeEntities: true,
minifyCSS: true,
minifyJS: true,
processConditionalComments: true,
removeEmptyAttributes: true,
removeRedundantAttributes: true,
trimCustomFragments: true,
useShortDoctype: true,
preserveLineBreaks: false,
collapseWhitespace: true,
})
html = minifiedHtml
})
})```

Do you have any idea?

[south swallow]

html does not include the whole HTML, even though the name suggest that

Try

import { minify } from 'html-minifier';

export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('render:response', (html) => {
    const minifiedHtml = minify(html.body, {
      collapseBooleanAttributes: true,
      decodeEntities: true,
      minifyCSS: true,
      minifyJS: true,
      processConditionalComments: true,
      removeEmptyAttributes: true,
      removeRedundantAttributes: true,
      trimCustomFragments: true,
      useShortDoctype: true,
      preserveLineBreaks: false,
      collapseWhitespace: true,
    })
    html.body = minifiedHtml
  })
})

[steady shoal]

It works! Thank you very much!!

[south swallow]

no problem 🙌

[weary yew]

I'm curious to know how much kb did you lose @steady shoal 🤔

[steady shoal]

@weary yew how can i check this;

[weary yew]

check the size of the html received before and afterusing html-minifier

[steady shoal]

It's the same..51kb. But the purpose is to be smaller with html-minifier...

[weary yew]

oh 😢 was it a big html ? .... guess you were right @south swallow

[steady shoal]

yes it's big

[steady shoal]

My mistake....without html-minifier was 43.5kB and with html-minifier was 42.7kB. The difference is small. Maybe, i should compress my files as well?

[south swallow]

yes, compression is almost always recommended

Ideally you can use brotli

with GZIP fallback

[steady shoal]

Do I need to put it inside server/plugins/yourPlugin.ts?