Configuration does not seem to have any effect when running under `yarn dev`
davestewart opened this issue · comments
Hello,
New to Nuxt so just throwing everything at it, but I cannot make this work when running yarn dev
.
If I run yarn generate
I get minified HTML.
The issue is, I am using the following config and need the whitespace between the nodes removed:
// nuxt.config.js
const minify = {
collapseWhitespace: true,
collapseInlineTagWhitespace: true,
collapseBooleanAttributes: true,
decodeEntities: true,
minifyCSS: true,
minifyJS: true,
processConditionalComments: true,
removeEmptyAttributes: true,
removeRedundantAttributes: true,
trimCustomFragments: true,
useShortDoctype: true
}
export default {
// ...
generate: {
html: {
minify
}
},
build: {
html: {
minify
}
},
}
Have also tried adding the modules as mentioned in your docs (though the Nuxt docs do not mention this):
modules: [
// ...
'@nuxtjs/html-minifier',
],
buildModules: [
// ...
'@nuxtjs/html-minifier',
],
Collapsed whitespace seems to be the default Vue setup, so having just migrated a project to Nuxt, the layout is off.
Am I missing something really basic?
Been thrashing around for hours now :(
OK, I noticed a bug in my config, so edited the above config.
Now, even weirder, the HTML is minified, and the HTML renders correctly... but then "pops" back to the markup with whitespace in it.
Here's a GIF:
Notice the layout when the GIF starts: the elements sit closer to each other, but a fraction of a second after the page loads, there's a pop and the elements are pushed away from each other – the whitespace.
The source HTML is definitely minified:
What is going on?
By the way - really annoying that obviously you have to include this module, but the docs don't mention that.
What is the correct configuration (build, modules, and buildModules) ?
So @manniL came to the rescue on this one:
https://twitter.com/dave_stewart/status/1241872610306260993
Should this be in the docs?
Will add an issue for nuxtjs.org for docs, thanks for reporting @davestewart